OpenLayers 3: livrar-se do ícone de seleção 'ponto azul'

Estou trabalhando em uma ferramenta de digitalização.

Atualmente, existem quatro botões:

• adicionar ponto
• adicionar linha
• adicionar polígono
• remover geometria

O usuário sempre começa primeiro desenhando algumas geometrias. Estou usando a interação Draw ( ol.interaction.Draw ) e as geometrias são adicionadas a uma Collection ( ol.Collection ).

Por enquanto, tudo bem. Agora o usuário pode decidir remover algumas das geometrias desenhadas clicando nelas.

Aqui está um exemplo:

Quando clicado no botão 'remover geometria', então:

• desenho é removido para desativá-lo
• uma interação Selecionar é criada (ol.interaction.Select) para selecionar a geometria para removê-la
• quando um recurso é selecionado, seu ID é comparado aos IDs de todos os outros recursos em um loop e, quando o ID correto é encontrado, esse recurso é removido.

A lógica funciona, mas é extremamente difícil excluir um ponto ou uma linha devido ao ponto azul que é mostrado ao passar o mouse, o que torna quase impossível clicar nas geometrias.

Por exemplo:

O seguinte ponto amarelo não seria removido porque o ponto azul está no caminho:

Se eu mover o cursor um pouco abaixo do ponto, o recurso será removido:

É quase impossível remover a linha, pois o ponto azul se moverá com o cursor à medida que o cursor se move ao longo da linha:

Para o polígono, ele funciona bem, pois o ponto azul é mostrado apenas ao passar o mouse pela borda da geometria, mas se você ignorá-lo e clicar em qualquer lugar dentro do preenchimento, a geometria também será removida:

Como posso alterar a aparência desse ponto azul? Eu ficaria bem em descartá-lo completamente. Tentei adicionar um estilo à interação de seleção, mas isso não tem nenhum efeito. Apenas adicionará outro estilo em cima do ponto azul.

Edição : uma maneira de resolver isso, talvez, seria olhar através desse ponto azul. Existe uma maneira de clicar / selecionar e ver o que está por trás do ponto azul?

Você precisa definir um estilo que será usado por sua interação de seleção. Este é meu, por exemplo:

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 o estilo correto, precisamos de uma função de estilo para verificar os recursos:

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

Uma vez definido, isso pode ser adicionado ao objeto de interação Selecionar assim:

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

Eu tentei simplificar isso do meu próprio código, mas espero que não tenha cometido um erro (!)