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;
});
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>
See Question&Answers more detail:
os 与恶龙缠斗过久,自身亦成为恶龙；凝视深渊过久,深渊将回以凝视…
