之前写过一篇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"://OSMosmLayer.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; }
联系客服