leaflet-webpack 入门开发系列二加载不同在线地图切换显示（附源码下载）

前言

leaflet-webpack 入门开发系列环境知识点了解：

• node 安装包下载
  webpack 打包管理工具需要依赖 node 环境，所以 node 安装包必须安装，上面链接是官网下载地址
• webpack 配置介绍文档
  详细的 webpack 文档配置介绍，适合新手查看，我也是边看边学
  
• vscode 安装包下载，我这边用 vscode工具编译开发前端项目，个人觉的这款工具还不错
• leaflet api文档介绍，详细介绍 leaflet 每个类的函数以及属性等等
• leaflet 在线例子
• leaflet 插件，leaflet 的插件库，非常有用

内容概览

leaflet 加载不同在线地图切换显示
源代码 demo 下载

本篇 demo 加载在线地图分别是 OSM 地图、ArcGIS 地图、天地图、高德地图、谷歌地图以及百度地图，由于加载百度地图比较特殊，它采用的投影坐标系方案定义跟其他在线地图不一致，需要自定义 L.Proj.CRS，所以，为了简单化测试，加载百度地图是在另一个地图页面来的。
效果图如下：
百度地图效果：

其他在线地图效果：

实现思路

• 核心用到 leaflet 的 TileLayer 图层类，专门加载瓦片数据图层，还有就是 leaflet 底图切换控件Control.Layers，TileLayer 类具体使用，可以参照 api说明：
  TileLayer
• 在线地图配置信息

const config = {
/*----------------------------------地图配置部分-------------------------------------*/
mapInitParams: {
center: [23.1441, 113.3693],
zoom: 13
},
baseMaps: [
{
label: "OSM街道图",
Url: "https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
},
{
label: "ArcGIS影像图",
Url:
"https://server.arcgisonline.com/arcgis/rest/services/World_Imagery/MapServer/tile/{z}/{y}/{x}"
},
{
label: "ArcGIS街道图",
Url:
"http://cache1.arcgisonline.cn/arcgis/rest/services/ChinaOnlineCommunity/MapServer/tile/{z}/{y}/{x}"
},
{
label: "天地图街道图",
Url:
"http://t{s}.tianditu.gov.cn/DataServer?T=vec_w&x={x}&y={y}&l={z}&tk=7786923a385369346d56b966bb6ad62f"
},
{
label: "天地图影像图",
Url:
"http://t{s}.tianditu.gov.cn/DataServer?T=img_w&x={x}&y={y}&l={z}&tk=7786923a385369346d56b966bb6ad62f"
},
{
label: "谷歌街道图",
Url:
"http://www.google.cn/maps/vt?lyrs=m@189&gl=cn&x={x}&y={y}&z={z}"
},
{
label: "谷歌影像图",
Url:
"http://www.google.cn/maps/vt?lyrs=s@189&gl=cn&x={x}&y={y}&z={z}"
},
{
label: "高德街道图",
Url:
"http://webrd0{s}.is.autonavi.com/appmaptile?lang=zh_cn&size=1&scale=1&style=8&x={x}&y={y}&z={z}"
},
{
label: "高德影像图",
Url:
"http://webst0{s}.is.autonavi.com/appmaptile?style=6&x={x}&y={y}&z={z}"
},
{
label: "百度街道图",
Url:
"http://online{s}.map.bdimg.com/onlinelabel/?qt=tile&x={x}&y={y}&z={z}&styles={styles}&scaler=1&p=1"
},
{
label: "百度影像图",
Url:
"http://shangetu{s}.map.bdimg.com/it/u=x={x};y={y};z={z};v=009;type=sate&fm=46"
}
]
};
 
export default config;

• 百度地图加载完整代码：

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'),
});
 
//请引入 proj4.js 和 proj4leaflet.js
L.CRS.Baidu = new L.Proj.CRS(
'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);
……

完整demo源码见小专栏文章尾部：GIS之家leaflet小专栏

文章尾部提供源代码下载，对本专栏感兴趣的话，可以关注一波