如何在openlayer3中使用其他tile提供程序 [英] How to use a different tile provider in openlayer3
问题描述
我正在寻找实现此图块提供程序的详细步骤 https://leaflet-extras.github.io/leaflet-providers/preview/或 http://mapstyle.petschge.de/
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>
上面的代码将只显示使用osm图层的地图，以寻找更改它的方法，请帮忙
the above code will just display a map using osm layer looking for a way to change it please help
推荐答案
您可以使用任何切片图服务器作为切片图源.只需使用切片服务器的网址创建XYZ切片源而不是OSM源即可.
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.
这篇关于如何在openlayer3中使用其他tile提供程序的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
