前言
leaflet-webpack 入門開發系列環境知識點了解：
- node 安裝包下載
webpack 打包管理工具需要依賴 node 環境，所以 node 安裝包必須安裝，上面鏈接是官網下載地址- webpack 配置介紹文檔
詳細的 webpack 文檔配置介紹，適合新手查看，我也是邊看邊學- vscode 安裝包下載，我這邊用 vscode工具編譯開發前端項目，個人覺的這款工具還不錯
- leaflet api文檔介紹，詳細介紹 leaflet 每個類的函數以及屬性等等
- leaflet 在線例子
- leaflet 插件，leaflet 的插件庫，非常有用
我之前有計划寫一系列關於 leaflet 入門開發文章，只是一直沒什么時間來整理，最近剛好單位有個 WebGIS 項目是用 leaflet 結合 webpack 來管理使用的，所以，開始了本篇文章 leaflet-webpack 入門開發系列一初探篇，對於 webpack 這個管理工具平台，我也是學習階段，跟大家一起學習交流，寫的不好之處，望見諒。
環境搭建
- 安裝 node.js，筆者版本為：10.15.3
- 下載安裝 vscode
- demo 項目工程文件目錄以及關鍵代碼講解
dist webpack 打包編譯后的文件夾
dist/index.html 地圖主頁
src/index.js 地圖初始化代碼
package.json 記錄了項目的配置信息，包括名稱、版本、許可證等元數據，也會記錄所需的各種模塊，包括 執行依賴，和開發依賴
webpack.config.js webpack 的配置文件
- index.html
<html> <head> <title>Leaflet入門開發系列Demo</title> </head> <body> <div id="map" style="width: 100%; height: 100%;"></div> <script src="bundle.js"></script> </body> </html>
- index.js
import L from 'leaflet'; import 'leaflet/dist/leaflet.css'; /* This code is needed to properly load the images in the Leaflet CSS */ delete L.Icon.Default.prototype._getIconUrl; L.Icon.Default.mergeOptions({ iconRetinaUrl: require('leaflet/dist/images/marker-icon-2x.png'), iconUrl: require('leaflet/dist/images/marker-icon.png'), shadowUrl: require('leaflet/dist/images/marker-shadow.png'), }); //const map = L.map('map'); const map = L.map("map", { attributionControl: false }); const defaultCenter = [23.1441, 113.3693]; const defaultZoom = 15; const basemap = L.tileLayer('https://server.arcgisonline.com/arcgis/rest/services/World_Imagery/MapServer/tile/{z}/{y}/{x}'); const marker = L.marker(defaultCenter); map.setView(defaultCenter, defaultZoom); basemap.addTo(map); marker.addTo(map); //監聽地圖點擊事件 map.on("click",(evt)=>{ console.log(evt); })
- 在 vscode 新建終端，輸入 npm install 或者 npm i, 安裝環境需要的依賴包，若無報錯信息，則進行下一步
- npm run build，打包編譯web項目
- npm start，node 啟動 web 項目打包到瀏覽器運行看效果
- 如果正常出現該頁面，則運行成功
完整demo源碼見小專欄文章尾部：GIS之家小專欄
文章尾部提供源代碼下載，對本專欄感興趣的話，可以關注一波