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源。

Suave

如果你不喜欢上面的瓷砖，请使用以下网址之一。

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
    })
});

可以在您提到的第二个链接中找到更多这样的网址，查看页面来源以查看它们。

如何在openlayer3中使用不同的tile提供程序

1 个答案: