openlayers6 map switching display (with source code download)

Posted by programmingjeff on Tue, 30 Jun 2020 07:19:43 +0200

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;
}
};

Full source demo download at the end of this article, if you are interested, you can pay attention to a wave

Topics: Google REST