So klicken Sie auf eine Schaltfläche und starten ein neues Polygon, ohne die Leaflet.draw UI zu verwenden

Worum ich mich ärgere ist, wie man auf eine Schaltfläche klickt und ein neues Polygon ohne Verwendung der Leaflet.draw UI startet. z.B.So klicken Sie auf eine Schaltfläche und starten ein neues Polygon, ohne die Leaflet.draw UI zu verwenden

$('#draw_poly').click(function() { 


});

Ich bin in der Lage, ein vorhandenes Polygon in den Bearbeitungsmodus kein Problem zu setzen.

$('.edit_polygon').click(function() { 
    var name = $(this).text(); 
    geojson_layer.eachLayer(function (layer) { 
     if (name == layer.feature.properties.name){     
      layer.editing.enable(); 
     }      
    }); 
    return false; 
});

Danke an Jacob Toye für die Unterstützung. Ich habe eine kleine Demo gemacht.

<!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>

Quelle

2014-03-29 Ground Hog

Um zu beginnen, eine Form zu zeichnen, ist sehr geradlinig. Sie erstellen einen Handler für den gewünschten Formtyp und aktivieren dann diesen Handler.

z. für Polylinienzeichnung würden Sie tun:

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

Überprüfen Sie die Dokumente aus für weitere Informationen:

"ziehen: created" event: https://github.com/Leaflet/Leaflet.draw#drawcreated Draw Handler Optionen: https://github.com/Leaflet/Leaflet.draw#draw-handler-options

Quelle

2014-03-30 00:22:03

+11

Ich denke, es notwendig ist, zu einen Container an den Handler übergeben, nicht wahr? So, dann: 'var polygonDrawer = new L.Draw.Polyline (map);' – schmijos

Das scheint nicht mehr zu funktionieren? –

ja, @schmijos. –

So klicken Sie auf eine Schaltfläche und starten ein neues Polygon, ohne die Leaflet.draw UI zu verwenden

Antwort

Verwandte Themen