OpenLayers 3: Das Auswahlsymbol "Blauer Punkt" wird entfernt

9

Ich arbeite an einem Digitalisierungswerkzeug.

Ab sofort gibt es vier Schaltflächen:

  • Punkt hinzufügen
  • Zeile hinzufügen
  • Polygon hinzufügen
  • Geometrie entfernen

Der Benutzer beginnt immer damit, zuerst einige Geometrien zu zeichnen. Ich verwende die Draw-Interaktion ( ol.interaction.Draw ) und die Geometrien werden einer Sammlung ( ol.Collection ) hinzugefügt .

So weit, ist es gut. Jetzt kann der Benutzer entscheiden, einige der gezeichneten Geometrien zu entfernen, indem er darauf klickt.

Hier ist ein Beispiel:

Geben Sie hier die Bildbeschreibung ein

Wenn Sie auf die Schaltfläche "Geometrie entfernen" klicken, gehen Sie wie folgt vor:

  • Die Zeichnung wird entfernt, um sie zu deaktivieren
  • Eine Auswahlinteraktion wird erstellt (ol.interaction.Select), um die Geometrie auszuwählen, um sie zu entfernen
  • Wenn ein Feature ausgewählt wird, wird seine ID mit den IDs aller anderen Features in einer Schleife verglichen. Sobald die richtige ID gefunden wurde, wird dieses Feature entfernt.

Die Logik funktioniert, aber es ist äußerst schwierig, einen Punkt oder eine Linie zu löschen, da beim Schweben ein blauer Punkt angezeigt wird, der das Klicken auf die Geometrien nahezu unmöglich macht.

Zum Beispiel:

Der folgende gelbe Punkt wird nicht entfernt, da der blaue Punkt im Weg ist:

Geben Sie hier die Bildbeschreibung ein

Wenn ich den Cursor ein wenig unter den Punkt bewege, wird die Funktion entfernt:

Geben Sie hier die Bildbeschreibung ein

Es ist fast unmöglich, die Linie zu entfernen, da sich der blaue Punkt mit dem Cursor bewegt, während sich der Cursor entlang der Linie bewegt:

Geben Sie hier die Bildbeschreibung ein

Für das Polygon funktioniert es einwandfrei, da der blaue Punkt nur angezeigt wird, wenn Sie mit der Maus über den Rand der Geometrie fahren. Wenn Sie dies jedoch ignorieren und auf eine beliebige Stelle innerhalb der Füllung klicken, wird auch die Geometrie entfernt:

Geben Sie hier die Bildbeschreibung ein

Wie kann ich das Erscheinungsbild dieses blauen Punkts ändern? Ich wäre in Ordnung, wenn ich es komplett verwerfen würde. Ich habe versucht, der Select-Interaktion einen Stil hinzuzufügen, aber das hat keine Auswirkung. Es wird nur ein weiterer Stil über dem blauen Punkt hinzugefügt.

EDIT : Ein Weg, dies zu lösen, wäre vielleicht, durch diesen blauen Punkt zu schauen . Gibt es eine Möglichkeit zu klicken / auszuwählen und zu sehen, was sich hinter dem blauen Punkt befindet?

BritishSteel
quelle
Wenn Ihr Problem darin besteht, die Funktion auszuwählen (nicht so sehr über das Styling), sollten Sie ol.interaction.Snap verwenden ... Ist dies auch das, wonach Sie suchen? openlayers.org/en/latest/examples/snap.html
Keenan Gebze
Verwenden Sie nur das Einrasten anstelle der Auswahl, aber der blaue Punkt wird auch angezeigt. Und wie würde ich dann die Funktion auswählen, an der sie ausgerichtet ist? Müsste ich nicht immer eine Auswahlinteraktion verwenden?
BritishSteel

Antworten:

4

Sie müssen einen Stil definieren, der von Ihrer ausgewählten Interaktion verwendet wird. Das ist meins zum Beispiel:

selectedStyle = {
  LineString: new ol.style.Style({
  stroke: new ol.style.Stroke({
      color: 'blue',
      width: 8
  })
  }),
  Polygon: new ol.style.Style({
  stroke: new ol.style.Stroke({
      color: 'blue',
      width: 4
  }),
  fill: new ol.style.Fill({
      color: 'rgba(0, 0, 255, 0.1)'
  })
  }),
  Point: new ol.style.Style({
  image: new ol.style.RegularShape({
      fill: new ol.style.Fill({
          color: 'rgba(255, 255, 255, 0.5)'
      }),
      stroke: new ol.style.Stroke({
          color: 'red',
          width: 1
      }),
      points: 4,
      radius: 8,
      angle: Math.PI / 4
  })
})
}

Um den richtigen Stil anzuwenden, benötigen wir eine Stilfunktion, um die Funktionen zu überprüfen:

var selectedStyleFunction = function (feature, resolution) {

var featureStyleFunction = feature.getStyleFunction();
if (featureStyleFunction) {
    return featureStyleFunction.call(feature, resolution);
} else {
    var type = feature.getGeometry().getType();
    return selectedStyle[type];
 }
}

Nach der Definition kann dies wie folgt zum Interaktionsobjekt "Auswählen" hinzugefügt werden:

    session.interactions.select = new ol.interaction.Select({
    style: selectedStyleFunction,
    multi: true
});

Ich habe versucht, dies aus meinem eigenen Code heraus zu vereinfachen, aber hoffentlich keinen Fehler gemacht (!)

dvmac01
quelle
Hier erfahren Sie, wie Sie das Auswahlsymbol ändern können, von dem ich dachte, dass es die Lösung für mein Problem ist. Die meisten Leute werden diese Frage lesen, um dies herauszufinden. Deshalb werde ich sie als die richtige Antwort markieren :-). Und es hat mir geholfen, mein Problem herauszufinden ... endlich! Das eigentliche Problem war: Ich habe die Modify-Interaktion, die ich während der Bearbeitung aktiviert habe, nicht entfernt! Obwohl ich meine Zeichnung deaktiviert habe, blieb die Änderung erhalten, und daher wird das Symbol nicht entfernt.
BritishSteel
1
Ich habe auch einige Klammern korrigiert und das Objekt 'Farben' in einen Wert geändert, damit die Benutzer dies kopieren können, ohne etwas anpassen zu müssen. Nochmals eine Million Dank!
BritishSteel
Keine Probs, gerne helfen;)
dvmac01