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

Question

Estoy trabajando en la digitalización de la herramienta.

Hay cuatro botones como los de ahora:

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

El usuario siempre comienza por el primer dibujo de algunas geometrías. Estoy usando el Sorteo de la interacción (ol.de la interacción.Dibujar) y las geometrías se añaden a una Colección (ol.De la colección).

Hasta ahora tan bueno. Ahora el usuario puede decidir eliminar algunos de los dibuja geometrías haciendo clic sobre ellos.

He aquí un ejemplo:

Cuando se hace clic en " eliminar de la geometría en el botón y, a continuación:

• el dibujo es retirado para desactivarlo
• un selecto interacción se crea (ol.de la interacción.Seleccionar) para seleccionar la geometría para quitarlo
• cuando una función está activada, su ID es en comparación con todas las otras características del' Id en un bucle, y una vez que la correcta IDENTIFICACIÓN se encontró que la función es eliminado.

La lógica funciona, pero es muy difícil de eliminar un punto o una línea, debido a que el punto azul que se muestra al pasar el ratón, que hace casi imposible haga clic en la geometría.

Por ejemplo:

El siguiente punto amarillo no sería removido como el punto azul es de la forma:

Si puedo mover el cursor un poco por debajo del punto la característica de ser eliminado:

La línea es casi imposible quitar como el punto azul se mueva con el puntero del ratón mientras el cursor se mueve a lo largo de la línea:

Para el polígono funciona bien, como el punto azul sólo se muestra al pasar el ratón por el borde de la geometría, pero si usted ignora que y haga clic en cualquier lugar dentro del relleno, la geometría será eliminado así:

¿Cómo puedo cambiar la apariencia de que el punto azul? Yo estaría de acuerdo con descartarlo por completo. He intentado añadir un estilo a la Interacción, pero que no tiene ningún efecto. Se acaba de añadir otro estilo en la parte superior del punto azul.

EDIT: una manera de resolver esto, tal vez, sería ver a través de ese punto azul. Hay una manera de hacer clic/seleccionar y ver lo que hay detrás del punto azul?

Answer 1

Es necesario definir un estilo que será utilizado por su interacción 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 funciones de:

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, puede añadirse al objeto Select de interacción como este:

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

Lo he intentado simplificar esto desde mi propio código pero que no han hecho un mistake(!)