有没有办法使用 Leaflet 绘制插件以编程方式添加多边形？https://github.com/Leaflet/Leaflet.draw https://github.com/Leaflet/Leaflet.draw
例如：单击一个按钮并添加一个可由插件编辑的方块。
您只需将多边形（或您想要可编辑的任何其他图层）添加到传递给的要素组中edit.featureGroup https://leaflet.github.io/Leaflet.draw/docs/leaflet-draw-latest.html#editpolyoptions你的选择L.Control.Draw控制。
var editableLayers = L.featureGroup().addTo(map);
var drawControl = new L.Control.Draw({
edit: {
featureGroup: editableLayers
}
});
// Add a new editable rectangle when clicking on the button.
button.addEventListener('click', function (event) {
event.preventDefault();
L.rectangle([
getRandomLatLng(),
getRandomLatLng()
]).addTo(editableLayers); // Add to editableLayers instead of directly to map.
});
稍后可以通过单击“编辑图层”按钮（如果启用该功能）来编辑该功能组中的所有内容。
现场演示：
var map = L.map('map').setView([48.86, 2.35], 11);
var editableLayers = L.featureGroup().addTo(map);
var drawControl = new L.Control.Draw({
edit: {
featureGroup: editableLayers
},
draw: false
}).addTo(map);
// Add a new editable rectangle when clicking on the button.
button.addEventListener('click', function(event) {
event.preventDefault();
L.rectangle([
getRandomLatLng(),
getRandomLatLng()
]).addTo(editableLayers); // Add to editableLayers instead of directly to map.
});
L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
attribution: '© <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
}).addTo(map);
function getRandomLatLng() {
return [
48.8 + 0.1 * Math.random(),
2.25 + 0.2 * Math.random()
];
}
html,
body,
#map {
height: 100%;
margin: 0;
}
#button {
z-index: 1050;
position: absolute;
top: 10px;
left: 50px;
}
<link rel="stylesheet" href="https://unpkg.com/[email protected] /cdn-cgi/l/email-protection/dist/leaflet.css" integrity="sha512-puBpdR0798OZvTTbP4A8Ix/l+A4dHDD0DGqYW6RQ+9jxkRFclaxxQb/SJAWZfWAkuyeQUytO7+7N4QKrDh+drA==" crossorigin="" />
<script src="https://unpkg.com/[email protected] /cdn-cgi/l/email-protection/dist/leaflet-src.js" integrity="sha512-+ZaXMZ7sjFMiCigvm8WjllFy6g3aou3+GZngAtugLzrmPFKFK7yjSri0XnElvCTu/PrifAYQuxZTybAEkA8VOA==" crossorigin=""></script>
<link rel="stylesheet" href="https://unpkg.com/[email protected] /cdn-cgi/l/email-protection/dist/leaflet.draw.
css" />
<script src="https://unpkg.com/[email protected] /cdn-cgi/l/email-protection/dist/leaflet.draw-src.js"></script>
<div id="map"></div>
<button id="button">Add editable rectangle</button>
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)
