OpenLayers 3: Cara Refresh peta setelah mengubah gaya Fitur?

9

Saya memiliki peta OpenLayers 3.2.0 yang menampilkan beberapa sumber vektor ( ol.source.Vector) dan layer vektor terkait ( ol.layer.Vector)

Ketika Fitur ( ol.Feature) ditambahkan ke sumber vektor, mereka diberikan dataproperti yang diatur ke objek javascript yang diwakili fitur. TypeScript mengikuti ...

vectorSource.addFeature(new ol.Feature({
    geometry: /* ... */,
    data: vectorData,
}));

Lapisan vektor kemudian memiliki fungsi-gaya yang membaca dataproperti dan mengambil gayanya:

vectorLayer = new ol.layer.Vector({
    source: vectorSource,
    renderBuffer: /* ... */,
    style: function (feature: ol.Feature, resolution: any) {
        var data = </* TypeScript Type */>feature.get('data');
        if ((data) && (data.style)) {
            return [data.style];
        }
        else {
            /* return default style */
        }
    }
});

Terkadang, peristiwa yang tidak terkait dengan peta menyebabkan gaya berubah. Misalnya, ketika suatu objek menjadi tidak valid, gayanya berubah. Jelas, karena data.stylesepenuhnya dalam kendali saya, mengubahnya sepele.

Masalahnya adalah bahwa peta tidak tahu bahwa gayanya telah berubah. Jika saya mengubah gaya objek dan kemudian memperbesar peta, memaksanya untuk menggambar ulang, saya perhatikan bahwa fungsi gaya saya berjalan dan mengembalikan gaya baru dan fitur tersebut digambar ulang. Bagaimana saya secara sistematis memaksa peta untuk menyegarkan?

Setelah beberapa pencarian dan percobaan, saya telah mencoba:

Memanggil render()pada ol.Mapitu sendiri.
Memanggil dispatchChangeEvent()padaol.source.Vector
Memanggil redraw()padaol.layer.Vector

Ini disarankan tetapi tidak ada yang bekerja, yang tidak mengejutkan karena hanya metode pertama yang terdaftar dalam dokumentasi OpenLayers 3.2.0 API dan tidak ditandai sebagai stabil.

openlayers-2

— Xharlie
sumber

sudahkah Anda mencoba vectorlayer.refresh ({force: true}); ?

— ylka

Saya telah tetapi, tidak mengejutkan, itu tidak berhasil karena itu adalah metode OpenLayers 2.

— Xharlie

12

Secara kebetulan, saya telah menemukan jawabannya - itu untuk memanggil changed()fitur itu sendiri setelah mengubah styleproperti dari data terkait mereka. Lihat: http://openlayers.org/en/v3.2.0/apidoc/ol.Feature.html?unstable=true#changed

Ini memang mengharuskan saya untuk melacak ol.Featureobjek yang terkait dengan setiap vectorDataobjek (sebelumnya, saya hanya perlu menemukan vectorDatadari fitur, yang dapat dilakukan dengan get()) tetapi ini tidak banyak biaya.

(Saya menemukan ini dengan melihat setGeometrydan setStyledan metode lain ol.Featureuntuk melihat apa yang mereka lakukan.)

— Xharlie
sumber

Meskipun pendekatan ini berhasil, panggilan changeduntuk sejumlah fitur yang masuk akal sebenarnya menimbulkan penalti kinerja yang cukup serius (Chrome beberapa kali gagal seperti ini). Saya sarankan memanggil changed()sumber layer Anda setelah semua fitur Anda telah diubah.

— Kyle

0

Saya menghabiskan waktu satu minggu untuk mencoba mencari cara membuat fitur (Polygon) menghilang dari peta setelah menghapusnya ( vectorSource.removeFeature(selectedFeature). Dan tidak ada solusi yang berfungsi. Anehnya OL3 v3.15.1 saat ini tidak memiliki fungsi memaksa-refresh / render dasar yang berhasil! Solusi yang berhasil bagi saya adalah mengubah selectedFeaturegaya:

        var newStyle = new ol.style.Style({
            image: new ol.style.Circle({
                radius: 5,
                fill: new ol.style.Fill({color: 'red'}),
                stroke: new ol.style.Stroke({color: 'yellow', width: 1})
            })
        });
        selectedFeature.setStyle(newStyle)

Gaya apa pun akan berfungsi karena fitur tersebut telah dihapus dari layer tetapi tidak di-refresh.

— Morey
sumber