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

前言

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

內容概覽

leaflet 地圖捲簾
源代碼 demo 下載html

效果圖以下:

前端

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

demo 集成插件的步驟以下:webpack

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

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

相關文章
相關標籤/搜索