Яндекс карты нарисовать зоны

Яндекс карты нарисовать зоны

Карта идеально подойдет для страницы «Контакты» или «Информация о доставке». Данный вариант реализуем для любого сайта и займет немного времени для создания карты доставки.

1. Заходим на Яндекс конструктор карт, что бы долго не искать, кидаю вам ссылку — http://api.yandex.ru/maps/tools/constructor/ . Видим следующее.

2. Для примера, возьмем: Центральный офис и два магазина, расположенных в центре Москвы.

С помощью инструмента «Установка точек» раскидываем наши объекты. Просто выбираем место, в появившемся окне можно подписать название, выбрать цвет и поставить номер объекта.

3. А теперь обозначим территорию доставки. Предположим у нас две зоны: бесплатная и платная. Для этого нам понадобиться инструмент «Рисование многоугольников».

Обычно проще обозначить зону по контурам главных дорог. Выбираем начальную точку, дальше обозначаем последующие точки и замыкаем их. Можно выбрать цвет территории и подписать название, которое отобразиться при клике.

4. Если вторая зона идет поверх первой, можно нажать на любую точку и выбрать «Добавить внутренний контур». Вырезаем внутреннюю территорию.

Устанавливаем карту доставки на сайт

Все готово. Я особо не старался вырисовывать контуры зон, кто будет использовать у себя карту доставки, думаю, постарается сделать все ровно.

В конце даем название нашей карте и нажимаем «Сохранить и получить код».

В итоге получаем готовый код, который вставляем на нужную страницу.

Что бы подогнать размер карты под себя, меняем:

Вот готовая карта, которую мы только что сделали. Всем спасибо.

В этой заметке я хочу познакомить Вас с возможностями построения многоугольников на карте, с помощью API Яндекс.Карт 2.х.

Рассмотрим несколько примеров с пояснением.

1. Построение многоугольника по заданным координатам.

Рассмотрим код примера

Построение многоугольника по заданным координатам — API Яндекс.Карт v 2.x

У Яндекс.Карт давно просили сделать средство для визуализации данных с помощью тепловых карт — и мы наконец его сделали. Если вы — один из тех, кому это было очень нужно, можете переходить сразу к чтению документации на гитхабе. Если же вы ещё не знаете, нужно ли это вам, — можете потратить немного времени, чтобы почитать статью про то, что такое тепловые карты, как они генерируются на клиенте, и как мы совместили генерацию тепловой карты с картой географической.


Отображение географических точек из Википедии

Читайте также:  Процессор интел селерон 430

Что такое тепловые карты, и зачем они нужны

Итак, обо всем по порядку. Для начала давайте определимся, что такое тепловые карты и с чем их едят? Как подсказывает мне капитан очевидность википедия, тепловые карты (они же теплокарты, они же heatmap) — это графическое представление данных, где дополнительные переменные отображаются при помощи цвета. Такой вид отображения бывает очень удобным. Например, им часто пользуются веб-аналитики, чтобы увидеть наиболее активные части страниц сайта.

Вот такие карты кликов позволяет строить Яндекс.Метрика:

Иногда бывает полезным нанесение каких-то количественных показателей на географическую карту, как в случае отображения зон покрытия мобильной связи/интернета у МТС:

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

Модульная система

В версии 2.1 мы открыли доступ пользователям к нашей модульной системе, которая написана на основе YModules, разработанной нашим коллегой dfilatov. Эта модульная система имеет много разных приятных фич, таких как асинхронный resolve зависимостей, переопределение модулей, etc. Она была уже достаточно подробно описана автором на Хабре, так что если интересно, можете почитать.

Открытие модульной системы принесло нам приятный бонус — возможность для внешних разработчиков создавать собственные модули. Вроде бы и ничего архиважного, но благодаря этому наши пользователи теперь могут:

  • самостоятельно писать новую функциональность для API Яндекс.Карт и делиться им в удобном виде с другими разработчиками;
  • использовать нашу модульную систему как основную, если приложение целиком и полностью завязано на картах.

В качестве примера первого мы и создали тепловые карты.

Поскольку написать свои тепловые карты не было самоцелью данной затеи (главной задачей было сделать готовое решения для API Яндекс.Карт), перед тем как начать писать код и думать над алгоритмом работы, естественно, я полез на github искать какие-то готовые решения. Вполне ожидаемо было то, что разных реализаций тепловых карт было там чуть больше, чем достаточно (почти две с половиной сотни).

Немного изучив исходники разных проектов, я остановил свое внимание на библиотеке simpleheat авторства Mourner. У нее было два ключевых преимущества:

  • код всего проекта занимал около сотни строчек;
  • тепловая карта хорошо держала 10к точек без напряга при отрисовках (при большем количестве данных тестировать уже как-то бессмысленно, поскольку отдавать такие объемы данных только для отрисовки картинки на клиент крайне неразумно).
Читайте также:  Как закачать фото в облако на яндексе

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

Алгоритм отрисовки тепловых карт

Пообщавшись с коллегами, я понял, что все видели тепловые карты, все знают, зачем и что это. Но почти никто не знал, как они отрисовываются. Именно поэтому я постараюсь описать эту часть более детально.

API Яндекс.Карт предоставляет возможность для отображения собственной подложки для карты, реализуется это с помощью специального класса Layer. На вход ему необходимо передать функцию, которая по номеру тайла и уровню масштабирования вернет url для загрузки тайла. Кто еще не знаком с тайлами и тайловой графикой можете немного почитать о них в википедии и у нас в документации.

Написание функции генератора url’ов для получения тайлов — это фактически и есть вся задача создания тепловой карты для нашего API.

Когда мы определились с тем, что от нас нужно, мы начали думать над тем, как это сделать. Есть два принципиально различных метода для задания тепловой карты:

  • с помощью двухмерного скалярного (плоского) поля (фактически это функция двух переменных);
  • с помощью набора простых или взвешенных точек (каждой точке в соответствие ставится какое-то положительное число — ее вес).

Первый метод является более универсальным и включает в себя второй, но в тоже время он очень неудобен для использовании на практике (как часто вам предоставляют данные в виде функций нескольких переменных?), да и выглядит странно и непонятно для неподготовленных пользователей. Поэтому без лишних угрызений совести мы приняли решение, что будем использовать именно второй метод.

Для удобства работы пользователей мы решили, что будем поддерживать все самые популярные форматы входных данных, которые используются в API (Number[][], IGeoObject, IGeoObject[], ICollection, ICollection[], GeoQueryResult, JSON), из-за этого нам пришлось наложить не сильно приятное ограничение на программный интерфейс теплокарт. Теплокарте можно задавать только набор данных и нельзя удалять или добавлять точки из этого набора. Таким образом, для работы с данными мы предоставляем всего лишь два метода: getData() и setData().

Читайте также:  Как добавить виджет яндекс на экран

После того, как мы получили данные, мы приводим их к единому формату и переводим в глобальные пиксельные координаты. С такими данными уже относительно просто работать, поскольку для каждого тайла можно легко сказать, какие точки в него попадают, а какие нет.

После того, как данные были предподготовлены можно начать их отрисовывать. Как отрисовывать вопроса, вроде, не стоит (Canvas — наше все, тем более, у него есть замечательная функциональность getDataURL, особенно необходимый в нашем случае, поскольку именно url тайла мы должны предоставить API).

Для отрисовки каждой отдельной точки будем использовать кисть (рисунок слева), которая представляет из себя черно-белый градиент и рисуется на canvas’е весьма просто:

Вес точки будет определять, с какой прозрачностью кисть будет «рисовать» точку на тайле. После того, как мы отрисуем все точки тайла, у нас получится такой себе негатив нашего тайла тепловой карты.

После чего тайл будет раскрашен установлением цвета каждому пикселю из градиента (options.gradient) в соответствии со значением его прозрачности. Прозрачность же каждого пикселя тайла будет равна общей прозрачности тепловой карты (options.opacity).

Вроде как и все, но нет. Всегда найдутся какие-то исключительные ситуации, которые придется обработать дополнительно. И в нашем случае возможность задания неограниченного сверху веса точки может привести к тому, что одна точка «погасит» все остальные. Так, например, если добавить на карту несколько сотен точек с весом один и одну точку с весом тысяча, то видна будет только последняя (рисунок слева).

Поэтому во избежание таких ситуаций мы ввели дополнительную опцию intensityOfMidpoint — это параметр, который задает, какая прозрачность (фактически определяет какой цвет) должна быть у медианной по весу точки. Таким образом, нам удастся сгладить экстремумы для обычных пользователей (рисунок справа), а остальные смогут подстроить опцию до нужных значений.

Как этим пользоваться

Подробная инструкция по загрузке модуля есть в документации на github’e. После чего для использования достаточно просто подключить его через модульную систему.

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

Ссылка на основную публикацию
Adblock detector