Question

我所挣扎的是如何在不使用Leaflet.draw UI的情况下单击按钮并启动新的多边形。 e.g。

$('#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>

Answer 1

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

E.g。要绘制折线，您可以这样做：

// 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();
});

查看文档以获取更多信息：

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

如何在不使用Leaflet.draw UI的情况下单击按钮并启动新多边形

1 个答案: