Supprimer la fonction sélectionnée Openlayers 3


8

J'utilise openlayers 3 pour créer une application Web qui permet à l'utilisateur de dessiner des entités LineString dans la carte. c'est le code:

var raster = new ol.layer.Tile({
source: new ol.source.MapQuest({ layer: 'sat' })
});


var source = new ol.source.Vector();

var vector = new ol.layer.Vector({
    name: 'my_vectorlayer',
    source: source,
    style: new ol.style.Style({
        stroke: new ol.style.Stroke({
            color: '#ffcc33',
            width: 5
        })
    })
});

var map = new ol.Map({
    layers: [raster, vector],
    target: document.getElementById('map'),
    view: new ol.View2D({
        center: [-11000000, 4600000],
        zoom: 4
    })

});
var draw;
function addInteraction() {
 map.removeInteraction(singleClick);
    draw = new ol.interaction.Draw({
        source: source,
        type: ("LineString")
    });
    map.addInteraction(draw);
}

par le code précédent, je peux ajouter des lignes à la carte. les lignes tracées seront ajoutées au vectorcalque. Je ne veux pas quand l'utilisateur sélectionne l'une des lignes qu'il dessine peut les supprimer. c'est le code de sélection de la fonctionnalité:

var singleClick = new ol.interaction.Select();
function addSelect() {
    map.removeInteraction(draw);
    map.addInteraction(singleClick);
}

et c'est un travail très volontaire, entrez la description de l'image ici

Je veux juste que l'utilisateur puisse supprimer le LineString sélectionné ...


Salut, je modifie la question là-haut
Ahmed Abd Elmoniem

Réponses:


9

Oui, vous pouvez supprimer la fonction sélectionnée.

var draw;
var featureID = 0;
var singleClick;
var selectedFeatureID;

// First some change in this function.

function addInteraction() {
   map.removeInteraction(singleClick);

      draw = new ol.interaction.Draw({
      source: source,
      type: ("LineString")
  });

 // Create drawend event of feature and set ID to feature

  draw.on('drawend', function (event) {
    featureID = featureID + 1;
    event.feature.setProperties({
        'id': featureID
    })
 })
   map.addInteraction(draw);
 }

Modifiez ensuite la fonction sélectionnée comme suit:

 function addSelect() {
    map.removeInteraction(draw);
    singleClick = new ol.interaction.Select();
    map.addInteraction(singleClick);

     singleClick .getFeatures().on('add', function (event) {
     var properties = event.element.getProperties();
     selectedFeatureID = properties.id;       
    });
 }

Appelez ensuite cette fonction sur le bouton SUPPRIMER cliquez

 function removeSelectedFeature() {
   var features = source.getFeatures();
     if (features != null && features.length > 0) {
         for (x in features) {
            var properties = features[x].getProperties();
            console.log(properties);
            var id = properties.id;
            if (id == selectedFeatureID) {
              source.removeFeature(features[x]);
               break;
            }
          }
        }
      }

Avec ce code, vous pouvez supprimer toute fonctionnalité sélectionnée. S'il s'agit d'une ligne, d'un point, d'un polygone, etc.


3
Vous devez définir l'identifiant de la fonctionnalité avec feature.setId(id)et continuerfeature.getId()
Jonatas Walker

0

Premièrement, si vous pouviez me donner plus de détails, je pourrais mieux vous aider à répondre à votre question. Je ne pense pas comprendre parfaitement ce que vous demandez. Voici quelques possibilités.

1) La solution simple mais limitée consiste simplement à utiliser un sélecteur de couche. Quelque chose comme ça . En supposant que vous utilisez un wms comme un géoserveur, vous pouvez utiliser des vues de type SQL pour créer un tas de couches que vous pouvez ajouter ou supprimer. Si vous devez faire quelque chose de simple comme ça, je peux modifier la réponse pour fournir plus de détails.

2) Je ne l' ai pas fait cela avant, mais cela pourrait être quelque chose à regarder dans . Fondamentalement, vous utiliserez ol.format.wfs pour sélectionner et supprimer des fonctionnalités.


J'aurai besoin de la première solution à un autre niveau de mon projet, donc si vous fournissez quelques détails, ce sera génial :)
Ahmed Abd Elmoniem
En utilisant notre site, vous reconnaissez avoir lu et compris notre politique liée aux cookies et notre politique de confidentialité.
Licensed under cc by-sa 3.0 with attribution required.