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

Odpowiedzi:

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