如何在 openlayer3 中使用不同的 tile provider

Question

我正在寻找实施此磁贴提供程序的详细步骤 https://leaflet-extras.github.io/leaflet-providers/preview/ 或 http://mapstyle.petschge.de/

我是新手，我不知道如何实现下面显示的现有代码

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>Simple map</title>
    <link rel="stylesheet" href="http://openlayers.org/en/v3.0.0/css/ol.css" type="text/css">
    <style>

    </style>
</head>
<body>
<!--html element which contains the map-->
<div id="map" class="map"></div>

<script src="http://openlayers.org/en/v3.0.0/build/ol.js" type="text/javascript"></script>
<!--our app code-->
<script>
    var map = new ol.Map({
        target: 'map',  // The DOM element that will contains the map
        renderer: 'canvas', // Force the renderer to be used
        layers: [
            // Add a new Tile layer getting tiles from OpenStreetMap source
            new ol.layer.Tile({
                source: new ol.source.OSM()
            })
        ],
        // Create a view centered on the specified location and zoom level
        view: new ol.View({
            center: ol.proj.transform([103.986908, 1.353199], 'EPSG:4326', 'EPSG:3857'),
            zoom: 18,
            rotation: 68*Math.PI/180
        })
    });
</script>


</body>
</html>

上面的代码只会显示一张使用 osm 图层的地图，请帮助寻找更改它的方法

Answer 1

您可以使用任何瓦片地图服务器作为您的瓦片源。只需使用切片服务器的 url 创建 XYZ 切片源而不是 OSM 源。

var map = new ol.Map({
    target: 'map',  // The DOM element that will contains the map
    renderer: 'canvas', // Force the renderer to be used
    layers: [
        // Add a new Tile layer getting tiles from OpenStreetMap source
        new ol.layer.Tile({
            source: new ol.source.XYZ(
                    {
                        urls : ["http://a.tile2.opencyclemap.org/transport/{z}/{x}/{y}.png","http://b.tile2.opencyclemap.org/transport/{z}/{x}/{y}.png","http://c.tile2.opencyclemap.org/transport/{z}/{x}/{y}.png"]
                    })
        })
    ],
    // Create a view centered on the specified location and zoom level
    view: new ol.View({
        center: ol.proj.transform([103.986908, 1.353199], 'EPSG:4326', 'EPSG:3857'),
        zoom: 10,
        rotation: 68*Math.PI/180
    })
});

如果您不喜欢上面的方块，请使用下面的 url 之一。

["http://a.tile3.opencyclemap.org/landscape/{z}/{x}/{y}.png","http://b.tile3.opencyclemap.org/landscape/{z}/{x}/{y}.png","http://c.tile3.opencyclemap.org/landscape/{z}/{x}/{y}.png"]
["http://a.tile.openstreetmap.org/{z}/{x}/{y}.png","http://b.tile.openstreetmap.org/{z}/{x}/{y}.png","http://c.tile.openstreetmap.org/{z}/{x}/{y}.png"]
["http://otile1.mqcdn.com/tiles/1.0.0/osm/{z}/{x}/{y}.png","http://otile2.mqcdn.com/tiles/1.0.0/osm/{z}/{x}/{y}.png","http://otile3.mqcdn.com/tiles/1.0.0/osm/{z}/{x}/{y}.png","http://otile4.mqcdn.com/tiles/1.0.0/osm/{z}/{x}/{y}.png"]
["http://a.tile.stamen.com/watercolor/{z}/{x}/{y}.png","http://b.tile.stamen.com/watercolor/{z}/{x}/{y}.png","http://c.tile.stamen.com/watercolor/{z}/{x}/{y}.png","http://d.tile.stamen.com/watercolor/{z}/{x}/{y}.png"]
["http://a.tile2.opencyclemap.org/transport/{z}/{x}/{y}.png","http://b.tile2.opencyclemap.org/transport/{z}/{x}/{y}.png","http://c.tile2.opencyclemap.org/transport/{z}/{x}/{y}.png"]

在您提到的第二个link中可以找到更多这样的url，查看页面源代码以查看它们。

如何在 openlayer3 中使用不同的 tile provider

How to use a different tile provider in openlayer3

layer

openstreetmap

openlayers-3