Come cambiare il colore di una funzione in openlayer?

11

Sto caricando un file geojson in openlayer per mostrare alcuni poligoni. Da questo file creo anche un elenco di tutti i nomi di questi poligoni.

Ora voglio cambiare il colore di un poligono quando selezionato dalla lista (cliccato sul nome).

Quello che ho provato è creare uno stile ( http://docs.openlayers.org/library/feature_styling.html ) ma non sono riuscito a scoprire come aggiungere questo stile al poligono. Come posso fare ciò?

openlayers-2

— jlai79
fonte

7

Puoi semplicemente creare un set di hash del simbolizzatore di stile e assegnarlo al poligono selezionato prima di aggiungerlo al livello:

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

In questa pagina ( http://docs.openlayers.org/library/feature_styling.html ) puoi trovare molte informazioni sulle proprietà dello stile che puoi modificare:

colore di riempimento
fillOpacity
strokeColor
strokeOpacity
strokeWidth
strokeLinecap
strokeDashstyle
...

— mfdev
fonte

9

E se fosse già sul livello? Ho trovato questa soluzione: mylayer.drawFeature (mylayer.getFeatureById (id), {fillColor: "# 00ffff", strokeColor: "# 00ffff"});

— jlai79,

sì, hai ragione, l'hai semplicemente ridisegnato con un nuovo stile.

— mfdev,

2

Utilizzando il caso nell'altra risposta.

Basta cambiare l'utilizzo di "setStyle ()"

Questo caso ha funzionato per me.

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

Questo non ha funzionato per me, ho ottenuto "Uncaught TypeError: feature.setStyle non è una funzione"

— Matthew Lock,

1

Con OpenLayers 4.6.5 per cambiare colore sto usando questo:

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]è uno degli elementi della mia funzione. Se cambiassi TUTTE le funzionalità, utilizzerei un loop.

— Antonio Faienza
fonte