传单：如何移动多边形
[英]Leaflet : How to move a Polygon
问题描述
Hi can i ask how to move the polygon in leaflet ?
嗨，我能问一下如何移动传单中的多边形吗？ I have really no idea how to move it since i was using set option {draggable : true } .我真的不知道如何移动它，因为我使用的是设置option {draggable : true } 。
Give error : it is not a option.
poly = new L.Polygon([coordinates],
{
color: '#810541',
fillColor: '#D462FF',
fillOpacity: 0.5,
// draggable: true
}).addTo(map)
The output i wish to get is , i can move the polygons and see the coordinates of the polygons.我希望得到的输出是，我可以移动多边形并查看多边形的坐标。 Any help is appreciate !任何帮助表示赞赏！
Code Demo : https://jsfiddle.net/wesleylim97/wncy4mk5/6/代码演示： https : //jsfiddle.net/wesleylim97/wncy4mk5/6/
Updates : Problem is solved after added Leaflet.Path.Drag plugin.更新：添加Leaflet.Path.Drag插件后问题解决。
Include the script : <script src="https://cdn.jsdelivr.net/npm/leaflet.path.drag@0.0.6/src/Path.Drag.min.js"></script>包含脚本： <script src="https://cdn.jsdelivr.net/npm/leaflet.path.drag@0.0.6/src/Path.Drag.min.js"></script>
Working Demo : https://jsfiddle.net/wesleylim97/wncy4mk5/13/工作演示： https : //jsfiddle.net/wesleylim97/wncy4mk5/13/
Thanks to @kboul感谢@kboul
1 个解决方案
解决方案1
1 已采纳 2020-04-01 09:12:18
Use Leaflet.Path.Drag plugin.使用Leaflet.Path.Drag插件。
Include the script包括脚本
<script src="https://cdn.jsdelivr.net/npm/leaflet.path.drag@0.0.6/src/Path.Drag.min.js"></script>
<!DOCTYPE html> <html> <head> <title>Quick Start - Leaflet</title> <meta charset="utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link rel="shortcut icon" type="image/x-icon" href="docs/images/favicon.ico" /> <link rel="stylesheet" href="https://unpkg.com/leaflet@1.6.0/dist/leaflet.css" integrity="sha512-xwE/Az9zrjBIphAcBb3F6JVqxf46+CDLwfLMHloNu6KEQCAWi6HcDUbeOfBIptF7tcCzusKFjFw2yuvEpDL9wQ==" crossorigin="" /> <script src="https://unpkg.com/leaflet@1.6.0/dist/leaflet.js" integrity="sha512-gZwIG9x3wUXg2hdXF6+rVkLF/0Vi9U8D2Ntg4Ga5I5BZpVkVxlJWbSQtXPSiUTtC0TjtGOmxa1AJPuV0CPthew==" crossorigin=""></script> <script src="https://cdn.jsdelivr.net/npm/leaflet.path.drag@0.0.6/src/Path.Drag.min.js"></script> </head> <body> <div id="map" style="width: 600px; height: 400px;"></div> <script> var map = L.map('map').setView([3.1377736432253345, 101.56585693359375], 10); var osm = L.tileLayer('http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png').addTo(map); var poly1 = [ [ [3.1377736432253345, 101.56585693359375], [2.929326028392636, 101.6619873046875], [3.03629758922721, 101.89544677734375], [3.247466393872138, 101.8048095703125] ] ] var polygon = new L.Polygon([poly1], { draggable: true, color: '#810541', fillColor: '#D462FF', fillOpacity: 0.5, }).addTo(map); polygon.on('dragend', function(e) { console.log(e.target._latlngs[0][0]); }); </script> </body> </html>
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.