Dépliant.dessiner la cartographie: Comment lancer la fonction draw sans barre d'outils?

<!-Pour toute personne ayant déjà reçu une notice.tirage plugin:

je veux 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 d'éditer sans utiliser la barre d'outils (layer.editing.enable();) par la recherche 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 grandement appréciée!

Merci :)

27
demandé sur raphael 2013-04-03 01:51:51

3 réponses

ce code simple fonctionne pour moi:

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

il suffit de le mettre dans le onclick gestionnaire de votre bouton personnalisé (ou où vous voulez).

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

se plonger dans le code source (dépliant.tirage au sort-src.js), vous pouvez trouver les fonctions pour dessiner les autres éléments et à les modifier 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 utile aussi.

modifier: Le L.EditToolbar.Edit et L.EditToolbar.Delete les classes exposent les méthodes utiles suivantes:

  • activer(): pour commencer à modifier/supprimer le mode
  • désactiver(): pour revenir au mode standard
  • save(): pour enregistrer les modifications (il tire tirage au sort:édition / tirage:événements supprimés)
  • revertLayers(): pour annuler les modifications apportées
49
répondu BaCH 2013-06-18 15:18:11

Donc j'ai compris pour les cercles, mais il doit être le même pour les polygones. C'est en fait très simple. Espérons que le code suivant réponde à votre question, mais si vous ne me le faites pas 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é beaucoup de cela est juste du bruit, mais il devrait vous donner une idée de la façon de procéder. Vous pouvez contrôler la modification comme vous l'avez dit à l'édition.permettre./)(désactiver.)(

assurez-vous de commenter avec toutes les questions. Bonne chance homme.

4
répondu Gowiem 2013-06-14 15:30:39

je pense qu'il est intéressant de mentionner les Jacob Toyes answer à ce problème. Vous dessinez toujours avec des manipulateurs en dépliant.tirage - pas directement avec des couches. Si vous souhaitez modifier un calque, vous utilisez le gestionnaire enregistré dans une des couches editing comme ça: layer.editing.enable();. Et si vous voulez créer un nouveau calque, vous devez d'abord créer un nouveau gestionnaire de:

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

a l'heure actuelle, il y a un exemple sur le dépliant.tirage page github: https://github.com/Leaflet/Leaflet.draw/blob/master/examples/edithandlers.html

néanmoins, je pense que les maîtres-chiens ne sont pas encore bien documentés.

Comme indiqué ci-dessus, L.EditToolbar.Edit et L.EditToolbar.Delete exposez 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
répondu schmijos 2017-05-23 10:31:09