leaflet-webpack 入門開發系列五地圖捲簾(附源碼下載)

前言

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

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

內容概覽

leaflet 地圖捲簾
源代碼 demo 下載

效果圖以下：

demo 實現的效果比較簡單，直接就是用 leaflet 官方的地圖捲簾插件 github：leaflet-side-by-side，這個插件用的時候，左右兩側的底圖要是同個的話，只能顯示一個，不知道這個算不算一個bug

demo 集成插件的步驟以下：

• npm 命令安裝 leaflet-side-by-side 插件庫

npm i leaflet-side-by-side --save

• 引用 leaflet-side-by-side 進來

import "leaflet-side-by-side";

• 完整核心代碼以下：

import L from 'leaflet';
import 'leaflet/dist/leaflet.css';
import "leaflet-side-by-side";
import config from "./config";
 
let userconfig = {};
//左側地圖
const map = L.map("Map", {
attributionControl: false
}).setView(config.mapInitParams.center, config.mapInitParams.zoom);
//建立底圖切換數據源
const baseLayer1 = L.tileLayer(config.baseMaps[0].Url,);//OSM街道圖
const baseLayer2 = L.tileLayer(config.baseMaps[1].Url);//ArcGIS影像圖
map.addLayer(baseLayer1);//左側默認捲簾圖層
map.addLayer(baseLayer2);//右側默認捲簾圖層
userconfig.leftLayers = [baseLayer1];
userconfig.rightLayers = [baseLayer2];
//捲簾地圖效果
userconfig.sideBySide = L.control
.sideBySide(userconfig.leftLayers, userconfig.rightLayers)
.addTo(map);
//左側下拉框改變事件
document.getElementById("selectLeftV").onchange =function(){
sideBySideChange();
}
//右側下拉框改變事件
document.getElementById("selectRightV").onchange =function(){
sideBySideChange();
}
function sideBySideChange(){
//這個插件的左右兩側底圖不能同樣,不然同時只能顯示一個,算是一個bug?
var leftvalue = document.getElementById("selectLeftV").value;
var rightvalue = document.getElementById("selectRightV").value;
var LeftLayer = leftvalue === "0" ? baseLayer1 : baseLayer2;
var RightLayer = rightvalue === "0" ? baseLayer2 : baseLayer1;
addLRLayers(LeftLayer,RightLayer);
userconfig.sideBySide.setLeftLayers(userconfig.leftLayers);
userconfig.sideBySide.setRightLayers(userconfig.rightLayers);
}
……

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

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