Jak zmienić kolor funkcji w openlayers?

11

Ładuję plik geojson do openlayers, aby pokazać niektóre wielokąty. Z tego pliku tworzę również listę wszystkich nazw tych wielokątów.

Teraz chcę zmienić kolor wielokąta, gdy zostanie wybrany z listy (kliknij nazwę).

Próbowałem stworzyć styl ( http://docs.openlayers.org/library/feature_styling.html ), ale nie mogłem się dowiedzieć, jak dodać ten styl do wielokąta. Jak mogę to zrobić?

openlayers-2

— jlai79
źródło

7

Możesz po prostu utworzyć zestaw skrótów symbolizatora stylu i przypisać go do wybranego wielokąta przed dodaniem go do warstwy:

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

Na tej stronie ( http://docs.openlayers.org/library/feature_styling.html ) można znaleźć wiele informacji na temat właściwości stylu, które można modyfikować:

fillColor
fillOpacity
strokeColor
strokeOpacity
strokeWidth
strokeLinecap
strokeDashstyle
...

— mfdev
źródło

9

Ale co jeśli jest już na warstwie? Znalazłem to rozwiązanie: mylayer.drawFeature (mylayer.getFeatureById (id), {fillColor: "# 00ffff", strokeColor: "# 00ffff"});

— jlai79

tak, masz rację, po prostu przerysuj w nowym stylu.

— mfdev

2

Wykorzystanie przypadku w drugiej odpowiedzi.

Zmieniam użycie „setStyle ()”

Ta sprawa działała dla mnie.

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
źródło

Nie działało to dla mnie, otrzymałem komunikat „Uncaught TypeError: feature.setStyle nie jest funkcją”

— Matthew Lock

1

Whit OpenLayers 4.6.5 do zmiany koloru używam tego:

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]jest jednym z elementów mojej funkcji. Gdybym zmienił WSZYSTKIE funkcje, użyłbym Pętli.

— Antonio Faienza
źródło