场景

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快速入门与加载OSM显示地图: Leaflet快速入门与加载OSM显示地图_BADAO_LIUMANG_QIZHI的博客-CSDN博客在上面实现加载地图显示的基础上,实现测量地图 ...
Leaflet中通过leaflet-measure插件实现测距测面效果
场景 Leaflet中原生方式实现测距: Leaflet中原生方式实现测距_BADAO_LIUMANG_QIZHI的博客-CSDN博客 Leaflet中原生方式实现测量面积: Leaflet中原生方式 ...
地图测量面积工具app_全站仪的使用面积测量
测量与地图制作见习全站仪使用 11 / 20 #2020 # 全站仪是全站型电子速测仪的简称,是电子经纬仪.光学测距仪及微处理器相结合的光电仪器.其可直接测量距离.角度.坐标,根据三角函数原理,已 ...
Leaflet中使用Leaflet-echarts3插件实现航班航线动态模拟
场景 Leaflet中使用leaflet-echarts插件实现Echarts的Migration迁徙图: Leaflet中使用leaflet-echarts插件实现Echarts的Migration ...
Leaflet中加载Geoserver发布的WMS服务显示地图
场景 Openlayers下载与加载geoserver的wms服务显示地图: Openlayers下载与加载geoserver的wms服务显示地图_BADAO_LIUMANG_QIZHI的博客-CSD ...
Elasticsearch学习(3) spring boot整合Elasticsearch的原生方式
前面我们已经介绍了spring boot整合Elasticsearch的jpa方式,这种方式虽然简便,但是依旧无法解决我们较为复杂的业务,所以原生的实现方式学习能够解决这些问题,而原生的学习方式也是E ...
[转载] 1.1Java使用JDBC原生方式连接MySql数据库
参考链接: Java数据库连接JDBC驱动程序前言:今天有朋友问我原生的java连接数据库,因为框架的使用,如果基础不牢固的人,是很容易遗忘原生的连接方式.今天正好趁此做一下回顾: 这里只考虑原生方 ...
不使用自动注解方式来生成mapper，采用原生方式来生成mapper
前提环境:SpringBoot + MyBatis Plus 问题描述:在普通类中是无法通过自动注解的方式类来使用mapper 解决办法:采用原生方式SqlSessionFactory来生成mappe ...
【Cesium】【vue】空间查询——量距(测量距离)、量面(测量面积)
目录一.量距二.量面三.清除测量四.页面结构注意参考一.量距 // 距离测量measureLineSpace() {this.removeMeasure();let _this = th ...

Leaflet中原生方式实现测量面积

场景

实现

Leaflet中原生方式实现测量面积相关推荐

最新文章

热门文章