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

Pour quelqu'un d'expérimenté avec dépliant ou une brochure.tirage plugin:

Je veux lancer le dessin d'un polygone sans l'aide de la barre d'outils de leaflet.draw. J'ai réussi à trouver la propriété qui permet de modifier, sans l'aide de 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 faire pour commencer à dessiner un polygone sans le bouton de barre d'outils. Toute aide serait grandement appréciée!

Merci 🙂

  • J'ai besoin de le comprendre ainsi. Si vous avez trouvé la réponse, veuillez le poster ici, Merci.
  • Je n'ai pas encore trouvé la réponse moi-même.
  • Voir cette question pour une simple démo: stackoverflow.com/questions/22730888/...
InformationsquelleAutor SamEsla | 2013-04-02
  1. 61

    Ce simple code qui 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 notice de la carte et dessiner de contrôle.

    De plonger dans le code source (à l'leaflet.draw-src.js) vous pouvez trouver les fonctions pour 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 ce sera utile pour vous aussi.

    EDIT:
    Le L.EditToolbar.Edit et L.EditToolbar.Delete classes d'exposer les méthodes utiles suivants:

    • enable(): 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
    • Merci s'accoupler, beaucoup apprécié. J'avais renoncé et décidé de dire à l'utilisateur lors de cliquez sur la barre d'outils. Je vais revenir à ce et refactoriser le code de ma page 🙂
    • Si vous voulez savoir comment programmer un marqueur qui peut être édité avec notice.dessiner, voir: github.com/Leaflet/Leaflet.draw/issues/159
    • Est-il possible d'utiliser cette méthode pour créer des polygones à l'aide de différents style? soit un bouton crée un polygone vert, l'autre crée un bleu. Si oui, comment voulez-vous faire?
    • Oui, vous pouvez passer de la 2ème paramètre de L. Tirage au sort.* différents ensembles d'options. Voici la référence pour le paramètre d'option: github.com/Leaflet/Leaflet.draw#draw-handler-options. La propriété, vous devez définir est "shapeOptions"
    • Puis-je l'écouter, cliquer sur les événements à partir du sommet, Sans l'aide de la barre d'outils Dessiner?
    • Épargnant de vie! Seulement bizarre problème est que je ne suis plus en voyant la région lors du dessin d'un polygone.

    InformationsquelleAutor BaCH
  2. 4

    Donc j'ai compris pour les cercles, mais il doit être le même pour les polygones. C'est en fait très simple. J'espère que le code suivant répond à votre question, mais si non, laissez-moi savoir et je peux poster plus d'une idée 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 qui est juste du bruit, mais il devrait vous donner une idée de la façon d'aller à ce sujet. Vous pouvez contrôler la modification comme vous l'avez dit à l'édition.enable()/.disable().

    Assurez-vous de commenter avec toutes les questions. Bonne chance à l'homme.

    • Merci s'accoupler. Très apprécié.
    InformationsquelleAutor Gowiem
  3. 2

    Je pense qu'il vaut la peine de mentionner Jacob Toyes répondre à ce problème. Vous êtes toujours le dessin avec les gestionnaires d' dépliant.tirage - pas directement avec des couches. Si vous souhaitez modifier un calque, vous utilisez le gestionnaire enregistré dans une des couches editing champ comme ça: layer.editing.enable();. Et si vous voulez créer un nouveau calque, vous devez d'abord créer 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();
});

    Maintenant il y a en fait un exemple sur le dépliant.tirage github page: https://github.com/Leaflet/Leaflet.draw/blob/master/examples/edithandlers.html

    Néanmoins, je pense que les gestionnaires ne sont pas bien documentés encore là.

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

    • Hey @schmijos, je n'arrive pas à faire ce travail. J'ai copié ton code, mais quand j'ai terminé le dessin, je ne peux pas le modifier. que dois-je ajouter à votre code afin que je puisse le modifier?
    • Salut @NikaKhurashvili, désolé, je suis totalement en dehors de ce contexte par maintenant. Je suggère que vous vous posez une question à votre propre dire ce que vous avez déjà essayé.
    InformationsquelleAutor schmijos