场景
Leaflet中原生方式实现测距：
https://blog.csdn.net/BADAO_LIUMANG_QIZHI/article/details/122358379
在上面实现测量距离的基础上，实现测量面积效果如下
注：
博客：
https://blog.csdn.net/badao_liumang_qizhi
关注公众号
霸道的程序猿
获取编程相关电子书、教程推送与免费下载。
实现
完整代码：
<!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; 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>