Dépliant.dessiner la cartographie: Comment lancer la fonction draw sans barre d'outils?
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 :)
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
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.
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
.