Leaflet中原生方式实现测距
生活随笔
收集整理的這篇文章主要介紹了
Leaflet中原生方式实现测距
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
場景
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-ec
- 下一篇： Leaflet中原生方式实现测量面积