Wie ändere ich die Farbe eines Features in Openlayern?

11

Ich lade eine Geojson-Datei in OpenLayer, um einige Polygone anzuzeigen. Aus dieser Datei erstelle ich auch eine Liste aller Namen dieser Polygone.

Jetzt möchte ich die Farbe eines Polygons ändern, wenn es aus der Liste ausgewählt wird (auf den Namen geklickt).

Ich habe versucht, einen Stil zu erstellen ( http://docs.openlayers.org/library/feature_styling.html ), aber ich konnte nicht herausfinden, wie dieser Stil dem Polygon hinzugefügt werden kann. Wie kann ich das machen?

openlayers-2

— jlai79
quelle

7

Sie können einfach einen Stilsymbolisierer-Hashsatz erstellen und ihn Ihrem ausgewählten Polygon zuweisen, bevor Sie ihn der Ebene hinzufügen:

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

Auf dieser Seite ( http://docs.openlayers.org/library/feature_styling.html ) finden Sie viele Informationen zu den Stileigenschaften, die Sie ändern können:

Füllfarbe
fillOpacity
StrokeColor
Schlaganfallkapazität
Strichbreite
StrokeLinecap
StrokeDashstyle
...

— mfdev
quelle

9

Aber was ist, wenn es bereits auf der Ebene ist? Ich habe diese Lösung gefunden: mylayer.drawFeature (mylayer.getFeatureById (id), {fillColor: "# 00ffff", StrokeColor: "# 00ffff"});

— jlai79

Ja, Sie haben Recht, Sie zeichnen es einfach mit neuem Stil neu.

— Mfdev

2

Verwenden Sie den Fall in der anderen Antwort.

Ändern Sie einfach die Verwendung des "setStyle ()"

Dieser Fall hat bei mir funktioniert.

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
quelle

Dies hat bei mir nicht funktioniert, ich habe "Uncaught TypeError: feature.setStyle ist keine Funktion"

— Matthew Lock

1

Whit OpenLayers 4.6.5 zum Ändern der Farbe verwende ich Folgendes:

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]ist eines der Elemente meines Features. Wenn ich ALLE Funktionen ändern würde, würde ich eine Schleife verwenden.

— Antonio Faienza
quelle