Leaflet.Draw Mapping: Wie die Zeichenfunktion ohne Symbolleiste zu initiieren?

Question

Für jeden, der Erfahrung mit Broschüren oder Broschüren hat.Zeichnung:

Ich möchte beginnen, ein Polygon zu zeichnen, ohne die Symbolleiste von leaflet.draw zu verwenden. Ich habe es geschafft, die Eigenschaft zu finden, die das Bearbeiten ohne die Verwendung der Symbolleiste (layer.editing.enable();) ermöglicht, indem ich online suche (es ist nicht in der Hauptdokumentation). Ich kann nicht finden, wie man beginnt, ein Polygon ohne die Symbolleistenschaltfläche zu zeichnen. Jede Hilfe würde sehr geschätzt werden!

Danke :)

Answer 1

Dieser einfache Code funktioniert für mich:

new L.Draw.Polyline(map, drawControl.options.polyline).enable(); 

es nur die Onclick-Handler Ihrer benutzerdefinierten Schaltfläche setzen in (oder wo immer Sie wollen).

Die Variablen map und drawControl sind Verweise auf Ihre Merkblatt- und Zeichensteuerung.

Eintauchen in den Quellcode (leaflet.draw-src.js) Sie können die Funktionen finden, um die anderen Elemente zu zeichnen und zu bearbeiten oder zu löschen.

new L.Draw.Polygon(map, drawControl.options.polygon).enable() 
new L.Draw.Rectangle(map, drawControl.options.rectangle).enable() 
new L.Draw.Circle(map, drawControl.options.circle).enable() 
new L.Draw.Marker(map, drawControl.options.marker).enable() 

new L.EditToolbar.Edit(map, { 
       featureGroup: drawControl.options.featureGroup, 
       selectedPathOptions: drawControl.options.edit.selectedPathOptions 
      }) 
new L.EditToolbar.Delete(map, { 
       featureGroup: drawControl.options.featureGroup 
      }) 

Ich hoffe, dass dies auch für Sie nützlich sein wird.

EDIT: Die L.EditToolbar.Edit und L.EditToolbar.Delete Klassen aussetzen folgende nützliche Methoden:

• ermöglichen(): bearbeiten starten/Löschen Modus
• disable(): Standardmodus zurückzukehren
• speichern(): Änderungen speichern (es feuert ziehen: bearbeitet/zeichnen: gelöscht Ereignisse)
• revertLayers(): Änderungen rückgängig machen

Answer 2

Also habe ich das für Kreise herausgefunden, aber es sollte für Polygone sein. Es ist wirklich sehr einfach. Hoffentlich beantwortet der folgende Code Ihre Frage, aber wenn nicht, lassen Sie es mich wissen und ich kann mehr auf einen Kern oder etwas posten.

// Creates the circle on the map for the given latLng and Radius 
// If the createdWithAddress flag is true, the circle will not update 
// it's address according to its position. 
createCircle: function(latLng, radius, createdWithAddress) { 
if (!this.circle) { 
    var self = this, 
     centerIcon, 
     centerMarker; 

    centerIcon = new L.Icon({ 
    iconUrl: '/assets/location_pin_24px.png', 
    iconSize: [24, 24], 
    iconAnchor: [12, 24], 
    shadowUrl: '/assets/marker-shadow.png', 
    shadowSize: [20, 20], 
    shadowAnchor:[6, 20] 
    }) 

    // Setup the options for the circle -> Override icons, immediately editable 
    options = { 
    stroke: true, 
    color: '#333333', 
    opacity: 1.0, 
    weight: 4, 
    fillColor: '#FFFFFF', 
    moveIcon: centerIcon, 
    resizeIcon: new L.Icon({ 
     iconUrl: '/assets/radius_handle_18px.png', 
     iconSize: [12, 12], 
     iconAnchor: [0,0] 
    }) 
    } 

    if (someConfigVarYouDontNeedToKnow) { 
    options.editable = false 
    centerMarker = new L.Marker(latLng, { icon:centerIcon }) 
    } else { 
    options.editable = true 
    } 

    // Create our location circle 
    // NOTE: I believe I had to modify Leaflet or Leaflet.draw to allow for passing in 
    // options, but you can make it editable with circle.editing.enable() 
    this.circle = L.circle([latLng.lat, latLng.lng], radius, options) 

    // Add event handlers to update the location 
    this.circle.on('add', function() { 
    if (!createdWithAddress) { 
     self.reverseGeocode(this.getLatLng()) 
    } 
    self.updateCircleLocation(this.getLatLng(), this.getRadius()) 
    self.updateMapView() 
    })    
    this.circle.on('edit', function() { 
    if (self.convertLatLngToString(this.getLatLng()) !== self.getLocationLatLng()) { 
     self.reverseGeocode(this.getLatLng()) 
    } 
    self.updateCircleLocation(this.getLatLng(), this.getRadius()) 
    self.updateMapView() 
    }) 

    this.map.addLayer(this.circle) 
    if (centerMarker) { 
    centerMarker.addTo(this.map) 
    this.circle.redraw() 
    centerMarker.update() 
    } 
} 
}, 

Entschuldigen Sie viel davon ist nur Lärm, aber es sollte Ihnen eine Idee geben, wie man das macht. Mit editing.enable() /. Disable() können Sie die Bearbeitung so steuern, wie Sie es gesagt haben.

Achten Sie darauf, mit Fragen zu kommentieren. Viel Glück Mann.

Answer 3

Ich denke, es ist erwähnenswert Jacob Toyes answer für dieses Problem. Sie zeichnen immer mit Handlern in leaflet.draw - nicht direkt mit Ebenen. Wenn Sie einen Layer bearbeiten möchten, verwenden Sie den in einem Layer editing gespeicherten Handler wie folgt: layer.editing.enable();. Und wenn Sie eine neue Ebene erstellen möchten, erstellen Sie zunächst einen neuen Handler:

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

Mittlerweile gibt tatsächlich ein Beispiel auf der leaflet.draw Github Seite: https://github.com/Leaflet/Leaflet.draw/blob/master/examples/edithandlers.html

Trotzdem denke ich, Handler sind dort noch nicht gut dokumentiert.

Wie oben erwähnt, L.EditToolbar.Edit und L.EditToolbar.Delete aussetzen interessante Methoden und Ereignisse wie editstart und editstop. Was nicht erwähnt wird, ist, dass diese zwei Klassen selbst von L.Handler abgeleitet sind.