Клуб API Карт

Клуб API Карт

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

Пост в архиве.

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

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

10 комментариев
Авторизуйтесь, чтобы оставить комментарий
mari-na-bzzz
28 января 2016, 01:43

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

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

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

map.panes.get('layers')

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

Игорь
28 января 2016, 01:43

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

mari-na-bzzz
28 января 2016, 01:43

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

Игорь
28 января 2016, 01:43

Мне не совсем понятен ход, откуда я возьму 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"));

mari-na-bzzz
28 января 2016, 01:43

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

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

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

 

Игорь
28 января 2016, 01:43

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

mari-na-bzzz
28 января 2016, 01:43

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

Patlajan
28 января 2016, 01:43

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

mari-na-bzzz
28 января 2016, 01:43

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

dimik
28 января 2016, 01:43

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

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