Источники данных добавляются через map.addSource(id, options), удаляются через map.removeSource(id), доступ осуществляется через map.getSource(id).
Источник GeoJSON-данных. Поддерживает прямую передачу объекта или URL.
// Из URL
map.addSource('ports', {
type: 'geojson',
data: 'https://yourservername.ru/ports.geojson'
});
// Из объекта
map.addSource('my-points', {
type: 'geojson',
data: {
"type": "FeatureCollection",
"features": [{
"type": "Feature",
"properties": {},
"geometry": {
"type": "Point",
"coordinates": [37.6165, 55.7505]
}
}]
}
});
// Обновление данных
map.getSource('my-points').setData({ ... });
Методы GeoJSONSource:
| Метод | Описание |
|---|---|
setData(data) |
Устанавливает новые данные GeoJSON и перерисовывает карту. Принимает объект GeoJSON или URL |
getClusterChildren(clusterId, callback) |
Получить дочерние элементы кластера на следующем уровне масштаба |
getClusterExpansionZoom(clusterId, callback) |
Получить уровень масштаба, при котором кластер раскрывается |
getClusterLeaves(clusterId, limit, offset, callback) |
Получить исходные точки кластера (с поддержкой пагинации) |
Источник данных, содержащий видео. Видео привязывается к четырём географическим координатам.
map.addSource('video', {
type: 'video',
url: [
'path-to-video.mp4',
'path-to-video.webm'
],
coordinates: [
[-76.54, 39.18],
[-76.52, 39.18],
[-76.52, 39.17],
[-76.54, 39.17]
]
});
// Обновление координат
map.getSource('video').setCoordinates([
[-76.54, 39.19],
[-76.52, 39.19],
[-76.52, 39.17],
[-76.54, 39.17]
]);
// Удаление источника
map.removeSource('video');
Методы VideoSource:
| Метод | Описание |
|---|---|
getVideo() |
Возвращает HTML-элемент видео |
play() |
Продолжить воспроизведение |
pause() |
Поставить на паузу |
setCoordinates(coordinates) |
Обновить координаты и перерисовать карту |
Источник данных изображения. Изображение привязывается к четырём географическим координатам (по часовой стрелке, начиная с верхнего левого угла).
map.addSource('image', {
type: 'image',
url: 'radar.png',
coordinates: [
[-76.54, 39.18],
[-76.52, 39.18],
[-76.52, 39.17],
[-76.54, 39.17]
]
});
// Обновление только координат
map.getSource('image').setCoordinates([
[-76.54, 39.19],
[-76.52, 39.19],
[-76.52, 39.17],
[-76.54, 39.17]
]);
// Обновление URL и координат одновременно
map.getSource('image').updateImage({
url: 'radar-new.png',
coordinates: [
[-76.54, 39.19],
[-76.52, 39.19],
[-76.52, 39.17],
[-76.54, 39.17]
]
});
Методы ImageSource:
| Метод | Описание |
|---|---|
setCoordinates(coordinates) |
Обновить координаты и перерисовать карту |
updateImage(options) |
Обновить URL и/или координаты. Чтобы избежать мерцания, установите raster-fade-duration: 0 |
Источник данных, содержащий HTML-холст (<canvas>). Поддерживает анимацию.
map.addSource('canvas', {
type: 'canvas',
canvas: 'myCanvasElementId',
animate: true,
coordinates: [
[-76.54, 39.18],
[-76.52, 39.18],
[-76.52, 39.17],
[-76.54, 39.17]
]
});
Параметры CanvasSource:
| Параметр | Тип | Описание |
|---|---|---|
type |
string | Должен быть "canvas" |
canvas |
string | HTMLCanvasElement | ID элемента <canvas> или сам элемент |
coordinates |
Array | Четыре координаты углов (по часовой стрелке от верхнего левого) |
animate |
boolean | Если false, пиксели не перечитываются на каждом кадре (лучше для статичного холста) |
Методы CanvasSource:
| Метод | Описание |
|---|---|
getCanvas() |
Возвращает HTML-элемент холста |
play() |
Включает анимацию |
pause() |
Отключает анимацию, карта показывает статичную копию |
setCoordinates(coordinates) |
Обновить координаты и перерисовать карту |