Объекты добавляются на карту через GeoJSON-данные и слои (addLayer). Добавление выполняется после события load.
Для добавления слоя с иконками необходимо загрузить изображение пина, зарегистрировать его в спрайте карты и описать слой типа symbol.
let userPointData = {
"type": "FeatureCollection",
"features": [
{
"type": "Feature",
"geometry": { "type": "Point", "coordinates": [37.6165, 55.7505] }
},
{
"type": "Feature",
"geometry": { "type": "Point", "coordinates": [37.4165, 55.7505] }
},
{
"type": "Feature",
"geometry": { "type": "Point", "coordinates": [37.6165, 55.8505] }
}
]
};
map.on('load', function () {
map.loadImage(
'https://yourservername.ru/blue_target.png',
function (error, image) {
if (error) throw error;
map.addImage('custom_pin', image);
map.addLayer({
"id": "points",
"type": "symbol",
"source": {
"type": "geojson",
"data": userPointData
},
"layout": {
"icon-image": "custom_pin",
"icon-size": 1
}
});
}
);
});
Линейные объекты добавляются слоем типа line.
let userLineData = {
"type": "FeatureCollection",
"features": [
{
"type": "Feature",
"geometry": {
"type": "LineString",
"coordinates": [
[37.6165, 55.7505],
[37.6375, 55.7515],
[37.665, 55.7545],
[37.765, 55.7645],
[37.785, 55.7745],
[37.89, 55.78]
]
}
}
]
};
map.on('load', function () {
map.addLayer({
'id': 'route',
'type': 'line',
'source': {
'type': 'geojson',
'data': userLineData
},
'layout': {
'line-join': 'round',
'line-cap': 'round'
},
'paint': {
'line-color': '#AE3478',
'line-width': 8
}
});
});
Полигоны добавляются слоем типа fill. Поддерживаются полигоны с отверстиями — второй массив координат описывает отверстие.
let userPolygonData = {
"type": "FeatureCollection",
"features": [{
"type": "Feature",
"geometry": {
"type": "Polygon",
"coordinates": [
[
[37.427278, 55.756486],
[37.387117, 55.734843],
[37.405653, 55.709126],
[37.518239, 55.683585],
[37.617439, 55.690939],
[37.674419, 55.73291],
[37.635975, 55.777345],
[37.525791, 55.799544],
[37.427278, 55.756486]
],
[
[37.495585, 55.749917],
[37.481511, 55.745666],
[37.536432, 55.718989],
[37.592382, 55.740835],
[37.551535, 55.759964],
[37.495585, 55.749917]
]
]
}
}]
};
map.on('load', function () {
map.addLayer({
'id': 'polygon',
'type': 'fill',
'source': {
'type': 'geojson',
'data': userPolygonData
},
'layout': {},
'paint': {
'fill-color': '#6ea5e8',
'fill-opacity': 0.5
}
});
});