gpt4 book ai didi

javascript - 如何在不使用 Leaflet.draw UI 的情况下单击按钮并开始新的多边形

转载 作者:数据小太阳 更新时间:2023-10-29 04:24:22 24 4
gpt4 key购买 nike

我正在纠结的是如何在不使用 Leaflet.draw UI 的情况下单击按钮并开始一个新的多边形。例如

$('#draw_poly').click(function() {  


});

我可以毫无问题地将现有多边形置于编辑模式。

$('.edit_polygon').click(function() {  
var name = $(this).text();
geojson_layer.eachLayer(function (layer) {
if (name == layer.feature.properties.name){
layer.editing.enable();
}
});
return false;
});

感谢 Jacob Toye 的帮助。我做了一个小演示。

<!DOCTYPE html>
<html>
<head>
<title>Button click</title>
<link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet-0.7.2/leaflet.css" />
<link rel="stylesheet" href="Leaflet.draw/dist/leaflet.draw.css" />
<script src="http://cdn.leafletjs.com/leaflet-0.7.2/leaflet.js"></script>
<script src="Leaflet.draw/dist/leaflet.draw.js"></script>
</head>
<body>
<div><button id="draw_poly" onclick="drawPolygon()" >Draw Polgyon</button></div>
<div id="map" style="width: 800px; height: 600px; border: 1px solid #ccc"></div>
<script>
var cloudmadeUrl = 'http://{s}.tile.cloudmade.com/BC9A493B41014CAABB98F0471D759707/997/256/{z}/{x}/{y}.png',
cloudmade = new L.TileLayer(cloudmadeUrl, {maxZoom: 18}),
map = new L.Map('map', {layers: [cloudmade], center: new L.LatLng(51.505, -0.04), zoom: 13});
var drawnItems = new L.FeatureGroup();
map.addLayer(drawnItems);

map.on('draw:created', function (e) {
var type = e.layerType,
layer = e.layer;
drawnItems.addLayer(layer);
});

polygon_options = {
showArea: false,
shapeOptions: {
stroke: true,
color: '#6e83f0',
weight: 4,
opacity: 0.5,
fill: true,
fillColor: null, //same as color by default
fillOpacity: 0.2,
clickable: true
}
}

function drawPolygon(){
var polygonDrawer = new L.Draw.Polygon(map, polygon_options);
polygonDrawer.enable();
}
</script>
</body>
</html>

最佳答案

开始绘制形状非常简单。您可以为所需的形状类型创建一个处理程序,然后启用该处理程序。

例如要绘制多段线,您会这样做:

// Define you draw handler somewhere where you click handler can access it. N.B. pass any draw options into the handler
var polygonDrawer = new L.Draw.Polyline(map);

// Assumming you have a Leaflet map accessible
map.on('draw:created', function (e) {
var type = e.layerType,
layer = e.layer;

// Do whatever you want with the layer.
// e.type will be the type of layer that has been draw (polyline, marker, polygon, rectangle, circle)
// E.g. add it to the map
layer.addTo(map);
});

// Click handler for you button to start drawing polygons
$('#draw_poly').click(function() {
polygonDrawer.enable();
});

查看文档了解更多信息:

“绘制:创建”事件:https://github.com/Leaflet/Leaflet.draw#drawcreated绘制处理程序选项:https://github.com/Leaflet/Leaflet.draw#draw-handler-options

关于javascript - 如何在不使用 Leaflet.draw UI 的情况下单击按钮并开始新的多边形,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/22730888/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com