Карта
Данный компонент отображает географическую карту, дорожную карту, карту местности или спутниковую карту. Компонент позволяет создавать множество слоев, которые показывают и динамически обновляют геозоны, устройства или пользовательские объекты. Карта может использовать множество тайловых источников геоданных и изображений (например, Google Maps, Bing Maps, OpenStreetMap или Yandex Maps).
Общие переменные (Cвойства)
[?]
Компонент Карта имеет следующие основные свойства и группы свойств, общие для всех компонентов:
Имя, Дополнительные свойства, Свойства контейнера, Стили, Прелоадер, События,Привязки.
Слои
Данное свойство позволяет определить слои карты и управлять их видимостью.
Имя переменной:
layers
Записи:
0..не ограничено
Формат записи:
Имя поля | Тип поля | Примечания |
id | String | ID. Уникальный ID слоя. |
name | String | Name. Имя слоя. |
description | String | Description. Описание слоя. |
show | Boolean | Show. Определяет видимость слоя. |
mapLink | String | Ссылка на карту. Пользовательская Ссылка на карту, которая применяется только для данного слоя. При определении имеет приоритет над глобальным свойством Ссылка на карту. |
linkParameters | Data Table | Параметры ссылки. Пользовательские параметры для добавления к Ссылке на карту слоя, если она определена. Формат и поведение те же, что и у глобального свойства Параметры ссылки. |
Маркеры
Данное свойство позволяет определить отображение маркеров на выбранном слое карты и управлять их визуальным представлением.
Имя переменной:
markers
Записи:
0..не ограничено
Формат записи:
Имя поля | Тип поля | Примечания |
id | String | ID. Уникальный ID маркера. |
layer | String | Слой. ID слоя карты для отображения маркера. |
latitude | Double | Широта. Широта маркера. |
longitude | Double | Долгота. Долгота маркера. |
riseOnHover | Boolean | Появление при наведении. |
riseOffset | Integer | Z-index смещения появления. |
draggable | Boolean | Перетаскиваемый. |
popupOptions | Data Table | Настройки всплывающего окна. |
tooltipOptions | Data Table | Настройки всплывающей подсказки. |
style | String | Стиль. Стиль CSS, который будет применен к маркеру. |
Путь
Данное свойство позволяет определить отображение путей на выбранном слое карты и управлять их визуальным представлением.
Имя переменной:
tracks
Записи:
0..не ограничено
Формат записи:
Имя поля
Тип поля
Примечания
id
String
ID. Уникальный ID пути.
polyline
Data Table
Ломанная линия. Определяет точки, формирующие ломаную линию. Вложенная таблица данных с несколькими полями:
Широта - широта точки
Долгота- долгота точки
Настройки всплывающего окна - Таблица данных, описывающая содержимое и поведение всплывающих окон со следующими параметрами:
popupContent
String
Строка HTML-содержимого, которое будет отображаться в теле всплывающего окна.
className
String
A custom CSS class name to assign to the popup.
activationEvent
String
Выберите событие, которое вызовет активацию всплывающего окна: клик или наведение.
closeButton
Boolean
- True - отображение кнопки закрыть в теле всплывающего окна.
autoClose
Boolean
- True - Всплывающее окно будет закрываться при открытии другого всплывающего окна.
- False - Всплывающее окно будет оставаться открытым при открытии других всплывающих окон.
closeOnEscapeKey
Boolean
- True - Всплывающее окно будет закрыто при нажатии клавиши escape.
closeOnClick
Boolean
- True - всплывающее окно будет закрыто, если пользователь щелкнет мышью за пределами всплывающего окна.
showNullValues
Boolean
Соединить Null значения. При значении True
, если одна из точек в таблице данных ломаной линии недействительна из-за значения NULL
в поле широты или долготы, линия пути будет построена для соединения предшествующей и последующей точек.
При значении False
линия не будет построена между точками, предшествующими и последующими за недействительной точкой.
description
String
Описание. Описание пути.
layerId
String
Слой. ID слоя карты для отображения пути.
polylineStyleId
String
Стиль линии. Стиль CSS, который будет применен к ломаной линии.
circleMarkerStyleId
String
Стиль точки. Стиль CSS, который будет применен к круговому маркеру.
Зоны
Данное свойство позволяет определить отображение областей на выбранном слое карты и управлять их визуальным представлением.
Имя переменной:
areas
Записи:
0..не ограничено
Формат записи:
Имя поля | Тип поля | Примечания |
id | String | ID. Уникальный ID области. |
polyline | Data Table | Ломанная линия. Определяет точки, формирующие ломаную линию. Вложенная таблица данных с несколькими полями:
|
description | String | Описание. Описание области. |
layerId | String | Слой. ID слоя карты для отображения области. |
areaStyleId | String | Стиль. Стиль CSS, который будет применен к области. |
Круглые зоны
Данное свойство позволяет определить отображение круглых областей на выбранном слое карты и управлять их визуальным представлением.
Имя переменной:
circleAreas
Записи:
0..не ограничено
Формат записи:
Имя поля | Тип поля | Примечания |
id | String | ID. Уникальный ID круглой области. |
description | String | Описание. Описание круглой области. |
latitude | Double | Широта. Широта круглой области. |
longitude | Double | Долгота. Долгота круглой области. |
radius | Integer | Радиус. Радиус круглой области, в пикселях. |
layerId | String | Слой. ID слоя карты для отображения круглой области. |
circleAreaStyleId | String | Стиль. Стиль CSS, который будет применен к круглой области. |
Показать строку поиска
Если включено, отображает строку поиска.
Имя переменной:
enableSearch
Записи:
1
Формат записи:
Имя поля | Тип поля | Примечания |
enableSearch | Boolean | Показать строку поиска |
Ключ доступа для тайлов
Пользовательский токен доступа, который будет добавляться в URL каждого тайлового запроса. Каждый запрос будет отображаться с добавленным параметром запроса access_token
, в качестве значения которого будет использоваться Ключ доступа для тайлов. Например: https://tile.exampleMapURL.org/4/8/4.png?access_token=<Access Token for Tiles>
Имя переменной:
accessToken
Записи:
1
Формат записи:
Имя поля | Тип поля | Примечания |
accessToken | String | Ключ доступа для тайлов |
Широта
Указывает начальную широту центра карты. Если включена опция Генерировать события "Координаты изменены", значение свойства Широта будет обновляться при каждом событии масштабирования, прокрутки и нажатия мыши для отображения текущего центра карты.
Имя переменной:
latitude
Записи:
1
Формат записи:
Имя поля | Тип поля | Примечания |
latitude | Double | Широта |
Долгота
Указывает начальную долготу центра карты. Если включена функция Генерировать события "Координаты изменены", значение свойства Долгота будет обновляться для каждого события масштабирования, прокрутки и нажатия кнопки мыши, чтобы отобразить текущий центр карты.
Имя переменной:
longitude
Записи:
1
Формат записи:
Имя поля | Тип поля | Примечания |
longitude | Double | Долгота |
Выбранный маркер
Указывает маркер, выбираемый по умолчанию. Значение данного поля должно соответствовать полю ID свойства Маркеры.
Имя переменной:
selectedMarker
Записи:
1
Формат записи:
Имя поля | Тип поля | Примечания |
selectedMarker | String | Выбранный маркер |
Ссылка на карту
URL-адрес, обслуживающий файл TileJSON и папки с тайловыми изображениями для каждого уровня желаемого масштаба. Ссылка на карту должна быть URL-адресом, предлагаемым веб-сервером. Если изображения карты расположены на хост-машине, каталог, содержащий файл TileJSON и папки с изображениями, может быть передан на localhost. Ссылки на директории операционной системы приведут к ошибке браузера. Таблица Слои расширяется за счет тайлов, найденных Ссылок на карту, и накладывается на основную карту.
Стандарт TileJson определяет, что URL с корнем www.example.com , на уровне масштабирования {z}, обслуживающий тайл с координатами X {x} и Y {y}, формулируется как www.example.com/{z}/{x}/{y}.png. Чтобы получить тайлы из URL, который структурирован по-другому, свойство Ссылка на карту принимает переменные {z}
, {x}
и {y}
, позволяя определять различные структуры URL, например www.{z}.{x}.{y}.example.com
.
Имя переменной:
mapLink
Записи:
1
Формат записи:
Имя поля | Тип поля | Примечания |
mapLink | String | URL-адрес, предоставляющий папки с изображениями тайлов и файл TileJSON. |
Провайдер поиска по карте
Определяет провайдера поиска по карте для строки поиска. Данной свойство имеет два возможных значения:
Nominatim
Широта Долгота
Имя переменной:
mapProvider
Записи:
1
Формат записи:
Имя поля | Тип поля | Примечания |
mapProvider | String | Провайдер поиска по карте |
Показывать кнопку центрирования на маркере
Если включено, на маркере, указанном в свойстве Выбранный маркер, отображается карта с указанием центра кнопки.
Имя переменной:
centerMap
Записи:
1
Формат записи:
Имя поля | Тип поля | Примечания |
centerMap | Boolean | Кнопка центрирования на маркере |
Показывать пользовательскую кнопку
Если включено, отображает пользовательскую кнопку в настраиваемым поведением.
Имя переменной:
customButton
Записи:
1
Формат записи:
Имя поля | Тип поля | Примечания |
customButton | Boolean | Показывать пользовательскую кнопку |
Объединить маркеры на карте
Если данная опция включена, близко расположенные маркеры будут сгруппированы и обозначены одним значком на соответствующих уровнях масштабирования. При увеличении масштаба кластера маркеры будут отображаться отдельно.
Имя переменной:
markerClusterActivator
Записи:
1
Формат записи:
Имя поля | Тип поля | Примечания |
markerClusterActivator | Boolean | Объединить маркеры на карте |
Стили для объединенных маркеров
Стили CSS для применения к значку, представляющему кластер. Применяется только при активном параметре Объединить маркеры на карте.
Имя переменной:
markerClusterStyles
Записи:
1
Формат записи:
Имя поля | Тип поля | Примечания |
markerClusterStyles | String | Стили для объединенных маркеров |
Прокси
Если включено, все ответы на запросы тайлов будут идти через SberMobile сервер как прокси.
Имя переменной:
proxy
Записи:
1
Формат записи:
Имя поля | Тип поля | Примечания |
proxy | Boolean | Прокси |
Параметры ссылки
Укажите любое количество дополнительных параметров, которые будут добавлены к ссылке на карту. Например, если указана следующая таблица данных:
Ключ
Значение
key1
value1
key2
value2
Тогда параметры будут добавлены к Ссылке на карту в виде ?key1=value1&key2=value2
, в результате чего получатся ссылки на карту, похожие наhttps://tile.exampleMapURL.org/4/8/4.png?key1=value1&key2=value2
.
Имя переменной:
linkParameters
Записи:
0…Unlimited
Формат записи:
Имя поля | Тип поля | Примечания |
key | String | Ключ |
value | String | Значение |
Стили маркеров
Определяет стили и опции визуализации маркеров.
Имя переменной:
markersStyles
Записи:
0..не ограничено
Формат записи:
Имя поля | Тип поля | Примечания |
id | String | ID. Уникальный ID маркера. Значение данного поля должно соответствовать полю ID свойства Маркеры. |
name | String | Имя. Имя предустановленного стиля. |
description | String | Описание. Описание предустановленного стиля. |
selectedMarkerImage | Data Block | Картинка выбранного маркера. Изображение маркера в выбранном состоянии. |
defaultMarkerImage | Data Block | Картинка маркера по умолчанию. Изображение маркера в состоянии по умолчанию. |
Стили путей
Определяет стили и опции визуализации путей.
Имя переменной:
polylinesStyles
Записи:
0..не ограничено
Формат записи:
Имя поля | Тип поля | Примечания |
id | String | ID. Уникальный ID пути. Значение данного поля должно соответствовать полю ID свойства Tracks. |
name | String | Имя. Имя предустановленного стиля. |
description | String | Описание. Описание предустановленного стиля. |
color | Color | Цвет. Цвет ломаной линии. |
width | Integer | Ширина. Ширина ломаной линии. |
opacity | Double | Прозрачность. Прозрачность ломаной линии. |
stroke | String | Штрих. Штрих ломаной линии. |
dashArray | String | Длина штриха. Определяет узор из штрихов и пробелов, используемых для рисования контура пути. |
dashOffest | String | Смещение штрихов. Смещение массива штрихов. |
additionalStyles | String | Добавочные стили Дополнительный стиль CSS, который будет применен к ломаной линии. |
Стили точек путей
Определяет стили и параметры визуализации для точек на пути.
Имя переменной:
trackPointStyles
Записи:
0..unlimited
Формат записи:
Имя поля | Тип поля | Примечания |
id | String | ID. Уникальный идентификатор стиля точки пути. |
name | String | Имя. Имя предустановки стиля. |
description | String | Описание. Описание предустановки стиля. |
color | String | Цвет. Цвет точки. |
width | Integer | Ширина. Ширина точки. |
opacity | Double | Прозрачность. Прозрачность точки. |
fill | Boolean | Заливка. Если эта опция включена, точка будет залита цветом, указанным в полях Цвет заливки и Прозрачность заливки. |
fillColor | String | Цвет заливки. Цвет для заливки точки. |
fillOpacity | Double | Прозрачность заливки. Прозрачность цвета для заливки точки. |
stroke | String | Видимость обводки. Видимость обводки точки. |
dashArray | String | Длина штриха. Определяет узор из штрихов и пробелов, используемых для рисования контура точки. |
dashOffest | String | Смещение штрихов. Смещение массива штрихов. |
radius | Integer | Радиус. Радиус точки. |
additionalStyles | String | Добавочные стили. Дополнительные стили CSS, которые будут применены к точке. |
Стили зон
Определяет стили и опции визуализации зон.
Имя переменной:
areasStyles
Записи:
0..не ограничено
Формат записи:
Имя поля | Тип поля | Примечания |
id | String | ID. Уникальный ID области. Значение данного поля должно соответствовать полю id свойства areas. |
name | String | Имя. Имя предустановленного стиля. |
description | String | Описание. Описание предустановленного стиля. |
color | String | Цвет. Цвет области. |
width | Integer | Ширина. Ширина зоны. |
opacity | Double | Прозрачность. Прозрачность зоны. |
fill | Boolean | Заливка. Если эта опция включена, область будет залита цветом, указанным в полях Цвет заливки и Прозрачность заливки. |
fillColor | String | Цвет заливки. Цвет для заливки области. |
fillOpacity | Double | Прозрачность заливки. Прозрачность цвета для заливки области. |
stroke | String | Видимость обводки. Видимость обводки границы области. |
dashArray | String | Длина штриха. Определяет узор из штрихов и пробелов, используемых для рисования контура области. |
dashOffest | String | Смещение штрихов. Смещение массива штрихов. |
additionalStyles | String | Добавочные стили. Дополнительные стили CSS, которые будут применены к области. |
Стили круглых зон
Определяет стили и опции визуализации круглый зон.
Имя переменной:
circleAreasStyles
Записи:
0..не ограничено
Формат записи:
Имя поля | Тип поля | Примечания |
id | String | ID. Уникальный ID круглой области. Значение данного поля должно соответствовать полю Id свойства Markers. |
name | String | Имя. Имя предустановленного стиля. |
description | String | Описание. Описание предустановленного стиля. |
color | String | Цвет. Цвет круглой области. |
weight | Integer | Ширина. Ширина круглой области. |
opacity | Double | Прозрачность. Прозрачность круглой области. |
fill | Boolean | Заливка. Если эта опция включена, круглая область будет залита цветом, указанным в полях Цвет заливки и Прозрачность заливки. |
fillColor | String | Цвет заливки. Цвет для заливки круглой области. |
fillOpacity | Double | Прозрачность заливки. Прозрачность цвета для заливки круглой области. |
stroke | String | Видимость обводки. Видимость обводки границы круглой области. |
dashArray | String | Длина штриха. Определяет узор из штрихов и пробелов, используемых для рисования контура круглой области. |
dashOffest | String | Смещение штрихов. Смещение массива штрихов. |
additionalStyles | String | Добавочные стили. Дополнительные стили CSS, которые будут применены к круглой области. |
События
Свойства для включения определенных событий. Помимо свойств для включения общих событий мыши, компонент Карта имеет следующее свойство для включения определенного события.
Генерировать события "Координаты изменены"
Если эта функция включена, то при изменении координат карты будет генерироваться событие "Координаты изменены".
Имя переменной:
generateCoordinateChanged
Записи:
1
Формат записи:
Имя поля | Тип поля | Примечания |
generateCoordinateChanged | Boolean | Генерировать события изменения координат |
Масштаб
Группа свойств, определяющих, как элементы управления масштабированием отображаются для пользователя.
Масштаб
Определяет масштаб карты по умолчанию
Имя переменной:
zoom
Записи:
1
Формат записи:
Имя поля | Тип поля | Примечания |
zoom | Integer | Уровень масштабирования |
Включить управление приближением
Если включено, отображает кнопки управления приближением.
Имя переменной:
zoomControl
Записи:
1
Формат записи:
Имя поля | Тип поля | Примечания |
zoomControl | Boolean | Управление приближением |
Показывать масштаб
Если включено, отображается масштабная линейка, указывающая масштаб карты.
Имя переменной:
showScale
Записи:
1
Формат записи:
Имя поля | Тип поля | Примечания |
showScale | Boolean | Показывать масштаб |
Положение
Указывает, где будет отображаться шкала масштаба, когда она активна.
Имя переменной:
scalePosition
Записи:
1
Формат записи:
Имя поля | Тип поля | Примечания |
scalePosition | Boolean | Положение |
Имперская шкала
Указывает, должна ли масштабная линейка отображать расстояние в имперских единицах, таких как мили и футы.
Имя переменной:
imperialScale
Записи:
1
Формат записи:
Имя поля | Тип поля | Примечания |
imperialScale | Boolean | Имперская шкала |
Метрическая шкала
Указывает, должна ли масштабная линейка отображать расстояние в метрических единицах, таких как километры и метры.
Имя переменной:
metricScale
Записи:
1
Формат записи:
Имя поля | Тип поля | Примечания |
metricScale | Boolean | Метрическая шкала |
Обновлять масштаб при ожидании
When selected, the scale bar measurements will be updated even when the map is idle.
Имя переменной:
updatesScaleWhenIdle
Записи:
1
Формат записи:
Имя поля | Тип поля | Примечания |
metricScale | Boolean | Обновлять масштаб при ожидании |
Общие события
[?]
Щелчок мыши
Расширяет общее событие компонента Щелчок мыши, добавляя поля Широта и Долгота, описанные ниже.
Имя события:
mouseClicked
Записи:
1
Формат записи:
Имя поля | Тип поля | Примечания |
latitude | Double | Указывает широту указателя мыши в момент щелчка. |
longitude | Double | Указывает долготу указателя мыши в момент щелчка. |
Нажатие на точку пути
Это событие происходит, когда пользователь нажимает на точку на пути.
Имя события:
trackPointClicked
Записи:
1
Формат записи:
Имя поля | Тип поля | Примечания |
trackId | String | Указывает идентификатор пути, на котором находится точка. |
pointIndex | Integer | Указывает индекс точки. |
latitude | Double | Указывает широту точки. |
longitude | Double | Указывает долготу точки. |
Нажатие на маркер
Событие возникает, когда пользователь нажимает на маркер.
Имя события:
markerClicked
Записи:
1
Формат записи:
Имя поля | Тип поля | Примечания |
id | String | ID события. |
value | Data Table | Содержит вложенную таблицу с информацией о нажатом маркере. В таблице несколько полей:
|
Поиск по карте
Событие возникает, когда пользователь совершает поисковый запрос с использованием интегрированного поискового компонента.
Имя события:
mapSearched
Записи:
1
Формат записи:
Имя поля | Тип поля | Примечания |
id | String | ID события. |
value | Data Table | Содержит вложенную таблицу с информацией о результате поиска. В таблице несколько полей:
|
level | Integer | Уровень события по умолчанию. |
Нажатие на пользовательскую кнопку
Событие возникает, когда пользователь нажимает на пользовательскую кнопку на компоненте карты.
Имя события:
customButtonClicked
Записи:
1
Формат записи:
Имя поля | Тип поля | Примечания |
id | String | ID события. |
value | Data Table | Содержит вложенную таблицу с информацией о результате нажатия на кнопку. В таблице одно поле:
|
level | Integer | Уровень события по умолчанию. |
Координаты изменены
Срабатывает, если включено свойство Генерировать события "Координаты изменены". Отображает текущие координаты центра представления карты при каждом изменении координат.
Имя события:
coordinateChanged
Записи:
1
Формат записи:
Имя поля | Тип поля | Примечания |
latitude | Double | Текущая широта центральной точки вида карты. |
longitude | Double | Текущая долгота центральной точки просмотра карты. |