场景

Leaflet快速入门与加载OSM显示地图：

Leaflet快速入门与加载OSM显示地图_BADAO_LIUMANG_QIZHI的博客-CSDN博客

在上面实现加载地图显示的基础上，实现测量地图上距离的功能。

注：

博客：
BADAO_LIUMANG_QIZHI的博客_霸道流氓气质_CSDN博客-C#,SpringBoot,架构之路领域博主
关注公众号
霸道的程序猿
获取编程相关电子书、教程推送与免费下载。

实现

1、页面添加两个按钮和地图容器

    <div id="mapButton"><br><br><br><br><button type="button"  id="juliMeasure">测距</button><button type="button"  id="clearMeasure">清除</button></div><div id="map"></div>

2、设置样式，使按钮在地图上显示

    <style>#mapButton {position: absolute;z-index: 10000;}html,body,#map {padding: 0;margin: 0;width: 100%;height: 100%;overflow: hidden;position: absolute;}</style>

3、引入leaflet所需文件，以及jquery所需文件

<link rel="stylesheet" href="https://unpkg.com/leaflet@1.7.1/dist/leaflet.css" /><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>

4、编写按钮的点击事件，注释讲解见代码

<!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="juliMeasure">测距</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 DRAWLAYERS = [];var BarDRAWLAYERS = [];var MEASURETOOLTIP; //量距提示var MEASURERESULT = 0; //测量结果var DRAWPOLYLINE; //绘制的折线var DRAWMOVEPOLYLINE; //绘制过程中的折线var DRAWPOLYLINEPOINTS = []; //绘制的折线的节点集$('#juliMeasure').click(function () {//开始画线startDrawLine();});function startDrawLine() {MEASURERESULT = 0; //测量结果map.getContainer().style.cursor = 'crosshair';var shapeOptions = {color: '#F54124',weight: 3,opacity: 0.8,fill: false,clickable: true},//绘制的折线DRAWPOLYLINE = new L.Polyline([], shapeOptions); //地图上添加折线map.addLayer(DRAWPOLYLINE);//实例化量距提示MEASURETOOLTIP = new L.Tooltip(map); //设置地图的鼠标按下事件map.on('mousedown', onClick);//设置地图的双击事件map.on('dblclick', onDoubleClick);//鼠标按下事件function onClick(e) {DRAWING = true; //是否正在绘制DRAWPOLYLINEPOINTS.push(e.latlng); //绘制的折线的节点集//测量结果加上距离上个点的距离MEASURERESULT += e.latlng.distanceTo(DRAWPOLYLINEPOINTS[DRAWPOLYLINEPOINTS.length - 2]);//绘制的折线添加进集合DRAWPOLYLINE.addLatLng(e.latlng); //地图添加鼠标移动事件map.on('mousemove', onMove);}//鼠标移动事件function onMove(e) {if (DRAWING) { //是否正在绘制//将上次的移除if (DRAWMOVEPOLYLINE != undefined && DRAWMOVEPOLYLINE != null) { //绘制过程中的折线map.removeLayer(DRAWMOVEPOLYLINE);}//获取上个点坐标var prevPoint = DRAWPOLYLINEPOINTS[DRAWPOLYLINEPOINTS.length - 1];//绘制最后一次的折线DRAWMOVEPOLYLINE = new L.Polyline([prevPoint, e.latlng], shapeOptions);//添加到地图map.addLayer(DRAWMOVEPOLYLINE);//累加距离var distance = MEASURERESULT + e.latlng.distanceTo(DRAWPOLYLINEPOINTS[DRAWPOLYLINEPOINTS.length - 1]);}}//鼠标双击事件function onDoubleClick(e) {map.getContainer().style.cursor = '';/*显示两点距离*///之前的距离加上最后一次的距离var distance = MEASURERESULT + e.latlng.distanceTo(DRAWPOLYLINEPOINTS[DRAWPOLYLINEPOINTS.length -1]);//添加一个标记marker = new L.Marker(e.latlng, {draggable: false});//地图上添加标记map.addLayer(marker);//标记绑定弹窗显示marker.bindPopup((distance / 1000).toFixed(2) + "公里").openPopup();if (DRAWING) {//清除上次的if (DRAWMOVEPOLYLINE != undefined && DRAWMOVEPOLYLINE != null) {map.removeLayer(DRAWMOVEPOLYLINE);DRAWMOVEPOLYLINE = null;}BarDRAWLAYERS.push(DRAWPOLYLINE);DRAWPOLYLINEPOINTS = [];DRAWING = false;//移除事件map.off('mousedown');map.off('mousemove');map.off('dblclick');}}}//清除按钮点击事件$('#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中原生方式实现测距_BADAO_LIUMANG_QIZHI的博客-CSDN博客在上面实现测量距离的基础上,实现测量面积效果如下注: 博客: ...
Leaflet中通过leaflet-measure插件实现测距测面效果
场景 Leaflet中原生方式实现测距: Leaflet中原生方式实现测距_BADAO_LIUMANG_QIZHI的博客-CSDN博客 Leaflet中原生方式实现测量面积: Leaflet中原生方式 ...
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 ...
Leaflet中如何限制地图的拖动范围
一.背景在Leaflet默认的地图载模式中,假如没有对地图的一个范围进行限制,那就会带来一个问题,随着地图可以拖动,当地图往右拖动越多,每跨一屏(这里的一屏指地图投影后在页面上的平铺位置)经度会加3 ...
Hybrid App中原生页面 VS H5页面
Hybrid App中原生页面 VS H5页面现有3类主流APP,分别为:Web App.Hybrid App(混合模式移动应用,Hybrid有"混合的"意思). Native ...

Leaflet中原生方式实现测距

场景

实现

Leaflet中原生方式实现测距相关推荐

最新文章

热门文章