OpenLayers加载不同类类型的天地图(矢量图、影像图、地形图)并实现动态切换效果

前言

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加载不同类类型的天地图(矢量图、影像图、地形图)并实现动态切换效果