leaflet-webpack 入門開發系列四圖層控件樣式優化篇(附源碼下載)

前言

leaflet-webpack 入門開發系列環境知識點了解：

• node 安裝包下載
  webpack 打包管理工具需要依賴 node 環境，所以 node 安裝包必須安裝，上面鏈接是官網下載地址
• webpack 配置介紹文檔
  詳細的 webpack 文檔配置介紹，適合新手查看，我也是邊看邊學
  
• vscode 安裝包下載，我這邊用 vscode工具編譯開發前端項目，個人覺的這款工具還不錯
• leaflet api文檔介紹，詳細介紹 leaflet 每個類的函數以及屬性等等
• leaflet 在線例子
• leaflet 插件，leaflet 的插件庫，非常有用

內容概覽

leaflet 疊加圖層控制
源代碼 demo 下載

本篇 demo 實現是在leaflet-webpack 入門開發系列二加載不同在線地圖切換顯示（附源碼下載）基礎上優化而實現的，核心就是 leaflet 的 Control.Layers 控件，默認的底圖切換以及疊加圖層只有選中以及文字，沒有圖標樣式的效果。

效果圖如下：

實現思路如下

• 自定義底圖切換，添加圖標樣式

// 構建圖片形式的標題及圖例
const getImageTitle = (text, imgUrl, size) => {
return `<div style='display:inline-block;width:${size}px;height:${size}px;position:relative;top:4px;'><img src='${imgUrl}' style='height:${size}px;'/></div>
<span style='padding-left:1px;margin-top: 2px;position: relative;top:1px;'>${text}</span>`;
};
const baseLayers = {
[getImageTitle(`OSM街道圖`, `./img/OSMVector.png`, 35)]: baseLayer1,
[getImageTitle(`ArcGIS影像圖`, `./img/arcgisImage.png`, 35)]: baseLayer2,
[getImageTitle(`ArcGIS街道圖`, `./img/arcgisVector.png`, 35)]: baseLayer3,
[getImageTitle(`天地圖街道圖`, `./img/tdtVector.png`, 35)]: baseLayer4,
[getImageTitle(`天地圖影像圖`, `./img/tdtImage.png`, 35)]: baseLayer5,
[getImageTitle(`谷歌街道圖`, `./img/googleVector.png`, 35)]: baseLayer6,
[getImageTitle(`谷歌影像圖`, `./img/googleImage.png`, 35)]: baseLayer7,
[getImageTitle(`高德街道圖`, `./img/gaodeVector.png`, 35)]: baseLayer8,
[getImageTitle(`高德街道圖`, `./img/gaodeImage.png`, 35)]: baseLayer9
};

• 自定義圖層疊加，添加圖標樣式

完整demo源碼見小專欄文章尾部：GIS之家leaflet小專欄

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