Перейти к основному содержимому

Интерактивная карта

Для отображения интерактивной карты необходимы следующие компоненты:

  • данные для отображения (тайлы);
  • стиль отображения;
  • программный код для отображения карты на веб-странице.

Данные для отображения представляют из себя кусочки мозаики квадратной формы — тайлы. Весь набор тайлов для отображения мира представляет собой пирамиду. На нулевом уровне (масштабе) пирамиды находится один тайл. Далее на каждом следующем уровне (масштабе) количество тайлов составляет 4n, где n — номер масштаба. Каждый тайл содержит в себе геометрическую и атрибутивную информацию.

Стили отображения карт представляют собой JSON-объект с описанием, где брать данные и как рисовать те или иные элементы.

Для встраивания карт в свой проект необходимо добавить на страницу элемент верстки, где будет отображаться карта.

Создание интерактивной карты

Для простого отображения карты необходимо добавить JS & CSS файлы с SDK на страницу, а также добавить код инициализации карты, не забыв указать актуальный ключ доступа к API.

Для инициализации необходимо указать требуемый стиль:

  • light_style.jsonmmr://api/styles/light_style.json;
  • mapsme_style.jsonmmr://api/styles/mapsme_style.json;
  • main_style.jsonmmr://api/styles/main_style.json.

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

Для добавления своих объектов на карту для начала надо описать их координаты, обычно это делают в формате GeoJson.

Добавление точки с пином

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

Создайте список точек для добавления на карту (см. ниже).

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://geo.rustore.ru/api/styles/pins/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
}
});
}
);
});

Добавление линии

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

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

let userLineData = {
"type": "FeatureCollection",
"features": [{
"type": "Feature",
"geometry": {
"type": "LineString",
"coordinates": [
[37.6165, 55.7505],
[37.6375, 55.7515],
[37.6375, 55.7515],
[37.665, 55.7545],
[37.765, 55.7645],
[37.785, 55.7745],
[37.803, 55.7645],
[37.83, 55.7545],
[37.89, 55.78]
]
}
}, {
"type": "Feature",
"geometry": {
"type": "LineString",
"coordinates": [
[37.4165, 55.7505],
[37.4166, 55.7505],
[37.4169, 55.6],
[37.5169, 55.545],
[37.6169, 55.45],
[37.5169, 55.334],
[37.3169, 55.211]
]
}
}]
};

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

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
}
});
});

Добавление полигона

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

let userPolygonData = {
"type": "FeatureCollection",
"features": [{
"type": "Feature",
"geometry": {
"type": "Polygon",
"coordinates": [
[
[37.427278, 55.756486],
[37.387117, 55.734843],
[37.405653, 55.709126],
[37.4592, 55.70042],
[37.518239, 55.683585],
[37.617439, 55.690939],
[37.669614, 55.707578],
[37.674419, 55.73291],
[37.635975, 55.777345],
[37.583457, 55.795105],
[37.525791, 55.799544],
[37.478765, 55.780049],
[37.427278, 55.756486]
], [
[37.495585, 55.749917],
[37.481511, 55.745666],
[37.48872, 55.718796],
[37.536432, 55.718989],
[37.582428, 55.724983],
[37.592382, 55.740835],
[37.551535, 55.759964],
[37.495585, 55.749917]
]
]
}
}]
};

И опишите как его рисовать на карте.

map.on('load',  function() {
map.addLayer({
'id': 'maine',
'type': 'fill',
'source' : {
'type': 'geojson',
'data' : userPolygonData
},
'layout' : {},
'paint' : {
'fill-color': '#6ea5e8',
'fill-opacity' : 0.5
}
});
});