How to use a different tile provider in openlayer3

问题

I am looking for detailed steps to implement this tile provider https://leaflet-extras.github.io/leaflet-providers/preview/ or http://mapstyle.petschge.de/

I am newbie where i am not knowing how to go about in implementing to the existing code which is shown below

<!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>

the above code will just display a map using osm layer looking for a way to change it please help

回答1:

You can use any tile map server as your tile source. Just create a XYZ tile source instead of an OSM source with the url of the tile server.

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

If you don't like the tiles above, use one of the urls below.

["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"]

More urls like this can be found in the second link you have mentioned, look at the page source to view them.

来源：https://stackoverflow.com/questions/34595374/how-to-use-a-different-tile-provider-in-openlayer3

标签

openstreetmap

openlayers-3

layer