Більше

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


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

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

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

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

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

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

Якісь ідеї?

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


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

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

Він повністю анімований тощо тощо :)


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

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

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


Я не мав багато часу на це, але CloudMade (виробники листівок) має деякі можливості кластеризації маркерів. Як зробити їх анімованими та гладкими, не впевнений у цьому, але це початок.

http://developers.cloudmade.com/projects/web-maps-api/examples/marker-clustering


Для користувачів листівок.

Ось порт Маркер -кластера Карт Google для листівки

https://github.com/ideak/leafclusterer


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

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


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

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