Mapowanie Leaflet.draw: Jak zainicjować funkcję rysowania bez paska narzędzi?

Question

Dla każdego, kto ma do czynienia z ulotką lub ulotką. Wtyczka do wtyczki:

Chcę rozpocząć rysowanie wielokąta bez użycia paska narzędzi od leaflet.draw. Udało mi się znaleźć właściwość, która umożliwia edycję bez użycia paska narzędzi (layer.editing.enable();) przez wyszukiwanie w Internecie (nie ma go w głównej dokumentacji). Nie mogę znaleźć sposobu na rozpoczęcie rysowania wielokąta bez przycisku paska narzędzi. Każda pomoc będzie doceniona!

Dziękuję :)

Answer 1

Ten prosty kod działa dla mnie:

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

Wystarczy umieścić go na swojej obsługi onclick przycisku niestandardowego (lub gdziekolwiek chcesz).

Zmienne map i drawControl to odniesienia do mapy ulotek i kontroli rysowania.

Nurkowanie w kodzie źródłowym (leaflet.draw-src.js) umożliwia wyszukanie funkcji rysowania innych elementów oraz ich edytowanie lub usuwanie.

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

Mam nadzieję, że przyda się to również Państwu.

EDIT: W L.EditToolbar.Edit i L.EditToolbar.Delete klas wystawiać następujące użyteczne metody:

• włączyć(), aby rozpocząć edycję/usuwanie trybu
• wyłącza(), aby powrócić do trybu standardowego
• Zapisz(): aby zapisać zmiany (uruchamia rysowanie: edytowane/rysuj: usunięte zdarzenia)
• revertLayers(): cofanie zmian

Answer 2

Tak już zdobione to dla środowisk, ale powinna być taka sama dla wielokątów. To naprawdę proste. Mam nadzieję, że poniższy kod odpowiada na twoje pytanie, ale jeśli nie, daj mi znać, a ja mogę zamieścić więcej informacji na ten temat.

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

Przepraszam, że to po prostu hałas, ale powinien dać ci pomysł, jak sobie z tym poradzić. Możesz kontrolować edycję tak, jak powiedziałeś za pomocą edit.enable() /. Disable().

Pamiętaj, aby skomentować wszelkie pytania. Powodzenia.

Answer 3

Myślę, że warto wspomnieć o tym problemie z Jacob Toyes answer. Zawsze rysujesz z obsługą w leaflet.draw - nie bezpośrednio z warstwami. Jeśli chcesz edytować warstwę, użyj programu obsługi zapisanego w polu warstw editing w następujący sposób: layer.editing.enable();. A jeśli chcesz utworzyć nową warstwę, należy najpierw utworzyć nowy 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(); 
}); 

Teraz tam rzeczywiście jest przykładem na leaflet.draw stronie github: https://github.com/Leaflet/Leaflet.draw/blob/master/examples/edithandlers.html

Niemniej myślę koparki nie są jeszcze dobrze udokumentowane.

Jak wspomniano powyżej, L.EditToolbar.Edit i L.EditToolbar.Delete wystawiać ciekawe metody i zdarzenia jak editstart i editstop. Nie wspomina się, że te dwie klasy pochodzą z L.Handler.