Карта

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

Чтобы создать Map, укажите container и другие параметры; полный список см. в разделе MapOptions. Затем MapLibre GL JS инициализирует карту на странице и возвращает объект Map.

Пример

let map = new Map({
  container: 'map',
  center: [-122.420679, 37.772537],
  zoom: 13,
  style: style_object,
  hash: true,
  transformRequest: (url, resourceType)=> {
    if(resourceType === 'Source' && url.startsWith('http://myHost')) {
      return {
       url: url.replace('http', 'https'),
       headers: { 'my-custom-header': true},
       credentials: 'include'  // Include cookies for cross-origin requests
     }
    }
  }
});

См. также

Отображение карты

Наследует

• Evented<MapEventType>

Аксессоры

repaint

Сигнатура геттера

get repaint(): boolean

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

Возвращает

boolean

showCollisionBoxes

Сигнатура геттера

get showCollisionBoxes(): boolean

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

Возвращает

boolean

showOverdrawInspector

Сигнатура геттера

get showOverdrawInspector(): boolean

Возвращает и задаёт логическое значение, указывающее, должна ли карта раскрашивать каждый фрагмент в зависимости от количества его закрашиваний. Белые фрагменты были закрашены 8 или более раз. Чёрные фрагменты не закрашивались. Эта информация полезна для отладки.

Возвращает

boolean

showPadding

Сигнатура геттера

get showPadding(): boolean

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

Возвращает

boolean

showTileBoundaries

Сигнатура геттера

get showTileBoundaries(): boolean

Возвращает и задаёт логическое значение, указывающее, будет ли карта отображать контур вокруг каждой плитки и её идентификатор. Эти границы плиток полезны для отладки.

Несжатый размер файла первого векторного источника отображается в верхнем левом углу каждой плитки рядом с её идентификатором.

Пример

map.showTileBoundaries = true;

Возвращает

boolean

version

Сигнатура геттера

get version(): string

Возвращает версию пакета библиотеки

Возвращает

string

Версия пакета библиотеки

События

off()

Сигнатура вызова

off<T extends keyof MapLayerEventType>(type: T, layer: string, listener: (ev: MapLayerEventType[T] & Object) => void): this

Удаляет слушатель событий, ранее добавленный с помощью {@link Map.on}.

Параметры типа

Параметры

Возвращает

this

Переопределяет

Evented.off

Сигнатура вызова

off<T extends keyof MapLayerEventType>(type: T, layers: string[], listener: (ev: MapLayerEventType[T] & Object) => void): this

Перегрузка метода off, позволяющая удалить событие, созданное для нескольких слоёв. Укажите те же идентификаторы слоёв, что и для on или once при регистрации слушателя.

Параметры типа

Параметры

Возвращает

this

Переопределяет

Evented.off

Сигнатура вызова

off<T extends keyof MapEventType>(type: T, listener: (ev: MapEventType[T] & Object) => void): this

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

Параметры типа

Параметры

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

this

Переопределяет

Evented.off

Сигнатура вызова

off(type: keyof MapEventType, listener: Listener): this

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

Параметры

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

this

Переопределяет

Evented.off

on()

Сигнатура вызова

on<T extends keyof MapLayerEventType>(type: T, layer: string, listener: (ev: MapLayerEventType[T] & Object) => void): Subscription

Добавляет обработчик для событий указанного типа, при необходимости ограничивая его объектами в указанных слоях стиля. Полный список событий и их описания см. в MapEventType и MapLayerEventType.

Параметры типа

Параметры

Возвращает

Subscription

Примеры

// Set an event listener that will fire
// when the map has finished loading
map.on('load', () => {
  // Once the map has finished loading,
  // add a new layer
  map.addLayer({
    id: 'points-of-interest',
    source: {
      type: 'vector',
      url: 'https://maplibre.org/maplibre-style-spec/'
    },
    'source-layer': 'poi_label',
    type: 'circle',
    paint: {
      // MapLibre Style Specification paint properties
    },
    layout: {
      // MapLibre Style Specification layout properties
    }
  });
});

// Set an event listener that will fire
// when a feature on the countries layer of the map is clicked
map.on('click', 'countries', (e) => {
  new Popup()
    .setLngLat(e.lngLat)
    .setHTML(`Country name: ${e.features[0].properties.name}`)
    .addTo(map);
});

См. также

• Отображение всплывающего окна при щелчке
• Центрирование карты на символе, по которому щёлкнули
• Создание эффекта при наведении
• Создание перетаскиваемого маркера

Переопределяет

Evented.on

Сигнатура вызова

on<T extends keyof MapLayerEventType>(type: T, layerIds: string[], listener: (ev: MapLayerEventType[T] & Object) => void): Subscription

Перегрузка метода on, позволяющая отслеживать события, указывая несколько слоёв.

Параметры типа

Параметры

Возвращает

Subscription

Переопределяет

Evented.on

Сигнатура вызова

on<T extends keyof MapEventType>(type: T, listener: (ev: MapEventType[T] & Object) => void): Subscription

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

Параметры типа

Параметры

Возвращает

Subscription

Переопределяет

Evented.on

Сигнатура вызова

on(type: keyof MapEventType, listener: Listener): Subscription

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

Параметры

Возвращает

Subscription

Переопределяет

Evented.on

once()

Сигнатура вызова

once<T extends keyof MapLayerEventType>(type: T, layer: string, listener: (ev: MapLayerEventType[T] & Object) => void): this

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

Параметры типа

Параметры

Возвращает

this

this, если передана функция-обработчик; в противном случае возвращает промис для удобства использования async/await

Переопределения

Evented.once

Сигнатура вызова

once<T extends keyof MapLayerEventType>(type: T, layer: string): Promise<MapLayerEventType[T] & Object>

Перегрузка метода once, которая при указании одного слоя и отсутствии функции-обработчика возвращает промис, разрешаемый событием, для удобства использования async/await.

Параметры типа

Параметры

Возвращает

Promise<MapLayerEventType[T] & Object>

Переопределения

Evented.once

Сигнатура вызова

once<T extends keyof MapLayerEventType>(type: T, layerIds: string[], listener: (ev: MapLayerEventType[T] & Object) => void): this

Перегрузка метода once, позволяющая отслеживать события, указав несколько слоёв.

Параметры типа

Параметры

Возвращает

this

Переопределения

Evented.once

Сигнатура вызова

once<T extends keyof MapLayerEventType>(type: T, layerIds: string[]): Promise<MapLayerEventType[T] & Object>

Перегрузка метода once, которая при указании нескольких слоёв и отсутствии функции-обработчика возвращает промис, разрешаемый событием, для удобства использования async/await.

Параметры типа

Параметры

Возвращает

Promise<MapLayerEventType[T] & Object>

Переопределения

Evented.once

Сигнатура вызова

once<T extends keyof MapEventType>(type: T, listener: (ev: MapEventType[T] & Object) => void): this

Перегрузка метода once, позволяющая прослушивать события без указания слоя.

Параметры типа

Параметры

Возвращает

this

Переопределяет

Evented.once

Сигнатура вызова

once<T extends keyof MapEventType>(type: T): Promise<MapEventType[T] & Object>

Перегрузка метода once, возвращающая промис, который разрешается с событием, для более удобного использования async/await, если обработчик не указан.

Параметры типа

Параметры

Возвращает

Promise<MapEventType[T] & Object>

Переопределяет

Evented.once

Сигнатура вызова

once(type: keyof MapEventType, listener?: Listener): Promise<any> | Map

Перегрузка метода once, позволяющая прослушивать события без указания слоя.

Параметры

Возвращает

Promise<any> | Map

Переопределяет

Evented.once

Методы

_shouldHandleInitialResize()

_shouldHandleInitialResize(): boolean

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

Возвращает

boolean

true, если начальное событие изменения размера следует обработать, и false в противном случае.

addControl()

addControl(control: IControl, position?: ControlPosition): this

Добавляет IControl на карту, вызывая control.onAdd(this).

Если элемент управления недопустим, будет вызвано событие ErrorEvent.

Параметры

Возвращает

this

Пример

Добавление на карту элементов управления масштабом и поворотом.

map.addControl(new NavigationControl());

См. также

Отображение элементов управления навигацией по карте

addImage()

addImage(id: string, image: StyleImageSource, options?: Partial<StyleImageMetadata>): this

Добавляет изображение в стиль. Это изображение можно отображать на карте, как и любой другой значок в спрайте стиля, используя идентификатор изображения в icon-image, background-pattern, fill-pattern или line-pattern.

Если параметр изображения недопустим или в спрайте недостаточно места для добавления изображения, будет вызвано событие ErrorEvent.

Параметры

Возвращает

this

Пример

// If the style's sprite does not already contain an image with ID 'cat',
// add the image 'cat-icon.png' to the style's sprite with the ID 'cat'.
const image = await map.loadImage('https://upload.wikimedia.org/wikipedia/commons/thumb/6/60/Cat_silhouette.svg/400px-Cat_silhouette.svg.png');
if (!map.hasImage('cat')) map.addImage('cat', image.data);

// Add a stretchable image that can be used with `icon-text-fit`
// In this example, the image is 600px wide by 400px high.
const image = await map.loadImage('https://upload.wikimedia.org/wikipedia/commons/8/89/Black_and_White_Boxed_%28bordered%29.png');
if (map.hasImage('border-image')) return;
map.addImage('border-image', image.data, {
    content: [16, 16, 300, 384], // place text over left half of image, avoiding the 16px border
    stretchX: [[16, 584]], // stretch everything horizontally except the 16px border
    stretchY: [[16, 384]], // stretch everything vertically except the 16px border
});

См. также

• Использование HTMLImageElement: Добавление значка на карту
• Использование ImageData: Добавление сгенерированного значка на карту

addLayer()

addLayer(layer: AddLayerObject, beforeId?: string): this

Добавляет слой стиля MapLibre в стиль карты.

Слой определяет, как будут оформлены данные из указанного источника. Подробнее о типах слоёв и доступных свойствах paint и layout см. в спецификации стиля MapLibre.

Параметры

Возвращает

this

Примеры

Добавление слоя кругов с векторным источником

map.addLayer({
  id: 'points-of-interest',
  source: {
    type: 'vector',
    url: 'https://demotiles.maplibre.org/tiles/tiles.json'
  },
  'source-layer': 'poi_label',
  type: 'circle',
  paint: {
    // MapLibre Style Specification paint properties
  },
  layout: {
    // MapLibre Style Specification layout properties
  }
});

Определение источника перед его использованием для создания нового слоя

map.addSource('state-data', {
  type: 'geojson',
  data: 'path/to/data.geojson'
});

map.addLayer({
  id: 'states',
  // References the GeoJSON source defined above
  // and does not require a `source-layer`
  source: 'state-data',
  type: 'symbol',
  layout: {
    // Set the label content to the
    // feature's `name` property
    text-field: ['get', 'name']
  }
});

Добавление нового символьного слоя перед существующим слоем

map.addLayer({
  id: 'states',
  // References a source that's already been defined
  source: 'state-data',
  type: 'symbol',
  layout: {
    // Set the label content to the
    // feature's `name` property
    text-field: ['get', 'name']
  }
// Add the layer before the existing `cities` layer
}, 'cities');

См. также

• Создание и оформление кластеров
• Добавление источника векторных тайлов
• Добавление источника WMS

addSource()

addSource(id: string, source: SourceSpecification | CanvasSourceSpecification): this

Добавляет источник в стиль карты.

Вызываемые события:

Вызывает событие source.add.

Параметры

Возвращает

this

Примеры

map.addSource('my-data', {
  type: 'vector',
  url: 'https://demotiles.maplibre.org/tiles/tiles.json'
});

map.addSource('my-data', {
  "type": "geojson",
  "data": {
    "type": "Feature",
    "geometry": {
      "type": "Point",
      "coordinates": [-77.0396, 38.8891]
    },
    "properties": {
      "title": "Washington DC",
      "marker-symbol": "monument"
    }
  }
});

См. также

Источник GeoJSON: Добавление данных в реальном времени

addSprite()

addSprite(id: string, url: string, options?: StyleSetterOptions): this

Добавляет спрайт в стиль карты. Вызывает событие style.

Параметры

Возвращает

this

Пример

map.addSprite('sprite-two', 'http://example.com/sprite-two');

areTilesLoaded()

areTilesLoaded(): boolean

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

Возвращает

boolean

Логическое значение, указывающее, загружены ли все тайлы.

Пример

let tilesLoaded = map.areTilesLoaded();

calculateCameraOptionsFromCameraLngLatAltRotation()

calculateCameraOptionsFromCameraLngLatAltRotation(cameraLngLat: LngLatLike, cameraAlt: number, bearing: number, pitch: number, roll?: number): CameraOptions

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

Параметры

Возвращает

CameraOptions

вычисленные параметры камеры

Пример

// Calculate options to look from camera position(1°, 0°, 1000m) with bearing = 90°, pitch = 30°, and roll = 45°
const cameraLngLat = new LngLat(1, 0);
const cameraAltitude = 1000;
const bearing = 90;
const pitch = 30;
const roll = 45;
const cameraOptions = map.calculateCameraOptionsFromCameraLngLatAltRotation(cameraLngLat, cameraAltitude, bearing, pitch, roll);
// Apply calculated options
map.jumpTo(cameraOptions);

calculateCameraOptionsFromTo()

calculateCameraOptionsFromTo(from: LngLat, altitudeFrom: number, to: LngLat, altitudeTo?: number): CameraOptions

По позиции камеры «from» и позиции, на которую нужно смотреть (to), вычисляет масштаб и поворот камеры и возвращает их в виде CameraOptions. При globe и vertical-perspective расчёт следует поверхности сферы, пока карта отображается как глобус, сохраняя точку обзора на сфере на уровне моря; altitudeTo используется только как высота центра.

Параметры

Возвращает

CameraOptions

вычисленные параметры камеры

Пример

// Calculate options to look from (1°, 0°, 1000m) to (1°, 1°, 0m)
const cameraLngLat = new LngLat(1, 0);
const cameraAltitude = 1000;
const targetLngLat = new LngLat(1, 1);
const targetAltitude = 0;
const cameraOptions = map.calculateCameraOptionsFromTo(cameraLngLat, cameraAltitude, targetLngLat, targetAltitude);
// Apply calculated options
map.jumpTo(cameraOptions);

cameraForBounds()

cameraForBounds(bounds: LngLatBoundsLike, options?: CameraForBoundsOptions): CenterZoomBearing

Параметры

Возвращает

CenterZoomBearing

Если карта может уместить заданные границы, возвращает center, zoom и bearing. Если карта не может уместить границы, метод выдаст предупреждение и вернёт undefined.

Пример

let bbox = [[-79, 43], [-73, 45]];
let newCameraTransform = map.cameraForBounds(bbox, {
  padding: {top: 10, bottom:25, left: 15, right: 5}
});

coveringTiles()

coveringTiles(options: CoveringTilesOptions): OverscaledTileID[]

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

Параметры

Возвращает

OverscaledTileID[]

Массив объектов OverscaledTileID.

Пример

// Get the tiles to cover the view for a 512x512px tile source
const tiles = map.coveringTiles({tileSize: 512});

easeTo()

easeTo(options: EaseToOptions, eventData?: any): this

Изменяет любую комбинацию параметров center, zoom, bearing, pitch, roll и padding, а переход между старыми и новыми значениями выполняется с анимацией. Для параметров, не указанных в options, карта сохраняет текущие значения.

Вызывает следующие события: movestart, move, moveend, zoomstart, zoom, zoomend, pitchstart, pitch, pitchend, rollstart, roll, rollend и rotate.

Параметры

Возвращает

this

См. также

Управление картой с помощью игровых контролов

fire()

Сигнатура вызова

fire(event: ErrorEvent | MapStyleImageMissingEvent | MapLibreEvent<unknown> | MapSourceDataEvent | MapMovementEvent | MapContextEvent | MapStyleDataEvent | MapStyleLoadEvent | MapBoxZoomEvent | MapTouchEvent | MapMouseEvent | MapWheelEvent | MapTerrainEvent | MapLibreEvent<TouchEvent | WheelEvent> & object | MapProjectionEvent): this

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

Параметры

Возвращает

this

Унаследовано от

Evented.fire

Сигнатура вызова

fire(type: keyof MapEventType, properties?: object): this

Совместимость с сигнатурой (type: string, properties: Object) из предыдущих версий. См. https://github.com/mapbox/mapbox-gl-js/issues/6522, https://github.com/mapbox/mapbox-gl-draw/issues/766

Параметры

Возвращает

this

Унаследовано от

Evented.fire

fitBounds()

fitBounds(bounds: LngLatBoundsLike, options?: FitBoundsOptions, eventData?: any): this

Перемещает карту и изменяет масштаб так, чтобы её видимая область охватывала указанные географические границы. Если азимут не равен нулю, эта функция также сбросит азимут карты на 0.

Вызывает следующие события: movestart и moveend.

Параметры

Возвращает

this

Пример

let bbox = [[-79, 43], [-73, 45]];
map.fitBounds(bbox, {
  padding: {top: 10, bottom:25, left: 15, right: 5}
});

См. также

Подгонка карты под ограничивающий прямоугольник

fitScreenCoordinates()

fitScreenCoordinates(p0: PointLike, p1: PointLike, bearing: number, options?: FitBoundsOptions, eventData?: any): this

Перемещает, поворачивает и масштабирует карту, чтобы она охватывала прямоугольник, образованный точками p0 и p1, после поворота карты на указанный азимут. Чтобы изменить масштаб без поворота, передайте текущий азимут карты.

Вызывает следующие события: movestart, move, moveend, zoomstart, zoom, zoomend и rotate.

Параметры

Возвращает

this

Пример

let p0 = [220, 400];
let p1 = [500, 900];
map.fitScreenCoordinates(p0, p1, map.getBearing(), {
  padding: {top: 10, bottom:25, left: 15, right: 5}
});

См. также

Используется BoxZoomHandler

flyTo()

flyTo(options: FlyToOptions, eventData?: any): this

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

Инициирует следующие события: movestart, move, moveend, zoomstart, zoom, zoomend, pitchstart, pitch, pitchend, rollstart, roll, rollend и rotate.

Параметры

Возвращает

this

Пример

// fly with default options to null island
map.flyTo({center: [0, 0], zoom: 9});
// using flyTo options
map.flyTo({
  center: [0, 0],
  zoom: 9,
  speed: 0.2,
  curve: 1,
  easing(t) {
    return t;
  }
});

См. также

• Перелёт к местоположению
• Медленный перелёт к местоположению
• Перелёт к местоположению в зависимости от положения прокрутки

getAnisotropicFilterPitch()

getAnisotropicFilterPitch(): number

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

Возвращает

number

Значение anisotropicFilterPitch

Пример

let anisotropicFilterPitch = map.getAnisotropicFilterPitch();

getBearing()

getBearing(): number

Возвращает текущий азимут карты. Азимут — это направление по компасу, которое находится «сверху»; например, при азимуте 90° карта ориентирована так, что сверху находится восток.

Возвращает

number

Текущий азимут карты.

См. также

Управление картой с помощью игровых элементов управления

getBounds()

getBounds(): LngLatBounds

Возвращает географические границы карты. Если азимут или наклон не равны нулю, видимая область не является прямоугольником, выровненным по осям, и результатом будут наименьшие границы, охватывающие видимую область.

Возвращает

LngLatBounds

Географические границы карты в виде LngLatBounds.

Пример

let bounds = map.getBounds();

getCameraTargetElevation()

getCameraTargetElevation(): number

Возвращает высоту точки, на которую направлена камера. Это значение соответствует: «метры над уровнем моря» * «коэффициент преувеличения»

Возвращает

number

Высота.

getCanvas()

getCanvas(): HTMLCanvasElement

Возвращает элемент <canvas> карты.

Возвращает

HTMLCanvasElement

Элемент <canvas> карты.

См. также

• Измерение расстояний
• Отображение всплывающего окна при наведении
• Центрирование карты на нажатом символе

getCanvasContainer()

getCanvasContainer(): HTMLElement

Возвращает HTML-элемент, содержащий элемент <canvas> карты.

Если вы хотите добавить на карту наложения, не использующие GL, добавьте их в этот элемент.

Это элемент, к которому привязываются обработчики событий для взаимодействия с картой (например, панорамирования и масштабирования). Он будет получать всплывающие события от дочерних элементов, таких как <canvas>, но не от элементов управления картой.

Возвращает

HTMLElement

Контейнер для <canvas> карты.

См. также

Создание перетаскиваемой точки

getCenter()

getCenter(): LngLat

Возвращает географический центр карты.

Возвращает

LngLat

Географический центр карты.

Пример

Возвращает объект LngLat, например {lng: 0, lat: 0}

let center = map.getCenter();
// access longitude and latitude values directly
let {lng, lat} = map.getCenter();

getCenterClampedToGround()

getCenterClampedToGround(): boolean

Возвращает значение centerClampedToGround.

Если значение равно true, высота центральной точки будет автоматически установлена на высоту рельефа (или на ноль, если рельеф не включён). Если значение равно false, высота центральной точки по умолчанию будет соответствовать уровню моря и не будет обновляться автоматически. По умолчанию — true. Чтобы камера оставалась над землёй при значении pitch > 90 градусов, необходимо установить значение false.

Возвращает

boolean

getCenterElevation()

getCenterElevation(): number

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

Возвращает

number

Высота центральной точки карты в метрах над уровнем моря.

getContainer()

getContainer(): HTMLElement

Возвращает содержащий карту HTML-элемент.

Возвращает

HTMLElement

Контейнер карты.

getFeatureState()

getFeatureState(feature: FeatureIdentifier): any

Получает state объекта. state объекта — это набор определённых пользователем пар «ключ-значение», назначаемых объекту во время выполнения. Объекты идентифицируются по атрибуту feature.id, который может быть числом или строкой.

Параметры

Возвращает

any

Состояние объекта: набор пар «ключ-значение», назначенных объекту во время выполнения.

Пример

При перемещении мыши над слоем my-layer получите состояние объекта под указателем мыши

map.on('mousemove', 'my-layer', (e) => {
  if (e.features.length > 0) {
    map.getFeatureState({
      source: 'my-source',
      sourceLayer: 'my-source-layer',
      id: e.features[0].id
    });
  }
});

getFilter()

getFilter(layerId: string): void | FilterSpecification

Возвращает фильтр, применённый к указанному слою стиля.

Параметры

Возвращает

void | FilterSpecification

Фильтр слоя.

getFontFaces()

getFontFaces(): FontFacesSpecification

Возвращает значение свойства font-faces стиля.

Возвращает

FontFacesSpecification

Шрифты стиля или null, если они не указаны.

getGlobalState()

getGlobalState(): Record<string, any>

Возвращает глобальное состояние карты

Возвращает

Record<string, any>

Объект состояния карты.

getGlyphs()

getGlyphs(): string

Возвращает URL глифов стиля

Возвращает

string

URL глифов стиля или null, если глифы не заданы.

getImage()

getImage(id: string): StyleImage

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

Параметры

Возвращает

StyleImage

Изображение на карте с указанным идентификатором.

Пример

let coffeeShopIcon = map.getImage("coffee_cup");

getLayer()

getLayer(id: string): StyleLayer

Возвращает слой с указанным идентификатором из стиля карты.

Параметры

Возвращает

StyleLayer

Слой с указанным идентификатором или undefined, если идентификатор не соответствует ни одному из существующих слоёв.

Пример

let stateDataLayer = map.getLayer('state-data');

См. также

• Фильтрация символов с помощью переключения списка
• Фильтрация символов по текстовому вводу

getLayersOrder()

getLayersOrder(): string[]

Возвращает упорядоченные идентификаторы всех слоёв, включая пользовательские, которые сейчас присутствуют в стиле.

Возвращает

string[]

Идентификаторы слоёв в порядке их расположения

Пример

const orderedLayerIds = map.getLayersOrder();

getLayoutProperty()

getLayoutProperty<K extends keyof AllLayoutProperties>(layerId: string, name: K): AllLayoutProperties[K]

Возвращает значение свойства компоновки указанного слоя стиля.

Параметры типа

Параметры

Возвращает

AllLayoutProperties[K]

Значение указанного свойства макета.

getLight()

getLight(): LightSpecification

Возвращает значение объекта освещения.

Возвращает

LightSpecification

light — свойства освещения стиля.

getMaxBounds()

getMaxBounds(): LngLatBounds

Возвращает максимальные географические границы, в пределах которых ограничена карта, или null, если границы не заданы.

Возвращает

LngLatBounds

Объект карты.

Пример

let maxBounds = map.getMaxBounds();

getMaxPitch()

getMaxPitch(): number

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

Возвращает

number

maxPitch

getMaxZoom()

getMaxZoom(): number

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

Возвращает

number

maxZoom

Пример

let maxZoom = map.getMaxZoom();

getMinPitch()

getMinPitch(): number

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

Возвращает

number

minPitch

getMinZoom()

getMinZoom(constrained?: boolean): number

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

Параметры

Возвращает

number

minZoom

Пример

let minZoom = map.getMinZoom();

getPadding()

getPadding(): PaddingOptions

Возвращает текущие отступы вокруг области просмотра карты.

Возвращает

PaddingOptions

Текущие отступы вокруг области просмотра карты.

getPaintProperty()

getPaintProperty<K extends keyof AllPaintProperties>(layerId: string, name: K): AllPaintProperties[K]

Возвращает значение свойства оформления указанного слоя стиля.

Параметры типа

Параметры

Возвращает

AllPaintProperties[K]

Значение указанного свойства оформления.

getPitch()

getPitch(): number

Возвращает текущий угол наклона карты.

Возвращает

number

Текущий угол наклона карты в градусах относительно плоскости экрана.

getPixelRatio()

getPixelRatio(): number

Возвращает коэффициент плотности пикселей карты. Обратите внимание: фактически применяемый коэффициент может быть ниже, чтобы соблюсти maxCanvasSize.

Возвращает

number

Коэффициент плотности пикселей.

getProjection()

getProjection(): ProjectionSpecification

Возвращает спецификацию проекции.

Возвращает

ProjectionSpecification

спецификацию проекции.

Пример

let projection = map.getProjection();

getRenderWorldCopies()

getRenderWorldCopies(): boolean

Возвращает состояние renderWorldCopies. Если true, за пределами долгот -180 и 180 будут отображаться бок о бок несколько копий мира. Если установлено значение false:

• Когда масштаб карты настолько уменьшен, что одно изображение мира не заполняет весь контейнер карты, за пределами долгот 180 и -180 будут пустые области.
• Объекты, пересекающие долготы 180 и -180, будут разрезаны на две части (одна часть окажется у правого края карты, другая — у левого) при любом уровне масштабирования.

Возвращает

boolean

renderWorldCopies

Пример

let worldCopiesRendered = map.getRenderWorldCopies();

См. также

Отображение копий мира

getRoll()

getRoll(): number

Возвращает текущий угол крена карты.

Возвращает

number

Текущий угол крена карты в градусах вокруг оптической оси камеры.

getSky()

getSky(): SkySpecification

Возвращает значение параметра sky стиля.

Возвращает

SkySpecification

свойства неба стиля.

Пример

map.getSky();

getSource()

getSource<TSource extends Source>(id: string): TSource

Возвращает источник с указанным ID в стиле карты.

Этот метод часто используется для обновления источника с помощью свойств экземпляра соответствующего типа источника, определённых в классах, производных от Source. Например, для задания data источника GeoJSON или обновления url и coordinates источника изображения.

Параметры типа

Параметры

Возвращает

TSource

Источник стиля с указанным ID или undefined, если ID не соответствует ни одному существующему источнику. Структура объекта зависит от типа источника. Список параметров для каждого типа источника доступен на странице Sources спецификации стиля MapLibre.

Пример

let sourceObject = map.getSource('points');

См. также

• Создание перетаскиваемой точки
• Анимация точки
• Добавление данных в реальном времени

getSprite()

getSprite(): object[]

Возвращает исходное значение спрайта стиля.

Возвращает

object[]

список пар id-url спрайта стиля

getStyle()

getStyle(): StyleSpecification

Возвращает объект стиля MapLibre карты — объект JSON, который можно использовать для воссоздания стиля карты.

Возвращает

StyleSpecification

Объект JSON стиля карты.

Пример

let styleJson = map.getStyle();

getStyleUrl()

getStyleUrl(): string

Возвращает URL, с которого был загружен стиль карты.

Возвращает

string

URL, переданный в Map.setStyle или параметр карты style, либо null, если стиль был передан в виде объекта или у карты нет стиля.

Пример

const styleUrl = map.getStyleUrl();

getTerrain()

getTerrain(): TerrainSpecification

Возвращает параметры рельефа, если рельеф загружен.

Возвращает

TerrainSpecification

TerrainSpecification, переданный в setTerrain

Пример

map.getTerrain(); // { source: 'terrain' };

getVerticalFieldOfView()

getVerticalFieldOfView(): number

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

Возвращает

number

Текущее вертикальное поле зрения карты.

Значение по умолчанию

36.87

Пример

const verticalFieldOfView = map.getVerticalFieldOfView();

getZoom()

getZoom(): number

Возвращает текущий уровень масштабирования карты.

Возвращает

number

Текущий уровень масштабирования карты.

Пример

map.getZoom();

getZoomSnap()

getZoomSnap(): number

Возвращает текущий шаг масштабирования карты.

Возвращает

number

Текущий шаг масштабирования карты.

hasControl()

hasControl(control: IControl): boolean

Проверяет, есть ли на карте элемент управления.

Параметры

Возвращает

boolean

true, если карта содержит элемент управления.

Пример

// Define a new navigation control.
let navigation = new NavigationControl();
// Add zoom and rotation controls to the map.
map.addControl(navigation);
// Check that the navigation control exists on the map.
map.hasControl(navigation);

hasImage()

hasImage(id: string): boolean

Проверяет, существует ли в стиле изображение с указанным ID. Проверяются как изображения из исходного спрайта стиля, так и изображения, добавленные во время выполнения с помощью Map.addImage.

Если изображение с указанным ID отсутствует, будет вызвано событие ErrorEvent.

Параметры

Возвращает

boolean

Логическое значение, указывающее, существует ли изображение.

Пример

Проверка наличия в спрайте стиля изображения с ID 'cat'.

let catIconExists = map.hasImage('cat');

isMoving()

isMoving(): boolean

Возвращает true, если карта перемещается, масштабируется, поворачивается или наклоняется в результате анимации камеры или жеста пользователя.

Возвращает

boolean

true, если карта движется.

Пример

let isMoving = map.isMoving();

isRotating()

isRotating(): boolean

Возвращает true, если карта поворачивается в результате анимации камеры или жеста пользователя.

Возвращает

boolean

true, если карта поворачивается.

Пример

map.isRotating();

isSourceLoaded()

isSourceLoaded(id: string): boolean

Возвращает логическое значение, указывающее, загружен ли источник. Возвращает true, если для источника с указанным ID в стиле карты нет незавершённых сетевых запросов, в противном случае — false.

Если источника с указанным ID нет, будет вызвано событие ErrorEvent.

Параметры

Возвращает

boolean

Логическое значение, указывающее, загружен ли источник.

Пример

let sourceLoaded = map.isSourceLoaded('bathymetry-data');

isStyleLoaded()

isStyleLoaded(): boolean | void

Возвращает логическое значение, указывающее, полностью ли загружен стиль карты.

Возвращает

boolean | void

Логическое значение, указывающее, полностью ли загружен стиль.

Пример

let styleLoadStatus = map.isStyleLoaded();

isZooming()

isZooming(): boolean

Возвращает true, если карта масштабируется в результате анимации камеры или жеста пользователя.

Возвращает

boolean

true, если карта масштабируется.

Пример

let isZooming = map.isZooming();

jumpTo()

jumpTo(options: JumpToOptions, eventData?: any): this

Изменяет любое сочетание центра, масштаба, азимута, наклона и крена без анимированного перехода. Для параметров, не указанных в options, карта сохранит текущие значения.

Вызывает следующие события: movestart, move, moveend, zoomstart, zoom, zoomend, pitchstart, pitch, pitchend, rollstart, roll, rollend и rotate.

Параметры

Возвращает

this

Пример

// jump to coordinates at current zoom
map.jumpTo({center: [0, 0]});
// jump with zoom, pitch, and bearing options
map.jumpTo({
  center: [0, 0],
  zoom: 8,
  pitch: 45,
  bearing: 90
});

См. также

• Переход к последовательности местоположений
• Обновление объекта в реальном времени

listens()

listens(type: keyof MapEventType): boolean

Возвращает true, если у этого экземпляра Evented или любого перенаправленного экземпляра Evented есть обработчик для указанного типа.

Параметры

Возвращает

boolean

true, если для указанного типа события зарегистрирован хотя бы один обработчик, в противном случае — false

Унаследовано от

Evented.listens

listImages()

listImages(): string[]

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

Возвращает

string[]

Массив строк с именами всех спрайтов и изображений, доступных в данный момент на карте.

Пример

let allImages = map.listImages();

loaded()

loaded(): boolean

Возвращает логическое значение, указывающее, полностью ли загружена карта.

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

Возвращает

boolean

Логическое значение, указывающее, полностью ли загружена карта.

loadImage()

loadImage(url: string): Promise<GetResourceResponse<ImageBitmap | HTMLImageElement>>

Загружает изображение с внешнего URL для использования с Map.addImage. Внешние домены должны поддерживать CORS.

Параметры

Возвращает

Promise<GetResourceResponse<ImageBitmap | HTMLImageElement>>

объект promise, который разрешается после загрузки изображения или отклоняется, если ответ не содержит данных изображения (например, при HTTP 204)

Пример

Загрузка изображения с внешнего URL.

const response = await map.loadImage('https://picsum.photos/50/50');
// Add the loaded image to the style's sprite with the ID 'photo'.
map.addImage('photo', response.data);

См. также

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

moveLayer()

moveLayer(id: string, beforeId?: string): this

Перемещает слой на другую позицию по оси z.

Параметры

Возвращает

this

Пример

Переместите слой с идентификатором 'polygon' перед слоем с идентификатором 'country-label'. На карте слой polygon будет находиться под слоем country-label.

map.moveLayer('polygon', 'country-label');

panBy()

panBy(offset: PointLike, options?: EaseToOptions, eventData?: any): this

Сдвигает карту на указанный интервал.

Вызывает следующие события: movestart и moveend.

Параметры

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

this

См. также

Управление картой с помощью игровых элементов управления

panTo()

panTo(lnglat: LngLatLike, options?: EaseToOptions, eventData?: any): this

Сдвигает карту к указанному местоположению с анимированным переходом.

Вызывает следующие события: movestart и moveend.

Параметры

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

this

Пример

map.panTo([-74, 38]);
// Specify that the panTo animation should last 5000 milliseconds.
map.panTo([-74, 38], {duration: 5000});

См. также

Обновление объекта в реальном времени

project()

project(lnglat: LngLatLike): Point

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

Параметры

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

Point

Point, соответствующий lnglat относительно container карты.

Пример

let coordinate = [-122.420679, 37.772537];
let point = map.project(coordinate);

queryRenderedFeatures()

queryRenderedFeatures(geometryOrOptions?: PointLike | QueryRenderedFeaturesOptions | [PointLike, PointLike], options?: QueryRenderedFeaturesOptions): MapGeoJSONFeature[]

Возвращает массив объектов MapGeoJSONFeature, представляющих видимые объекты, соответствующие параметрам запроса.

Параметры

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

MapGeoJSONFeature[]

Массив объектов MapGeoJSONFeature.

Значение properties каждого возвращённого объекта объекта содержит свойства исходного объекта. Для источников GeoJSON поддерживаются только строковые и числовые значения свойств (то есть значения null, Array и Object не поддерживаются).

Каждый объект содержит свойства верхнего уровня layer, source и sourceLayer. Свойство layer — это объект, представляющий слой стиля, которому принадлежит объект. Свойства layout и paint в этом объекте содержат значения, полностью вычисленные для заданного уровня масштабирования и объекта.

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

• Объекты из слоёв, свойство visibility которых имеет значение "none".
• Объекты из слоёв, диапазон масштабирования которых не включает текущий уровень масштабирования.
• Объекты-символы, скрытые из-за пересечения текста или значков.

Включаются объекты из всех остальных слоёв, в том числе те, которые могут не оказывать видимого влияния на результат отображения, например, если непрозрачность слоя или альфа-компонент цвета установлены в 0.

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

Поскольку объекты берутся из векторных данных, разбитых на тайлы, или из данных GeoJSON, которые внутри преобразуются в тайлы, геометрии объектов могут разделяться или дублироваться на границах тайлов. В результате объекты могут встречаться в результатах запроса несколько раз. Например, предположим, что автомагистраль проходит через ограничивающий прямоугольник запроса. В результат запроса войдут участки автомагистрали, расположенные в тайлах карты, покрывающих ограничивающий прямоугольник, даже если автомагистраль продолжается в других тайлах. При этом участок автомагистрали в каждом тайле карты будет возвращён как отдельный объект. Аналогично, точечный объект рядом с границей тайла может встречаться в нескольких тайлах из-за буферизации тайлов.

Примеры

Найти все объекты в точке

let features = map.queryRenderedFeatures(
  [20, 35],
  { layers: ['my-layer-name'] }
);

Найти все объекты в статическом ограничивающем прямоугольнике

let features = map.queryRenderedFeatures(
  [[10, 20], [30, 50]],
  { layers: ['my-layer-name'] }
);

Найти все объекты в ограничивающем прямоугольнике вокруг точки

let width = 10;
let height = 20;
let features = map.queryRenderedFeatures([
  [point.x - width / 2, point.y - height / 2],
  [point.x + width / 2, point.y + height / 2]
], { layers: ['my-layer-name'] });

Получить все отрисованные объекты из одного слоя

let features = map.queryRenderedFeatures({ layers: ['my-layer-name'] });

См. также

Получение объектов под указателем мыши

querySourceFeatures()

querySourceFeatures(sourceId: string, parameters?: QuerySourceFeatureOptions): GeoJSONFeature[]

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

Параметры

Возвращает

GeoJSONFeature[]

Массив объектов MapGeoJSONFeature.

В отличие от Map.queryRenderedFeatures, эта функция возвращает все объекты, соответствующие параметрам запроса, независимо от того, отрисованы ли они текущим стилем (то есть видны ли они). Запрос охватывает все загруженные в данный момент векторные тайлы и тайлы источника GeoJSON: эта функция не проверяет тайлы за пределами текущей видимой области просмотра.

Поскольку объекты берутся из векторных данных, разбитых на тайлы, или из данных GeoJSON, которые внутри преобразуются в тайлы, геометрии объектов могут разделяться или дублироваться на границах тайлов. В результате объекты могут встречаться в результатах запроса несколько раз. Например, предположим, что автомагистраль проходит через ограничивающий прямоугольник запроса. В результат запроса войдут участки автомагистрали, расположенные в тайлах карты, покрывающих ограничивающий прямоугольник, даже если автомагистраль продолжается в других тайлах. При этом участок автомагистрали в каждом тайле карты будет возвращён как отдельный объект. Аналогично, точечный объект рядом с границей тайла может встречаться в нескольких тайлах из-за буферизации тайлов.

Пример

Найти все объекты в одном слое источника векторных данных

let features = map.querySourceFeatures('your-source-id', {
  sourceLayer: 'your-source-layer'
});

queryTerrainElevation()

queryTerrainElevation(lngLatLike: LngLatLike): number

Возвращает высоту над уровнем моря в метрах в указанном местоположении. Возвращает null, если рельеф не включён. Если рельеф включён с каким-либо значением преувеличения, возвращаемое значение учитывает это значение (умножается на него). Этот метод следует использовать для корректного позиционирования пользовательских 3D-объектов, как описано здесь

Параметры

Возвращает

number

высота в метрах

redraw()

redraw(): this

Принудительно выполняет синхронную перерисовку карты.

Возвращает

this

Пример

map.redraw();

refreshTiles()

refreshTiles(sourceId: string, tileIds?: object[]): void

Запускает повторную загрузку выбранных тайлов

Параметры

Возвращает

void

Пример

map.refreshTiles('satellite', [{x:1024, y: 1023, z: 11}, {x:1023, y: 1023, z: 11}]);

remove()

remove(): void

Освобождает все внутренние ресурсы, связанные с этой картой.

Сюда входят элементы DOM, привязки событий, веб-воркеры и ресурсы WebGL.

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

Возвращает

void

removeControl()

removeControl(control: IControl): this

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

Если элемент управления недопустим, будет вызвано событие ErrorEvent.

Параметры

Возвращает

this

Пример

// Define a new navigation control.
let navigation = new NavigationControl();
// Add zoom and rotation controls to the map.
map.addControl(navigation);
// Remove zoom and rotation controls from the map.
map.removeControl(navigation);

removeFeatureState()

removeFeatureState(target: FeatureIdentifier, key?: string): this

Удаляет state объекта, возвращая его к поведению по умолчанию. Если указан только target.source, состояние будет удалено для всех объектов из этого источника. Если также указан target.id, будут удалены все ключи состояния этого объекта. Если также указан key, из состояния этого объекта будет удалён только этот ключ. Объекты идентифицируются по атрибуту feature.id, которым может быть любое число или строка.

Параметры

Возвращает

this

Примеры

Сбросить весь объект состояния для всех объектов в источнике my-source

map.removeFeatureState({
  source: 'my-source'
});

Когда указатель мыши покидает слой my-layer, сбросить весь объект состояния для объекта под указателем мыши

map.on('mouseleave', 'my-layer', (e) => {
  map.removeFeatureState({
    source: 'my-source',
    sourceLayer: 'my-source-layer',
    id: e.features[0].id
  });
});

Когда указатель мыши покидает слой my-layer, сбросить только пару ключ-значение hover в состоянии объекта под указателем мыши

map.on('mouseleave', 'my-layer', (e) => {
  map.removeFeatureState({
    source: 'my-source',
    sourceLayer: 'my-source-layer',
    id: e.features[0].id
  }, 'hover');
});

removeImage()

removeImage(id: string): void

Удаляет изображение из стиля. Это может быть изображение из исходного спрайта стиля или любое изображение, добавленное во время выполнения с помощью Map.addImage.

Параметры

Возвращает

void

Пример

// If an image with the ID 'cat' exists in
// the style's sprite, remove it.
if (map.hasImage('cat')) map.removeImage('cat');

removeLayer()

removeLayer(id: string): this

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

Если такого слоя не существует, будет вызвано событие ErrorEvent.

Параметры

Возвращает

this

Пример

Если существует слой с идентификатором «state-data», удалить его.

if (map.getLayer('state-data')) map.removeLayer('state-data');

removeSource()

removeSource(id: string): this

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

Параметры

Возвращает

this

Пример

map.removeSource('bathymetry-data');

removeSprite()

removeSprite(id: string): this

Удаляет спрайт из стиля карты. Вызывает событие style.

Параметры

Возвращает

this

Пример

map.removeSprite('sprite-two');
map.removeSprite('default');

resetNorth()

resetNorth(options?: AnimationOptions, eventData?: any): this

Поворачивает карту так, чтобы север находился сверху (азимут 0°), с анимированным переходом.

Вызывает следующие события: movestart, moveend и rotate.

Параметры

Возвращает

this

resetNorthPitch()

resetNorthPitch(options?: AnimationOptions, eventData?: any): this

Поворачивает карту и изменяет её наклон так, чтобы север находился сверху (азимут 0°), а наклон и крен составляли 0°, с анимированным переходом.

Вызывает следующие события: movestart, move, moveend, pitchstart, pitch, pitchend, rollstart, roll, rollend и rotate.

Параметры

Возвращает

this

resize()

resize(eventData?: any, constrainTransform?: boolean): this

Изменяет размер карты в соответствии с размерами элемента container.

Проверяет, изменился ли размер контейнера карты, и обновляет карту, если это произошло. При использовании значения по умолчанию trackResize: true изменения размера контейнера обнаруживаются автоматически, в том числе когда контейнер становится видимым после скрытия с помощью CSS. Явно вызовите этот метод, если trackResize равно false или размер карты изменился таким образом, что ResizeObserver контейнера не может это обнаружить.

Вызывает следующие события: movestart, move, moveend и resize.

Параметры

Возвращает

this

Пример

Изменение размера карты с отключенным trackResize, когда ее контейнер становится видимым после скрытия с помощью CSS.

let mapDiv = document.getElementById('map');
if (mapDiv.style.visibility === 'visible') map.resize();

rotateTo()

rotateTo(bearing: number, options?: EaseToOptions, eventData?: any): this

Поворачивает карту на заданный азимут с анимированным переходом. Азимут — это направление по компасу, указывающее на «верх» карты; например, при азимуте 90° карта ориентирована так, что восток находится сверху.

Вызывает следующие события: movestart, moveend и rotate.

Параметры

Возвращает

this

setAnisotropicFilterPitch()

setAnisotropicFilterPitch(anisotropicFilterPitch?: number): this

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

Если значение anisotropicFilterPitch выходит за допустимые пределы, будет вызвано событие ErrorEvent.

Параметры

Возвращает

this

Пример

map.setAnisotropicFilterPitch(85);

setBearing()

setBearing(bearing: number, eventData?: any): this

Задает азимут (поворот) карты. Азимут — это направление по компасу, указывающее на «верх» карты; например, при азимуте 90° карта ориентирована так, что восток находится сверху.

Эквивалентно jumpTo({bearing: bearing}).

Вызывает следующие события: movestart, moveend и rotate.

Параметры

Возвращает

this

Пример

Повернуть карту на 90 градусов

map.setBearing(90);

setCenter()

setCenter(center: LngLatLike, eventData?: Record<string, unknown>): this

Задает географический центр карты. Эквивалентно jumpTo({center: center}).

Вызывает следующие события: movestart и moveend.

Параметры

Возвращает

this

Пример

map.setCenter([-74, 38]);

setCenterClampedToGround()

setCenterClampedToGround(centerClampedToGround: boolean): void

Задает значение centerClampedToGround.

Если значение равно true, высота центральной точки автоматически устанавливается на высоту рельефа (или на ноль, если рельеф не включен). Если значение равно false, высота центральной точки будет соответствовать уровню моря и не будет обновляться автоматически. По умолчанию — true. Чтобы камера оставалась над землей при наклоне > 90 градусов, необходимо задать значение false.

Параметры

Возвращает

void

setCenterElevation()

setCenterElevation(elevation: number, eventData?: any): this

Задает высоту центральной точки карты в метрах над уровнем моря. Эквивалентно jumpTo({elevation: elevation}).

Вызывает следующие события: movestart и moveend.

Параметры

Возвращает

this

setEventedParent()

setEventedParent(parent?: Evented<EventTypeMap>, data?: EventedParentData | (() => EventedParentData)): this

Передаёт всплывающие события, генерируемые этим экземпляром Evented, родительскому экземпляру Evented.

Параметры

Возвращает

this

Унаследовано от

Evented.setEventedParent

setFeatureState()

setFeatureState(feature: FeatureIdentifier, state: any): this

Задаёт state объекта пространственного объекта. state пространственного объекта — это набор определённых пользователем пар «ключ — значение», назначаемых пространственному объекту во время выполнения. При вызове этого метода объект state объединяется с уже существующими парами «ключ — значение» в состоянии пространственного объекта. Пространственные объекты идентифицируются по атрибуту feature.id, которым может быть любое число или строка.

Этот метод можно использовать только с источниками, у которых есть атрибут feature.id. Атрибут feature.id можно задать тремя способами:

• Для векторных источников или источников GeoJSON — включить атрибут id в исходный файл данных.
• Для векторных источников или источников GeoJSON — использовать параметр promoteId при задании источника.
• Для источников GeoJSON — использовать параметр generateId, чтобы автоматически назначить id на основе индекса пространственного объекта в исходных данных. Если вы изменяете данные пространственных объектов с помощью map.getSource('some id').setData(..), может потребоваться повторно применить состояние с учётом обновлённых значений id.

Параметры

Возвращает

this

Пример

// When the mouse moves over the `my-layer` layer, update
// the feature state for the feature under the mouse
map.on('mousemove', 'my-layer', (e) => {
  if (e.features.length > 0) {
    map.setFeatureState({
      source: 'my-source',
      sourceLayer: 'my-source-layer',
      id: e.features[0].id,
    }, {
      hover: true
    });
  }
});

См.

Создание эффекта при наведении

setFilter()

setFilter(layerId: string, filter?: FilterSpecification, options?: StyleSetterOptions): this

Задаёт фильтр для указанного слоя стиля.

Фильтры определяют, какие пространственные объекты из источника отображает слой стиля. На карте будут отображаться все объекты, для которых выражение фильтра возвращает true. Объекты, для которых оно возвращает false, будут скрыты.

Используйте setFilter, чтобы отобразить подмножество данных источника.

Чтобы сбросить фильтр, передайте null или undefined в качестве второго параметра.

Параметры

Возвращает

this

Примеры

Отображение только объектов со значением 'USA' в свойстве 'name'

map.setFilter('my-layer', ['==', ['get', 'name'], 'USA']);

Отображение только объектов, у которых значение 'available-spots' не меньше пяти

map.setFilter('bike-docks', ['>=', ['get', 'available-spots'], 5]);

Удаление фильтра слоя стиля 'bike-docks'

map.setFilter('bike-docks', null);

См.

Создание анимации временной шкалы

setFontFaces()

setFontFaces(fontFaces: FontFacesSpecification): this

Задаёт значение свойства стиля font-faces, указывающего на файлы шрифтов, используемые для отрисовки текста, который не покрывается URL glyphs стиля. Чтобы сбросить это значение, передайте ложное значение (null или undefined).

Файлы передаются в API загрузки шрифтов CSS браузера, поэтому можно использовать любой формат, поддерживаемый браузером для отображения текста; запросы к ним проходят через transformRequest так же, как запросы глифов. Текст отображается по кластерам графем, поэтому буква и надстрочные или подстрочные знаки, написанные при ней, передаются вместе в текстовый движок браузера и возвращаются в виде единой фигуры, как они и должны отображаться. URL glyphs, обслуживающий по одной кодовой точке за раз, этого сделать не может.

Параметры

Возвращает

this

Пример

map.setFontFaces({
    'Noto Sans Regular': [
        {url: 'https://example.com/NotoSansKhmer-Regular.ttf', 'unicode-range': ['U+1780-17FF']}
    ]
});

setGlobalStateProperty()

setGlobalStateProperty(propertyName: string, value: any): this

Задаёт свойство глобального состояния, которое можно получить с помощью выражения global-state. Если значение равно null, свойству присваивается значение по умолчанию, определённое в свойстве стиля state.

Параметры

Возвращает

this

setGlyphs()

setGlyphs(glyphsUrl: string, options?: StyleSetterOptions): this

Задаёт значение свойства стиля glyphs. Передайте ложное значение (null или undefined), чтобы сбросить glyphs. * *

Параметры

Возвращает

this

Пример

• ```ts
• map.setGlyphs('https://demotiles.maplibre.org/font/{fontstack}/{range}.pbf');
• ```

setLayerZoomRange()

setLayerZoomRange(layerId: string, minzoom: number, maxzoom: number): this

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

Параметры

Возвращает

this

Пример

map.setLayerZoomRange('my-layer', 2, 5);

setLayoutProperty()

setLayoutProperty<K extends keyof AllLayoutProperties>(layerId: string, name: K, value: AllLayoutProperties[K], options?: StyleSetterOptions): this

Задаёт значение свойства компоновки в указанном слое стиля.

Параметры типа

Параметры

Возвращает

this

Пример

map.setLayoutProperty('my-layer', 'visibility', 'none');

setLight()

setLight(light: LightSpecification, options?: StyleSetterOptions): this

Задаёт любое сочетание параметров освещения.

Параметры

Возвращает

this

Пример

let layerVisibility = map.getLayoutProperty('my-layer', 'visibility');

setMaxBounds()

setMaxBounds(bounds?: LngLatBoundsLike): this

Задаёт или очищает географические границы карты.

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

Параметры

Возвращает

this

Пример

Определите границы в соответствии с объектом LngLatBoundsLike и задайте их в качестве максимальных границ.

let bounds = [
  [-74.04728, 40.68392], // [west, south]
  [-73.91058, 40.87764]  // [east, north]
];
map.setMaxBounds(bounds);

setMaxPitch()

setMaxPitch(maxPitch?: number): this

Задаёт или очищает максимальный угол наклона карты. Если текущий угол наклона карты превышает новое максимальное значение, карта изменит угол наклона до нового максимального значения и вызовет следующие события: movestart, move, moveend, pitchstart, pitch и pitchend.

Если maxPitch выходит за допустимые пределы, будет вызвано событие ErrorEvent.

Параметры

Возвращает

this

setMaxZoom()

setMaxZoom(maxZoom?: number): this

Задаёт или очищает максимальный уровень масштабирования карты. Если текущий уровень масштабирования карты превышает новое максимальное значение, карта изменит масштаб до нового максимального значения и вызовет следующие события: movestart, move, moveend, zoomstart, zoom и zoomend.

Если minZoom выходит за допустимые пределы, будет вызвано событие ErrorEvent.

Параметры

Возвращает

this

Пример

map.setMaxZoom(18.75);

setMinPitch()

setMinPitch(minPitch?: number): this

Задаёт или очищает минимальный угол наклона карты. Если текущий угол наклона карты меньше нового минимального значения, карта изменит угол наклона до нового минимального значения и вызовет следующие события: movestart, move, moveend, pitchstart, pitch и pitchend.

Если minPitch выходит за допустимые пределы, будет вызвано событие ErrorEvent.

Параметры

Возвращает

this

setMinZoom()

setMinZoom(minZoom?: number): this

Задаёт или очищает минимальный уровень масштабирования карты. Если текущий уровень масштабирования карты меньше нового минимального значения, карта изменит масштаб до нового минимального значения и вызовет следующие события: movestart, move, moveend, zoomstart, zoom и zoomend.

Уменьшить масштаб и достичь заданного значения minZoom удаётся не всегда. Масштабирование могут ограничивать и другие факторы, например высота карты. Например, если высота карты составляет 512 пикселей, уменьшить масштаб ниже уровня 0 будет невозможно независимо от заданного значения minZoom.

Если minZoom выходит за допустимые пределы, будет вызвано событие ErrorEvent.

Параметры

Возвращает

this

Пример

map.setMinZoom(12.25);

setMissingStyleImageResolver()

setMissingStyleImageResolver(resolver: MissingStyleImageResolver): this

Задаёт функцию обратного вызова, вызываемую при отсутствии значка или шаблона, необходимого стилю.

Обычно функция поиска загружает или создаёт изображение и регистрирует его с помощью Map.addImage. MapLibre ожидает завершения возвращённого промиса, прежде чем считать изображение отсутствующим, поэтому поддерживаются асинхронные операции. Если после этого изображение по-прежнему отсутствует, вызывается событие styleimagemissing.

Параметры

Возвращает

this

Пример

map.setMissingStyleImageResolver(async (id) => {
    const response = await fetch(`/icons/${id}.png`);
    const image = await createImageBitmap(await response.blob());
    map.addImage(id, image, {pixelRatio: 2});
});

setPadding()

setPadding(padding: PaddingOptions, eventData?: any): this

Задаёт отступы в пикселях вокруг области просмотра.

Эквивалентно jumpTo({padding: padding}).

Вызывает следующие события: movestart и moveend.

Параметры

Возвращает

this

Пример

Устанавливает левый отступ 300px и верхний отступ 50px

map.setPadding({ left: 300, top: 50 });

setPaintProperty()

setPaintProperty<K extends keyof AllPaintProperties>(layerId: string, name: K, value: AllPaintProperties[K], options?: StyleSetterOptions): this

Задаёт значение свойства оформления указанного слоя стиля.

Параметры типа

Параметры

Возвращает

this

Пример

map.setPaintProperty('my-layer', 'fill-color', '#faafee');

См. также

• Изменение цвета слоя с помощью кнопок
• Создание перетаскиваемой точки

setPitch()

setPitch(pitch: number, eventData?: any): this

Задаёт угол наклона карты. Эквивалентно jumpTo({pitch: pitch}).

Вызывает следующие события: movestart, moveend, pitchstart и pitchend.

Параметры

Возвращает

this

setPixelRatio()

setPixelRatio(pixelRatio: number): void

Задаёт коэффициент пикселей карты. Это позволяет переопределить devicePixelRatio. После этого вызова атрибут width холста будет равен container.clientWidth * pixelRatio, а атрибут высоты — container.clientHeight * pixelRatio. Установите значение null, чтобы отключить переопределение devicePixelRatio. Обратите внимание, что фактически применённый коэффициент пикселей может быть ниже для соблюдения ограничения maxCanvasSize.

Параметры

Возвращает

void

setProjection()

setProjection(projection: ProjectionSpecification): this

Задаёт ProjectionSpecification.

Параметры

Возвращает

this

setRenderWorldCopies()

setRenderWorldCopies(renderWorldCopies?: boolean): this

Задаёт состояние renderWorldCopies.

Параметры

Возвращает

this

Пример

map.setRenderWorldCopies(true);

См. также

Отображение копий мира

setRoll()

setRoll(roll: number, eventData?: any): this

Задаёт угол крена карты. Эквивалентно jumpTo({roll: roll}).

Вызывает следующие события: movestart, moveend, rollstart и rollend.

Параметры

Возвращает

this

setSky()

setSky(sky: SkySpecification, options?: StyleSetterOptions): this

Задаёт значения свойств неба в стиле.

Параметры

Возвращает

this

Пример

map.setSky({'atmosphere-blend': 1.0});

setSourceTileLodParams()

setSourceTileLodParams(maxZoomLevelsOnScreen: number, tileCountMaxMinRatio: number, sourceId?: string): this

Изменяет поведение уровня детализации тайлов указанного источника. Эти параметры не оказывают влияния при pitch == 0 и оказывают наибольшее влияние, когда горизонт виден на экране.

Параметры

Возвращает

this

Пример

map.setSourceTileLodParams(4.0, 3.0, 'terrain');

См. также

Изменение поведения уровня детализации

setSprite()

setSprite(spriteUrl: string, options?: StyleSetterOptions): this

Задаёт значение свойства sprite стиля.

Параметры

Возвращает

this

Пример

map.setSprite('YOUR_SPRITE_URL');

setStyle()

setStyle(style: string | StyleSpecification, options?: StyleSwapOptions & StyleOptions): this

Обновляет объект стиля MapLibre карты, задавая ему новое значение.

Если стиль уже задан и при вызове этого метода параметру options.diff присвоено значение true, визуализатор карты попытается сравнить переданный стиль с текущим состоянием карты и выполнить только те изменения, которые необходимы для приведения стиля карты к желаемому состоянию. Изменения в спрайтах (изображениях, используемых для значков и узоров) и глифах (шрифтах текста подписей) невозможно сравнить таким образом. Если спрайты или шрифты, используемые в текущем и переданном стилях, хоть чем-то отличаются, визуализатор карты выполнит полное обновление: удалит текущий стиль и создаст переданный с нуля.

Параметры

Возвращает

this

Пример

map.setStyle("https://demotiles.maplibre.org/style.json");

map.setStyle('https://demotiles.maplibre.org/style.json', {
  transformStyle: (previousStyle, nextStyle) => ({
      ...nextStyle,
      sources: {
          ...nextStyle.sources,
          // copy a source from previous style
          'osm': previousStyle.sources.osm
      },
      layers: [
          // background layer
          nextStyle.layers[0],
          // copy a layer from previous style
          previousStyle.layers[0],
          // other layers from the next style
          ...nextStyle.layers.slice(1).map(layer => {
              // hide the layers we don't need from demotiles style
              if (layer.id.startsWith('geolines')) {
                  layer.layout = {...layer.layout || {}, visibility: 'none'};
              // filter out US polygons
              } else if (layer.id.startsWith('coastline') || layer.id.startsWith('countries')) {
                  layer.filter = ['!=', ['get', 'ADM0_A3'], 'USA'];
              }
              return layer;
          })
      ]
  })
});

setTerrain()

setTerrain(options: TerrainSpecification, styleOptions?: StyleSetterOptions): this

Загружает трёхмерную сетку рельефа на основе источника типа "raster-dem".

Вызывает событие terrain.

Параметры

Возвращает

this

Пример

map.setTerrain({ source: 'terrain' });

setTransformCameraUpdate()

setTransformCameraUpdate(value: CameraUpdateTransformFunction): void

Задаёт функцию обратного вызова, используемую для отложенного обновления камеры или применения произвольных ограничений. Если она указана, этот экземпляр Camera можно использовать как компонент без состояния в React и т. д.

Параметры

Возвращает

void

setTransformConstrain()

setTransformConstrain(constrain?: TransformConstrainFunction): this

Задаёт или сбрасывает callback, переопределяющий способ ограничения областью просмотра карты по lnglat и масштабу, чтобы соблюдать границы долготы и широты.

Параметры

Возвращает

this

Пример

function customTransformConstrain(lngLat, zoom) {
  return {center: lngLat, zoom: zoom ?? 0};
};
map.setTransformConstrain(customTransformConstrain);

См. также

Настройка ограничения transform карты

setTransformRequest()

setTransformRequest(transformRequest: RequestTransformFunction): this

Обновляет transform request в requestManager с помощью новой функции

Параметры

Возвращает

this

Пример

map.setTransformRequest((url: string, resourceType: string) => {});

setVerticalFieldOfView()

setVerticalFieldOfView(fov: number, eventData?: any): this

Задаёт вертикальное поле зрения карты в градусах.

Вызывает следующие события: movestart, move и moveend.

Параметры

Возвращает

this

Значение по умолчанию

36.87

Пример

Изменение вертикального поля зрения на 30 градусов

map.setVerticalFieldOfView(30);

setZoom()

setZoom(zoom: number, eventData?: any): this

Задаёт уровень масштаба карты. Эквивалентно jumpTo({zoom: zoom}).

Вызывает следующие события: movestart, move, moveend, zoomstart, zoom и zoomend.

Параметры

Возвращает

this

Пример

Изменение масштаба на уровень 5 без анимированного перехода

map.setZoom(5);

setZoomSnap()

setZoomSnap(snap: number): this

Задаёт шаг фиксации масштаба карты.

Параметры

Возвращает

this

snapToNorth()

snapToNorth(options?: AnimationOptions, eventData?: any): this

Поворачивает карту так, чтобы север оказался сверху (азимут 0°), если текущий азимут достаточно близок к этому значению (то есть находится в пределах порога bearingSnap).

Вызывает следующие события: movestart, moveend и rotate.

Параметры

Возвращает

this

stop()

stop(): this

Останавливает любой выполняющийся анимированный переход.

Возвращает

this

triggerRepaint()

triggerRepaint(): void

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

Возвращает

void

Пример

map.triggerRepaint();

См. также

• Добавление 3D-модели
• Добавление анимированного значка на карту

unproject()

unproject(point: PointLike): LngLat

Возвращает LngLat, представляющий географические координаты, соответствующие указанным координатам пикселя.

Параметры

Возвращает

LngLat

LngLat, соответствующий point.

Пример

map.on('click', (e) => {
  // When the map is clicked, get the geographic coordinate.
  let coordinate = map.unproject(e.point);
});

updateImage()

updateImage(id: string, image: StyleImageSource): this

Обновляет существующее изображение в стиле. Это изображение можно отображать на карте, как и любую другую иконку в спрайте стиля, используя идентификатор изображения с параметрами icon-image, background-pattern, fill-pattern или line-pattern.

Если параметр изображения недопустим, будет вызвано событие ErrorEvent.

Параметры

Возвращает

this

Пример

// If an image with the ID 'cat' already exists in the style's sprite,
// replace that image with a new image, 'other-cat-icon.png'.
if (map.hasImage('cat')) map.updateImage('cat', './other-cat-icon.png');

zoomIn()

zoomIn(options?: AnimationOptions, eventData?: any): this

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

Вызывает следующие события: movestart, move, moveend, zoomstart, zoom и zoomend.

Параметры

Возвращает

this

Пример

Увеличение масштаба карты на один уровень с пользовательской длительностью анимации

map.zoomIn({duration: 1000});

zoomOut()

zoomOut(options?: AnimationOptions, eventData?: any): this

Уменьшает масштаб карты на 1, сначала округляя его до ближайшего шага zoomSnap.

Вызывает следующие события: movestart, move, moveend, zoomstart, zoom и zoomend.

Параметры

Возвращает

this

Пример

Уменьшение масштаба карты на один уровень с пользовательским смещением анимации

map.zoomOut({offset: [80, 60]});

zoomTo()

zoomTo(zoom: number, options?: EaseToOptions, eventData?: any): this

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

Вызывает следующие события: movestart, move, moveend, zoomstart, zoom и zoomend.

Параметры

Возвращает

this

Пример

// Zoom to the zoom level 5 without an animated transition
map.zoomTo(5);
// Zoom to the zoom level 8 with an animated transition
map.zoomTo(8, {
  duration: 2000,
  offset: [100, 50]
});

Свойства

boxZoom

boxZoom: BoxZoomHandler

BoxZoomHandler карты, реализующий масштабирование с помощью перетаскивания при нажатой клавише Shift. Дополнительные сведения и примеры использования boxZoom см. в разделе BoxZoomHandler.

cancelPendingTileRequestsWhileZooming

cancelPendingTileRequestsWhileZooming: boolean

Свойство карты, определяющее, следует ли отменять загрузку или сохранять загружающиеся тайлы из текущей области просмотра, которые относятся к более дальнему (меньшему) уровню масштабирования, чем текущий. * Если true, при увеличении масштаба загрузка тайлов, которые не успели загрузиться для предыдущих уровней масштабирования, будет отменена. Это может сэкономить вычислительные ресурсы на менее производительных устройствах, но детали карты могут появиться более резко в конце увеличения масштаба. * Если false, при увеличении масштаба тайлы предыдущего уровня (уровней) масштабирования будут постепенно появляться, обеспечивая более плавное отображение деталей карты. Однако за короткий промежуток времени будет отрисовано больше тайлов.

Значение по умолчанию

true

cooperativeGestures

cooperativeGestures: CooperativeGesturesHandler

CooperativeGesturesHandler карты, который позволяет пользователю видеть подсказки о совместных жестах при попытке изменить масштаб. Подробнее и примеры использования cooperativeGestures см. в разделе CooperativeGesturesHandler.

doubleClickZoom

doubleClickZoom: DoubleClickZoomHandler

DoubleClickZoomHandler карты, который позволяет пользователю менять масштаб двойным щелчком. Подробнее и примеры использования doubleClickZoom см. в разделе DoubleClickZoomHandler.

dragPan

dragPan: DragPanHandler

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

dragRotate

dragRotate: DragRotateHandler

DragRotateHandler карты, который позволяет вращать карту перетаскиванием при нажатой правой кнопке мыши или клавише Control. Подробнее и примеры использования dragRotate см. в разделе DragRotateHandler.

keyboard

keyboard: KeyboardHandler

KeyboardHandler карты, который позволяет пользователю изменять масштаб, вращать и перемещать карту с помощью сочетаний клавиш. Подробнее и примеры использования keyboard см. в разделе KeyboardHandler.

scrollZoom

scrollZoom: ScrollZoomHandler

ScrollZoomHandler карты, который позволяет увеличивать и уменьшать масштаб с помощью колеса прокрутки или трекпада. Подробнее и примеры использования scrollZoom см. в разделе ScrollZoomHandler.

touchPitch

touchPitch: TwoFingersTouchPitchHandler

TwoFingersTouchPitchHandler карты, который позволяет пользователю менять наклон карты с помощью сенсорных жестов. Подробнее и примеры использования touchPitch см. в разделе TwoFingersTouchPitchHandler.

touchZoomRotate

touchZoomRotate: TwoFingersTouchZoomRotateHandler

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