leaflet-webpack Starter Series two different online map load switch display (with source code download)

Foreword

leaflet-webpack Starter series of environmental knowledge to understand:

• node installation package download
  webpack package management tools need to rely node environment, so node installation package must be installed above link is the official website Download
• webpack configuration document describes
  in detail the configuration of webpack document describes, for beginners to see, I also watched and learned
  
• vscode download the installation package , I am here with vscode compiler front-end development tools project, this tool personally feel pretty good
• leaflet api document describes , in detail leaflet each class functions and properties, etc.
• Examples leaflet online
• Plug leaflet , leaflet plug-in library, very useful

At a Glance

leaflet loading different online map switch the display
source code demo download

Benpian demo load online maps are OSM map, ArcGIS map, world map, high moral map, Google maps and Baidu map, due to the load Baidu map rather special, projected coordinate system scheme defines it uses inconsistent with other online maps, required from defined L.Proj.CRS, therefore, in order to simplify testing, load Baidu map in another page to the map.
The effect is as follows:
Baidu Map effect:

Other online map effect:

Realization of ideas

• The core used in the leaflet tileLayer layer class, specifically the tile loading data layers, there is a leaflet base map switching control Control.Layers, TileLayer class specific use, may be described with reference to api:
  tileLayer
• Online Map configuration information

config = const {
 / * ---------------------------------- map configuration section ------- ------------------------------ * /
mapInitParams: {
center: [23.1441, 113.3693],
zoom: 13
},
baseMaps: [
{
label: "OSM street map" ,
Url: "https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
},
{
label: "ArcGIS image map" ,
Url:
"https://server.arcgisonline.com/arcgis/rest/services/World_Imagery/MapServer/tile/{z}/{y}/{x}"
},
{
label: "ArcGIS street map" ,
Url:
"http://cache1.arcgisonline.cn/arcgis/rest/services/ChinaOnlineCommunity/MapServer/tile/{z}/{y}/{x}"
},
{
label: "world map street map" ,
Url:
"http://t{s}.tianditu.gov.cn/DataServer?T=vec_w&x={x}&y={y}&l={z}&tk=7786923a385369346d56b966bb6ad62f"
},
{
label: "world map image map" ,
Url:
"http://t{s}.tianditu.gov.cn/DataServer?T=img_w&x={x}&y={y}&l={z}&tk=7786923a385369346d56b966bb6ad62f"
},
{
label: "Google street map" ,
Url:
"http://www.google.cn/maps/vt?lyrs=m@189&gl=cn&x={x}&y={y}&z={z}"
},
{
label: "Google image map" ,
Url:
"http://www.google.cn/maps/vt?lyrs=s@189&gl=cn&x={x}&y={y}&z={z}"
},
{
label: "High German street map" ,
Url:
"http://webrd0{s}.is.autonavi.com/appmaptile?lang=zh_cn&size=1&scale=1&style=8&x={x}&y={y}&z={z}"
},
{
label: "High German map image" ,
Url:
"http://webst0{s}.is.autonavi.com/appmaptile?style=6&x={x}&y={y}&z={z}"
},
{
label: "Baidu street map" ,
Url:
"http://online{s}.map.bdimg.com/onlinelabel/?qt=tile&x={x}&y={y}&z={z}&styles={styles}&scaler=1&p=1"
},
{
label: "Baidu image map" ,
Url:
"http://shangetu{s}.map.bdimg.com/it/u=x={x};y={y};z={z};v=009;type=sate&fm=46"
}
]
};
 
export default config;

• Baidu Map loading the complete code:

import L from 'leaflet';
import 'leaflet/dist/leaflet.css';
import 'leaflet.chinaProvider';
import config from "./config";
/* This code is needed to properly load the images in the Leaflet CSS */
delete L.Icon.Default.prototype._getIconUrl;
L.Icon.Default.mergeOptions({
iconRetinaUrl: require('leaflet/dist/images/marker-icon-2x.png'),
iconUrl: require('leaflet/dist/images/marker-icon.png'),
shadowUrl: require('leaflet/dist/images/marker-shadow.png'),
});
 
// Please introduction proj4.js and proj4leaflet.js 
L.CRS.Baidu = new new L.Proj.CRS (
 'the EPSG: 900913' ,
` + Proj = merc
 + a = 6378206
+b=6356584.314245179
+lat_ts=0.0
+lon_0=0.0
+x_0=0
+ Y_0 = 0
+k=1.0
+units=m
+nadgrids=@null
+wktext
+no_defs`, {
resolutions: function () {
var res = [],
level = 19;
res[0] = Math.pow(2, 18);
for (var i = 1; i < level; i++) {
res[i] = Math.pow(2, (18 - i))
}
return res;
}(),
origin: [0, 0],
bounds: L.bounds([20037508.342789244, 0], [0, 20037508.342789244])
});
 
const map = L.map("map", {
crs: L.CRS.Baidu, // if use baidu L.CRS.EPSG3857
attributionControl: false
}).setView(config.mapInitParams.center, config.mapInitParams.zoom);
……

See the full demo source small column tail : GIS House leaflet small column

Articles tail source code download, interested in this column, you can focus on a wave