Яндекс карты для angular.js

в 12:01, , рубрики: angular, AngularJS, javascript, yandex maps, яндекс, метки: , , ,

image

Приветствую всех, уважаемые харбожители!
В данном посте речь идет о том, как подружить карты яндекса и javascript framework angular.js для их совместной работы. Можно, конечно, использовать и google map, но для стран СНГ их качество оставляет желать лучшего.
Немного погуглив, и не найдя готового решения, пришлось писать свое. Кому интересно, добро пожаловать под кат.

Репозиторий git Demo
Нужно было реализовать следующие требования:

  1. Отображение гео. объектов на карте.
  2. Добавление гео. объектов на карту, как в интерактивном режиме, так и программно.
  3. 4 режима работы: просмотр, выбор, редактирование, добавление.
  4. Гибкое управление внешним видом объектов карты.
  5. Ограничение на типы добавляемых и отображаемых гео. объектов.
  6. Получение выбранного пользователем гео. объекта.
  7. Применение, в случае необходимости, системы кластеризации карты.
  8. Возможность задать требование: присутствие на карте хотя бы одного объекта.
  9. Автоматическая подгрузка yandex map api, когда это требуется.
  10. Автоматическая установка центра карты, если он не задан, в текущее местоположение пользователя или в центр всех гео. объектов для отображения.
  11. Возможность задания центра карты как с помощью координат, так и через адрес.

В настоящий момент они все реализованы.

Описывать в этом топике, как все работает не вижу смысла, лучше расскажу, как этим пользоваться.
Директива ya-map предназначена для создания карты в div-е, для которого применяется. Карту можно настраивать через настройку провайдера YandexMap, который отвечает за внешний вид и поведение карты по умолчанию.
Чтобы понять, насколько все просто, достаточно запустить посмотреть файлы примеров из папки example. Предполагается что читатель знаком с основами пользования git, в состоянии клонировать приложение и подгрузить все его зависимости с помощью bower.
Итак, для работы карты нужно:

  1. Включить в проект ya-map.js.
  2. В вашем главном модуле приложения angular добавить зависимость от модуля yaMap.
  3. В нужном месте шаблона добавить следующий код: <div ya-map ng-model="…" ya-select-index="…" ya-properties="…"></div>

Всегда должны присутствовать следующие обязательные атрибуты, при этом они не обязательно должны указывать на реальные объекты в scope:

  1. ng-model — задает массив объектов для отображения на карте.
  2. ya-select-index — индекс выбранного объекта в массиве ng-model.
  3. ya-properties — задает свойства карты для отображения, такие как центр.

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

Чтобы получить расширенное поведение карты, нужно использовать следующие опции:

Опция Возможные значения Описание
mode view, select, edit, add По умолчанию: view. Карта может работать в 4 режимах, соответственно: просмотр, выбор, редактирование и добавление.
Каждый режим поддерживает возможности предыдущего режима и плюс к ним еще:

  1. Просмотр – только просмотр
  2. Выбор – возможность выбора из предоставленных гео-объектов одного, который будет доступен в scope через свойство, заданное в атрибуте ya-select-index.
  3. Редактирование – позволяет редактировать любой объект на карте (который это поддерживает), но не позволяет добавлять новые объекты.
  4. Добавление – позволяет добавлять новые объекты на карту в интерактивном режиме.

geoTypes point, linestring, circle, rectangle, polygon, all По умолчанию: all. Типы объектов, с которыми будет работать карта. Задается в строковом формате через пробел.
cluster true, false По умолчанию: false. Использовать или нет систему кластеризации карты.
showAll true, false По умолчанию: false. При первой отрисовке карты установить масштаб и центр так, чтобы можно было одновременно показать все гео. объекты, или не нужно.
controls zoomControl, typeSelector, mapTools, scaleLine, miniMap, smallZoomControl По умолчанию: undefined. Элементы управления, которые добавляются к элементам управления, заданным в провайдере YandexMap, для отображения на карте

Эти опции задаются через атрибут директивы, например: <div ya-map="{mode:'add'}"></div>
Чтобы задать обязательное наличие на карте хотя бы одного гео. объекта, нужно использовать атрибут ya-required, который может принимать любое выражение angular. Он работает так же, как и любые другие атрибуты с валидацией в angular, такие как ng-required.
Данный модуль еще не доведен до состояния release, но мной он успешно используется в одном из моих приложений. Хотелось бы услышать конструктивную критику, пожелания и все в том же духе.
За сим разрешите откланяться.

Автор: Tulov_Alex

Источник

Поделиться

* - обязательные к заполнению поля