preface
I have written a map switching effect of openlayers4 version before, but because it is written by encapsulating a layer of js code, many beginners seem to have a bit of difficulty, so this article rewrites a map switching effect, which is directly based on the latest version of openlayers6, in the form of pure html + js + css, without any encapsulation.
Content overview
1. Implement Map switching display effect based on openlayers6
2. Download source code demo
The effect picture is as follows:
The main idea is as follows: Map initialization configuration loads various online maps, such as Tiantu map, arcgis map, Google map, Gaode map, baidu map, OSM map, and so on. The default layer only displays one map, and other online maps are hidden and invisible by default. js defines a base map switch control, and dynamically sets the hiding of layers when the base map is switched And visibility to achieve the purpose of base map switching.
- Part of the core code, complete see the source code demo download
var satelliteLayer = new ol.layer.Tile({ //Satellite map 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({ //Notes on satellite map of Tiantu 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({ //Tiantu street map 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({ //Notes on Tiantu street map 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({ //Tiantu topographic map 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 Map visible: false, source: new ol.source.OSM() }); var arcgisImgLayer = new ol.layer.Tile({//arcgis image 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 street 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({//Google Images 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({//Google Street 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({//Gaud image 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({//Gaode Street 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, ]; //Map creation 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":"Space satellite","className":"imgType"},//Satellite map {"layer_id":"tmap_vec_w","label":"Tiandi Street","className":"vecType"},//Tiantu street map {"layer_id":"tmap_img_w_h","label":"Satellite hybrid","className":"imgType"},//Satellite Hybrid Map {"layer_id":"tmap_ter_w","label":"Terrain of heaven and earth","className":"terType"},//Tiantu topographic map {"layer_id":"tmap_ter_w_h","label":"Terrain mixing","className":"terType"},//Tiantu topographic Hybrid Map {"layer_id":"osm","label":"OSM","className":"vecType"},//OSM Map {"layer_id":"arcgis_img","label":"esri image","className":"imgType"},//arcgis image {"layer_id":"arcgis_vec","label":"esri street","className":"vecType"},//arcgis street {"layer_id":"google_img","label":"Google Images","className":"imgType"},//Google Images {"layer_id":"google_vec","label":"Google Street","className":"vecType"},//Google Street {"layer_id":"gaode_img","label":"Gaud image","className":"imgType"},//Gaud image {"layer_id":"gaode_vec","label":"Gaode Street","className":"vecType"},//Gaode Street ]; loadSwitcherMap(mapconfig);//Base map switch control loading /** * Map switch control */ function loadSwitcherMap(data){ //Set different types of base map 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"://satellite 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"://Map 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"://Satellite hybrid 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"://terrain 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"://Terrain mixing 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 image 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 street 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"://Google Images 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"://Google Images 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"://Gaud image 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"://Gaode Street 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; } };