Как создать анимированные маркеры кластера в OpenLayers / Leaflet?


19

Я хочу использовать Leaflet из-за плавных переходов, которым Openlayers кажется, что они не могут соответствовать. Мне особенно требуется возможность кластеризовать маркеры с помощью пользовательских стилей групп маркеров.

Лучший пример, который демонстрирует то, чего я пытаюсь достичь, можно найти в Redfin .

Обратите внимание, что при наведении курсора на кластер создается плавная анимация, а при нажатии на маркер кластеры разделяются с помощью анимированного эффекта. При достижении уровня масштабирования, когда отдельные точки не перекрываются с заданным допуском, фактические маркеры анимированно выделяются на свои места.

Я действительно хотел бы объединить подобные эффекты с ними и был бы признателен за некоторые рекомендации по лучшему подходу или другие примеры, которые вы могли бы знать.

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

Может быть, использование р. - Raphael.js или d3.js

Есть идеи?

Кстати - нашел этот пример, но он, кажется, специально относится к Google Maps.


Я не думаю, что Redfin использует вспышку. Похоже, что все это JavaScript, используя инструментарий Dojo ( dojotoolkit.org ). Я не обнаружил никаких других картографических библиотек - они тоже могли их использовать.
djq

В настоящее время я разрабатываю слой кластеризации Leaflet - github.com/cavis/leafpile. Пока он не делает ничего особенного, но я планирую добавить такие вещи, как настраиваемые изображения маркеров и стратегии масштабирования и перехода. Не стесняйтесь добавлять запросы на улучшение в систему отслеживания проблем.
Кавис

Ответы:


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, который может использоваться для управления при наведении мыши на элемент.

Redfin - действительно модный образец. Надеюсь, у меня есть время, чтобы сделать тест с OL :)


Я хотел бы использовать OpenLayers, но мне нужны плавные переходы, подобные тем, которые есть в листовке. Знаете ли вы о каком-либо взломе 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.