Клуб API Карт

RemoteObjectManager, серверная кластеризация и динамическая подгрузка данных в балун

wiistriker.k
18 апреля 2016, 11:45

С сервера приходит информация о кластерах на карте. По клику на кластер два варианта:

а) если масштаб большой, то приближаем карту в координату этого кластера

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

Основной вопрос в общей реализации: где делать ajax запрос? В build кастомного layout или в clusters click event handler? Пример кода с вопросами:

var customBalloonContentLayout = ymaps.templateLayoutFactory.createClass('<div>$[properties.body]</div>', {
    build: function() {
        this.constructor.superclass.build.call(this);

        // а как тут получить активный кластер, чтобы взять его bounds
        // и сделать запрос?

        var activeObject = this.getData().state.get('activeObject');
        console.log(activeObject); // undefined
    }
});

objectManager = new ymaps.RemoteObjectManager(url + '&bounds=%b', {
    clusterBalloonContentLayout: customBalloonContentLayout,
    clusterDisableClickZoom: true
});

objectManager.clusters.events.add('click', function (e) {
    var objectId = e.get('objectId');

    var cluster = objectManager.clusters.getById(objectId);
    var bounds = cluster.bbox;

    if (map.getZoom() > 13) {
        objectManager.clusters.balloon.open(objectId);
        $.getJSON(url, {
            'bounds': bounds[0][0] + ',' + bounds[0][1] + ',' + bounds[1][0] + ',' + bounds[1][1]
        }, function(data) {
            // как тут выставить параметры для customBalloonContentLayout?
        });
    } else {
        map.setBounds(cluster.bbox);
    }
});

Ну и до кучи: можно ли сделать такой layout, который управляется через angularjs? Чтобы в scope ему передавать ответ сервера, а он уже сам рендерил, как мне надо.

5 комментариев
Подписаться на комментарии к посту
cluster.properties.set() не работает, так как объект cluster является обычным map. Если я правильно понял, то это просто raw js object именно в том виде, в котором я его передал с сервера. Если передавать в json с сервера 'properties.body', то значение отобразится в окне балуна. Неконсистентность? Или я что-то недопонимаю?
По properties ок, разобрался. Из доки:
"Могут задаваться как экземпляр класса, реализующего интерфейс IDataManager, либо в виде хэша."

Сделал cluster.properties.body = 'test';
wiistriker.k,
Правда, перерисовка шаблона в этом случае не происходит
wiistriker.k,
objectManager.clusters.balloon.setData(cluster);
Лучше делать через макет.
Перерисовывать в случае OM надо самому, вызывая this.rebuild()
https://tech.yandex.ru/maps/doc/jsapi/2.1-dev/ref/reference/layout.templateBased.Base-docpage/#rebuild