Suite

Annuler le dernier point lors du dessin de la chaîne de ligne dans OpenLayers 3?


J'aimerais pouvoir tracer une ligne et pouvoir annuler le dernier point dessiné lorsque la touche ESC est enfoncée.

J'ai utilisé ce code lorsque j'ai écrit mon application pour la première fois :

// crée l'interaction draw_interaction = new ol.interaction.Draw({ source : vector_layer.getSource(), type : /** @type {ol.geom.GeometryType} */ ($geom_type.val()) }); // l'ajoute à la carte map.addInteraction(draw_interaction); // quand une nouvelle entité a été dessinée… draw_interaction.on('drawstart', function(evt) { var feature = evt.feature; var geom = feature.getGeometry(); document.addEventListener('keyup', function() { if (event.keyCode === 27) { if (geom.getType() === "LineString") { var coords = geom.getCoordinates(); var len = coords.length; console.log("undo" ); if (len > 1) { geom.setCoordinates(geom.getCoordinates().slice(0, len - 1)); } } } }); });

Vous pouvez voir une version en direct sur codepen en suivant ce lien :

http://codepen.io/anon/pen/waPXyG

Mon problème est que lorsque je suis passé de 3.5.0 à 3.6.0, le comportement a changé :

http://codepen.io/anon/pen/LVOrrq

Comme vous pouvez le voir sur l'exemple en direct, lors de l'annulation (en appuyant sur ESC), cela semble fonctionner, mais lorsque vous souhaitez ajouter un nouveau point à la chaîne de lignes, les points que j'ai supprimés sont remis en place. Ressemble à un comportement de mise en cache ajouté à 3.6.0

J'espère que quelqu'un pourra m'aider, c'est soit une régression soit une modification d'API que je n'ai pas remarquée dans le change log.


Depuis OpenLayers 3.9.0, c'est aussi simple que d'utiliser lesupprimerDernierPointméthode de laDessinerInteraction. Vous pouvez donc faire quelque chose comme ceci :

document.addEventListener('keydown', function(e) { if (e.which == 27) draw_interaction.removeLastPoint() });

Depuis la v3.6.0, ungéométrieFonctionest utilisé pour retourner la géométrie résultant du dessin avecol.interaction.Dessiner. CegéométrieFonctionest l'endroit où vous modifiez la géométrie pendant le dessin. Vous pouvez donc définir un indicateur d'annulation sur true lorsque l'utilisateur appuie sur la touche Échap. Dans legéométrieFonctionvous modifiez les coordonnées lorsque le drapeau a été défini :

var annuler = faux ; // définissez ceci sur true dans le gestionnaire de touche Esc var draw = new ol.interaction.Draw({ //… geometryFunction: function(coords, geom) { if (!geom) { geom = new ol.geom.LineString(null ); } if (undo) { if (coords.length > 1) { coords.pop(); } undo = false; } geom.setCoordinates(coords); return geom; } });

J'ai fait quelques tests et cela peut être fait avec quelque chose comme ceci:

Définissez un écouteur personnalisé pour votre interaction de dessin.

draw.set('escKey',");

Définissez une variable globale si le dessin commence et stockez la fonction créée :

draw.on('drawstart', function(evt){ dessin = true; drawing_feature = evt.feature; });

Définissez un écouteur keydown sur le document et si le dessin est actif, déclenchez votre événement personnalisé :

var keydown = function(evt){ var charCode = (evt.which) ? evt.which : evt.keyCode; if (charCode === 27 && drawing === true){ //touche esc //dispatch event draw.set('escKey', Math.random()); } } ; document.addEventListener('keydown', keydown, false);

Et puis découpez les coordonnées lineString :

draw.on('change:escKey', function(evt){ var geom = drawing_feature.getGeometry(); var coords = geom.getCoordinates(); var len = coords.length; if (len > 1) { var new_coordinates = coords.slice (0, len - 1) ; geom.setCoordinates(new_coordinates); // ceci est juste visuel // ceci (target.e) est l'équivalent de this.sketchCoords_ en mode débogage evt.target.e = new_coordinates ; } });

Maintenant, remarquez cecievt.cible.e, ou alorsthis.sketchCoords_dans ol-debug.js. Il s'agit d'un tableau de coordonnées temporaire/interne, il y a peut-être une meilleure façon de le faire. J'ai essayé beaucoup d'autres options et c'était le seul moyen.

Peut-être qu'un développeur principal peut nous montrer une meilleure approche.

Oh oui, une démo fonctionnelle.


Voir la vidéo: Create Maps with Vector Tiles. OpenLayers. Mapbox GL JS (Octobre 2021).