ol/Map~Карта

import Map from 'ol/Map.js';

Карта является основным компонентом OpenLayers. Для отображения карты необходимы: представление, один или несколько слоев и целевой контейнер:

import Map from 'ol/Map.js';
import View from 'ol/View.js';
import TileLayer from 'ol/layer/Tile.js';
import OSM from 'ol/source/OSM.js';

const map = new Map({
  view: new View({
    center: [0, 0],
    zoom: 1,
  }),
  layers: [
    new TileLayer({
      source: new OSM(),
    }),
  ],
  target: 'map',
});

В приведенном выше фрагменте кода создается карта с использованием TileLayer для отображения данных OSM OSM и их отображения в элементе DOM с id map.

Конструктор помещает контейнер просмотра (с именем класса CSS ol-viewport) в целевой элемент (см. getViewport()), а затем еще два элемента внутри просмотра: один с именем класса CSS ol-overlaycontainer-stopevent для элементов управления и некоторых наложений, и один с именем класса CSS ol-overlaycontainer для других наложений (см. опцию stopEvent Overlay для различий). Сама карта размещается в дополнительном элементе внутри просмотра.

Слои хранятся как Collection в группах слоев. Библиотека предоставляет верхнюю группу. К ней обращаются с помощью getLayerGroup и setLayerGroup. Слои, указанные в параметрах, добавляются в эту группу, а addLayer и removeLayer изменяют коллекцию слоев в группе. getLayers - это удобная функция для getLayerGroup().getLayers(). Обратите внимание, что LayerGroup является подклассом BaseLayer, поэтому слои, указанные в параметрах или добавленные с помощью addLayer, могут быть группами, которые могут содержать другие группы и так далее.

new Map(options) Map.js, line 242

Имя	Тип	Описание
`controls`	Коллекция<Контроль> \| Массив<Контроль> \| undefined	Контролы, первоначально добавленные на карту. Если не указано, используется `defaults`.
`pixelRatio`	число (по умолчанию window.devicePixelRatio)	Соотношение между физическими пикселями и пикселями независимыми от устройства (dips) на устройстве.
`interactions`	Коллекция<Взаимодействие> \| Массив<Взаимодействие> \| undefined	Взаимодействия, которые первоначально добавляются на карту. Если не указано, используется `defaults`.
`keyboardEventTarget`	HTMLElement \| Document \| строка \| undefined	Элемент, на который следует прослушивать события клавиатуры. Это определяет, когда срабатывают взаимодействия `KeyboardPan` и `KeyboardZoom`. Например, если этот параметр установлен на `document`, взаимодействия с клавиатурой всегда будут срабатывать. Если этот параметр не указан, элементом, на котором библиотека прослушивает события клавиатуры, является целевой элемент карты (т.е. предоставленный пользователем div для карты). Если это не `document`, целевой элемент должен быть сфокусирован для того, чтобы события клавиш были выпущены, что требует, чтобы у целевого элемента был атрибут `tabindex`.
`layers`	Массив<БазовыйСлой> \| Коллекция<БазовыйСлой> \| ГруппаСлоёв \| undefined	Слои. Если это не определено, будет отображена карта без слоёв. Обратите внимание, что слои отображаются в порядке предоставления, поэтому, если вы хотите, например, чтобы векторный слой отображался поверх плисового слоя, он должен следовать за плисовым слоем.
`maxTilesLoading`	число (по умолчанию 16)	Максимальное количество одновременно загружаемых плиток.
`moveTolerance`	число (по умолчанию 1)	Минимальное расстояние в пикселях, на которое должен перемещаться курсор, чтобы быть распознанным как событие перемещения карты, а не нажатия. Увеличение этого значения может облегчить нажатие на карту.
`overlays`	Коллекция<Наложение> \| Массив<Наложение> \| undefined	Наложения, первоначально добавленные на карту. По умолчанию наложения не добавляются.
`target`	HTMLElement \| строка \| undefined	Контейнер для карты, либо сам элемент, либо `id` элемента. Если при создании не указано, необходимо вызвать `setTarget` для отображения карты. Если передаётся элемент, контейнер может находиться во вторичном документе. Для обеспечения доступности (фокусировки и событий клавиатуры для навигации по карте), у элемента `target` должен быть должным образом настроен атрибут `tabindex`. Если элемент `target` находится внутри Shadow DOM, атрибут `tabindex` должен быть задан на элементе-хосте пользовательского элемента. Примечание: Поддержка CSS `transform` для целевого элемента ограничена `scale`.
`view`	Вид \| Promise<ViewOptions> \| undefined	Вид карты. Источники слоёв не будут извлечены, если это не указано при создании или через `setView`.

Вызывает:

change (BaseEvent) - Общее событие изменения. Срабатывает, когда счётчик ревизии увеличивается.
change:layerGroup (ObjectEvent)
change:size (ObjectEvent)
change:target (ObjectEvent)
change:view (ObjectEvent)
click (MapBrowserEvent) - Нажатие без перетаскивания. Двойное нажатие вызовет два из этих событий.
dblclick (MapBrowserEvent) - Истинное двойное нажатие без перетаскивания.
error (BaseEvent) - Общее событие об ошибке. Срабатывает при возникновении ошибки.
loadend (MapEvent) - Срабатывает при завершении загрузки дополнительных данных карты.
loadstart (MapEvent) - Срабатывает при начале загрузки дополнительных данных карты (плитки, изображения, объекты).
moveend (MapEvent) - Срабатывает после перемещения карты.
movestart (MapEvent) - Срабатывает, когда карта начинает перемещаться.
pointerdrag (MapBrowserEvent) - Срабатывает при перетаскивании указателя.
pointermove (MapBrowserEvent) - Срабатывает при перемещении указателя. Обратите внимание, что на сенсорных устройствах это срабатывает при перемещении карты, поэтому это не то же самое, что mousemove.
postcompose (RenderEvent) - Срабатывает после композиции слоёв. При отправке события с карты объект события не будет иметь установленного контекста. При отправке события слоем объект события будет иметь установленный контекст. В настоящее время это событие отправляют только слои WebGL.
postrender (MapEvent) - Срабатывает после отрисовки кадра карты.
precompose (RenderEvent) - Срабатывает перед композицией слоёв. При отправке события с карты объект события не будет иметь установленного контекста. При отправке события слоем объект события будет иметь установленный контекст. В настоящее время это событие отправляют только слои WebGL.
propertychange (ObjectEvent) - Срабатывает при изменении свойства.
rendercomplete (RenderEvent) - Срабатывает после завершения отрисовки, т.е. все источники и плитки завершили загрузку для текущего представления, и все плитки выведены с затуханием. Объект события не будет иметь установленного контекста.
singleclick (MapBrowserEvent) - Истинное одиночное нажатие без перетаскивания и без двойного нажатия. Обратите внимание, что это событие отложено на 250 мс, чтобы гарантировать, что это не двойное нажатие.

Расширения

BaseObject

Наблюдаемые свойства

Имя	Тип	Устанавливаемое	Тип события	Описание
`layerGroup`	ГруппаСлоёв	да	`change:layergroup`	Группа слоёв, содержащая слои в этой карте.
`size`	Размер \| undefined	да	`change:size`	Размер карты в пикселях в DOM.
`target`	HTMLElement \| строка \| undefined	да	`change:target`	Элемент или id элемента, в котором отображается карта.
`view`	Вид	да	`change:view`	Вид, контролирующий эту карту.

Методы

addControl(control) Map.js, строка 598

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

Имя	Тип	Описание
`control`	Инструмент управления	Инструмент управления.

addInteraction(interaction) Map.js, строка 611

Добавить заданное взаимодействие на карту. Если вы хотите добавить взаимодействие в другое место коллекции, используйте getInteractions() и доступные методы в Collection. Это можно использовать для остановки распространения события из функции handleEvent. Взаимодействия обрабатывают события в обратном порядке этой коллекции.

Имя	Тип	Описание
`interaction`	Взаимодействие	Добавляемое взаимодействие.

addLayer(layer) Map.js, строка 622

Добавляет заданный слой в верхнюю часть этой карты. Если вы хотите добавить слой в другое место стека, используйте getLayers() и доступные методы в Collection.

Имя	Тип	Описание
`layer`	Базовый слой	Слой.

addOverlay(overlay) Map.js, строка 640

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

Имя	Тип	Описание
`overlay`	Наложение	Наложение.

changed() унаследованный Observable.js, строка 68

Увеличивает счётчик ревизий и отправляет событие 'change'.

dispatchEvent(event){boolean | undefined} унаследованный events/Target.js, строка 85

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

Имя	Тип	Описание
`event`	Основное событие \| строка	Объект события.

Возвращаемое значение:

false, если кто-то вызвал preventDefault на объекте события или любой из слушателей вернул false.

forEachFeatureAtPixel(pixel, callback, options){T | undefined} Map.js, строка 689

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

Имя Тип Описание

pixel

Пиксель

Пиксель.

callback

функция

Обратный вызов объекта. Обратный вызов будет вызван с двумя аргументами. Первый аргумент — один feature или render feature в пикселе, второй — layer объекта и будет null для слоёв без управления. Для остановки обнаружения функции обратного вызова могут возвращать истинное значение.

options

Дополнительные опции.

Имя	Тип	Описание
`layerFilter`	undefined \| функция	Функция фильтра слоёв. Функция фильтра примет один аргумент — `layer-candidate`, и она должна вернуть логическое значение. Будут проверены только видимые слои, для которых эта функция возвращает `true`. По умолчанию будут проверены все видимые слои.
`hitTolerance`	число (по умолчанию 0)	Допуск обнаружения по пикселям CSS. Пиксели внутри радиуса вокруг заданной позиции будут проверены на наличие объектов.
`checkWrapped`	логическое значение (по умолчанию true)	Проверка обернутых объектов. Будет проверять обернутые геометрии в диапазоне +/- 1 ширины мира. Работает только если используется проекция, которую можно обернуть.

Возвращаемое значение:

Результат обратного вызова, т. е. возвращаемое значение последнего вызова обратного вызова или первое истинное значение возврата обратного вызова.

get(key){*} унаследованный Object.js, строка 135

Получение значения.

Имя	Тип	Описание
`key`	строка	Имя ключа.

Возвращаемое значение:

Значение.

getAllLayers(){Array<Слой>} Map.js, строка 737

Получение всех слоёв из всех групп слоёв.

Возвращаемое значение:

Слои.

getControls(){Коллекция<Инструмента управления>} Map.js, строка 884

Получение инструментов управления карты. Изменение этой коллекции изменяет инструменты, связанные с картой.

Возвращаемое значение:

Инструменты управления.

getCoordinateFromPixel(pixel){Coordinate} Map.js, line 857

Получить координаты для заданного пикселя. Возвращает координаты в пользовательской проекции.

Name	Type	Description
`pixel`	Pixel	Позиция пикселя в окне просмотра карты.

Returns:

Координата для позиции пикселя.

getEventCoordinate(event){Coordinate} Map.js, line 787

Возвращает координаты в пользовательской проекции для события браузера.

Name	Type	Description
`event`	MouseEvent	Событие.

Returns:

Координата.

getEventPixel(event){Pixel} Map.js, line 806

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

Name	Type	Description
`event`	UIEvent \| Object	Событие.

Returns:

Пиксель.

getFeaturesAtPixel(pixel, options){Array<FeatureLike>} Map.js, line 720

Получить все объекты, пересекающие пиксель в окне просмотра.

Name Type Description

pixel

Pixel

Пиксель.

options

Необязательные параметры.

Name	Type	Description
`layerFilter`	undefined \| function	Функция фильтрации слоев. Функция фильтрации получит один аргумент, `layer-candidate`, и должна вернуть логическое значение. Только видимые слои, для которых эта функция возвращает `true`, будут проверены на наличие объектов. По умолчанию будут проверены все видимые слои.
`hitTolerance`	number (defaults to 0)	Допуск обнаружения попадания в пикселях css. Пиксели внутри радиуса вокруг заданной позиции будут проверены на наличие объектов.
`checkWrapped`	boolean (defaults to true)	Проверка на обертывание. Будет проверять на обернутые геометрии в диапазоне +/- 1 ширина мира. Работает только если используется проекция, которая может быть обернута.

Returns:

Обнаруженные объекты или пустой массив, если объекты не найдены.

getInteractions(){Collection<Interaction>} Map.js, line 919

Получить взаимодействия карты. Изменение этой коллекции изменяет взаимодействия, связанные с картой.

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

Returns:

Взаимодействия.

getKeys(){Array.<string>} inherited Object.js, line 148

Получить список имен свойств объекта.

Returns:

Список имен свойств.

getLayerGroup(){LayerGroup} Map.js, line 929

Получить группу слоев, связанную с этой картой.

Returns:

Группа слоев, содержащая слои на этой карте.

getLayers(){Collection<BaseLayer>} Map.js, line 955

Получить коллекцию слоев, связанных с этой картой.

Returns:

Слои.

getOverlayById(id){Overlay | null} Map.js, line 906

Получить оверлей по его идентификатору (значение, возвращаемое overlay.getId()). Обратите внимание, что индекс рассматривает строковые и числовые идентификаторы как одинаковые. Поэтому map.getOverlayById(2) вернет оверлей с id '2' или 2.

Name	Type	Description
`id`	string \| number	Идентификатор оверлея.

Returns:

Оверлей.

getOverlays(){Collection<Overlay>} Map.js, line 894

Получить оверлеи карты. Изменение этой коллекции изменяет оверлеи, связанные с картой.

Returns:

Оверлеи.

getPixelFromCoordinate(coordinate){Pixel} Map.js, line 989

Получить пиксель для координаты. Эта функция принимает координаты в пользовательской проекции и возвращает соответствующий пиксель.

Name	Type	Description
`coordinate`	Coordinate	Координата карты.

Returns:

Позиция пикселя в окне просмотра карты.

getProperties(){Object.<string, *>} inherited Object.js, line 157

Получить объект со всеми именами и значениями свойств.

Возвращает:

Объект.

getRevision(){number} inherited Observable.js, line 79

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

Возвращает:

Версия.

getSize(){Size | undefined} Map.js, line 1028

Получить размер этой карты.

Возвращает:

Размер карты в пикселях в DOM.

getTarget(){HTMLElement | string | undefined} Map.js, line 833

Получить целевой элемент, в котором отображается эта карта. Обратите внимание, что это возвращает то, что введено в качестве опции или в setTarget: если это был элемент, он возвращает элемент; если строка, он возвращает ее.

Возвращает:

Элемент или идентификатор элемента, в котором отображается карта.

getTargetElement(){HTMLElement} Map.js, line 846

Получить DOM-элемент, в который отображается эта карта. В отличие от getTarget, этот метод всегда возвращает Element, или null, если у карты нет целевого элемента.

Возвращает:

Элемент, в который отображается карта.

getView(){View} Map.js, line 1041

Получить представление, связанное с этой картой. Представление управляет такими свойствами, как центр и разрешение.

Возвращает:

Представление, которое контролирует эту карту.

getViewport(){HTMLElement} Map.js, line 1050

Получить элемент, используемый в качестве области просмотра карты.

Возвращает:

Область просмотра.

hasFeatureAtPixel(pixel, options){boolean} Map.js, line 760

Определяет, пересекают ли объекты пиксель в области просмотра. Слои, включенные в обнаружение, можно настроить с помощью опции layerFilter.

Имя Тип Описание

pixel

Pixel

Пиксель.

options

Необязательные опции.

Имя	Тип	Описание
`layerFilter`	undefined \| function	Функция фильтра слоев. Функция фильтра получит один аргумент, `layer-candidate`, и должна вернуть логическое значение. Только видимые слои, для которых эта функция возвращает значение `true`, будут проверены на наличие объектов. По умолчанию будут проверены все видимые слои.
`hitTolerance`	number (по умолчанию 0)	Допуск обнаружения по нажатию в пикселях CSS. Пиксели в радиусе вокруг заданной позиции будут проверены на наличие объектов.
`checkWrapped`	boolean (по умолчанию true)	Проверка перехода. Будет проверять перекрывающиеся геометрии в диапазоне +/- 1 ширина мира. Работает только если используется проекция, которая может быть обернута.

Возвращает:

Есть ли объект в заданном пикселе?

on(type, listener){EventsKey | Array<EventsKey>} inherited Observable.js, line 152

Прослушивание определенного типа события.

Имя	Тип	Описание
`type`	string \| Array.<string>	Тип события или массив типов событий.
`listener`	function	Функция-обработчик.

Возвращает:

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

once(type, listener){EventsKey | Array<EventsKey>} inherited Observable.js, line 164

Прослушивание определенного типа события один раз.

Имя	Тип	Описание
`type`	string \| Array.<string>	Тип события или массив типов событий.
`listener`	function	Функция-обработчик.

Возвращает:

removeControl(control){Control | undefined} Map.js, line 1492

Удалить заданный элемент управления с карты.

Имя	Тип	Описание
`control`	Control	Элемент управления.

Возвращает:

Удаленный элемент управления (или undefined, если элемент управления не найден).

removeInteraction(interaction){Interaction | undefined} Map.js, line 1503

Удалить заданное взаимодействие с карты.

Имя	Тип	Описание
`interaction`	Interaction	Взаимодействие для удаления.

Возвращаемое значение:

Удаленное взаимодействие (или undefined, если взаимодействие не найдено).

removeLayer(layer){BaseLayer | undefined} Map.js, line 1514

Удаляет заданный слой с карты.

Имя	Тип	Описание
`layer`	BaseLayer	Слой.

Возвращаемое значение:

Удаленный слой (или undefined, если слой не найден).

removeOverlay(overlay){Overlay | undefined} Map.js, line 1534

Удалить заданный слой наложения с карты.

Имя	Тип	Описание
`overlay`	Overlay	Наложение.

Возвращаемое значение:

Удаленное наложение (или undefined, если наложение не найдено).

render() Map.js, line 1479

Запросить отрисовку карты (в следующий кадр анимации).

renderSync() Map.js, line 1455

Запрос немедленной отрисовки в синхронном режиме.

set(key, value, silent) inherited Object.js, line 215

Устанавливает значение.

Имя	Тип	Описание
`key`	string	Имя ключа.
`value`	*	Значение.
`silent`	boolean \| undefined	Обновление без срабатывания события.

setLayerGroup(layerGroup) Map.js, line 1656

Устанавливает группу слоёв для этой карты.

Имя	Тип	Описание
`layerGroup`	LayerGroup	Группа слоёв, содержащая слои на этой карте.

setLayers(layers) Map.js, line 938

Очистить все существующие слои и добавить слои на карту.

Имя	Тип	Описание
`layers`	Array<BaseLayer> \| Collection<BaseLayer>	Слои, которые нужно добавить на карту.

setProperties(values, silent) inherited Object.js, line 235

Устанавливает коллекцию пар ключ-значение. Обратите внимание, что это изменяет любые существующие свойства и добавляет новые (это не удаляет какие-либо существующие свойства).

Имя	Тип	Описание
`values`	Object.<string, *>	Значения.
`silent`	boolean \| undefined	Обновление без срабатывания события.

setSize(size) Map.js, line 1670

Установить размер этой карты.

Имя	Тип	Описание
`size`	Size \| undefined	Размер карты в пикселях в DOM.

setTarget(target) Map.js, line 1684

Установить целевой элемент для отрисовки этой карты. Для доступности (фокусировка и события клавиатуры для навигации по карте), элемент target должен иметь правильно настроенный атрибут tabindex. Если элемент target находится внутри Shadow DOM, атрибут tabindex должен быть установлен на элементе-хосте пользовательского элемента.

Имя	Тип	Описание
`target`	HTMLElement \| string \| undefined	Элемент или id элемента, в котором отображается карта.

setView(view) Map.js, line 1697

Установить представление для этой карты.

Имя	Тип	Описание
`view`	View \| Promise<ViewOptions>	Представление, которое управляет этой картой. Также можно передать промис, который возвращает опции для создания представления. Эта альтернатива позволяет свойствам представления быть разрешенными источниками или другими компонентами, которые загружают метаданные, относящиеся к представлению.

un(type, listener) inherited Observable.js, line 173

Отписаться от определенного типа события.

Имя	Тип	Описание
`type`	string \| Array.<string>	Тип события или массив типов событий.
`listener`	function	Функция-обработчик.

unset(key, silent) inherited Object.js, line 259

Сбросить свойство.

Имя	Тип	Описание
`key`	string	Имя ключа.
`silent`	boolean \| undefined	Сбросить без срабатывания события.

updateSize() Map.js, line 1715

Вызвать перерасчёт размера области просмотра карты. Это необходимо вызвать, когда сторонний код изменяет размер области просмотра карты.