Как изменить цвет объекта в openlayers?

11

Я загружаю файл geojson в openlayers, чтобы показать несколько полигонов. Из этого файла я также создаю список всех имен этих полигонов.

Теперь я хочу изменить цвет многоугольника при выборе из списка (щелкнул по названию).

Я пытался создать стиль ( http://docs.openlayers.org/library/feature_styling.html ), но я не смог выяснить, как добавить этот стиль в полигон. Как я могу это сделать?

jlai79
источник

Ответы:

7

Вы можете просто создать хэш-набор символов стиля и назначить его выбранному полигону перед добавлением его в слой:

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

На этой странице ( http://docs.openlayers.org/library/feature_styling.html ) вы можете найти много информации о свойствах стиля, которые вы можете изменить:

  • Цвет заливки
  • fillOpacity
  • strokeColor
  • strokeOpacity
  • strokeWidth
  • strokeLinecap
  • strokeDashstyle
  • ...
mfdev
источник
9
Но что, если он уже на слое? Я нашел это решение: mylayer.drawFeature (mylayer.getFeatureById (id), {fillColor: "# 00ffff", strokeColor: "# 00ffff"});
jlai79
да, вы правы, вы просто перерисовываете это с новым стилем.
mfdev
2

Использование дела в другом ответе.

Просто изменив использование "setStyle ()"

Этот случай сработал для меня.

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]);
Хорхе Роча
источник
Это не сработало для меня, я получил «Uncaught TypeError: feature.setStyle не является функцией»
Мэтью Лок
1

Whit OpenLayers 4.6.5 для изменения цвета я использую это:

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]является одним из элементов моей функции. Если бы я изменил ВСЕ функции, я бы использовал цикл.

Антонио Файенца
источник