openlayers6地圖切換展現(附源碼下載)

前言

以前寫過一篇openlayers4版本的地圖切換效果，可是因爲是封裝一層 js代碼寫的，不少初學者看起來比較有點吃力，因此本篇文章從新寫一篇地圖切換效果，直接基於最新版本openlayers6寫的，純粹html + js + css形式，沒有任何封裝。

內容概覽

1.基於openlayers6實現地圖切換展現效果
2.源代碼demo下載

效果圖以下：

大概實現思路以下：地圖初始化配置加載各類在線地圖，好比天地圖，arcgis地圖，谷歌地圖，高德地圖，百度地圖，OSM地圖等等，默認圖層只顯示一個地圖，其餘在線地圖默認隱藏不可見狀態；js自定義一個底圖切換的控件，底圖切換時候，動態設置圖層的隱藏以及可見性，達到底圖切換目的。

• 部分核心代碼，完整的見源碼demo下載

var satelliteLayer = new ol.layer.Tile({ //天地圖衛星圖
visible: true,
source: new ol.source.XYZ({
url: 'http://t{0-7}.tianditu.com/DataServer?T=img_w&x={x}&y={y}&l={z}&tk=7786923a385369346d56b966bb6ad62f',
crossOrigin:"anonymous"
})
});
 
var satelliteLabelLayer = new ol.layer.Tile({
visible: false,
source: new ol.source.XYZ({ //天地圖衛星圖註記
url: 'http://t{0-7}.tianditu.com/DataServer?T=cia_w&x={x}&y={y}&l={z}&tk=7786923a385369346d56b966bb6ad62f',
crossOrigin:"anonymous"
})
});
 
var streetLayer = new ol.layer.Tile({ //天地圖街道圖
visible: false,
source: new ol.source.XYZ({
url: 'http://t{0-7}.tianditu.com/DataServer?T=vec_w&x={x}&y={y}&l={z}&tk=7786923a385369346d56b966bb6ad62f',
crossOrigin:"anonymous"
})
});
 
var streetLabelLayer = new ol.layer.Tile({
visible: false,
source: new ol.source.XYZ({ //天地圖街道圖註記
url: 'http://t{0-7}.tianditu.com/DataServer?T=cva_w&x={x}&y={y}&l={z}&tk=7786923a385369346d56b966bb6ad62f',
crossOrigin:"anonymous"
})
});
 
var terLayer = new ol.layer.Tile({
visible: false,
source: new ol.source.XYZ({ //天地圖地形圖
url: 'http://t{0-7}.tianditu.com/DataServer?T=ter_w&x={x}&y={y}&l={z}&tk=7786923a385369346d56b966bb6ad62f',
crossOrigin:"anonymous"
})
});
 
var osmLayer = new ol.layer.Tile({//OSM地圖
visible: false,
source: new ol.source.OSM()
});
 
var arcgisImgLayer = new ol.layer.Tile({//arcgis影像
visible: false,
source: new ol.source.XYZ({
url: 'https://server.arcgisonline.com/arcgis/rest/services/World_Imagery/MapServer/tile/{z}/{y}/{x}',
crossOrigin:"anonymous"
})
});
 
var arcgisVecLayer = new ol.layer.Tile({//arcgis街道
visible: false,
source: new ol.source.XYZ({
url: 'http://cache1.arcgisonline.cn/arcgis/rest/services/ChinaOnlineCommunity/MapServer/tile/{z}/{y}/{x}',
crossOrigin:"anonymous"
})
});
 
var googleImgLayer = new ol.layer.Tile({//谷歌影像
visible: false,
source: new ol.source.XYZ({
url: 'http://www.google.cn/maps/vt?lyrs=s@189&gl=cn&x={x}&y={y}&z={z}',
crossOrigin:"anonymous"
})
});
 
var googleVecLayer = new ol.layer.Tile({//谷歌街道
visible: false,
source: new ol.source.XYZ({
url: 'http://www.google.cn/maps/vt?lyrs=m@189&gl=cn&x={x}&y={y}&z={z}',
crossOrigin:"anonymous"
})
});
 
var gaodeImgLayer = new ol.layer.Tile({//高德影像
visible: false,
source: new ol.source.XYZ({
url: 'http://webst0{1-4}.is.autonavi.com/appmaptile?style=6&x={x}&y={y}&z={z}',
crossOrigin:"anonymous"
})
});
 
var gaodeVecLayer = new ol.layer.Tile({//高德街道
visible: false,
source: new ol.source.XYZ({
url: 'http://webrd0{1-4}.is.autonavi.com/appmaptile?lang=zh_cn&size=1&scale=1&style=7&x={x}&y={y}&z={z}',
crossOrigin:"anonymous"
})
});
 
var layers = [
satelliteLayer,
streetLayer,
terLayer,
satelliteLabelLayer,
streetLabelLayer,
osmLayer,
arcgisImgLayer,
arcgisVecLayer,
googleImgLayer,
googleVecLayer,
gaodeImgLayer,
gaodeVecLayer,
];
//地圖建立
var map = new ol.Map({
layers: layers,
target: 'map',
view: new ol.View({
projection: 'EPSG:4326',
center: [103.49033880652411, 34.034467489614684],
zoom: 7
})
});
 
var mapconfig = [
{"layer_id":"tmap_img_w","label":"天地衛星","className":"imgType"},//天地圖衛星圖
{"layer_id":"tmap_vec_w","label":"天地街道","className":"vecType"},//天地圖街道圖
{"layer_id":"tmap_img_w_h","label":"衛星混合","className":"imgType"},//天地圖衛星混合圖
{"layer_id":"tmap_ter_w","label":"天地地形","className":"terType"},//天地圖地形圖
{"layer_id":"tmap_ter_w_h","label":"地形混合","className":"terType"},//天地圖地形混合圖
{"layer_id":"osm","label":"OSM","className":"vecType"},//OSM地圖
{"layer_id":"arcgis_img","label":"esri影像","className":"imgType"},//arcgis影像
{"layer_id":"arcgis_vec","label":"esri街道","className":"vecType"},//arcgis街道
{"layer_id":"google_img","label":"谷歌影像","className":"imgType"},//谷歌影像
{"layer_id":"google_vec","label":"谷歌街道","className":"vecType"},//谷歌街道
{"layer_id":"gaode_img","label":"高德影像","className":"imgType"},//高德影像
{"layer_id":"gaode_vec","label":"高德街道","className":"vecType"},//高德街道
];
loadSwitcherMap(mapconfig);//底圖切換控件加載
/**
* 地圖切換控件
*/
function loadSwitcherMap(data){
//設置底圖不一樣類型
var baseLayerSwitcherToolbar = new BaseLayerSwitcherToolBar({
data: data
});
document.getElementById("map").appendChild(baseLayerSwitcherToolbar.target);
baseLayerSwitcherToolbar.onItemClick = function(itemData,index,element){
var data = itemData;
console.log(data);
switch (data.layer_id) {
case "tmap_img_w"://衛星
satelliteLayer.setVisible(true);
satelliteLabelLayer.setVisible(false);
streetLayer.setVisible(false);
streetLabelLayer.setVisible(false);
terLayer.setVisible(false);
osmLayer.setVisible(false);
arcgisImgLayer.setVisible(false);
arcgisVecLayer.setVisible(false);
googleImgLayer.setVisible(false);
googleVecLayer.setVisible(false);
gaodeImgLayer.setVisible(false);
gaodeVecLayer.setVisible(false);
break;
case "tmap_vec_w"://地圖
satelliteLayer.setVisible(false);
satelliteLabelLayer.setVisible(false);
streetLayer.setVisible(true);
streetLabelLayer.setVisible(true);
terLayer.setVisible(false);
osmLayer.setVisible(false);
arcgisImgLayer.setVisible(false);
arcgisVecLayer.setVisible(false);
googleImgLayer.setVisible(false);
googleVecLayer.setVisible(false);
gaodeImgLayer.setVisible(false);
gaodeVecLayer.setVisible(false);
break;
case "tmap_img_w_h"://衛星混合
satelliteLayer.setVisible(true);
satelliteLabelLayer.setVisible(true);
streetLayer.setVisible(false);
streetLabelLayer.setVisible(false);
terLayer.setVisible(false);
osmLayer.setVisible(false);
arcgisImgLayer.setVisible(false);
arcgisVecLayer.setVisible(false);
googleImgLayer.setVisible(false);
googleVecLayer.setVisible(false);
gaodeImgLayer.setVisible(false);
gaodeVecLayer.setVisible(false);
break;
case "tmap_ter_w"://地形
satelliteLayer.setVisible(false);
satelliteLabelLayer.setVisible(false);
streetLayer.setVisible(false);
streetLabelLayer.setVisible(false);
terLayer.setVisible(true);
osmLayer.setVisible(false);
arcgisImgLayer.setVisible(false);
arcgisVecLayer.setVisible(false);
googleImgLayer.setVisible(false);
googleVecLayer.setVisible(false);
gaodeImgLayer.setVisible(false);
gaodeVecLayer.setVisible(false);
break;
case "tmap_ter_w_h"://地形混合
satelliteLayer.setVisible(false);
satelliteLabelLayer.setVisible(false);
streetLayer.setVisible(false);
streetLabelLayer.setVisible(true);
terLayer.setVisible(true);
osmLayer.setVisible(false);
arcgisImgLayer.setVisible(false);
arcgisVecLayer.setVisible(false);
googleImgLayer.setVisible(false);
googleVecLayer.setVisible(false);
gaodeImgLayer.setVisible(false);
gaodeVecLayer.setVisible(false);
break;
case "osm"://OSM
osmLayer.setVisible(true);
satelliteLayer.setVisible(false);
satelliteLabelLayer.setVisible(false);
streetLayer.setVisible(false);
streetLabelLayer.setVisible(false);
terLayer.setVisible(false);
arcgisImgLayer.setVisible(false);
arcgisVecLayer.setVisible(false);
googleImgLayer.setVisible(false);
googleVecLayer.setVisible(false);
gaodeImgLayer.setVisible(false);
gaodeVecLayer.setVisible(false);
break;
case "arcgis_img"://arcgis影像
arcgisImgLayer.setVisible(true);
osmLayer.setVisible(false);
satelliteLayer.setVisible(false);
satelliteLabelLayer.setVisible(false);
streetLayer.setVisible(false);
streetLabelLayer.setVisible(false);
terLayer.setVisible(false);
arcgisVecLayer.setVisible(false);
googleImgLayer.setVisible(false);
googleVecLayer.setVisible(false);
gaodeImgLayer.setVisible(false);
gaodeVecLayer.setVisible(false);
break;
case "arcgis_vec"://arcgis街道
arcgisVecLayer.setVisible(true);
arcgisImgLayer.setVisible(false);
osmLayer.setVisible(false);
satelliteLayer.setVisible(false);
satelliteLabelLayer.setVisible(false);
streetLayer.setVisible(false);
streetLabelLayer.setVisible(false);
terLayer.setVisible(false);
googleImgLayer.setVisible(false);
googleVecLayer.setVisible(false);
gaodeImgLayer.setVisible(false);
gaodeVecLayer.setVisible(false);
break;
case "google_img"://谷歌影像
googleImgLayer.setVisible(true);
arcgisVecLayer.setVisible(false);
arcgisImgLayer.setVisible(false);
osmLayer.setVisible(false);
satelliteLayer.setVisible(false);
satelliteLabelLayer.setVisible(false);
streetLayer.setVisible(false);
streetLabelLayer.setVisible(false);
terLayer.setVisible(false);
googleVecLayer.setVisible(false);
gaodeImgLayer.setVisible(false);
gaodeVecLayer.setVisible(false);
break;
case "google_vec"://谷歌影像
googleVecLayer.setVisible(true);
googleImgLayer.setVisible(false);
arcgisVecLayer.setVisible(false);
arcgisImgLayer.setVisible(false);
osmLayer.setVisible(false);
satelliteLayer.setVisible(false);
satelliteLabelLayer.setVisible(false);
streetLayer.setVisible(false);
streetLabelLayer.setVisible(false);
terLayer.setVisible(false);
gaodeImgLayer.setVisible(false);
gaodeVecLayer.setVisible(false);
break;
case "gaode_img"://高德影像
gaodeImgLayer.setVisible(true);
googleVecLayer.setVisible(false);
googleImgLayer.setVisible(false);
arcgisVecLayer.setVisible(false);
arcgisImgLayer.setVisible(false);
osmLayer.setVisible(false);
satelliteLayer.setVisible(false);
satelliteLabelLayer.setVisible(false);
streetLayer.setVisible(false);
streetLabelLayer.setVisible(false);
terLayer.setVisible(false);
gaodeVecLayer.setVisible(false);
break;
case "gaode_vec"://高德街道
gaodeVecLayer.setVisible(true);
gaodeImgLayer.setVisible(false);
googleVecLayer.setVisible(false);
googleImgLayer.setVisible(false);
arcgisVecLayer.setVisible(false);
arcgisImgLayer.setVisible(false);
osmLayer.setVisible(false);
satelliteLayer.setVisible(false);
satelliteLabelLayer.setVisible(false);
streetLayer.setVisible(false);
streetLabelLayer.setVisible(false);
terLayer.setVisible(false);
break;
default:
satelliteLayer.setVisible(true);
satelliteLabelLayer.setVisible(false);
streetLayer.setVisible(false);
streetLabelLayer.setVisible(false);
terLayer.setVisible(false);
osmLayer.setVisible(false);
arcgisImgLayer.setVisible(false);
arcgisVecLayer.setVisible(false);
googleImgLayer.setVisible(false);
googleVecLayer.setVisible(false);
gaodeImgLayer.setVisible(false);
gaodeVecLayer.setVisible(false);
break;
}
};

完整源碼demo在此篇文章尾部下載，感興趣的話，能夠關注一波