Интерактивная карта
Для отображения интерактивной карты необходимы следующие компоненты:
- данные для отображения (тайлы);
- стиль отображения;
- программный код для отображения карты на веб-странице.
Данные для отображения представляют из себя кусочки мозаики квадратной формы — тайлы. Весь набор тайлов для отображения мира представляет собой пирамиду. На нулевом уровне (масштабе) пирамиды находится один тайл. Далее на каждом следующем уровне (масштабе) количество тайлов составляет 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 } }); }); |