2014-11-24 7 views
7

Ciekawi mnie możliwość animowania funkcji w OpenLayers3.Animacja funkcji w OpenLayers3

Jestem bardzo świadoma przykładów przedstawionych tu http://openlayers.org/en/v3.0.0/examples/animation.html i tutaj https://gis.stackexchange.com/questions/26546/openlayers-animation-examples-and-algorithms

Jednak oficjalne przykłady OL3 nie całkiem pasuje do moich potrzeb.

Załóżmy, że mam warstwę (na przykład geojson), która ma kolumnę "czas" z dużą ilością wartości czasu.

Chciałbym zaimplementować coś w rodzaju suwaka, który dodaje/usuwa funkcje (lub zmienia ich styl) w zależności od działań użytkownika.

Chodzi o to, że istnieją pewne API, które mogą być w stanie to zrobić, ale wydają się być przestarzałe (przykłady kodu nadal działały z ol2).

Czy masz jakieś sugestie, jak zbudować prosty suwak animacji za pomocą OL3?

EDYCJA: Nie musi to być właściwa animacja. Możliwość, która przyszła mi do głowy, zmienia styl warstwy, gdy suwak jest przesuwany. Wciąż nie ma pojęcia, jak to zrealizować.

Ten obraz ilustruje, co mam na myśli:

design for desired functionality

EDIT: Moje obecne podejście jest mieć suwak, który wywołuje kod za każdym razem jest on przenoszony. W jakiś sposób próbuję zmienić styl warstwy dynamicznie, ale wciąż nie otrzymałem realnego wyniku.

+0

Wygląda na to, że jesteś na Oś czasu OpenLayers. Czy masz jakieś przykładowe dane? – BernieSF

+0

Pewnie. Ale czy oś czasu działa z ol3? – stopopol

Odpowiedz

4

Ok. Sam wymyśliłem rozwiązanie. To naprawdę nie jest pełnoprawna animacja, ale działa dla mnie.

Zasadniczo to, co robię, to ładowanie warstwy wfs do mojej mapy. Oto przykład: Kiedy to robię, po prostu sortuję wartości czasowe funkcji jeden po drugim i dodam każdą cechę z wartością czasu od 1 do jednej warstwy, każdą cechę o wartości czasu 2 do inny i tak dalej. To w zasadzie działa. Reszta jest prosta.

Następnym krokiem jest zaimplementowanie suwaka w zakresie od 1 (najniższa wartość czasu) do dowolnej najwyższej wartości czasu. Za każdym razem, gdy suwak jest przesuwany, wyzwala zdarzenie, które dowiaduje się, do której wartości czasu suwak jest ustawiony, a następnie dodaje/usuwa odpowiednie warstwy.

Tak więc, jeśli suwak jest ustawiony na 5. Dodaje każdą warstwę od 1 do 5 do mapy i usuwa co drugą warstwę. Ponownie, to nie jest tak naprawdę animacja, ale działa w moim przypadku.

Jeśli ktoś wymyśli inne możliwe rozwiązanie, opublikuj go tutaj. Byłbym wdzięczny.

(Btw, to właśnie moje rozwiązanie wygląda w akcji :)

enter image description here

EDIT: Teraz mogę również potwierdzić, że jest możliwe zbudowanie „właściwej” animacje z tym podejściem. Po prostu zbudowałem funkcję js, która zawiera wiele "setTimeout" do czasu, kiedy dodano warstwę i dodano przycisk odtwarzania, który uruchamia tę funkcję.Odpowiada to animacji, która wizualizuje wzrost od t = 1 do tmax.

+0

To jest fajne. Chciałem zaproponować rozwiązanie D3js. Więc właściwie nie nazywasz dynamicznie WFS, po prostu nazywając go raz i tworząc warstwy na podstawie interwałów suwaków? –

+0

Dokładnie. Zasadniczo, tworzę różne warstwy na początku, gdy mapa jest inicjowana, a następnie dynamicznie je dodaje i usuwa. Obecnie pracuję nad funkcją, która wykorzystuje opóźnienie czasowe do zbudowania właściwej animacji. To praktycznie przycisk odtwarzania, który przechodzi od początku do początku. – stopopol