OpenLayers 3のlayer.redraw(true)と同等ですか?


13

OL3アプリにgeojsonレイヤーがあり、これを5秒ごとに再描画します(マップに動きを表示するため)。

どうすればいいのですか ?Layer.redraw()に相当するものが見つかりませんでした。


ol.animationを見ましたか?一般に、ベクトル描画はol3でよりスムーズで異なる方法で処理されますが、何をしたいのかが質問から完全に明確ではありません。
ジョンパウエル

@JohnBarça-私のGeoJsonデータはpostgresから取得され、5秒ごとに新しいGPSデータで更新されます。レイヤーを再描画して、マップ上のユニットの現在位置を毎回表示したい(変化し続けます...)
Alophind 14年

したがって、再帰的なsetTimeout呼び出し(または同様のもの)を使用して5秒ごとにデータを要求し、ベクトル機能を強制的に更新する方法を知りたいだけですか?
ジョンパウエル14年

@JohnBarça-より良い学習方法があれば、これが私がしていることです。GPSの位置を地図上にリアルタイムで表示したいと思います。GPSは位置情報をPostGISに送信し、そこからGeoJSONを使用してデータを読み取ります(またはGeoServerを使用できます)が、レイヤーが時々更新されることを望みます。
アロフィンド14年

確かに、私はあなたがやろうとしていることを理解しています。私の経験では、リモートサーバーへのajax呼び出しを使用してアニメーションループをsettimeoutに入れ、Format.GeoJSONなどを使用して戻ってくるjsonをロードすると、コードサンプルが発生する可能性があります。
ジョンパウエル14年

回答:


9

これは、GeoJSONドキュメントの機能を返すWebサービスから、5秒ごとにベクターソースを更新する方法です。

var vectorSource = new ol.source.Vector();
var geojsonFormat = new ol.format.GeoJSON();

window.setTimeout(function() {
  $.ajax('http://example.com/data.json', function(data) {
    var features = geojsonFormat.readFeatures(data
        {featureProjection:"EPSG:3857"});
    geojsonSource.clear();
    geojsonSource.addFeatures(features);
  });
}, 5000);

ここでは、Ajax($.ajax)を介してデータをリクエストするためにjQueryが使用されていますが、選択したライブラリを使用できることは明らかです。

このコードスニペットは、地図の投影法が「EPSG:3857」(ウェブメルカトル)であり、GeoJSONドキュメントの座標が経度と緯度であることも前提としています。


3
このコードは、私を混乱、必要があるvectorSourcegeojsonSourceマージされますか?
ケリートーマス

あなたは、setTimeoutではなくwindow.setIntervalを意味すると思います。それ以外の場合は、一度だけ実行されます。
ジョナサン

9

私はこの質問が古いことを知っていますが、ついにopenlayers 3のレイヤーを更新する解決策を見つけました。

次のようにレイヤーソースのパラメーターを更新する必要があります。

var source = yourLayer.getSource();
var params = source.getParams();
params.t = new Date().getMilliseconds();
source.updateParams(params);

3
すべてのソースがupdateParamsメソッドをサポートしているわけではないようです。OL3.18.2のみを示し、それがためにImageArcGISRestImageMapGuideImageWMSTileArcGISRestTileWMS、とではない、のために例えば、ol.source.Vector
アルジャン

Date#getTimeは、Date#getMillisecondsよりもキャッシュが無効になり、毎回一意の番号が保証されるため、レイヤーを強制的に再描画することができます。
ウォーカーマット

5

でWFSレイヤーを更新できmyLayer.getSource().clear()ます。


1
OpenLayers 3 v。0.14.2とWFS GeoJSONベクターソースを使用して、これを実現しました。
ダーク

3
彼らがお金にあるならば、1行の答えで何も悪いことはありません。この情報ボックスを削除すると、評判賞が与えられるはずです。
デニスバウス

1
答えは正しいですが、これはちらつきを示す可能性がありclear()ます。既存の機能が呼び出されるとすぐにマップから削除され、HTTP応答を受信した後にのみ追加されます。これは、のために指定する値の両方のために真であるVectorOptions#urlとのためにVectorOptions#loader。リアルタイムデータの場合は、手動でいくつかのWebSocketやXHRのマジックをやって、その後の呼び出しgetSource().clear()に続いてgetSource().addFeatures(...)、より良いエンドユーザーへのかもしれないの外観。
アルジャン

3

OL2では、OL3に追加されていないレイヤーリフレッシュ戦略を使用しました。以下は、Ajaxリクエストを使用してGeoJSONを取得し、それを読み取ってソースに追加する自己呼び出し関数です。

var yourSource = new ol.source.GeoJSON();

//add this source to a layer, the layer to a map with a view etc
...

//now fetch the data
var fetchData = function () {
    jQuery.ajax(url,
    {
        dataType: 'json',
        success: function (data, textStatus, jqXHR) {
            yourSource.clear(); //remove existing features
            yourSource.addFeatures(yourSource.readFeatures(data));
        },
        error: function (jqXHR, textStatus, errorThrown) {
            console.log(errorThrown);
        }
    });

    //call this again in 5 seconds time
    updateTimer = setTimeout(function () {
        fetchData();
    }, 5000);
};
fetchData(); //must actually call the function!

お役に立てれば。


2

これはレイヤーに最適です:

layer.changed();

http://openlayers.org/en/latest/apidoc/ol.layer.Vector.html#changedに従って


1
layer.changed();レイヤーに対して完璧に(どのように)動作するかについてもう少し説明する必要があります。ドキュメントの説明Increases the revision counter and dispatches a 'change' event.はあまり役に立ちません。changed()メソッドを使用すると、5秒ごとにマップを再描画するという質問にどのように答えますか?
nmtoken

Ajaxを使用して変更されたgeojsonソースを保存しましたが、レイヤーを閉じて再度開くと、マップがソースのキャッシュされた(変更されていない)バージョンを使用するという問題がありました。キャッシュをクリアすると、レイヤーは予想どおり修正されたソースを使用しました。残念ながら、提案されlayer.changed();たものは私には効果がありませんsource.changed();でしたが、トリックをしました。
ピータークーパー

1

明示的に更新する必要はありません。レイヤーのコンテンツを更新するたびに、マップが更新され、新しいフレームレンダリングが要求されます。

手動で強制的にレンダリングするにはmap.render()、とmap.renderSync()メソッドがあります。


コンテンツは更新されず、マップキャンバス自体が更新されます。
マッパー
弊社のサイトを使用することにより、あなたは弊社のクッキーポリシーおよびプライバシーポリシーを読み、理解したものとみなされます。
Licensed under cc by-sa 3.0 with attribution required.