OpenLayers 3: se débarrasser de l'icône de sélection «point bleu»

Je travaille sur un outil de numérisation.

Il y a maintenant quatre boutons:

• ajouter un point
• ajouter une ligne
• ajouter un polygone
• supprimer la géométrie

L'utilisateur commence toujours par dessiner d'abord des géométries. J'utilise l'interaction Draw ( ol.interaction.Draw ) et les géométries sont ajoutées à une collection ( ol.Collection ).

Jusqu'ici tout va bien. L'utilisateur peut maintenant décider de supprimer certaines des géométries dessinées en cliquant dessus.

Voici un exemple:

Lorsque vous cliquez sur le bouton «supprimer la géométrie», puis:

• le dessin est supprimé pour le désactiver
• une interaction Select est créée (ol.interaction.Select) pour sélectionner la géométrie à supprimer
• lorsqu'une fonctionnalité est sélectionnée, son ID est comparé à tous les ID des autres fonctionnalités dans une boucle, et une fois l'ID correct trouvé, cette fonctionnalité est supprimée.

La logique fonctionne, mais il est extrêmement difficile de supprimer un point ou une ligne en raison du point bleu qui apparaît lors du survol, ce qui rend presque impossible de cliquer sur les géométries.

Par exemple:

Le point jaune suivant ne sera pas supprimé car le point bleu gêne:

Si je déplace le curseur un peu en dessous du point, la fonction sera supprimée:

La ligne est presque impossible à supprimer car le point bleu se déplacera avec le curseur lorsque le curseur se déplace le long de la ligne:

Pour le polygone, cela fonctionne bien, car le point bleu n'est affiché que lorsque vous survolez le bord de la géométrie, mais si vous l'ignorez et cliquez n'importe où dans le remplissage, la géométrie sera également supprimée:

Comment puis-je changer l'apparence de ce point bleu? Je serais d'accord pour le rejeter entièrement. J'ai essayé d'ajouter un style à la Select Interaction mais cela n'a aucun effet. Il ajoutera simplement un autre style au-dessus du point bleu.

EDIT : un moyen de résoudre ce problème serait peut-être de regarder à travers ce point bleu. Existe-t-il un moyen de cliquer / sélectionner et de voir ce qui se trouve derrière le point bleu?

Vous devez définir un style qui sera utilisé par votre interaction de sélection. C'est le mien par exemple:

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

Afin d'appliquer le style correct, nous avons besoin d'une fonction de style pour vérifier les fonctionnalités:

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

Une fois défini, cela peut être ajouté à l'objet d'interaction Sélectionner comme ceci:

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

J'ai essayé de simplifier cela à partir de mon propre code mais j'espère ne pas avoir fait d'erreur (!)