Глобус

Вы можете настроить вид карты так, чтобы при достаточно большом отдалении плоская карта превращалась в глобус. Если режим глобуса включён, он действует на 2-8 уровне масштабирования. Вы можете настроить работу глобуса в зависимости от графического режима и затем управлять им с помощью API.

Настройка графических режимов

Если вы используете несколько графических режимов карты, рекомендуется включать глобус только в режиме immersive, так как для отображения глобуса требуются значительные ресурсы системы.

Откройте Редактор стилей.
Откройте нужный стиль.
Настройте работу глобуса в зависимости от графического режима:
1. На вкладке Другое выберите пункт Графические режимы:
2. Настройте переключатели Глобус в нужных графических режимах.
Проверьте вид глобуса в обновлённых настройках графических режимов:
1. Откройте раздел Настройки.
2. Включите опцию Глобус.
3. В выпадающем списке Графический режим выберите нужный режим.
4. Уменьшите масштаб карты, чтобы увидеть глобус.

Включение глобуса

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

const map = new mapgl.Map('container', {
    center,
    zoom: 3,
    key: 'Your API access key',
    styleState: { globeEnabled: true },
});

Чтобы переключать режим глобуса динамически, используйте метод map.patchStyleState(), например:

function toggleGlobe() {
    let { globeEnabled } = map.getStyleState();
    map.patchStyleState({ globeEnabled: !globeEnabled });
}

Пример карты с режимом глобуса и возможностью его динамического изменения:

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title>2GIS Map API - Globe</title>
        <meta name="description" content="Simple Globe for MapGL JS API" />
        <style>
            html,
            body,
            #container {
                margin: 0;
                width: 100%;
                height: 100%;
                overflow: hidden;
            }
          
          #controls {
            position: absolute;
            top: 10px;
            left: 10px;
            z-index: 2;
          }
        </style>
    </head>
    <body>
        <div id="controls">
          <button onclick="toggleGlobe()">Toggle Globe</button>
        </div>
        <div id="container"></div>
        <script src="https://mapgl.2gis.com/api/js/v1"></script>
        <script>
            const center = [0, 25.23584];

            const map = new mapgl.Map('container', {
            center,
            zoom: 3,
            key: 'Your API access key',
            // Globe is enabled via `globeEnabled` style variable
            styleState: { globeEnabled: true }
            });

            // You can switch globe mode dynamically via `map.patchStyleState(...)` method.
            function toggleGlobe () {
            let { globeEnabled } = map.getStyleState();
            map.patchStyleState({ globeEnabled: !globeEnabled });
            }

            map.setCenter([center[0] + 179, center[1]], { duration: 120000 });
        </script>
    </body>
</html>

Ограничения

В режиме глобуса не отрисовываются следующие типы стилевых слоёв:

полигон с высотой,
линия с высотой,
подпись линии,
3D-модель,
3D-модель здания,
3D-полигон.