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

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

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

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

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

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

image

Создайте список точек для добавления на карту:

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

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

image

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

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

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

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

image

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

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
        }
    });
});
Was this information helpful?