前言
之前寫過一篇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 =https://www.cnblogs.com/giserhome/p/ 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在此篇文章尾部下載，感興趣的話，可以關注一波
轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/780.html
標籤：GIS