Como alterar a cor de um recurso nos openlayers?

11

Estou carregando um arquivo geojson em openlayers para mostrar alguns polígonos. A partir desse arquivo, também crio uma lista de todos os nomes desses polígonos.

Agora, quero alterar a cor de um polígono quando selecionado na lista (clicado no nome).

O que tentei é criar um estilo ( http://docs.openlayers.org/library/feature_styling.html ), mas não consegui descobrir como adicionar esse estilo ao polígono. Como eu posso fazer isso?

openlayers-2 jlai79
fonte

Respostas:

7

Você pode apenas criar um conjunto de hash de simbolizador de estilo e atribuí-lo ao polígono selecionado antes de adicioná-lo à camada: 

var selected_polygon_style = {
    strokeWidth: 5,
    strokeColor: '#ff0000'
    // add more styling key/value pairs as your need
};

selectedFeature.style = selected_polygon_style;
layer.addFeatures([selectedFeature]);

Nesta página ( http://docs.openlayers.org/library/feature_styling.html ), você pode encontrar muitas informações sobre as propriedades de estilo que podem ser modificadas:

  • fillColor
  • fillOpacity
  • strokeColor
  • strokeOpacity
  • largura do traçado
  • strokeLinecap
  • strokeDashstyle
  • ...
mfdev
fonte
9
Mas e se já estiver na camada? Encontrei esta solução: mylayer.drawFeature (mylayer.getFeatureById (id), {fillColor: "# 00ffff", strokeColor: "# 00ffff"});
Jlai79
sim, você está certo, basta redesenhar com um novo estilo.
Mfdev
2

Usando o caso na outra resposta.

Apenas alterando o uso do "setStyle ()"

Este caso funcionou para mim.

var selected_polygon_style = {
    strokeWidth: 5,
    strokeColor: '#ff0000'
    // add more styling key/value pairs as your need
};

selectedFeature.setStyle(selected_polygon_style);
layer.addFeatures([selectedFeature]);
Jorge Rocha
fonte
Isto não funcionou para mim, eu tenho "Uncaught TypeError: feature.setStyle não é uma função"
Matthew Bloqueio
1

Whit OpenLayers 4.6.5 para mudar de cor, estou usando: 

myLayer.getSource().getFeatures()[1].setStyle(new ol.style.Style({
      image: new ol.style.Icon(/** @type {module:ol/style/Icon~Options} */({ // /** @type {olx.style.IconOptions} */
        color: '#00ffff', //  #FF0000
        crossOrigin: 'anonymous',
        src: '/img/dot.png'
      }))
    }));

getFeatures()[1]é um dos elementos do meu recurso. Se eu mudasse TODOS os recursos, usaria um loop.

Antonio Faienza
fonte