javascript 如何在不使用 Leaflet.draw UI 的情况下单击按钮并开始一个新的多边形
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/22730888/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to click a button and start a new polygon without using the Leaflet.draw UI
提问by Ground Hog
What I'm struggling with is how to click a button and start a new polygon without using the Leaflet.draw UI. e.g.
我正在努力解决的是如何在不使用 Leaflet.draw UI 的情况下单击一个按钮并开始一个新的多边形。例如
$('#draw_poly').click(function() {
});
I'm able to put an existing polygon into edit mode no problem.
我可以毫无问题地将现有多边形置于编辑模式。
$('.edit_polygon').click(function() {
var name = $(this).text();
geojson_layer.eachLayer(function (layer) {
if (name == layer.feature.properties.name){
layer.editing.enable();
}
});
return false;
});
Thanks to Jacob Toye for assistance. I've made a little demo.
感谢 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>
回答by jacob.toye
To start drawing a shape is very straight forward. You create a handler for the type of shape you want and then enable that handler.
开始绘制形状非常简单。您为所需的形状类型创建一个处理程序，然后启用该处理程序。
E.g. for drawing a polyline you would do:
例如，要绘制多段线，您可以这样做：
// 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();
});
Check out the docs for more info:
查看文档以获取更多信息：
"draw:created" event: https://github.com/Leaflet/Leaflet.draw#drawcreatedDraw handler options: https://github.com/Leaflet/Leaflet.draw#draw-handler-options
“draw:created”事件：https: //github.com/Leaflet/Leaflet.draw#drawcreated绘制处理程序选项：https: //github.com/Leaflet/Leaflet.draw#draw-handler-options
