Кластеризация точек на Yandex картах из .json

Статья про то, как кластеризовать адреса на яндекс картах используя json объект. Благодаря расширенному Апи

Для реализации подобной карты нам понядобится:

• api яндекс карты
• jquery
• json
• ровные руки

Для начала подключим все необходимые скрипты:

<script src="https://api-maps.yandex.ru/2.1/?lang=ru_RU" type="text/javascript"></script> 
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> 
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-migrate/3.0.1/jquery-migrate.min.js"></script> 

Далее остается лишь вывести карту в div контейнер:

<div id="map"></div>

Вид скрипта, который будет все кластеризовать. Пишем функцию инициализации карты. В ней задаем путь к JSON файлу, который будем парсить.  Располагаем положение карты в объект map.

Далее функцией $.getJSON которая поставляется jQuery библиотекой мы парсим json файлы и вызываем анонимную функцию в которую передаем весь наш json объект.

Задаем обход по объекту json. Изначально в одной секции у меня указан адрес, lat и lng. Поэтому после передачи каждого элемента цикла в переменную item, мы имеем возможность обращаться к ключам каждого внутреннего элемету объекта. item.addr, item.lat и item.lng

Справедливый для моего кода — код json

[{adr: " Минск, улица Маяковского, 2", lat: "53.86878",   lng: "27.568371"  },  
 {adr: " Минск, улица Сергея Есенина, 1",   lat: "53.864724",   lng: "27.431063"  } ... ]

Конечно же lat и lng можно было записать в одно поле, поле координат, для оптимизации кода. Но здесь акцент сфокусирован на другом

 $(document).ready(function () {
        ymaps.ready(init);
        function init() {
            var json_path = 'json_path/json_content.json';
            var map = new ymaps.Map("map", {
                center: [53.902496, 27.561481],
                zoom: 12,
                controls: ['zoomControl', 'searchControl']
            });
            $.getJSON(json_path, function (json_arr) {
                var myGeoObjects = json_arr.map(item => {
                    return new ymaps.GeoObject({
                        geometry: {
                            type: "Point",
                            // Переведем строку с координатами в массив
                            coordinates: [item.lat, item.lng]
                        },
                        properties: {
                            clusterCaption: item.adr,
                            balloonContentBody: [
                                '<address style="font-style: normal">',
                                '<h3>Данные</h3>',
                                '<b>Адрес: </b> ' + item.adr + '<br>',
                                '</address>'
                            ].join('')
                        }
                    }, {
                        iconLayout: 'default#image',
                        iconImageHref: 'images/pin.png',
                        iconImageSize: [20, 32],
                        iconImageOffset: [-10, -16]
                    });
            })
                var clusterIcons = [
                    {
                        href: 'images/m1.png',
                        size: [50, 50],
                        // Отступ, чтобы центр картинки совпадал с центром кластера.
                        offset: [-25, -25]
                    },
                    {
                        href: 'images/m2.png',
                        size: [55, 55],
                        offset: [-22.5, -22.5]
                    },
                    {
                        href: 'images/m3.png',
                        size: [65, 65],
                        offset: [-32.5, -32.5]
                    },
                    {
                        href: 'images/m4.png',
                        size: [70, 70],
                        offset: [-35, -35]
                    },
                    {
                        href: 'images/m5.png',
                        size: [75, 75],
                        offset: [-37.5, -37.5]
                    }
                    ];
                clusterNumbers = [5,10,20,50,100];
                // Создадим кластеризатор после получения и добавления точек
                var clusterer = new ymaps.Clusterer({
                    preset: 'islands#invertedDarkGreenClusterIcons',
                    clusterIcons: clusterIcons,
                    clusterNumbers: clusterNumbers,
                    clusterDisableClickZoom: true,
                    clusterBalloonContentLayoutWidth: 800,
                    clusterBalloonLeftColumnWidth: 160
                });
                clusterer.add(myGeoObjects);
                map.geoObjects.add(clusterer);
                map.setBounds(clusterer.getBounds(), {
                    checkZoomRange: true
                });
            })
        }
    });

Также меняем иконки кластеризации в зависимости от количества мест в одной точке (необязательная фича). Задаем параметр clusterIcons  и вписываем туда описания иконок.

И напоследок задаем параметры кластеризации в виде списка чисел clusterNumbers в зависимости от чисел будет выводится та или иная иконка. Также каждая иконка будет больше предыдущей, об этом мы уже позаботились.

Все остальные параметры, которые встречаются в моем примере js кода доступны в документации yandex карт

Впрочем на этом все, пишите в комментарии, если что-то для Вас не ясно и возникли определенные вопросы. Мы можем совместными усилиями отрефакторить код или устроить более подробное его описание.

Скачать сопутствующие материалы

Yandex maps красивые иконки

Размер:	43.00 KB
Скачано (раз):	2899
Версия:

Файл	Действие
images.zip	Скачать

p.s. Если статья была полезной и вас переполняет чувство благодарности, можете поддержать меня долларом на патреоне