OpenLayers 3: deshacerse del icono de selección 'punto azul'

Estoy trabajando en una herramienta de digitalización.

Hay cuatro botones a partir de ahora:

• agregar punto
• añadir línea
• agregar polígono
• eliminar geometría

El usuario siempre comienza dibujando primero algunas geometrías. Estoy usando la interacción Dibujar ( ol.interaction.Draw ) y las geometrías se agregan a una Colección ( ol.Collection ).

Hasta aquí todo bien. Ahora el usuario puede decidir eliminar algunas de las geometrías dibujadas haciendo clic en ellas.

Aquí hay un ejemplo:

Cuando se hace clic en el botón 'eliminar geometría', entonces:

• se elimina el dibujo para desactivarlo
• Se crea una interacción Seleccionar (ol.interaction.Select) para seleccionar la geometría para eliminarla
• cuando se selecciona una característica, su ID se compara con todas las ID de las demás características en un bucle, y una vez que se encuentra la ID correcta, esa característica se elimina.

La lógica funciona, pero es extremadamente difícil eliminar un punto o una línea debido al punto azul que se muestra al desplazarse, lo que hace que sea casi imposible hacer clic en las geometrías.

Por ejemplo:

El siguiente punto amarillo no se eliminará ya que el punto azul está en el camino:

Si muevo el cursor un poco debajo del punto, la función se eliminará:

La línea es casi imposible de eliminar ya que el punto azul se moverá con el cursor a medida que el cursor se mueve a lo largo de la línea:

Para el polígono funciona bien, ya que el punto azul solo se muestra al pasar el cursor sobre el borde de la geometría, pero si lo ignora y hace clic en cualquier parte del relleno, la geometría también se eliminará:

¿Cómo puedo cambiar la apariencia de ese punto azul? Estaría bien descartarlo por completo. Intenté agregar un estilo a la interacción Seleccionar, pero eso no tiene ningún efecto. Simplemente agregará otro estilo en la parte superior del punto azul.

EDITAR : una forma de resolver esto, tal vez, sería mirar a través de ese punto azul. ¿Hay alguna forma de hacer clic / seleccionar y ver qué hay detrás del punto azul?

Debe definir un estilo que será utilizado por su interacción de selección. Esto es mío, por ejemplo:

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

Para aplicar el estilo correcto, necesitamos una función de estilo para verificar las características:

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

Una vez definido, esto se puede agregar al objeto de interacción Seleccionar de esta manera:

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

He intentado simplificar esto desde mi propio código, pero espero no haber cometido un error (!)