實作思路：建立左右并排的兩個 div，各種渲染左右兩個不同地圖對象，然後同時監聽左右兩個地圖的 drag 以及 mousemove 事件，在事件裡面設定兩個地圖的目前範圍一緻 map. setView(_this.getCenter(),_this.getZoom());
前言
leaflet-webpack 入門開發系列環境知識點了解：
node 安裝包下載下傳
webpack 打包管理工具需要依賴 node 環境，是以 node 安裝包必須安裝，上面連結是官網下載下傳位址
webpack 配置介紹文檔
詳細的 webpack 文檔配置介紹，适合新手檢視，我也是邊看邊學
leaflet-webpack 入門開發系列三地圖分屏對比(附源碼下載下傳) - vscode 安裝包下載下傳，我這邊用 vscode工具編譯開發前端項目，個人覺的這款工具還不錯
- leaflet api文檔介紹，詳細介紹 leaflet 每個類的函數以及屬性等等
- leaflet 線上例子
- leaflet 插件，leaflet 的插件庫，非常有用
内容概覽
leaflet 地圖分屏對比
源代碼 demo 下載下傳
效果圖
- html 地圖界面
<html>
<head>
<title>Leaflet入門開發系列地圖分屏</title>
<style>
html, body{
height: 100%;
margin: 0;
padding: 0;
}
.left{
width: 50%;
height: 100%;
float: left;
/* border: 1px solid #f40; */
}
.right {
width: 50%;
height: 100%;
float: left;
/* border: 1px solid #f40; */
}
</style>
</head>
<body>
<div class="left" id="LMap"></div>
<div class="right" id="RMap"></div>
<script src="splitScreen.js"></script>
</body>
</html> - 建立左右地圖初始化
//左側地圖
const LMap = L.map("LMap", {
attributionControl: false
}).setView(config.mapInitParams.center, config.mapInitParams.zoom);
//右側地圖
const RMap = L.map("RMap", {
attributionControl: false
}).setView(config.mapInitParams.center, config.mapInitParams.zoom); 完整demo源碼見小專欄文章尾部：GIS之家leaflet小專欄
文章尾部提供源代碼下載下傳，對本專欄感興趣的話，可以關注一波
GIS之家作品店鋪：GIS之家作品店鋪
GIS之家源碼咨詢：GIS之家webgis入門開發系列demo源代碼咨詢