OpenLayers之多源数据加载三：最简单的加载在线瓦片地图

    本小节所介绍的这些在线地图，加载起来会非常简单，因为OpenLayers已经做了很好的封装，对于开发者而言，无须做过多的编码，即可直接使用。

    主要包括开源的Open Street Map、微软的Bing地图、Stamen地图。

<div id="map"></div>
<input type="radio" checked="checked" name="mapSource" onclick="switch2OSM();" />OpenStreetMap地图
<input type="radio" name="mapSource" onclick="switch2BingMap();" />Bing地图
<input type="radio" name="mapSource" onclick="switch2StamenMap();" />Stamen地图
<script>
//Open Street Map地图层
var openStreetMapLayer = new ol.layer.Tile({
source: new ol.source.OSM()
});
//Bing地图层
var bingMapLayer = new ol.layer.Tile({
source: new ol.source.BingMaps({
key: 'AkjzA7OhS4MIBjutL21bkAop7dc41HSE0CNTR5c6HJy8JKc7U9U9RveWJrylD3XJ',
imagerySet: 'Road'
})
});
//Stamen地图层
var stamenLayer = new ol.layer.Tile({
source: new ol.source.Stamen({
layer: 'watercolor'
})
});
//创建地图
var map = new ol.Map({
layers: [
openStreetMapLayer
],
view: new ol.View({
//设置成都为地图中心
center: [104.06, 30.67],
projection: 'EPSG:4326',
zoom: 10
}),
target: 'map'
});
function switch2OSM(){
//先移除当前的地图，再添加Open Street Map地图
map.removeLayer(map.getLayers().item(0));
map.addLayer(openStreetMapLayer);
}
function switch2BingMap(){
// 先移除当前的地图，再添加Bing地图
map.removeLayer(map.getLayers().item(0));
map.addLayer(bingMapLayer);
}
function switch2StamenMap(){
//先移除当前的地图，再添加stamen地图
map.removeLayer(map.getLayers().item(0));
map.addLayer(stamenLayer);
}
</script>

    代码很简单，因为OpenLayers对这几个在线服务都做了很好的封装，只用简单的配置一下Source的构造参数就可以了。此处并没有列出每一个类的所有构造参数，但可以通过API文档查询了解。

最后

以上就是粗心期待为你收集整理的OpenLayers之多源数据加载三：最简单的加载在线瓦片地图的全部内容，希望文章能够帮你解决OpenLayers之多源数据加载三：最简单的加载在线瓦片地图所遇到的程序开发问题。

如果觉得靠谱客网站的内容还不错，欢迎将靠谱客网站推荐给程序员好友。