使用leaflet在頁(yè)面中動(dòng)態(tài)的繪制一個(gè)圓形，主要需要解決的有兩點(diǎn)，其一是如何確定圓的中心，其二是如何確定圓的半徑。解決了這兩點(diǎn)，剩下的就是把圓作為圖層添加進(jìn)map中了。
使用leaflet繪制多邊形要稍微麻煩一點(diǎn)，在繪制的時(shí)候需要?jiǎng)討B(tài)添加點(diǎn)擊的點(diǎn)位以及實(shí)現(xiàn)新增的邊的跟隨移動(dòng)。

文章目錄

• 引入js和css
• 添加底圖
• 動(dòng)態(tài)繪制圓
• 動(dòng)態(tài)繪制多邊形

引入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>

然后創(chuàng)建一個(gè)div和五個(gè)button，div用來(lái)放置地圖，五個(gè)button分別用來(lái)創(chuàng)建圓、多邊形，刪除圓、多邊形、全部

<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>

動(dòng)態(tài)繪制圓

以下代碼用來(lái)繪制圓（包括刪除）

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

成果截圖

動(dòng)態(tài)繪制多邊形

以下代碼用來(lái)繪制多邊形

<script> //動(dòng)態(tài)繪制多邊形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); //點(diǎn)擊地圖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); //點(diǎn)擊地圖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>

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

總結(jié)

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

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。