web-dev-qa-db-fra.com

Cartographie Leaflet.draw: Comment lancer la fonction de dessin sans barre d'outils?

Pour toute personne expérimentée avec le plugin leaflet ou leaflet.draw:

Je souhaite lancer le dessin d'un polygone sans utiliser la barre d'outils de leaflet.draw. J'ai réussi à trouver la propriété qui permet de modifier sans utiliser la barre d'outils (layer.editing.enable();) en recherchant en ligne (ce n'est pas dans la documentation principale). Je n'arrive pas à trouver comment commencer à dessiner un polygone sans le bouton de la barre d'outils. Toute aide serait très appréciée!

Merci :)

javascriptleafletgisleaflet.draw
37
SamEsla

Ce code simple fonctionne pour moi:

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

Mettez-le simplement dans le gestionnaire onclick de votre bouton personnalisé (ou où vous voulez).

Les variables map et drawControl sont des références à votre carte de dépliant et contrôle de dessin.

En plongeant dans le code source (leaflet.draw-src.js), vous pouvez trouver les fonctions pour dessiner les autres éléments et pour les éditer ou les supprimer.

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

J'espère que cela vous sera également utile.

EDIT: le L.EditToolbar.Edit et L.EditToolbar.Delete les classes présentent les méthodes utiles suivantes:

  • enable (): pour démarrer le mode édition/suppression
  • disable (): pour revenir au mode standard
  • save (): pour enregistrer les modifications (il déclenche draw: édité/draw: événements supprimés)
  • revertLayers (): pour annuler les modifications
62
BaCH

J'ai donc compris cela pour les cercles, mais il devrait en être de même pour les polygones. C'est vraiment très simple. Si tout va bien le code suivant répond à votre question, mais sinon faites le moi savoir et je peux poster plus à un Gist ou quelque chose.

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

Désolé, ce n'est que du bruit, mais cela devrait vous donner une idée de la façon de procéder. Vous pouvez contrôler l'édition comme vous l'avez dit avec edit.enable () /. Disable ().

Assurez-vous de commenter vos questions. Bonne chance, mec.

4
Gowiem

Je pense qu'il vaut la peine de mentionner réponse de Jacob Toyes à ce problème. Vous dessinez toujours avec des gestionnaires dans leaflet.draw - pas directement avec des calques. Si vous souhaitez éditer un calque, vous utilisez le gestionnaire enregistré dans un champ de calques editing comme celui-ci: layer.editing.enable();. Et si vous voulez créer un nouveau calque, vous créez d'abord un nouveau gestionnaire:

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

À présent, il y a en fait un exemple sur la page github leaflet.draw : https://github.com/Leaflet/Leaflet.draw /blob/master/examples/edithandlers.html

Néanmoins, je pense que les gestionnaires n'y sont pas encore bien documentés.

Comme indiqué ci-dessus, L.EditToolbar.Edit et L.EditToolbar.Delete expose des méthodes et des événements intéressants comme editstart et editstop . Ce qui n'est pas mentionné, c'est que ces deux classes elles-mêmes sont dérivées de L.Handler.

2
schmijos