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

9

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:

insira a descrição da imagem aqui

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:

insira a descrição da imagem aqui

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

insira a descrição da imagem aqui

É 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:

insira a descrição da imagem aqui

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:

insira a descrição da imagem aqui

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?

BritishSteel
fonte
Se o seu problema for selecionar o recurso (não muito sobre estilo), use o ol.interaction.Snap ... Além disso, é isso que você está procurando? openlayers.org/en/latest/examples/snap.html
Keenan Gebze
Acabei de usar o snap em vez da seleção, mas o ponto azul também é mostrado. E como eu selecionaria o recurso ao qual está encaixado? Eu não precisaria sempre usar uma interação de seleção?
precisa

Respostas:

4

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

dvmac01
fonte
Isso responde como alterar o ícone de seleção, que eu pensei que era a solução para o meu problema e a maioria das pessoas lê essa pergunta para descobrir sobre isso, então vou marcá-la como a resposta correta :-). E isso me ajudou a descobrir meu problema ... finalmente! O verdadeiro problema era: não removi a interação Modify, que ativei durante a edição! Portanto, mesmo que eu tenha desativado meu desenho, a modificação permaneceu e, portanto, o ícone não é removido.
precisa
1
Também consertei alguns parênteses e mudei o objeto 'cores' para um valor, para que as pessoas possam copiar isso sem precisar ajustar nada. Um milhão de agradecimentos novamente!
precisa
Não probs, Fico feliz em ajudar;)
dvmac01