Entfernen der ausgewählten Funktion Openlayers 3


8

Ich verwende Openlayers 3, um eine Webanwendung zu erstellen, mit der Benutzer LineString-Funktionen in der Karte zeichnen können. Das ist der 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);
}

Mit dem vorherigen Code kann ich Linien in die Karte einfügen. Die gezeichneten Linien werden der vectorEbene hinzugefügt . Ich werde nicht, wenn der Benutzer eine der Linien auswählt, die er zeichnet, um sie zu entfernen. Dies ist der Code zur Auswahl der Funktion:

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

und es ist Arbeit sehr wird, Geben Sie hier die Bildbeschreibung ein

Ich möchte nur, dass der Benutzer den ausgewählten LineString entfernen kann ...


Hallo, ich bearbeite die Frage dort oben
Ahmed Abd Elmoniem

Antworten:


9

Ja, Sie können die ausgewählte Funktion entfernen.

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);
 }

Ändern Sie dann die ausgewählte Funktion wie folgt:

 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;       
    });
 }

Rufen Sie diese Funktion dann beim Klicken auf die Schaltfläche ENTFERNEN auf

 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;
            }
          }
        }
      }

Mit diesem Code können Sie alle ausgewählten Funktionen entfernen. Wenn es sich um Linie, Punkt, Polygon usw. handelt.


3
Sie sollten Feature-ID mit setzen feature.setId(id)und erhalten mitfeature.getId()
Jonatas Walker

0

Wenn Sie mir zunächst weitere Einzelheiten mitteilen könnten, könnte ich Ihnen besser bei der Beantwortung Ihrer Frage helfen. Ich glaube nicht, dass ich vollständig verstehe, was Sie fragen. Hier sind einige Möglichkeiten.

1) Die einfache, aber begrenzte Lösung besteht darin, nur einen Ebenenumschalter zu verwenden. So etwas wie diese . Angenommen, Sie verwenden einen wms-ähnlichen Geoserver, können Sie SQL-ähnliche Ansichten verwenden, um eine Reihe von Ebenen zu erstellen, die Sie hinzufügen oder entfernen können. Wenn Sie so etwas Einfaches tun müssen, kann ich die Antwort bearbeiten, um weitere Details bereitzustellen.

2) Ich habe das noch nie gemacht, aber dies könnte etwas sein , zu sehen in . Grundsätzlich verwenden Sie ol.format.wfs, um Features auszuwählen und zu löschen.


Ich werde die erste Lösung auf einer anderen Ebene in meinem Projekt benötigen. Wenn Sie also einige Details
angeben
Durch die Nutzung unserer Website bestätigen Sie, dass Sie unsere Cookie-Richtlinie und Datenschutzrichtlinie gelesen und verstanden haben.
Licensed under cc by-sa 3.0 with attribution required.