leaflet-webpack 入門開發系列一初探篇（附源碼下載）

時間 2019-11-30

標籤 leaflet webpack 入門開發系列初探源碼下載简体版

原文原文鏈接

前言

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

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

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

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

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

leaflet 在線例子

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

我以前有計劃寫一系列關於 leaflet 入門開發文章，只是一直沒什麼時間來整理，最近恰好單位有個 WebGIS 項目是用 leaflet 結合 webpack 來管理使用的，因此，開始了本篇文章 leaflet-webpack 入門開發系列一初探篇，對於 webpack 這個管理工具平臺，我也是學習階段，跟你們一塊兒學習交流，寫的很差之處，望見諒。html

環境搭建

安裝 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);
})