Leaflet中对鼠标按下、移动事件监听实现移动单个图形
生活随笔
收集整理的這篇文章主要介紹了
Leaflet中对鼠标按下、移动事件监听实现移动单个图形
小編覺得挺不錯的,現(xiàn)在分享給大家,幫大家做個參考.
場景
Leaflet快速入門與加載OSM顯示地圖：
https://blog.csdn.net/BADAO_LIUMANG_QIZHI/article/details/122290880?
在上面的基礎上，實現(xiàn)對單個圖形進行移動。
Leaflet提供了重設圖形位置的方法，通過調(diào)用圖層刷新接口redraw，即可實現(xiàn)圖形的移動功能。
注：
博客：
霸道流氓氣質(zhì)的博客_CSDN博客-C#,架構(gòu)之路,SpringBoot領域博主
關注公眾號
霸道的程序猿
獲取編程相關電子書、教程推送與免費下載。
實現(xiàn)
1、加載底圖并添加一個矩形
?????? var map = L.map('map',{//不允許地圖拖拽dragging: false,}).setView([36.09, 120.35], 13);var tiles =L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {attribution: ''});tiles.addTo(map);?//繪制矩形rectangle = L.rectangle([[36.09, 120.35], [36.12, 120.55]], {//顏色color: "#ff7800",//線寬weight: 1,//填充色透明度fillOpacity: 0.5}).addTo(map);2、監(jiān)聽矩形的鼠標單擊事件，當在矩形上單擊時，再利用map.on監(jiān)聽鼠標移動事件
??????? rectangle.once('mousedown', function (e) {debugger//獲取鼠標按下位置的緯經(jīng)度坐標var coordinate1 = e.latlng;//監(jiān)聽地圖移動事件，實時改變圖形位置map.on('mousemove ', function (e) {//移動位置處的坐標var coordinate2 = e.latlng;//計算坐標偏移var dx = coordinate2.lat - coordinate1.lat;var dy = coordinate2.lng - coordinate1.lng;//重新設置矩形位置var latlngs = [[36.09 + dx, 120.35 + dy], [36.12 + dx, 120.55 + dy]];rectangle.setBounds(latlngs);});});3、當釋放鼠標時，移除鼠標移動事件的監(jiān)聽，并彈窗提示移動矩形成功。
??????? rectangle.once('mouseup', function (e) {//鼠標釋放后，注銷鼠標移動事件map.off('mousemove');alert("移動完成！");});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>html,body,#map {padding: 0;margin: 0;width: 100%;height: 100%;overflow: hidden;}</style> </head><body ><div id="map"></div><script type="text/javascript" src="https://unpkg.com/leaflet@1.7.1/dist/leaflet.js"></script><script type="text/javascript">//定義矢量線var polyline;//定義矢量矩形var rectangle;var map = L.map('map',{//不允許地圖拖拽dragging: false,}).setView([36.09, 120.35], 13);var tiles =L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {attribution: ''});tiles.addTo(map);//繪制矩形rectangle = L.rectangle([[36.09, 120.35], [36.12, 120.55]], {//顏色color: "#ff7800",//線寬weight: 1,//填充色透明度fillOpacity: 0.5}).addTo(map);/**矢量圖層鼠標按壓事件*? @param {string} type 事件類型（鼠標按下）*? @param {function} fn 事件觸發(fā)后的響應函數(shù)*/rectangle.once('mousedown', function (e) {debugger//獲取鼠標按下位置的緯經(jīng)度坐標var coordinate1 = e.latlng;//監(jiān)聽地圖移動事件，實時改變圖形位置map.on('mousemove ', function (e) {//移動位置處的坐標var coordinate2 = e.latlng;//計算坐標偏移var dx = coordinate2.lat - coordinate1.lat;var dy = coordinate2.lng - coordinate1.lng;//重新設置矩形位置var latlngs = [[36.09 + dx, 120.35 + dy], [36.12 + dx, 120.55 + dy]];rectangle.setBounds(latlngs);});});/**矢量圖層鼠標釋放事件*? @param {string} type 事件類型（鼠標釋放）*? @param {function} fn 事件觸發(fā)后的響應函數(shù)*/rectangle.once('mouseup', function (e) {//鼠標釋放后，注銷鼠標移動事件map.off('mousemove');alert("移動完成！");});</script> </body></html>?總結(jié)
以上是生活随笔為你收集整理的Leaflet中对鼠标按下、移动事件监听实现移动单个图形的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： Leaflet中使用Leaflet.dr
- 下一篇： Leaflet中使用Leaflet.Pa