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

19

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

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

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

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

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

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

Есть идеи?

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

NetConstructor.com
источник
Я не думаю, что 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 :)

EricSonaron
источник
Я хотел бы использовать OpenLayers, но мне нужны плавные переходы, подобные тем, которые есть в листовке. Знаете ли вы о каком-либо взломе openlayers, который копирует эти скользкие анимации масштабирования?
NetConstructor.com
Извините, но не. Прямо сейчас я немного тестирую стилизацию "точек", добавляя немного цвета и числа в круг. Но добавить анимацию пока далеко.
EricSonaron
Вы когда-нибудь находили решение этой проблемы с новыми возможностями ol3?
NetConstructor.com
3

У меня не было много времени, чтобы изучить это, но CloudMade (создатели Leaflet) имеет некоторые возможности кластеризации маркеров. Как сделать их анимированными и гладкими, не уверен в этом, но это только начало.

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

alukach
источник
3

Для пользователей листовки.

Вот порт Google Maps MarkerClusterer для Leaflet

https://github.com/ideak/leafclusterer

нс-1м
источник
Да, у меня есть эта закладка, но мне все еще нужна анимационная часть
NetConstructor.com
3

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

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

EricSonaron
источник
отличная работа с этим!
NetConstructor.com
1

Вы смотрели на полипы пример какие кластеры указывают?

Круги здесь - это векторы, которые можно изменить с помощью css.

djq
источник
спасибо, но я специально искал решения любого типа (желательно кросс-браузерные), которые позволили бы анимацию маркеров. Я не уверен, что у вас была возможность проверить пример ссылки ( redfin.com/… ) от Redfin. Эта ссылка представляет то, чего я хочу достичь - скользкие анимационные представления маркеров, по мере того как вы глубже нажимаете на / в / увеличиваете масштаб кластерных маркеров / областей.
NetConstructor.com