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小專欄

文章尾部提供源代碼下載，對本專欄感興趣的話，能夠關注一波