Suite

OpenLayers 3 dessine un polygone pour sélectionner des entités


Mettre à jour

J'ai maintenant ce travail et ce plunk montre un exemple de travail.


J'ai un ensemble de points sur une couche vectorielle et j'autorise l'utilisateur à dessiner un polygone sur une autre couche de la carte. Je veux sélectionner tous les points à l'intérieur du polygone.

J'ai réussi à ce que cela fonctionne, mais seulement temporairement. Lorsque l'utilisateur a terminé le polygone, les points sont sélectionnés mais immédiatement désélectionnés à nouveau. Je ne peux pas comprendre pourquoi.

J'ai fait la fonction en référençant un exemple : DragBox

Lorsque je remplace mon polygone par une dragbox, les sélections persistent. Mais lorsque j'utilise interaction.Draw pour créer un polygone, la sélection ne persiste pas.

Le code javascript est ci-dessous, et voici un aperçu de la fonctionnalité.

carte var; //Ajouter une couche de carte var baseLayer = new ol.layer.Tile({ source : new ol.source.OSM() }); //Ajouter une vue var view = new ol.View({ //la projection concerne la façon dont nous représentons une chose globale sur une chose plate. projection : 'EPSG:900913', center : ol.proj.fromLonLat([-2.5,51.1 ]), zoom:4, }); //Ajouter une couche d'entités ponctuelles var pointsLayer = new ol.layer.Vector({ title: 'random points', source : new ol.source.Vector({ url : './assets/Points.json', format : new ol.format.GeoJSON() }) }); //initialise la carte (appelée à la fin) function init(){ map = new ol.Map({ target : 'map', //le type de rendu que nous voulons utiliser. renderer : 'canvas', view : view } ); map.addLayer(baseLayer); map.addLayer(pointsLayer); } init(); //////////// AJOUTER UNE SÉLECTION //ajouter ol.collection pour contenir toutes les fonctionnalités sélectionnées var select = new ol.interaction.Select(); map.addInteraction(sélectionner); var selectedFeatures = select.getFeatures(); //////////// AJOUTER UN DESSIN // Ajouter un vecteur de dessin source var drawingSource = new ol.source.Vector(); //Ajouter un calque de dessin var drawingLayer = new ol.layer.Vector({ source: drawingSource }); map.addLayer(drawingLayer); //déclarer les interactions globalement afin que nous puissions y attacher des écouteurs plus tard. tirage au sort ; var modifier; // Dessin d'interaction draw = new ol.interaction.Draw({ source : drawingSource, type : 'Polygon', //ne dessine que lorsque Ctrl est enfoncé. condition : ol.events.condition.platformModifierKeyOnly }); map.addInteraction(dessiner); draw.on('drawend', function(e) { // les entités qui coupent la boîte sont ajoutées à la collection des // entités sélectionnées, et leurs noms sont affichés dans "info" // div var extend = e.feature .getGeometry().getExtent(); pointsLayer.getSource().forEachFeatureIntersectingExtent(extent, function(feature) { selectedFeatures.push(feature); }); }); //////////// FONCTIONS DE SUPPORT //transforme le curseur en pointeur s'il se trouve sur une image. map.on('pointermove',function(evt){ if(evt.dragging){ return; } var pixel = map.getEventPixel(evt.originalEvent); //appelé avec pixel, callback. Détecte les calques qui ont une valeur de couleur //à un pixel.var hit = map.forEachFeatureAtPixel(pixel,function(feature){ return true; }); map.getTargetElement().style.cursor = hit? 'pointer' :"; });

Cela se produit uniquement lorsque vous cliquez sur le dernier sommet de votre polygone pour fermer le polygone. Si vous double-cliquez pour le fermer, aucune erreur de ce type ne se produit. Le problème vient du fait que vous avez des interactions de sélection et de dessin actives en même temps. Ainsi, un simple clic pour fermer le polygone déclenche l'action de désélection de l'interaction de sélection. Pour surmonter le problème, procédez comme suit

  1. créer un événement drawstart et désactiver l'interaction de sélection

    draw.on ('drawstart',function(e) { select.setActive(false); })
  2. dans l'événement drawend que vous avez déjà, réactivez l'interaction de sélection avec un délai de 300 ms. (251 ms est le temps nécessaire pour distinguer le simple clic du double clic)

    draw.on('drawend', function(e) { e.preventDefault(); setTimeout(function(){ select.setActive(true); }, 300);

Eh bien, en fait, je pense que cela fonctionnera si vous définissez leétatoption de votre choix pour :ol.events.condition.jamais. Ensuite, il ne déclenchera pas l'événement click (condition par défaut dans singleClick comme vous pouvez le voir sur l'API sélectionnée). Le code:

var select = new ol.interaction.Select({ condition: ol.events.condition.never });


Voir la vidéo: OpenLayers Add Vector Layer to Web Map (Octobre 2021).