2.4.2. Категории объектов — Народная Карта Яндекса. Справка

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

Приветствую всех, уважаемые харбажители!

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

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

Репозиторий git Demo

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

Начнем с самого простого, стоит задача отобразить карту. Решение:

<ya-map ya-zoom="8" ya-center="[37.64,55.76]"></ya-map>

При этом, если не задать атрибут ya-center, центр карты будет выставлен в текущее местоположение пользователя.

Добавить гео. объекты на карту можно 2 способами, первый — непосредственное добавление, второй — добавление в коллекцию гео. объектов. Коллекции используются для объединения гео. объектов в группы, с целью дальнейших манипуляций с ними в сходной манере. Коллекции бывают двух видов: обычная коллекция и кластеризатор. Обычных коллекций на карте может быть сколько угодно, а вот кластеризатор может быть только один, и принимает в себя только точки. Ну хватит теории, перейдем к коду. Добавление гео. объекта непосредственно на карту:

<ya-map ya-zoom="10" ya-center="[37. 64,55.76]">
        <ya-geo-object ya-source="geoObject"></ya-geo-object>
</ya-map>

$scope.geoObjects=
    {
        geometry: {
            type: 'Circle',
            coordinates: [37.60,55.76],
            radius: 10000
        },
        properties: {
            balloonContent: "Радиус круга - 10 км",
            hintContent: "Подвинь меня"
        }
    };

Добавление гео. объекта в коллекцию:

<ya-map ya-zoom="10" ya-center="[37.64,55.76]">
    <ya-collection>
        <ya-geo-object ya-source="geoObject"></ya-geo-object>
    <ya-collection>
</ya-map>

Добавление точки в кластеризатор:

<ya-map ya-zoom="10" ya-center="[37.64,55.76]">
    <ya-cluster>
        <ya-geo-object ya-source="geoObject"></ya-geo-object>
    <ya-cluster>
</ya-map>

Понятно, что geoObject теперь должен указывать на точку.

Реализована поддержка всех событий карты. Чтобы подписаться на событие используется конструкция ya-event[-target]-eventname. Здесь ya-event — префикс, определяющий что это подписка на событие, target — если задан, то свойство внутри элемента, на событие которого мы хотим подписаться, eventname — имя события, на которое подписываемся. В обработчик события передается родной объект событий яндекс карт, через параметр $event. Получить объект, возбудивший событие можно через $event.get('target'). Итак, давайте подпишемся на событие click карты и на событие add свойства карты geoObjects.

<ya-map ya-zoom="10" ya-event-click="click($event)" ya-event-geo-objects-add="added($event)"></ya-map>

$scope.click = function(e){
    //что-то делаем при клике на карте
};
$scope.added=function(e){
    //что-то делаем при добавлении объекта на карту
};

Добавление элементов управления на карту производится так же просто. Стандартные элементы управления добавляются с помощью директивы yaToolbar, а если вы хотите создать собственную панель (ну или модернизировать имеющуюся), тогда внутрь ее помещаются директивы yaControl. Пример:

<ya-map ya-zoom="8" ya-center="[37.64,55.76]">
        <!-- стандартные панели управления -->
        <ya-toolbar ya-name="zoomControl"></ya-toolbar>
        <!-- собственные элементы управления -->
        <ya-toolbar ya-name="toolBar">
            <ya-control ya-type="button" ya-params="Свойство: balloonHeader"
                    ya-event-select="balloonHeader($event)"
                    ya-event-deselect="balloonHeader($event)"></ya-control>
        </ya-toolbar>
    </ya-map>

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

Больше информации вы можете получить на github проекта, а также на сайте с примерами.

Работа с большим количеством объектов. Руководство разработчика

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

Самый простой способ нанести объект на карту — создать геообъект (экземпляр класса GeoObject) и добавить его на карту. С помощью геообъектов можно отметить на карте сотни объектов без потери производительности.

Но если вам нужно нанести на карту несколько тысяч объектов, такой подход приведет к значительной потере производительности. Это связано со следующими проблемами:

• Обработка геообъектов на стороне клиента.

  Создание, обработка и визуализация геообъекта — затратная операция с точки зрения затрачиваемых ресурсов. Добавление на карту нескольких тысяч геообъектов сильно нагружает браузер. Это может привести к зависанию страниц.

• Неоптимальная загрузка данных.

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

API предоставляет набор инструментов для решения проблем, перечисленных выше:

• ObjectManager

• LoadingObjectManager

• RemoteObjectManager

• HOTSPOT Layer Layer

  . Во всех четырех инструментах отсутствует возможность перетаскивания объектов на карте. Они также не поддерживают редактирование объектов.

  Эти инструменты описаны ниже вместе с таблицей, показывающей преимущества и недостатки каждого из них.

  Инструмент	Преимущества	Disadvantages
  . — Позволяет фильтровать объекты при их отображении. — Использует кластеризацию объектов на стороне клиента. — Позволяет одновременно рендерить около тысячи объектов (попадающих во вьюпорт) без потери производительности.	— Оптимальная загрузка данных должна быть реализована самостоятельно.
  LoadingObjectManager	— Оптимально загружает данные с сервера. — Позволяет фильтровать объекты при их отображении. — Использует кластеризацию объектов на стороне клиента. — Позволяет одновременно рендерить около тысячи объектов (попадающих во вьюпорт) без потери производительности.	— Должна быть реализована серверная часть.
  RemoteObjectManager	— Оптимально загружает данные с сервера. — Может отображать результаты кластеризации серверов. — Позволяет одновременно рендерить около тысячи объектов (попадающих во вьюпорт) без потери производительности.	— Должна быть реализована серверная часть.
  Слой активных точек	— Позволяет размещать на карте различные объекты: метки, круги, многоугольники и так далее. — С сервера загружаются только необходимые данные. — Нет ограничений на количество объектов для одновременного отображения на карте без потери производительности.	— Комплексная реализация серверной части. — Невозможно повторно отобразить объект на стороне клиента. Для изменения внешнего вида объекта (например, при наведении на него мышкой) необходимо отправить на сервер запрос на новое изображение.

  Вот как работает ObjectManager: В качестве входных данных менеджер получает JSON-описание всех объектов, которые должны быть размещены на карте. По этому описанию менеджер создает наложения объектов (их визуальное представление), которые затем добавляет на карту. ObjectManager также позволяет кластеризовать объекты.

  Перед работой с ObjectManager описание объектов в формате JSON необходимо загрузить с удаленного сервера на сторону клиента (например, с помощью функции jQuery.getJSON()).

  Этот инструмент имеет самую низкую производительность из всех обсуждаемых инструментов. Тем не менее, инструмент имеет заметное преимущество в производительности по сравнению с использованием отдельных геообъектов или кластеризатора.

  Менеджер объектов LoadingObjectManager работает по тому же принципу, что и ObjectManager — создает наложения на основе JSON-описания объектов и добавляет их на карту.

  Разница между этими двумя менеджерами заключается в следующем: ObjectManager не загружает данные с сервера. Он работает только с теми объектами, которые были предварительно загружены на стороне клиента. LoadingObjectManager загружает данные сам, и только для объектов, попадающих в область просмотра карты.

  LoadingObjectManager хранит загруженные данные на стороне клиента. Когда пользователь перемещает карту или меняет масштаб, менеджер проверяет, были ли данные ранее загружены, — если нет, то загружает данные.

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

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

  Принцип работы RemoteObjectManager аналогичен LoadingObjectManager. Основное отличие этих инструментов в том, что RemoteObjectManager не кластеризует объекты на стороне клиента, но может отображать результаты кластеризации сервера.

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

  Из всех трех менеджеров RemoveObjectManager обеспечивает наилучшую производительность при работе с большим количеством объектов.

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

  Принцип хотспотов следующий: вместо отображения на карте отдельных геообъектов отображается один слой, содержащий изображения всех этих объектов. Поверх слоя с изображениями объектов на карту добавляется слой хотспотов, содержащий информацию об этих объектах и ​​их границах.

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

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

  Из всех четырех технологий эта технология является самой эффективной, но и самой сложной в использовании.

  Яндекс Карта Строительство

  Год назад мы создали сервис, который используется для построения
  Яндекс карты. С тех пор большое количество пользователей начали применять его для себя.
  Хотя модуль недостаточно удобен. Основная проблема в том, что пользователь все еще получает
  необработанный код в конечном результате.

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

  Теперь создавать Яндекс Карту стало как никогда просто.

  Яндекс Карта Строительство Модуль mod_xdsoft_ymaps.v.1.3.1_for_Joomla2.5-3.2.zip

  Особенности:

  • Настройка размера, центра, масштаба и типа карты.
  • Добавление элементов управления картой, таких как масштабирование, тип карты, трафик
    информация, миникарта и т.д.
  • Создание случайного количества объектов на карте.
  • 4 типа объектов: многоугольник, ломаная линия, круг и метка. Каждый
    тип имеет свои собственные параметры.
  • Визуальное редактирование многоугольников, линий и окружностей. Масштабирование,
    поворот, добавление новых точек на карту.
  • Каждая карта имеет свой уникальный ID, а значит, может быть
    бесконечное количество модулей карты на странице.

  Модуль

  • доступен на русском и английском языках.
  • Кроме всех, есть возможность автоопределения местоположения
    пользователь.
  • Опция для отображения уровня трафика на улицах.

  Настройка модуля

  Установка этого модуля ничем не отличается от установки любого другого модуля.

  Если все прошло успешно, вы увидите модуль построения карты XD soft Yandex в
  список.

  Выбери. Вы увидите две колонки. Слева поставьте имя, должность и ее отображение
  критерии.

  Справа — сам конструктор карт. Первая вкладка (открыта по умолчанию) — область строительства.

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

  Есть два способа установить начальное местоположение. Использование мыши или поиска.

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

  Количество объектов на карте — не ограничено. Все объекты будут автоматически сохранены с помощью AJAX.

  ВНИМАНИЕ!

  Данные объекта хранятся в таблице Mysql. Все данные будут сохранены автоматически. Даже после смены
  свойства объекта. Вам не нужно беспокоиться о кнопке «Сохранить». Закрыв модуль, вы
  не сохранять настройки карты, но изменения, внесенные в объекты, будут сохранены.

  Настройки карты

  Если по каким-то причинам вам не нравятся настройки визуальной карты или она у вас не работает. Использовать карту
  Вкладка «Настройки». Используется для детальной настройки карты. Установить размер карты, указать центр карты
  координаты, изменить масштаб и тип карты, как вы хотите.

  Элементы управления картой

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

  Если включить их все, ваша карта будет сильно замусорена. Хотя, если для ширины карты установлено значение
  «Авто» — элементы будут располагаться нормально.

  Поведение карты

  На вкладке «Поведение карты» можно работать с параметрами, связанными с взаимодействием карты с пользователем.

  Например, если карта не должна быть интерактивной, снимите все галочки.

  Создание и редактирование объектов

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

  Также можно вращать полигоны и линии вокруг центра объекта.

  Это очень полезно, если вы хотите изменить форму или перевернуть объект.

  Каждый тип объекта имеет свою панель настроек внизу.

  Когда все объекты размещены и точно настроены, вы можете увидеть результат.

  This entry was posted in Популярное