如何在不使用 Leaflet.draw UI 的情况下单击一个按钮并开始一个新的多边形 [英] How to click a button and start a new polygon without using the Leaflet.draw UI
问题描述
我正在努力解决的是如何在不使用 Leaflet.draw UI 的情况下单击一个按钮并开始一个新的多边形.例如
What I'm struggling with is how to click a button and start a new polygon without using the Leaflet.draw UI. e.g.
$('#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;
});
感谢 Jacob Toye 的帮助.我做了一个小演示.
Thanks to Jacob Toye for assistance. I've made a little demo.
<!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>
推荐答案
开始绘制形状非常简单.您为所需的形状类型创建一个处理程序，然后启用该处理程序.
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"事件:https://github.com/Leaflet/Leaflet.draw#drawcreated绘制处理程序选项:https://github.com/Leaflet/Leaflet.draw#draw-handler-options
"draw:created" event: https://github.com/Leaflet/Leaflet.draw#drawcreated Draw handler options: https://github.com/Leaflet/Leaflet.draw#draw-handler-options
这篇关于如何在不使用 Leaflet.draw UI 的情况下单击一个按钮并开始一个新的多边形的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
