使用leaflet在頁面中動態的繪制一個圓形，主要需要解決的有兩點，其一是如何確定圓的中心，其二是如何確定圓的半徑。解決了這兩點，剩下的就是把圓作為圖層添加進map中了。
使用leaflet繪制多邊形要稍微麻煩一點，在繪制的時候需要動態添加點擊的點位以及實現新增的邊的跟隨移動。

文章目錄

• 引入js和css
• 添加底圖
• 動態繪制圓
• 動態繪制多邊形

引入js和css

首先需要引入leaflet的js和CSS。

<link rel="stylesheet" href="https://unpkg.com/leaflet@1.6.0/dist/leaflet.css"integrity="sha512-xwE/Az9zrjBIphAcBb3F6JVqxf46+CDLwfLMHloNu6KEQCAWi6HcDUbeOfBIptF7tcCzusKFjFw2yuvEpDL9wQ==" crossorigin=""> <script src="https://unpkg.com/leaflet@1.6.0/dist/leaflet.js" integrity="sha512-gZwIG9x3wUXg2hdXF6+rVkLF/0Vi9U8D2Ntg4Ga5I5BZpVkVxlJWbSQtXPSiUTtC0TjtGOmxa1AJPuV0CPthew==" crossorigin=""></script>

然后創建一個div和五個button，div用來放置地圖，五個button分別用來創建圓、多邊形，刪除圓、多邊形、全部

<div id="map"></div><input type="button" id="circle" value="繪制圓" onclick="drawCircle()" /><input type="button" value="繪制多邊形" onclick="drawPolygon()"><input type="button" id="clear" value="清除圓形" onclick="removeCircle()"/><input type="button" id="clear" value="清除多邊形" onclick="removePolygon()"/><input type="button" id="clearAll" value="全部清除" onclick="removeAll()" />

添加底圖

首先加載底圖

<script>//加載底圖var url = 'https://api.tiles.mapbox.com/v4/{id}/{z}/{x}/{y}.png?access_token=pk.eyJ1IjoibWFwYm94IiwiYSI6ImNpejY4NXVycTA2emYycXBndHRqcmZ3N3gifQ.rJcFIG214AriISLbB6B5aw';var map = L.map('map').setView([51.505, -0.09], 13);//圖層L.tileLayer(url, {maxZoom: 18,id: 'mapbox.streets'}).addTo(map); </script>

動態繪制圓

以下代碼用來繪制圓（包括刪除）

<script>//讀取點擊位置坐標并返回其經緯度// function onMapClick(e) { alert("You clicked the map at " + e.latlng); }//r用來存儲半徑，i用來存儲圓心經緯度//tempCircle是用來存放圓的圖層，pop用來返回圓半徑的彈窗var r ;var i;var tempCircle ;var pop;//移除圓圖層function removeCircle(){map.removeLayer(tempCircle);}//繪制圓function drawCircle(){//在繪制圓之前需要先判斷是否已經繪制過了，如果有，則清空再繪制//如果需要繪制多個圓，則不必此句if(tempCircle){removeAll();}r = 0;i = null;tempCircle = new L.circle();map.dragging.disable();//將mousemove事件移動地圖禁用//監聽鼠標落下事件map.on('mousedown', onmouseDown);function onmouseDown(e) {//確定圓心i = e.latlngpop=L.popup().setLatLng(e.latlng);map.addLayer(pop);//監聽鼠標移動事件map.on('mousemove', onMove);//監聽鼠標彈起事件map.on('mouseup', onmouseUp);}function onMove(e) {r = L.latLng(e.latlng).distanceTo(i);//計算半徑if(r<5000){if (i) {//繪制圓心位置與半徑tempCircle.setLatLng(i)tempCircle.setRadius(r)tempCircle.setStyle({ color: '#ff0000', fillOpacity: 0 })map.addLayer(tempCircle)}//toFixed()方法用來保留兩位小數（四舍五入）pop.setContent("繪制圓半徑為："+r.toFixed(2)+"米");;}else{r=5000;if (i) {tempCircle.setLatLng(i)tempCircle.setRadius(r)tempCircle.setStyle({ color: '#ff0000', fillOpacity: 0 })map.addLayer(tempCircle)}pop.setContent("繪制圓半徑為："+r+"米");;}}function onmouseUp(e) {/* r = L.latLng(e.latlng).distanceTo(i); */map.removeLayer(pop);L.circle(i, { radius: r, color: '#ff0000', fillOpacity: 0 });map.addLayer(tempCircle);map.dragging.enable();map.setView(i,13);i = null;r = 0;//取消監聽事件map.off('mousedown');map.off('mouseup');map.off('mousemove');} }//移除所有圖層(包括圓和多邊形)function removeAll() {removePolygon()removeCircle()}</script>

成果截圖

動態繪制多邊形

以下代碼用來繪制多邊形

<script> //動態繪制多邊形var points, geometry,lines,tempLines,node;function drawPolygon(){if(tempLines){removePolygon();}map.doubleClickZoom.disable();lines = new L.polyline([]);tempLines = new L.polyline([],{ dashArray: 5 });points = [];geometry = [];map.on('click', onClick); //點擊地圖map.on('dblclick', onDoubleClick);map.on('mousemove', onMove)//雙擊地圖function onClick(e) {points.push([e.latlng.lat, e.latlng.lng])lines.addLatLng(e.latlng)map.addLayer(tempLines)map.addLayer(lines)node=L.circle(e.latlng, { color: '#ff0000', fillColor: 'ff0000', fillOpacity: 1 })map.addLayer(node)geometry.push(node)}function onMove(e) {if (points.length > 0) {ls = [points[points.length - 1], [e.latlng.lat, e.latlng.lng], points[0]]tempLines.setLatLngs(ls)// map.addLayer(tempLines)}}function onDoubleClick(e) {geometry.push(L.polygon(points).addTo(map))points = [];node=null;map.off('click', onClick); //點擊地圖map.off('dblclick', onDoubleClick);map.off('mousemove', onMove)//雙擊地圖map.doubleClickZoom.enable();//isInPolygon(marker);}}function removeCircle(){map.removeLayer(tempCircle);}function removePolygon(){for(let ooo of geometry){ooo.remove();}map.removeLayer(lines);map.removeLayer(tempLines);}</script>

小知識：
在實例化pop時可以使用className屬性定義其樣式，句式如下：
var pop=L.popup({className:‘你的class名稱’}).setLatLng(e.latlng);
需要注意的是，必須使用英文單引號，否則報錯。一開始使用雙引號一直報錯，后來比較了其他的程序，發現在這里引用的話基本都是使用單引號。

總結

以上是生活随笔為你收集整理的leaflet动态绘制圆、多边形的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。