Jak tworzyć animowane markery klastrów w OpenLayers / Leaflet?

19

Chcę użyć Ulotki ze względu na płynne przejścia, które wydaje się, że Openlayers nie są w stanie dopasować. W szczególności potrzebuję umiejętności grupowania markerów w niestandardowe grupy markerów.

Najlepszy przykład, który pokazuje, co próbuję osiągnąć, można znaleźć w Redfin .

Zwróć uwagę, że najechanie kursorem na klaster zapewnia płynną animację, a kliknięcie znacznika powoduje podział klastra z animowanym efektem. Po osiągnięciu poziomu powiększenia, w którym poszczególne punkty nie pokrywają się z daną tolerancją, rzeczywiste znaczniki dzielą się na swoje lokalizacje w animowany sposób.

Naprawdę chciałbym zintegrować podobne efekty do tych i doceniłbym wskazówki dotyczące najlepszego podejścia lub inne przykłady, o których możesz wiedzieć.

Uwaga: Wydaje się, że Redfin używa Flasha, od którego chcę się trzymać. W idealnej sytuacji chciałbym to osiągnąć za pomocą Javascript, jeśli to możliwe, ale myślę, że prawdopodobnie należy to zrobić za pomocą HTML5 / canvas.

Może użycie p. - Raphael.js lub d3.js

Jakieś pomysły?

BTW - znalazłem ten przykład, ale wydaje się, że odnosi się konkretnie do Map Google.

NetConstructor.com
źródło
Nie sądzę, że Redfin używa flasha. Wygląda na to, że to wszystko javascript przy użyciu zestawu narzędzi dojo ( dojotoolkit.org ). Nie zauważyłem jednak żadnych innych bibliotek mapowania - one także mogłyby ich używać.
djq
Obecnie opracowuję warstwę grupowania ulotek - github.com/cavis/leafpile. Nie robi to jeszcze nic szczególnego, ale planuję dodać takie elementy, jak konfigurowalne obrazy znaczników i strategie zmiany powiększenia. Dodawaj prośby o ulepszenia do narzędzia do śledzenia problemów.
cavis,

Odpowiedzi:

6

OpenLayers ma również strategię klastrową. Wszystko, co musisz zrobić, to określić strategię w warstwie wektorowej.

Rozwiązanie jest w tej chwili bardzo „proste”, po prostu zmniejsza liczbę punktów w zależności od poziomu powiększenia. Jeśli potrzebujesz czegoś bardziej niesamowitego, musisz zaprogramować to sam i swoje potrzeby. Spójrz również na kontrolę SelectFeature, która może służyć do kontrolowania po najechaniu myszką na funkcję.

Redfin jest naprawdę próbką mody. Mam nadzieję, że mam trochę czasu, aby zrobić test z OL :)

EricSonaron
źródło
Chciałbym korzystać z OpenLayers, ale potrzebuję płynnych przejść, takich jak te zawarte w ulotce. Czy zdajesz sobie sprawę z hakowania openlayerów, które replikują te zręczne animacje powiększania?
NetConstructor.com
Przepraszam ale nie. W tej chwili przeprowadzam testy stylizacji „kropek”, dodając trochę koloru i liczby w kole. Ale dodanie animacji jest na razie daleko.
EricSonaron,
Czy kiedykolwiek znalazłeś rozwiązanie tego problemu dzięki nowym funkcjom OL3?
NetConstructor.com
3

Dla użytkowników ulotek.

Oto port MarkeraClusterer w Mapach Google dla Ulotki

https://github.com/ideak/leafclusterer

ns-1m
źródło
Tak, mam tę zakładkę, ale wciąż potrzebuję części animacyjnej
NetConstructor.com
1

Czy spojrzałeś na przykład polimap, które skupiają punkty?

Kręgi tutaj to wektory, które można modyfikować za pomocą css.

djq
źródło
dzięki, ale konkretnie szukałem wszelkiego rodzaju rozwiązań (najlepiej obsługiwanych w różnych przeglądarkach), które pozwoliłyby na animację markerów. Nie jestem pewien, czy miałeś okazję sprawdzić przykładowy link ( redfin.com/... ) z Redfin. Ten link reprezentuje to, co chcę osiągnąć - zręczne animacje znaczników im głębiej klikniesz / powiększysz / powiększysz skupione znaczniki / obszary.
NetConstructor.com