OpenLayers 3: Das Auswahlsymbol "Blauer Punkt" wird entfernt

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:

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:

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

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:

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:

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?

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 (!)