Интерактивная карта
Для отображения интерактивной карты необходимы следующие компоненты:
- данные для отображения (тайлы);
- стиль отображения;
- программный код для отображения карты на веб-странице.
Данные для отображения представляют из себя кусочки мозаики квадратной формы — тайлы. Весь набор тайлов для отображения мира представляет собой пирамиду. На нулевом уровне (масштабе) пирамиды находится один тайл. Далее на каждом следующем уровне (масштабе) количество тайлов составляет 4n, где n — номер масштаба. Каждый тайл содержит в себе геометрическую и атрибутивную информацию.
Стили отображения карт представляют собой json-объект с описанием, где брать данные и как рисовать те или иные элементы.
Для встраивания карт в свой проект необходимо добавить на страницу элемент верстки, где будет отображаться карта.
Создание интерактивной карты
Для простого отображения карты необходимо добавить JS & CSS файлы с SDK на страницу, а также добавить код инициализации карты, не забыв указать актуальный ключ доступа к API.
Для инициализации необходимо указать требуемый стиль:
- light_style.json — mmr://api/styles/light_style.json
- mapsme_style.json — mmr://api/styles/mapsme_style.json
- main_style.json — mmr://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 } });}); |