Клуб API Карт

Кластеризация маркеров xml

maria.mashacvet
20 октября 2015, 22:49

Здравствуйте, имею данный код. Никак не могу понять как мне реализовать кластеризацию? Все данные заганяю в массив result, но как дальше?

 

      ymaps.ready(init);

 

        function init() {

            // Создание экземпляра карты.

            var myMap = new ymaps.Map('map', {

                center: [61.3216, 99.0670],

                zoom: 4,

                controls: ["searchControl","typeSelector"]

            });

 

            // Контейнер для меню.

            var menu = $('<ul class="nav nav-list"/>');

 

 var result = [];

            

            // Загрузка YMapsML-файла.

            ymaps.geoXml.load("data_mk.xml")

                .then(function (res) {

                    // Все содержимое YMapsML файла возвращается ввиде коллекции.

                    res.geoObjects.each(function (geoObject) {result.push(geoObject);});

                

                       var groups = res.geoObjects,

                        // Стили для DOM-представлений групп.

                        styles = {

                            "all": "all_map_item",

                            "beer": "beer_map_item",

                            "orange": "warning",

                            "blue": "info"

                        };

 

                    // Добавляем все группы на карту.

                    myMap.geoObjects.add(groups);

 

                    // Перебираем все группы.

                    groups.each(function (group) {

                        // Определяем стиль для группы.

                        var preset = group.options.get('preset') || 'twirl#blueIcon',

                            style = styles[preset.match(/#([a-z]+)[A-Z]/)[1]],

                            // Имя группы.

                            name = group.properties.get('name'),

                            

                            // DOM-представление группы.

                            menuItem = $('<li class="nav-header"><span class="label ' + style + '">' + name + '</span></li><div>');

                            

                        menuItem

                            // Добавляем пункт в меню.

                            .appendTo(menu)

                            // Навешиваем обработчик клика по пункту меню.

                            .on('click', function (e) {

                                // Скрываем/отображаем пункты меню данной группы.

                                $(this)

                                    .nextUntil('.nav-header')

                                    .removeClass('active')

                                    .slideToggle('fast');

 

                                // Скрываем/отображаем коллекцию на карте.

                                if(group.getParent()) {

                                    groups.remove(group);

                                }

                                else {

                                    groups.add(group);

                                }

                            });

 

                        // Перебираем элементы группы.

                        group.each(function (item) {

                            var name = item.properties.get('name'),

                                adress = item.properties.get('metaDataProperty.AnyMetaData.adres');

                                // DOM-представление элемента группы.

                                menuItem = $('<li><div class="map_item"><a href="#">' + name + '</a><p>' + adress + '</p></div></li>');

                            // Добавляем пункт в меню.

                            menuItem

                                .appendTo(menu)

                                // Навешиваем обработчик клика по пункту меню.

                                .on('click', function (e) {

                                    e.preventDefault();

 

                                    // Выставляем/убираем класс active.

                                    menuItem

                                        .toggleClass('active')

                                        .siblings('.active')

                                        .removeClass('active');

 

                                    // Открываем/закрываем баллун у метки.

                                    if(item.balloon.isOpen()) {

                                        item.baloon.close();

                                    }

                                    else {

                                        // Плавно меняем центр карты на координаты метки.

                                        myMap.setCenter(item.geometry.getCoordinates(),18,{

                                            delay: 0,

                                            callback: function () {

                                                item.balloon.open();

                                            }

                                        });

                                    }

                                });

                        });

                        

                    });

 

                    // Добавляем меню в сайдбар.

                    menu.appendTo($('#side_bar'));

                    // Выставляем масштаб карты чтобы были видны все группы.

                    myMap.setBounds(myMap.geoObjects.getBounds());

            

 

                });

             document.getElementById('russia').onclick = function() {

   myMap.setCenter([61.3216, 99.0670], 4);

}

                  

        }

 

 

 

 

1 комментарий
Подписаться на комментарии к посту

В таком виде никак. Либо коллекции либо кластеризация.

Разные группы в кластеризаторе можно реализовать только через отдельный модуль 

И если надо эти группы отображать/скрывать то это тоже не так просто – пример интерфейса тут