OpenLayers 3'te layer.redraw (true) eşdeğeri?


13

OL3 uygulamamda her 5 saniyede bir yeniden çizmek istediğim bir geojson katmanım var (haritada hareket göstermek için).

Nasıl yaparım ? Layer.redraw () öğesine eşdeğer bulunamadı.


Ol.animation'a baktın mı? Genel olarak, vektör çizimi daha pürüzsüzdür ve ol3'te farklı şekilde ele alınır, ancak ne yapmak istediğinizi sorunuzdan tamamen açık değildir.
John Powell

@ JohnBarça - GeoJson verilerim, her 5 saniyede bir yeni GPS verileriyle güncellenen postgreslerden geliyor. Her seferinde haritadaki birimlerin mevcut konumunu göstermek için katmanı yeniden çizmek istiyorum (değişmeye devam ediyor ...)
Alophind

Yani, yinelenen bir setTimeout çağrısı (veya benzer bir şey) kullanarak her 5 saniyede bir veri istiyor ve vektör özelliklerini yenilemeye nasıl zorlayacağınızı bilmek mi istiyorsunuz?
John Powell

@ JohnBarça - Öğrenmeye hazır olduğum daha iyi bir yol varsa, ama bu benim yaptığım şey, GPS konumunu gerçek zamanlı olarak harita üzerinde göstermek istiyorum. GPS PostGIS konumlarını göndermek ve oradan GeoJSON kullanarak veri okumak (veya GeoServer kullanabilirsiniz) ama ben katman zaman zaman kendini güncellemek istiyoruz.
Alophind

Tabii, yapmaya çalıştığın şeyi elde ediyorum. Herhangi bir kod örneği şansı, çünkü tecrübelerime göre, uzak bir sunucuya ajax çağrısı ile settimeout'a bir animasyon döngüsü koyarsanız ve Format.GeoJSON veya benzeri kullanarak geri gelen json'u yüklerseniz, özellikler güncellenir.
John Powell

Yanıtlar:


9

GeoJSON belgesindeki özellikleri döndüren bir web hizmetinden bir vektör kaynağını her 5 saniyede bir yenileyebilirsiniz:

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

jQuery burada Ajax ( $.ajax) aracılığıyla veri istemek için kullanılır , ancak seçtiğiniz kütüphaneyi açıkça kullanabilirsiniz.

Bu kod snippet'i ayrıca haritanın projeksiyonlarının "EPSG: 3857" (web mercator) olduğunu ve GeoJSON belgelerindeki koordinatların boylam ve enlem olduğunu varsayar.


3
Bu kod beni karıştırıyor, birleştirilmeli vectorSourceve geojsonSourcebirleştirilmeli mi?
Kelly Thomas

Sanırım window.setInterval setTimeout değil; aksi takdirde sadece bir kez yapar.
Jonathan

9

Bu sorunun eski olduğunu biliyorum ama sonunda openlayers 3'te bir katmanı yenilemek için bir çözüm buldum.

Katman kaynağının parametrelerini şu şekilde güncellemelisiniz:

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

3
Tüm kaynaklar updateParamsyöntemi desteklemiyor gibi görünüyor ; OL3.18.2 sadece gösterileri bunun için ImageArcGISRest, ImageMapGuide, ImageWMS, TileArcGISRestve TileWMS, ve, örneğin, ol.source.Vector.
Arjan

Tarih # getTime , önbelleği geçersiz kılmak ve katmanı her seferinde benzersiz bir sayı sağlayacak şekilde yeniden çizmeye zorlamak için Date # getMilliseconds değerinden daha iyi olabilir .
walkermatt

5

Bir WFS katmanını ile yenileyebilirsiniz myLayer.getSource().clear().


1
Bunu benim için OpenLayers 3 v.1 0.14.2 ve bir WFS GeoJSON vektör kaynağı ile yaptı.
Dirk

3
onlar para üzerinde ise tek satırlık bir cevap yanlış bir şey yok. bu bilgi kutusunun kaldırılması için bir itibar ödülü olmalıdır.
Dennis Bauszus

1
Yanıt doğrudur, ancak bu biraz titreme gösterebilir: clear()mevcut özellikler çağrıldığında haritadan hemen kaldırılır ve yalnızca HTTP yanıtı alındıktan sonra tekrar eklenir. Bu, hem VectorOptions#urlve için bir değer belirtmek için geçerlidir VectorOptions#loader. Gerçek zamanlı veriler için, elle bazı Yuvalarının veya XHR büyü yapıyor ve ardından görüşmesi özelliğini getSource().clear()ardından getSource().addFeatures(...)daha iyi son kullanıcıya kudreti görünüm.
Arjan

3

OL2 ile OL3'e eklenmemiş bir katman yenileme stratejisi kullandım. Aşağıda, GeoJSON'u almak ve daha sonra okumak ve bir kaynağa eklemek için bir ajax isteği kullanacak kendi kendine arama işlevi aşağıdadır.

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!

Bu yardımcı olur umarım.


2

Bu katmanlar için mükemmel çalışır:

layer.changed();

http://openlayers.org/en/latest/apidoc/ol.layer.Vector.html#changed uyarınca


1
layer.changed();Katmanlar için nasıl mükemmel (ly) çalıştığı hakkında biraz daha açıklamanız gerekir . Dokümantasyon açıklaması Increases the revision counter and dispatches a 'change' event.gerçekten yararlı değil. Değiştirilen () yönteminin kullanılması haritayı her 5 saniyede bir yeniden çizmeyle ilgili soruyu nasıl yanıtlıyor?
nmtoken

Düzeltilmiş bir geojson kaynağını kaydetmek için Ajax'ı kullandım ve yaşadığım sorun, katmanı kapatıp yeniden açtığımda haritanın kaynağın önbelleğe alınmış (unrevised) sürümünü kullanmasıydı. Önbelleği temizledikten sonra katman, beklediğim gibi revize edilmiş kaynağı kullandı. Ne yazık ki, önerilenin layer.changed();benim için bir etkisi source.changed();yoktu , ama hile yaptı.
Peter Cooper

1

Açıkça yenilenmeye gerek yoktur. Bir katmanın içeriğini her güncellediğinizde, harita yeni bir çerçeve oluşturma isteğiyle yenilenir.

El var render zorlamak için map.render()ve map.renderSync()yöntemler.


Bu içeriği güncellemez, sadece harita tuvalinin kendisini günceller.
Haritacı
Sitemizi kullandığınızda şunları okuyup anladığınızı kabul etmiş olursunuz: Çerez Politikası ve Gizlilik Politikası.
Licensed under cc by-sa 3.0 with attribution required.