Прошло два месяца с тех пор, как я начала стажировку в Энтгра. За эти два месяца я смог изучить вещи, связанные как с внутренним, так и с внешним интерфейсом. Из того, что я узнал, кластеризация карт была для меня совершенно новой. Раньше я никогда не использовал карты в веб-приложениях. Так что эта картография была для меня действительно захватывающей. В этой записи блога я поделюсь своим опытом создания кластеров карт с помощью Leaflet.
Прежде чем перейти к теме, для тех, кто не знает, что такое Leaflet, это библиотека Javascript с открытым исходным кодом, похожая на карты Google. Он действительно прост в использовании, на 100% бесплатный и имеет почти все функции картографии. Вы можете найти инструкции по настройке Leaflet здесь. В конце этого руководства вы сможете сгруппировать карту, как показано ниже.
Если вы уже настроили Leaflet на своем веб-сайте / веб-приложении, вы можете клонировать репозиторий Leaflet.MarkerCluster. Будет два файла CSS и файл Javascript с именами, как показано ниже.
1. leaflet.markercluster.js
2. MarkerCluster.css
3. MarkerCluster.Default.css
Импортируйте указанные выше три файла в свой проект. Для этого урока я добавлю на карту случайное местоположение на карте. Вот как вы инициализируете функцию кластеризации в своем проекте. Вы можете создать файл javascript, добавив приведенный ниже код. Вы также можете изменить его по своему усмотрению. Добавьте этот код, и вы получите кластерную карту.
Я добавлю больше документов, которые я считаю интересными и полезными для дальнейшего развития.
Кластеризация Live Preview
Как использовать плагин MarkerCluster
Добавить пользовательские значки на карту
Надеюсь, это было полезно, и скоро увидимся в другом сообщении в блоге. Продолжайте кодировать!
