如何在不使用Leaflet.draw UI的情況下單擊按鈕並啓動新的多邊形

我正在努力的是如何在不使用Leaflet.draw UI的情況下單擊按鈕並啓動新的多邊形。例如如何在不使用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>

來源

2014-03-29 Ground Hog

要開始繪製形狀非常簡單。您爲所需的形狀類型創建一個處理程序，然後啓用該處理程序。

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

退房更多信息的文檔：

「畫：創建」事件：https://github.com/Leaflet/Leaflet.draw#drawcreated 繪圖處理器選項：https://github.com/Leaflet/Leaflet.draw#draw-handler-options

來源

2014-03-30 00:22:03

+11

我認爲，有必要提交一個容器給處理程序，不是嗎？像那樣：'var polygonDrawer = new L.Draw.Polyline（map）;' – schmijos

這似乎不再適用？ –

是的，@schmijos。 –

如何在不使用Leaflet.draw UI的情況下單擊按鈕並啓動新的多邊形

回答

相關問題