OpenLayers 3:フィーチャーのスタイルを変更した後にマップを更新する方法は?


9

OpenLayers 3.2.0マップがあり、いくつかのベクターソース(ol.source.Vector)と関連するベクターレイヤー(ol.layer.Vector)を備えています

機能(ol.Feature)がベクターソースに追加されるdataと、その機能が表すJavaScriptオブジェクトに設定されたプロパティが提供されます。TypeScriptは続きます...

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

ベクトルレイヤーには、dataプロパティを読み取り、そのスタイルを取得するスタイル関数があります。

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 */
        }
    }
});

マップに関係のないイベントにより、スタイルが変更される場合があります。たとえば、オブジェクトが無効になると、そのスタイルが変更されます。明らかに、data.style完全に私の管理下にあるため、変更するのは簡単です。

問題は、スタイルが変更されたことをマップが認識しないことです。オブジェクトのスタイルを変更してからマップをズームして強制的に再描画すると、スタイル関数が実行されて新しいスタイルが返され、フィーチャが再描画されます。プログラムでマップを強制的に更新するにはどうすればよいですか?

いくつかの検索と実験の後、私は試しました:

  1. 呼び出しrender()ol.Map自分自身。
  2. 呼び出しdispatchChangeEvent()ol.source.Vector
  3. 呼び出しredraw()ol.layer.Vector

これらは提案されましたが、どれも機能しませんでした。OpenLayers3.2.0 APIのドキュメントに最初のメソッドしかリストされておらず、安定しているとマークされていないため、驚くには当たりません。


vectorlayer.refresh({force:true});を試しましたか??
ylka 2015

当然のことながら、OpenLayers 2メソッドであるため、機能しません。
Xharlie、2015

回答:


12

偶然、私はその答えに出くわしchanged()ましたstyle。関連するデータのプロパティを変更した後、機能自体を呼び出すことです。参照:http : //openlayers.org/en/v3.2.0/apidoc/ol.Feature.html?unstable=true#changed

これにはol.Feature、各vectorDataオブジェクトに関連付けられているオブジェクトを追跡する必要があります(以前はvectorData、機能からを検索する必要がありましたが、これはで実行できましたget())が、それほどコストはかかりません。

(私はを見て、これを見つけたsetGeometrysetStyleし、上の他の方法はol.Feature、彼らが何を参照してください。)


このアプローチchangedは機能しますが、妥当な数の機能を呼び出すと、実際にはかなり深刻なパフォーマンスの低下が生じます(この方法でChromeが何度もクラッシュしました)。changed()すべての機能が変更された後、レイヤーのソースを呼び出すことをお勧めします。
Kyle

0

1週間かけて、フィーチャ(ポリゴン)を削除した後、マップからvectorSource.removeFeature(selectedFeature)非表示にする方法を見つけようとしました(。そして、解決策は機能しませんでした。奇妙なことに、現在のOL3 v3.15.1には、基本的な強制リフレッシュ/レンダリング機能がありません。私のために働いた解決策は、selectedFeatureスタイルを変更することでした:

        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)

機能は既にレイヤーから削除されていますが、更新されていないため、どのスタイルでも機能します。

弊社のサイトを使用することにより、あなたは弊社のクッキーポリシーおよびプライバシーポリシーを読み、理解したものとみなされます。
Licensed under cc by-sa 3.0 with attribution required.