Bagaimana cara mengubah warna fitur di openlayers?

11

Saya memuat file geojson ke openlayers untuk menunjukkan beberapa poligon. Dari file ini saya juga membuat daftar semua nama poligon ini.

Sekarang saya ingin mengubah warna poligon ketika dipilih dari daftar (klik pada namanya).

Apa yang saya coba adalah membuat gaya ( http://docs.openlayers.org/library/feature_styling.html ) tetapi saya tidak bisa menemukan cara menambahkan gaya ini ke poligon. Bagaimana saya bisa melakukan itu?

openlayers-2 jlai79
sumber

Jawaban:

7

Anda mungkin hanya membuat hash set simbolizer gaya dan menetapkannya ke poligon yang Anda pilih sebelum menambahkannya ke layer: 

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

Di halaman ini ( http://docs.openlayers.org/library/feature_styling.html ) Anda dapat menemukan banyak informasi tentang properti style yang dapat Anda ubah:

  • fillColor
  • fillOpacity
  • strokeColor
  • strokeOpacity
  • Lebar stroke
  • strokeLinecap
  • strokeDashstyle
  • ...
mfdev
sumber
9
Tapi bagaimana kalau sudah ada di layer? Saya menemukan solusi ini: mylayer.drawFeature (mylayer.getFeatureById (id), {fillColor: "# 00ffff", strokeColor: "# 00ffff"});
jlai79
ya, Anda benar, Anda hanya menggambar ulang dengan gaya baru.
mfdev
2

Menggunakan kasing di jawaban lain.

Hanya mengubah penggunaan "setStyle ()"

Kasing ini bekerja untuk saya.

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
sumber
Ini tidak berhasil untuk saya, saya mendapat "Uncaught TypeError: feature.setStyle bukan fungsi"
Matthew Lock
1

Sedikit pun OpenLayers 4.6.5 untuk perubahan warna saya menggunakan ini: 

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]adalah salah satu elemen dari Fitur saya. Jika saya akan mengubah SEMUA fitur maka saya akan menggunakan Loop.

Antonio Faienza
sumber