前言
OpenLayers开发库如何实现加载不同类类型的天地图(矢量图、影像图、地形图)并实现动态切换效果,如下图所示。
一、涉及技术及数据
开发库:OpenLayers 6、Jquery
地图源:天地图(矢量图、影像图、地形图)
二、实现思路及代码
1.初始化地图,加载三种类型的天地图源作为底图
var TiandiMap_vec = new ol.layer.Tile({
name: "天地图矢量图层",
source: new ol.source.XYZ({
url: "http://t0.tianditu.com/DataServer?T=vec_w&x={x}&y={y}&l={z}&tk=你的密钥",
wrapX: false
})
});
var TiandiMap_cva = new ol.layer.Tile({
name: "天地图矢量注记图层",
source: new ol.source.XYZ({
url: "http://t0.tianditu.com/DataServer?T=cva_w&x={x}&y={y}&l={z}&tk=你的密钥",
wrapX: false
})
});
var TiandiMap_img = new ol.layer.Tile({
name: "天地图影像图层",
source: new ol.source.XYZ({
url: "http://t0.tianditu.com/DataServer?T=img_w&x={x}&y={y}&l={z}&tk=你的密钥",
wrapX: false
})
});
var TiandiMap_cia = new ol.layer.Tile({
name: "天地图影像注记图层",
source: new ol.source.XYZ({
url: "http://t0.tianditu.com/DataServer?T=cia_w&x={x}&y={y}&l={z}&tk=你的密钥",
wrapX: false
})
});
var TiandiMap_ter = new ol.layer.Tile({
name: "天地图地形图层",
source: new ol.source.XYZ({
url: "http://t0.tianditu.com/DataServer?T=ter_w&x={x}&y={y}&l={z}&tk=你的密钥",
wrapX: false
})
});
var TiandiMap_cta = new ol.layer.Tile({
name: "天地图地形注记图层",
source: new ol.source.XYZ({
url: "http://t0.tianditu.com/DataServer?T=cta_w&x={x}&y={y}&l={z}&tk=你的密钥",
wrapX: false
})
});
var map = new ol.Map({
layers: [TiandiMap_vec, TiandiMap_cva, TiandiMap_img, TiandiMap_cia, TiandiMap_ter, TiandiMap_cta],
target: 'container',
view: new ol.View({
center: ol.proj.transform([107.5, 30], 'EPSG:4326', 'EPSG:3857'), //地图初始中心点
zoom: 5
})
});
2.在地图中合适的位置创建3个图标按钮,用于点击切换不类型的底图。
3.当点击地图中相应的地图类型图标时,通过设置相应图层的显示与否即可实现不同类型的底图切换。
/**
* 切换主地图的底图类型
*/
function changeBasemap(type) {
main_basemap_type = type;
if (main_basemap_type == 'relief_map') {
TiandiMap_ter.setVisible(true);
TiandiMap_cta.setVisible(true);
TiandiMap_img.setVisible(false);
TiandiMap_cia.setVisible(false);
TiandiMap_vec.setVisible(false);
TiandiMap_cva.setVisible(false);
} else if (main_basemap_type == 'image_map') {
TiandiMap_ter.setVisible(false);
TiandiMap_cta.setVisible(false);
TiandiMap_img.setVisible(true);
TiandiMap_cia.setVisible(true);
TiandiMap_vec.setVisible(false);
TiandiMap_cva.setVisible(false);
} else if (main_basemap_type == 'vector_map') {
TiandiMap_ter.setVisible(false);
TiandiMap_cta.setVisible(false);
TiandiMap_img.setVisible(false);
TiandiMap_cia.setVisible(false);
TiandiMap_vec.setVisible(true);
TiandiMap_cva.setVisible(true);
}
}
三、源代码下载
本效果的全部原代码请点击此处下载:OpenLayers加载不同类类型的天地图(矢量图、影像图、地形图)并实现动态切换效果