OL3アプリにgeojsonレイヤーがあり、これを5秒ごとに再描画します(マップに動きを表示するため)。
どうすればいいのですか ?Layer.redraw()に相当するものが見つかりませんでした。
OL3アプリにgeojsonレイヤーがあり、これを5秒ごとに再描画します(マップに動きを表示するため)。
どうすればいいのですか ?Layer.redraw()に相当するものが見つかりませんでした。
回答:
これは、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ドキュメントの座標が経度と緯度であることも前提としています。
vectorSource
とgeojsonSource
マージされますか?
私はこの質問が古いことを知っていますが、ついにopenlayers 3のレイヤーを更新する解決策を見つけました。
次のようにレイヤーソースのパラメーターを更新する必要があります。
var source = yourLayer.getSource();
var params = source.getParams();
params.t = new Date().getMilliseconds();
source.updateParams(params);
updateParams
メソッドをサポートしているわけではないようです。OL3.18.2のみを示し、それがためにImageArcGISRest
、ImageMapGuide
、ImageWMS
、TileArcGISRest
とTileWMS
、とではない、のために例えば、ol.source.Vector
。
でWFSレイヤーを更新できmyLayer.getSource().clear()
ます。
clear()
ます。既存の機能が呼び出されるとすぐにマップから削除され、HTTP応答を受信した後にのみ追加されます。これは、のために指定する値の両方のために真であるVectorOptions#url
とのためにVectorOptions#loader
。リアルタイムデータの場合は、手動でいくつかのWebSocketやXHRのマジックをやって、その後の呼び出しgetSource().clear()
に続いてgetSource().addFeatures(...)
、より良いエンドユーザーへのかもしれないの外観。
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!
お役に立てれば。
これはレイヤーに最適です:
layer.changed();
http://openlayers.org/en/latest/apidoc/ol.layer.Vector.html#changedに従って
layer.changed();
レイヤーに対して完璧に(どのように)動作するかについてもう少し説明する必要があります。ドキュメントの説明Increases the revision counter and dispatches a 'change' event.
はあまり役に立ちません。changed()メソッドを使用すると、5秒ごとにマップを再描画するという質問にどのように答えますか?
layer.changed();
たものは私には効果がありませんsource.changed();
でしたが、トリックをしました。