Использование пользовательских изображений на картах

SberMobile Server поддерживает добавление собственных изображений на карты. Текущая статья описывает, как настроить инструментальную панель для использования пользовательских SVG-изображений на карте.

Изображения устройств - это стандартная модель, используемая для хранения изображений и их отображения на картах. Если вы не можете найти ее в контейнере Модели, создайте ее в Ресурсах.

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

Отключите режим чтения, щелкнув значок замка.

Нажмите кнопку Открыть... и добавьте собственное SVG-изображение с помощью кнопки Добавить строку (), указав имя изображения.

Из окна Изображения устройств можно добавить новое изображение, добавив строку (1), задав имя устройства (2) и загрузив соответствующее изображение (3).

В следующем примере будет использоваться изображение с именем сервера.

Создайте новую модель, выбрав пункт Создать в контекстном меню контейнера Модели.

Создайте модель со свойствами, указанными в следующей таблице:

Нажмите OK, чтобы сохранить и открыть окно Конфигурация модели. Перейдите на вкладку Переменные модели (1) и нажмите Добавить строку (2). Введите данные, указанные в следующей таблице (3), а затем откройте поле Формат (4).

В меню Формат настройте формат переменной со следующими данными:

Кликните OK для сохранения и закрытия.

Выберите устройство из контекста Устройства, чтобы назначить тип. В текущем примере уже создано виртуальное устройство с именем Сервер 1. Откройте контекстное меню устройства и выберите Редактировать дополнительные свойства.

Перейдите на вкладку Тип устройства (1), переключите режим записи (2) и укажите имя устройства.

Кликните OK для сохранения и закрытия.

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

Нажмите кнопку OK для сохранения и закрытия.

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

Нажмите кнопку Создать в контекстном меню инструментальной панели.

Заполните поля Имя и Описание и нажмите OK. В приведенном ниже примере имя и описание инструментальной панели - Карта.

В только что созданном контекстном меню инструментальной панели нажмите Редактировать инструментальную панель, чтобы открыть Конструктор web UI.

В Конструкторе web UI перетащите компонент Карта из палитры компонентов на сетку.

Перетащите правый нижний угол компонента карты, чтобы увеличить площадь экрана, которую он занимает.

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

Откройте редактор свойств карты, а затем откройте для редактирования свойство "Слои" .

Добавьте один слой на карту, нажав кнопку Добавить Строку и добавив указанные данные.

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

В меню Привязать свойство создайте новую привязку со следующими данными:

addRecords( {form/map0:markers},
            1, // Идентификатор маркера должен быть уникальным для каждого маркера
            1, // Идентификатор слоя, указывающий, на каком слое следует разместить маркер
            {users.admin.devices.server1:location$latitude}, 
            {users.admin.devices.server1:location$longitude},
            "", // Появление при наведении
            "", // Смещение Z-индекса появления
            "", // Перетаскиваемый
            "", // Параметры всплывающего окна
            "", // Параметры подсказки
            {users.admin.devices.server1:type$deviceType} // Идентификатор маркера стиля, который нужно применить к маркеру
          )

Аналогично вышеописанному откройте привязки Стили маркеров и добавьте следующие данные

addRecords( {form/map0:markerStyles},
            {users.admin.models.deviceImages:deviceImages$name[3]},
            {users.admin.models.deviceImages:deviceImages$image[3]},
            {users.admin.models.deviceImages:deviceImages$image[3]}
          )

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