3. Метки и элементы управления
Marker
Создание маркера
src/ui/marker.js
Параметры
Название
|
Тип
|
Описание
|
---|---|---|
element | HTMLElement | Использовать DOM элемент в качестве маркера. По умолчанию используется голубой, каплевидный svg маркер (light blue, droplet-shaped). |
anchor | string default: 'center' |
Определяет позицию иконки относительно ее центра. Доступные значения: 'center', 'top', 'bottom', 'left', 'right', 'top-left', 'top-right', 'bottom-left' и 'bottom-right'. |
offset | PointLike | Смещение применяемое относительно центра элемента. Отрицательные значения указывают влево и вверх. |
color | string default: '#3FB1CE' |
Если options.element не указан, то будет использоваться этот цвет. По умолчанию используется светло-синий цвет. |
scale | number default: 1 |
Если options.element не указан, то будет использоваться этот масштаб. По умолчанию шкала соответствует высоте 41px и ширине 27px. |
draggable | boolean default: false |
Если true, то можно перетаскивать маркеры на новое место (drag and drop) |
clickTolerance | number default: 0 |
Максимальное количество пикселей, на которое пользователь может переместить указатель мыши во время щелчка по маркеру, чтобы он считался допустимым щелчком (в отличие от перетаскивания маркера). По умолчанию используется наследование clickTolerance карты. |
rotation | number default: 0 |
Угол поворота маркера относительно его соответствующей rotationAlignment . Положительное значение будет вращать маркер по часовой стрелке. |
pitchAlignment | string default: 'auto' |
|
rotationAlignment | string default: 'auto' |
|
var marker = new mmrgl.Marker() .setLngLat([30.5, 50.5]) .addTo(map); // Set options var marker = new mmrgl.Marker({ color: "#FFFFFF" , draggable: true }).setLngLat([30.5, 50.5]) .addTo(map); |
Методы
Название
|
Описание
| |
---|---|---|
addTo(map) |
Прикрепляет маркер к объекту карты. Пример:
|
|
getElement() | Возвращает HTML-элемент маркера. | |
getLngLat() |
Получите географическое местоположение маркера. Долгота результата может отличаться кратно 360 градусам от долготы, ранее установленной setLngLat, потому что Маркер обертывает якорную долготу по копиям мира, чтобы сохранить маркер на экране. |
|
getOffset() | Возвращает смещение маркера. | |
getPitchAlignment() | Возвращает текущее свойство pitchAlignment маркера. | |
getPopup() |
Возвращает экземпляр всплывающего окна, привязанный к Маркеру. Пример:
|
|
getRotation() | Возвращает текущий угол поворота маркера (в градусах). | |
getRotationAlignment() | Возвращает текущее свойство rotationAlignment маркера. | |
isDraggable() | Возвращает true, если маркер можно перетащить | |
remove() |
Удаляет маркер с карты Пример:
|
|
setDraggable(shouldBeDraggable) |
Задает перетаскиваемое свойство и функциональность маркера Параметры: |
|
setLngLat(lnglat) |
Устанавливает географическое положение маркера и перемещает его. Параметры: Пример:
|
|
setOffset(offset) |
Устанавливает смещение маркера Параметры: |
|
setPitchAlignment(alignment?) |
Задает свойство pitchAlignment маркера. Параметры: |
|
setPopup(popup) |
Привязывает всплывающее окно к маркеру. Параметры: Пример:
|
|
setRotation(rotation) |
Задает свойство поворота маркера. Параметры: |
|
setRotationAlignment(alignment) |
Задает свойство rotationAlignment маркера. Параметры: |
|
togglePopup() |
Открывает или закрывает экземпляр всплывающего окна, привязанный к маркеру, в зависимости от текущего состояния всплывающего окна. Пример:
|
События
Название
|
Описание
|
---|---|
drag | Срабатывает во время перетаскивания |
dragend | Срабатывает, когда перетаскивание заканчивается |
dragstart | Срабатывает при начале перетаскивания |
Popup
Создание всплывающего блока.
src/ui/popup.js
Параметры
Название
|
Тип
|
Описание
|
---|---|---|
maxWidth | string default: '240px' |
Строка, которая задает CSS-свойство максимальной ширины всплывающего окна, например '300px'. Чтобы убедиться, что размер всплывающего окна соответствует его содержимому, установите для этого свойства значение "none" . Доступные значения можно найти здесь: https://developer.mozilla.org/en-US/docs/Web/CSS/max-width |
anchor | string default: 'bottom' |
Определяет позицию иконки относительно ее центра. Доступные значения: 'center', 'top', 'bottom', 'left', 'right', 'top-left', 'top-right', 'bottom-left' и 'bottom-right'. |
offset | number | PointLike | Object | Смещение пикселя, примененное к местоположению всплывающего окна, указанному как:
|
className | string | Имя класса для контейнера |
focusAfterOpen | boolean default: true |
Если true, то после открытия окна, будет произведена попытка установить фокус (курсор) в первый элемент внутри окна, который это поддерживает, например <input/>. |
closeOnMove | boolean default: false |
Если true, то всплывающее окно будет закрыто при перемещении карты. |
closeOnClick | boolean default: true |
Если true, то всплывающее окно будет закрыто при нажатии на карту. |
closeButton | boolean default: true |
Если true, то в правом верхнем углу всплывающего окна появится кнопка закрытия. |
var markerHeight = 50, markerRadius = 10, linearOffset = 25; var popupOffsets = { 'top' : [0, 0], 'top-left' : [0,0], 'top-right' : [0,0], 'bottom' : [0, -markerHeight], 'bottom-left' : [linearOffset, (markerHeight - markerRadius + linearOffset) * -1], 'bottom-right' : [-linearOffset, (markerHeight - markerRadius + linearOffset) * -1], 'left' : [markerRadius, (markerHeight - markerRadius) * -1], 'right' : [-markerRadius, (markerHeight - markerRadius) * -1] }; var popup = new mmr gl.Popup({offset: popupOffsets, className: 'my-class' }) .setLngLat(e.lngLat) .setHTML( "<h1>Hello World!</h1>" ) .setMaxWidth( "300px" ) .addTo(map); |
Методы
Название
|
Описание
| |
---|---|---|
addClassName(className) |
Добавляет CSS класс к элементу всплывающего контейнера. Параметры: Пример:
|
|
addTo(map) |
Добавляет всплывающее окно на карту. Пример:
|
|
getElement() |
Возвращает HTML-элемент всплывающего окна. Пример:
|
|
getLngLat() |
Возвращает географическое местоположение якоря всплывающего окна. Долгота результата может отличаться кратно 360 градусам от долготы, ранее установленной setLngLat, потому что Popup обертывает якорную долготу по копиям мира, чтобы сохранить всплывающее окно на экране. |
|
getMaxWidth() | Возвращает максимальную ширину всплывающего окна. | |
isOpen() | Возвращает true, если всплывающее окно открыто, false, если оно закрыто. | |
remove() |
Удаляет всплывающее окно с карты, на которую оно было добавлено. Пример:
|
|
removeClassName(className) |
Удаляет CSS класс из всплывающего элемента контейнера. Параметры: Пример:
|
|
setDOMContent(htmlNode) |
Устанавливает содержимое всплывающего окна на элемент, предоставленный в качестве узла DOM. Параметры: Пример:
|
|
setHTML(html) |
Устанавливает содержимое всплывающего окна в HTML-код, предоставленный в виде строки. Этот метод не выполняет фильтрацию HTML или дезинфекцию и должен использоваться только с доверенным контентом. Рассмотрим Popup#setText, если содержимое является ненадежной текстовой строкой. Параметры: Пример:
|
|
setLngLat(lnglat) |
Устанавливает географическое местоположение якоря всплывающего окна и перемещает его к нему. Заменяет поведение trackPointer(). Параметры: |
|
setMaxWidth(maxWidth) |
Устанавливает максимальную ширину всплывающего окна. Это установка свойства CSS max-width. Доступные значения можно найти здесь: https://developer.mozilla.org/en-US/docs/Web/CSS/max-width Параметры: |
|
setOffset(offset?) |
Устанавливает смещение всплывающего окна. Параметры: |
|
setText(text) |
Устанавливает содержимое всплывающего окна в виде строки текста. Эта функция создает текстовый узел в DOM, поэтому она не может вставлять необработанный HTML. Используйте этот метод для защиты от XSS, если всплывающее содержимое предоставлено пользователем. Параметры: Пример:
|
|
toggleClassName(className) |
Добавьте или удалите данный класс CSS во всплывающем контейнере, в зависимости от того, есть ли в контейнере в данный момент этот класс. Параметры: Пример:
|
|
trackPointer() |
Отслеживает всплывающий якорь до положения курсора на экранах с помощью указателя (он будет скрыт на сенсорных экранах). Заменяет поведение setLngLat. Для большинства случаев использования установите closeOnClick и closeButton в false. Пример:
|
События
Название
|
Описание
| |
---|---|---|
close |
Срабатывает, когда всплывающее окно закрывается вручную или программно. Пример:
|
|
open |
Срабатывает, когда всплывающее окно открывается вручную или программно. Пример:
|
IControl (Спецификация для разработчика)
Интерфейс для элементов интерактивного управления, добавленных на карту. Это спецификация для разработчиков: это не метод или класс.
Элементы управления должны реализовывать onAdd и onRemove так же это должен быть <div>. Чтобы использовать стиль элемента управления MMR GL JS, добавьте класс mmrgl-ctrl.
src/ui/map.js
// Control implemented as ES6 class class HelloWorldControl { onAdd(map) { this ._map = map; this ._container = document.createElement( 'div' ); this ._container.className = 'mmrgl-ctrl' ; this ._container.textContent = 'Hello, world' ; return this ._container; } onRemove() { this ._container.parentNode.removeChild( this ._container); this ._map = undefined; } } // Control implemented as ES5 prototypical class function HelloWorldControl() { } HelloWorldControl.prototype.onAdd = function (map) { this ._map = map; this ._container = document.createElement( 'div' ); this ._container.className = 'mmrgl-ctrl' ; this ._container.textContent = 'Hello, world' ; return this ._container; }; HelloWorldControl.prototype.onRemove = function () { this ._container.parentNode.removeChild( this ._container); this ._map = undefined; }; |
Методы
Название
|
Описание
|
---|---|
getDefaultPosition() | При необходимости укажите положение по умолчанию для этого элемента управления. Если этот метод реализован и Map#addControl вызывается без параметра position, то в качестве позиции элемента управления будет использоваться значение, возвращаемое getDefaultPosition. |
onAdd(map) | Зарегистрируйте элемент управления на карте и дайте ему возможность зарегистрировать лисенер событий и ресурсы. Этот метод вызывается Map#addControl внутренне. |
onRemove(map) | Отмените регистрацию элемента управления на карте и дайте ему возможность отсоединить лисенер событий и ресурсы. Этот метод вызывается Map#removeControl внутренне. |
NavigationControl
Элемент управления NavigationControl содержит кнопки масштабирования (zoom) и компас (compass).
src/ui/control/navigation_control.js
Параметры
Название
|
Тип
|
Описание
|
---|---|---|
showCompass | boolean default: true |
Если true, то кнопка компаса отображает. |
showZoom | boolean default: true |
Если true, то кнопки увеличения и уменьшения масштаба отображаются. |
visualizePitch | boolean default: false |
Если true, то шаг визуализируется вращением оси X. |
var nav = new mmrgl.NavigationControl(); map.addControl(nav, 'top-left' ); |
GeolocateControl
Элемент управления GeolocateControl предоставляет кнопку, которая использует API геолокации браузера для определения местоположения пользователя на карте.
Не все браузеры поддерживают геолокацию, и некоторые пользователи могут отключить эту функцию. Поддержка геолокации для современных браузеров, включая Chrome, требует, чтобы сайты обслуживались по протоколу HTTPS. Если поддержка геолокации недоступна, то GeolocateControl будет отображаться как отключенный.
Уровень масштабирования будет зависеть от точности геолокации, обеспечиваемой устройством.
GeolocateControl имеет два режима. Если trackUserLocation имеет значение false (по умолчанию), то элемент управления действует как кнопка, которая при нажатии настраивает камеру карты на местоположение пользователя. Если пользователь перемещается, карта не обновляется. Это больше всего подходит для рабочего стола. Если trackUserLocation имеет значение true, то элемент управления действует как кнопка переключения, которая отслеживает передвижение пользователя. В этом режиме GeolocateControl имеет три состояния взаимодействия:
- 'active' — камера карты автоматически обновляется по мере изменения местоположения пользователя, сохраняя точку местоположения в центре.
- 'passive' — точка местоположения пользователя автоматически обновляется, но камера карты-нет. Происходит при инициировании пользователем перемещения карты.
- 'disabled' — происходит, если Геолокация недоступна, отключена или запрещена.
Этими состояниями взаимодействия нельзя управлять программно, скорее они задаются на основе взаимодействия с пользователем.
src/ui/control/geolocate_control.js
Параметры
Название
|
Тип
|
Описание
|
---|---|---|
positionOptions | Object default: { enableHighAccuracy:false, timeout:6000 } |
Объект PositionOptions API геолокации. |
fitBoundsOptions | Object default: { maxZoom:15 } |
Map#fitBounds объект Options, который используется, когда карта перемещается и масштабируется до местоположения пользователя. По умолчанию используется maxZoom 15, чтобы ограничить масштаб карты для очень точных местоположений. |
trackUserLocation | boolean default: false |
Если true, то элемент управления Geolocate становится переключателем и когда он активен карта будет получать обновления о местоположении пользователя по мере его изменений. |
showAccuracyCircle | boolean default: true |
По умолчанию, если showUserLocation имеет значение true, вокруг местоположения пользователя будет нарисован прозрачный круг, указывающий точность местоположения пользователя (точность 95%). Установите значение false для отключения. Всегда отключается, когда showUserLocation имеет значение false. |
showUserLocation | boolean default: true |
По умолчанию точка будет отображаться на карте в месте расположения пользователя. Установите значение false для отключения. |
map.addControl( new mmrgl.GeolocateControl({ positionOptions: { enableHighAccuracy: true }, trackUserLocation: true })); |
Методы
Название
|
Описание
| |
---|---|---|
trigger |
Программно запросите и переместите карту в местоположение пользователя. Пример:
|
События
Название
|
Описание
| |
---|---|---|
error |
Запускался при каждом обновлении позиции API геолокации, которое возвращалось как ошибка. Параметры: Пример:
|
|
geolocate |
Запускался при каждом обновлении позиции API геолокации, которое возвращалось как успешное. Параметры: Пример:
|
|
outofmaxbounds |
Срабатывает при каждом обновлении позиции API геолокации, которое возвращается как успешное, но позиция пользователя находится вне maxBounds карты. Параметры: Пример:
|
|
trackuserlocationend |
Срабатывает, когда элемент управления Geolocate переходит в фоновое состояние, это происходит, когда пользователь меняет камеру во время активной позиции. Это применимо только в том случае, если trackUserLocation имеет значение true. В фоновом режиме точка на карте будет обновляться с обновлениями местоположения, но камера - нет. Пример:
|
|
trackuserlocationstart |
Срабатывает, когда элемент управления Geolocate переходит в активное состояние, это происходит либо при первом получении успешной позиции API геолокации для пользователя (за этим последует событие geolocate), либо пользователь нажимает кнопку geolocate, находясь в фоновом состоянии, которое использует последнюю известную позицию для повторного центрирования карты и входа в активное состояние (событие geolocate не последует, если местоположение пользователя не изменится). Пример:
|
ScaleControl
Элемент управления ScaleControl отображает отношение расстояния на карте к соответствующему расстоянию на земле.
src/ui/control/scale_control.js
Параметры
Название
|
Тип
|
Описание
|
---|---|---|
maxWidth | number default: '100' |
Максимальная длина элемента управления масштабом в пикселях. |
unit | string default: 'metric' |
Единица измерения расстояния ('imperial', 'metric' или 'nautical'). |
var scale = new mmrgl.ScaleControl({ maxWidth: 80, unit: 'imperial' }); map.addControl(scale); scale.setUnit( 'metric' ); |
Методы
Название
|
Описание
|
---|---|
setUnit(unit) |
Установите единицу измерения расстояния на шкале Параметры: unit:Unit Единица измерения расстояния ( «imperial» , «metric» или «nautical»). |
FullscreenControl
Элемент управления FullscreenControl содержит кнопку для переключения карты в полноэкранный режим и обратно.
src/ui/control/fullscreen_control.js
Параметры
Название
|
Тип
|
Описание
|
---|---|---|
container | HTMLElement | container — это элемент DOM, который открывать в полноэкранном режиме. По умолчанию контейнер карты будет использоваться для полноэкранного режиме. |
map.addControl( new mmrgl.FullscreenControl({container: document.querySelector( 'body' ) })); |