Як створити анімовані маркери кластерів у OpenLayers / Leaflet?


19

Я хочу використовувати Leaflet завдяки плавним переходам, які, як видається, Openlayers ніби не можуть відповідати. Мені спеціально потрібна можливість кластеризації маркерів за допомогою спеціальних груп маркерів.

Найкращий приклад, який демонструє те, що я намагаюся досягти, можна знайти на Redfin .

Зауважте, що наведення курсору на кластер забезпечує анімацію гладкою, а клацання на маркері кластери розділяються разом із анімованим ефектом. Коли ви досягаєте рівня масштабування, коли окремі точки не перетинаються із заданим допуском, фактичні маркери розбиваються на їх місця анімовано.

Я дійсно хотів би інтегрувати подібні ефекти до цих, і я буду вдячний за деякими вказівками щодо найкращого підходу чи інших прикладів, про які ви можете знати.

Примітка: Redfin, здається, використовує Flash, від якого я хочу триматися подалі. В ідеальній ситуації я хотів би досягти цього за допомогою Javascript, якщо це можливо, але думаю, що це, мабуть, потрібно зробити через HTML5 / полотно.

Можливо, використання п. - Raphael.js або d3.js

Будь-які ідеї?

BTW - знайшов цей приклад, але, здається, специфічно стосується Карт Google.


Я не думаю, що Redfin використовує спалах. Схоже, це все javascript за допомогою інструментарію dojo ( dojotoolkit.org ). Я не помітив жодних інших бібліотек відображення - вони також могли їх використовувати.
djq

Наразі я розробляю кластерний шар кластера Leaflet - github.com/cavis/leafpile Це ще не робить нічого по-справжньому фантазійного, але я планую додавати такі речі, як настроювані зображення маркера та стратегії масштабування. Не соромтеся додавати запити на вдосконалення до трекера проблем.
cavis

Відповіді:


22

Якщо ви хочете кластера типу Redfin, перегляньте мій Leaflet.markercluster: https://github.com/Leaflet/Leaflet.markercluster/blob/master/example/marker-clustering-realworld.388.html

https://github.com/danzel/Leaflet.markercluster

Це повністю анімовані і т.д. і т.д. :)


3
Так - найкраще, і дозвольте мені першим вітати вас Дейва, і дозвольте мені збільшити ваші бали за вашу допомогу.
NetConstructor.com

1
Досить дивовижно! +1
unicoletti

6

OpenLayers також має стратегію кластерів. Все, що вам потрібно зробити, це вказати як векторну стратегію як стратегію.

Рішення на даний момент дуже "просте", просто зменшує кількість балів залежно від рівня збільшення. Якщо вам потрібно щось більш дивовижне, вам потрібно буде запрограмувати його самостійно та своїми потребами. Погляньте також на елемент SelectFeature, який може вам керувати, коли ви кладете мишу на якусь функцію.

Редфін - це справді зразок моди. Сподіваюся, у мене є час, щоб зробити тест з OL :)


Я хотів би використовувати OpenLayers, але мені потрібні плавні переходи, як ті, що знайдені в листівці. Чи знаєте ви про будь-який хакер відкритих верств, який повторює ці анімації з гладким збільшенням?
NetConstructor.com

Вибач, але ні. Зараз я роблю тестування стилів трохи "крапок", додаючи колір і рахую число в колі. Але додавання анімації наразі далеко.
EricSonaron

Ви коли-небудь знаходили рішення для цього за допомогою нових можливостей ol3?
NetConstructor.com



3

Я щойно реалізував так звану стратегію AnimatedCluster для OpenLayers. Ви можете ознайомитись із цим на веб-сайті : http://www.acuriousanimal.com/2012/08/19/animated-marker-cluster-strategy-for-openlayers.html

Це лише версія версії, але додає кластерам приємну анімацію. Є багато речей, які можна покращити, але це вихідний пункт.


чудова робота з цим!
NetConstructor.com

1

Ви подивилися на приклад полімап, які кластери вказують?

Кола тут - це вектори, які можна змінювати за допомогою css.


дякую, але я спеціально шукав будь-який тип рішень (бажано, що підтримується крос-браузер), які б дозволяли анімацію маркерів. Я не впевнений, чи була у вас можливість перевірити приклад посилання ( redfin.com/… ) від Redfin. Це посилання відображає те, що я прагну досягти - гладкі зображення анімації маркера глибше натискання / зменшення / збільшення масштабування в кластерні маркери / області.
NetConstructor.com
Використовуючи наш веб-сайт, ви визнаєте, що прочитали та зрозуміли наші Політику щодо файлів cookie та Політику конфіденційності.
Licensed under cc by-sa 3.0 with attribution required.