Клуб API Карт

Пользовательский слой heatmap

Пост в архиве.
Игорь
31 июля 2013, 14:28

Здравствуйте, требуется помощь.

Мне нужно на карте разместить визуальную информацию о плотности данных на местности. Нужно использование именно yandex maps. В google maps есть как раз подходящая мне heatmap. Можно ли её каким нибудь образом разместить на моей карте? Так же нашел библиотеку на JS которая реализует эту задачу, но посредством canvas. Можно ли каким нибудь образом рисовать на карте динамически изменяемые данные? Можно ли работать с картой как с canvas, но при этом был доступен функционал карты?

10 комментариев

Если у вас уже есть алгоритм для генерирования heatmap на карте, то вам остается только добавить на карту canvas слой.

Разместить этот слой нужно в контейнере слоев.

Получаете доступ к dom-элементу контейнера

map.panes.get('layers')

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

Чтобы добавить canvas в карту его нужно описать? Нужно указать размеры такие же как и у карты?

Размеры да, такие же, как у карты. Про описать не совсем поняла.

Мне не совсем понятен ход, откуда я возьму canvas?

Вот у меня есть код:

var xx = h337.create({"element":document.getElementById("map"), "radius":10, "visible":true});

      xx.get("canvas").onclick = function(ev){

        var pos = h337.util.mousePosition(ev);

        xx.store.addDataPoint(pos[0],pos[1]);

      };

Теперь я должен сделать так? : myMap.layers.add(xx.get("canvas"));

Если я правильно уловила, то xx.get('canvas') возвращает ссылку на дом-ноду. 

Эту ноду нужно добавить как дочернюю в контейнер слоев.

myMap.panes.get('layers').getElement().appendChild(xx.get('canvas'));

 

Спасибо наиогромнейшее, получилось приделать canvas к карте. Осталось теперь менять координаты рисуемого объекта при масштабировании и перемещении карты. Делается ли это каким-нибудь образом автоматически или нужно строить математическое решение?

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

Спасибо за инструкцию. Яндекс пока не планирует добавлять свой собственный heatmap в карты?

Пока таких планов нет

Мы планируем поделиться примером использования тепловой карты в связке с АПИ в ближайшее время.

Можете подписаться на наш блог, чтобы быть в курсе