Leaflet中原生方式实现测量面积
生活随笔
收集整理的這篇文章主要介紹了
Leaflet中原生方式实现测量面积
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
場景
Leaflet中原生方式實現測距：
Leaflet中原生方式實現測距_BADAO_LIUMANG_QIZHI的博客-CSDN博客
在上面實現測量距離的基礎上，實現測量面積效果如下
注：
博客：
BADAO_LIUMANG_QIZHI的博客_霸道流氓氣質_CSDN博客-C#,SpringBoot,架構之路領域博主
關注公眾號
霸道的程序猿
獲取編程相關電子書、教程推送與免費下載。
實現
完整代碼：
<!doctype html> <html lang="en"><head><meta charset="UTF-8"><title>leaflet實現測量面積</title><link rel="stylesheet" href="https://unpkg.com/leaflet@1.7.1/dist/leaflet.css" /><style>#mapButton {position: absolute;z-index: 10000;}html,body,#map {padding: 0;margin: 0;width: 100%;height: 100%;overflow: hidden;position: absolute;}</style> </head><body><div id="mapButton"><br><br><br><br><button type="button" id="areaMeasure">測面積</button><button type="button" id="clearMeasure">清除</button></div><div id="map"></div><script src="http://cdn.bootcss.com/jquery/1.11.0/jquery.min.js"></script><script type="text/javascript" src="https://unpkg.com/leaflet@1.7.1/dist/leaflet.js"></script><script type="text/javascript">var map = L.map('map').setView([36.09, 120.35], 13);L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {attribution: ''}).addTo(map);var DRAWING = false; //是否正在繪制var BarDRAWLAYERS = [];var MEASUREAREATOOLTIP; //量面提示var DRAWPOLYGON; //繪制的面var DRAWMOVEPOLYGON; //繪制過程中的面var DRAWPOLYGONPOINTS = []; //繪制的面的節點集var MEASURERESULT = 0; //測量結果//測量面積按鈕點擊事件$('#areaMeasure').click(function () {//開始繪制多邊形startDrawPolygon();});/*多邊形*/function startDrawPolygon(func) {MEASURERESULT = 0;map.getContainer().style.cursor = 'crosshair';//地圖添加鼠標按下事件map.on('mousedown', function (e) {DRAWING = true;DRAWPOLYGONPOINTS.push(e.latlng);DRAWPOLYGON.addLatLng(e.latlng);});//地圖添加鼠標移動事件map.on('mousemove', function (e) {if (DRAWING) {//清除上次數據if (DRAWMOVEPOLYGON != undefined && DRAWMOVEPOLYGON != null) {map.removeLayer(DRAWMOVEPOLYGON);}var prevPoint = DRAWPOLYGONPOINTS[DRAWPOLYGONPOINTS.length - 1];var firstPoint = DRAWPOLYGONPOINTS[0];DRAWMOVEPOLYGON = new L.Polygon([firstPoint, prevPoint, e.latlng], shapeOptions);map.addLayer(DRAWMOVEPOLYGON);}});//地圖添加鼠標雙擊事件map.on('dblclick', function (e) {map.getContainer().style.cursor = '';var tempPoints = [];for (var i = 0; i < DRAWPOLYGONPOINTS.length; i++) {tempPoints.push(DRAWPOLYGONPOINTS[i]);}tempPoints.push(e.latlng);//計算面積var distance = CalArea(tempPoints);//聲明標記marker = new L.Marker(e.latlng, {draggable: false});//地圖上添加標記map.addLayer(marker);//標記彈窗顯示面積marker.bindPopup("總面積：" + (distance / 1000000).toFixed(3) + '平方公里').openPopup();if (DRAWING) {if (DRAWMOVEPOLYGON != undefined && DRAWMOVEPOLYGON != null) {map.removeLayer(DRAWMOVEPOLYGON);DRAWMOVEPOLYGON = null;}BarDRAWLAYERS.push(DRAWPOLYGON);if (func) {func(DRAWPOLYGONPOINTS);}DRAWPOLYGONPOINTS = [];DRAWING = false;//地圖移除事件map.off('mousedown');map.off('mousemove');map.off('dblclick');}});var shapeOptions = {color: '#F54124',weight: 3,opacity: 0.8,fill: true,fillColor: null,fillOpacity: 0.2,clickable: true},DRAWPOLYGON = new L.Polygon([], shapeOptions);map.addLayer(DRAWPOLYGON);//計算面積function CalArea(latLngs) {var pointsCount = latLngs.length,area = 0.0,d2r = Math.PI / 180,p1, p2;if (pointsCount > 2) {for (var i = 0; i < pointsCount; i++) {p1 = latLngs[i];p2 = latLngs[(i + 1) % pointsCount];area += ((p2.lng - p1.lng) * d2r) *(2 + Math.sin(p1.lat * d2r) + Math.sin(p2.lat * d2r));}area = area * 6378137.0 * 6378137.0 / 2.0;}return Math.abs(area);}}//清除按鈕點擊事件$('#clearMeasure').click(function () {qingchu()})//執行清除方法function qingchu(func) {for (var i = 0; i < BarDRAWLAYERS.length; i++) {//移除圖層map.removeLayer(BarDRAWLAYERS[i]);}//清空數組BarDRAWLAYERS = [];if (marker) {map.removeLayer(marker)}}</script> </body></html>總結
以上是生活随笔為你收集整理的Leaflet中原生方式实现测量面积的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： Leaflet中原生方式实现测距
- 下一篇： Leaflet中通过leaflet-me