Odpowiednik warstwy.redraw (prawda) w OpenLayers 3?


13

Mam aplikację geojson w mojej aplikacji OL3, którą chcę przerysować co 5 sekund (aby pokazać ruch na mapie).

Jak mam to zrobić ? Nie można znaleźć odpowiednika Layer.redraw ().


Czy patrzyłeś na ol.animation? Ogólnie rzecz biorąc, rysowanie wektorowe jest płynniejsze i inaczej obsługiwane w ol3, ale z twojego pytania nie jest całkowicie jasne, co chcesz zrobić.
— John Powell,

@ JohnBarça - Moje dane GeoJson pochodzą z postgresu, który jest aktualizowany co 5 sekund o nowe dane GPS. Chcę przerysować warstwę, aby za każdym razem pokazywała aktualną pozycję jednostek na mapie (ciągle się zmienia ...)
— Alophind,

Więc żądasz danych co 5 sekund za pomocą rekurencyjnego wywołania setTimeout (lub czegoś podobnego) i chcesz tylko wiedzieć, jak zmusić funkcje wektorowe do odświeżenia?
— John Powell,

@ JohnBarça - Jeśli istnieje lepszy sposób, którego chcę się uczyć, ale tak właśnie robię, chcę pokazać lokalizację GPS w czasie rzeczywistym na mapie. GPS wysyła swoją lokalizację do PostGIS i stamtąd czytam dane za pomocą GeoJSON (lub mogę użyć GeoServer), ale chcę, aby warstwa aktualizowała się co jakiś czas.
— Alophind

Jasne, rozumiem, co próbujesz zrobić. Każda szansa na przykładowy kod, ponieważ z mojego doświadczenia wynika, że ​​jeśli umieścisz pętlę animacji w ustawieniach, z wywołaniem ajax do zdalnego serwera i załadujesz json, który powraca za pomocą Format.GeoJSON lub podobnego, funkcje zostaną zaktualizowane.
— John Powell,

Odpowiedzi:


9

W ten sposób możesz odświeżać źródło wektora co 5 sekund z usługi zwracającej funkcje w dokumencie GeoJSON:

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 służy tutaj do żądania danych za pomocą Ajax ( $.ajax), ale oczywiście możesz użyć wybranej biblioteki.

Ten fragment kodu zakłada również, że rzutami mapy jest „EPSG: 3857” (mercator sieciowy) i że współrzędne w dokumentach GeoJSON to długości i szerokości geograficznej.


3
Ten kod mnie myli, powinien vectorSourcei powinien geojsonSourcezostać scalony?
— Kelly Thomas

Myślę, że masz na myśli window.setInterval not setTimeout; w przeciwnym razie robi to tylko raz.
— Jonathan

9

Wiem, że to pytanie jest stare, ale w końcu znalazłem rozwiązanie, aby odświeżyć warstwę w openlayers 3.

Musisz zaktualizować parametry źródła warstwy w następujący sposób:

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

3
Wydaje się, że nie wszystkie źródła wspierają tę updateParamsmetodę; OL3.18.2 tylko pokazuje, że dla ImageArcGISRest, ImageMapGuide, ImageWMS, TileArcGISResti TileWMS, a nie do np ol.source.Vector.
— Arjan

Data # getTime może być lepsza niż data # getMilliseconds, aby unieważnić pamięć podręczną i zmusić warstwę do przerysowania, ponieważ za każdym razem zapewni unikalny numer.
— walkermatt

5

Możesz odświeżyć warstwę WFS myLayer.getSource().clear().


1
Zrobiłem to dla mnie z OpenLayers 3 v. 0.14.2 i źródłem wektora WFS GeoJSON.
— Dirk

3
nic złego z odpowiedzią jednowierszową, jeśli zarabiają pieniądze. usunięcie tego pola informacyjnego powinno wymagać przyznania nagrody za reputację.
— Dennis Bauszus,

1
Odpowiedź jest prawidłowa, ale może to oznaczać pewne migotanie: po wywołaniu clear()wszelkie istniejące funkcje zostaną natychmiast usunięte z mapy i dodane ponownie dopiero po otrzymaniu odpowiedzi HTTP. Dotyczy to zarówno określenia wartości dla, jak VectorOptions#urli dla VectorOptions#loader. W przypadku danych w czasie rzeczywistym ręczne wykonanie niektórych magii WebSockets lub XHR, a następnie wywołanie, getSource().clear()a następnie wywołanie getSource().addFeatures(...)może wyglądać lepiej dla użytkownika końcowego.
— Arjan

3

W OL2 użyłem strategii odświeżania warstw, która nie została dodana do OL3. Poniżej znajduje się funkcja wywoływania, która użyje żądania ajax do pobrania GeoJSON, a następnie przeczytaj go i dodaj do źródła.

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!

Mam nadzieję że to pomoże.


2

Działa to idealnie w przypadku warstw:

layer.changed();

zgodnie z http://openlayers.org/en/latest/apidoc/ol.layer.Vector.html#changed


1
Musisz wyjaśnić nieco więcej, jak layer.changed();działa idealnie (ly) dla warstw. Opis dokumentacji Increases the revision counter and dispatches a 'change' event.nie jest zbyt pomocny. W jaki sposób użycie metody zmienionej () odpowiada na pytanie dotyczące przerysowywania mapy co 5 sekund?
— nmtoken

Użyłem Ajaxa, aby zapisać zmienione źródło geojson, a miałem problem polegający na tym, że jeśli zamknę warstwę i ponownie ją otworzę, mapa użyje buforowanej (niepoprawionej) wersji źródła. Po wyczyszczeniu pamięci podręcznej warstwa użyła zmienionego źródła, tak jak się spodziewałam. Niestety, zasugerowane layer.changed();nie miało dla mnie żadnego efektu, ale source.changed();zrobiło to samo.
— Peter Cooper

1

Nie ma potrzeby wyraźnego odświeżania. Za każdym razem, gdy aktualizujesz zawartość warstwy, mapa jest odświeżana z żądaniem renderowania nowej ramki.

Aby wymusić ręczne renderowanie, masz map.render()i map.renderSync()metody.


To nie aktualizuje zawartości, po prostu aktualizuje samo płótno mapy.
— Mapper
Korzystając z naszej strony potwierdzasz, że przeczytałeś(-aś) i rozumiesz nasze zasady używania plików cookie i zasady ochrony prywatności.
Licensed under cc by-sa 3.0 with attribution required.