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

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