Обзор

Экспорт векторных тайлов 2ГИС в формате MVT (Mapbox Vector Tiles) — это альтернативный способ получения карты 2ГИС для использования в вашей ГИС-системе. В данном документе описывается процесс получения тайлов для интеграции в целевую систему.

Mapbox Vector Tiles (MVT) — публичный стандарт представления векторных географических данных. Это распространённый стандарт, с которым умеют работать большинство современных ГИС-систем.

Воспользуйтесь экспортом векторных тайлов 2ГИС в формате MVT, если верны оба утверждения ниже:

Целевая ГИС-система не поддерживает формат векторных тайлов 2ГИС или использование MapGL JS API.
Целевая ГИС-система может работать с векторными тайлами в формате MVT.

Типы данных

Экспортируемые тайлы 2ГИС в формате MVT содержат следующие типы данных:

Полигоны (одноцветные плоские области: районы, озера, 2D-здания и т.д.);
Линии (дороги, тонкие реки);
Точки (иконки, надписи);
Полигоны с высотой (3D-здания);
Пунктирные линии («зебры», железные дороги);
Надписи вдоль линий (подписи улиц).

Типы данных, которые не поддерживаются при экспорте тайлов, но доступны в MapGL JS API:

Линии с высотой (3D-заборы);
Линии из стрелок (показывают направление движения на дорогах);
3D-модели (деревья, реалистичные здания);
Точки с физическим размером (разметка на дорогах);
3D-полигоны (развязки, насыпи).

Пример

Пример использования тайлов 2ГИС в формате MVT с использованием библиотеки mapbox-gl-js.

<!doctype html>
<html>
    <head>
        <meta charset="utf-8" />
        <title>2GIS style</title>
        <meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no" />
        <link href="https://api.mapbox.com/mapbox-gl-js/v3.5.1/mapbox-gl.css" rel="stylesheet" />
        <script src="https://api.mapbox.com/mapbox-gl-js/v3.5.1/mapbox-gl.js"></script>
        <style>
            body {
                margin: 0;
                padding: 0;
            }

            #map {
                position: absolute;
                top: 0;
                bottom: 0;
                width: 100%;
            }

            #zoom-level {
                position: absolute;
                padding: 5px;
                z-index: 1;
                text-shadow: -1px -1px 2px #fff;
            }
        </style>
    </head>

    <body>
        <div id="zoom-level"></div>
        <div id="map"></div>
        <script>
            mapboxgl.accessToken =
                'pk.eyJ1IjoidGFydGlrb3YiLCJhIjoiY2p1NGI0dGQzMGZ6YzN5czdrdTYwaGlvcyJ9.-JqYeHH6iwTYDuD_AfTulg';

            const map = new mapboxgl.Map({
                container: 'map',
                style: 'https://docs.2gis.com/mapbox/style/style.json',
                zoom: 14,
                center: [37.630448, 55.753282],
                transformRequest: (url, resourceType) => {
                    const styleProtocol = 'style://';
                    if (url.startsWith(styleProtocol)) {
                        url = 'https://docs.2gis.com/mapbox/style/' + url.substr(styleProtocol.length);
                        url = new URL(url).href;
                    }
                    return {
                        url
                    };
                }
            });

            const zoomLevelDisplay = document.getElementById('zoom-level');
            function updateZoomLevel() {
                const zoom = map.getZoom().toFixed(2);
                zoomLevelDisplay.textContent = `Zoom: ${zoom}`;
            }
            map.on('zoom', updateZoomLevel);
            updateZoomLevel();
        </script>
    </body>
</html>