leaflet-webpack 入門開發系列三地圖分屏對比(附源碼下載)

時間 2019-11-13

標籤 leaflet webpack 入門開發系列地圖分屏對比源碼下載简体版

原文原文鏈接

前言

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

node 安裝包下載
webpack 打包管理工具須要依賴 node 環境，因此 node 安裝包必須安裝，上面連接是官網下載地址

webpack 配置介紹文檔
詳細的 webpack 文檔配置介紹，適合新手查看，我也是邊看邊學

vscode 安裝包下載，我這邊用 vscode工具編譯開發前端項目，我的覺的這款工具還不錯

leaflet api文檔介紹，詳細介紹 leaflet 每一個類的函數以及屬性等等

leaflet 在線例子

leaflet 插件，leaflet 的插件庫，很是有用

內容概覽

leaflet 地圖分屏對比
源代碼 demo 下載前端

效果圖node

實現思路：建立左右並排的兩個 div，各類渲染左右兩個不一樣地圖對象，而後同時監聽左右兩個地圖的 drag 以及 mousemove 事件，在事件裏面設置兩個地圖的當前範圍一致 map. setView(_this.getCenter(),_this.getZoom());webpack

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

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

相關標籤/搜索