Хилшейд

Хилшейд (также hillshade, отмывка рельефа, теневой рельеф, shaded relief) – это метод представления рельефа на картах, при котором кажется, что на элементы рельефа сбоку падает свет. Карты с хилшейдом подчеркивают красоту рельефа и помогают показать формы ландшафта в деталях.

introduction

Хилшейд представляет собой иллюзию трехмерности и не изменяет геометрическое расположение объектов на карте (для этого нужен 3D-рельеф). Это наиболее легкий и производительный способ показать рельеф на карте.

По умолчанию хилшейд отключен. Для включения настройте его в редакторе стилей.

Настройка в редакторе стилей

Создайте новый стилевой слой с типом полигон и выберите для него данные Хилшейд светлый или Хилшейд темный:

Создать слой с хилшейдом

Во вкладке Стиль настройте внешний вид полигонов. Рекомендуемые настройки представлены ниже:

Светлый слой

Цвет заливки:
- Точка 1: цвет #FFFFFF1A, масштаб 10.
- Точка 2: цвет #FFFFFF00, масштаб 14,5.
Цвет обводки:
- Точка 1: цвет #FFFFFF1A, масштаб 10.
- Точка 2: цвет #FFFFFF00, масштаб 14,5.
Ширина обводки: 0 px.

Пример настройки стиля для светлого слоя

Темный слой

Цвет заливки:
- Точка 1: цвет #00000008, масштаб 10.
- Точка 2: цвет #00000000, масштаб 14,5.
Цвет обводки:
- Точка 1: цвет #00000008, масштаб 10.
- Точка 2: цвет #00000000, масштаб 14,5.
Ширина обводки: 0 px.

Пример настройки стиля для темного слоя

Приоритет слоев с хилшейдом

Располагать эти слои следует после всех природных площадных объектов: воды, суши, растительности.

Пример расположения слоя с хилшейдом

Динамическое включение/отключение

Хилшейд, как и любые другие стилевые слои, можно включать/отключать при помощи глобальных переменных стилей.

Добавьте к фильтрам стилевых слоев хилшейда зависимость от глобальной переменной. Например, для переменной hillshade это будет выглядеть следующим образом:

Включите или отключите отображение слоев хилшейда при помощь метода map.patchStyleState():

// Включить слои хилшейда
map.patchStyleState({ hillshade: true });

// Отключить слои хилшейда
map.patchStyleState({ hillshade: false });

Пример использования глобальной переменной:

<!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</title>
        <meta name="description" content="Hillshade Example" />
        <link rel="stylesheet" type="text/css" href="/css/switch.css" />
        <style>
            html,
            body,
            #container {
                margin: 0;
                width: 100%;
                height: 100%;
                overflow: hidden;
            }

            #buttons {
                position: absolute;
                z-index: 2;

                top: 0;
                left: 0;
                margin: 8px;
                padding: 2px 4px;

                display: flex;
                align-items: center;
                background-color: white;
                border-radius: 8px;
                font: 13px sans-serif;
            }

            #buttons label {
                padding: 0 4px;
            }
        </style>
    </head>
    <body>
        <div id="container"></div>
        <div id="buttons">
            <label>Hillshade</label>
            <input type="checkbox" role="switch" onclick="toggleHillshade(event)" checked="true" />
            <label id="stateCaption">On</label>
        </div>
        <script src="https://mapgl.2gis.com/api/js/v1"></script>
        <script>
            const map = new mapgl.Map('container', {
                center: [55.95302535084585, 25.471392280211518],
                zoom: 9.5,
                pitch: 41.41,
                rotation: 19.20,
                key: 'Your API access key',
                style: '8500c08c-0d73-4147-bb73-e6dcba21fa47',
                styleState: {
                    hillshade: true
                }
            });

            const stateCaption = document.getElementById('stateCaption');

            function toggleHillshade(ev) {
                const enabled = ev.target.checked;
                map.patchStyleState({ hillshade: enabled })
                stateCaption.innerText = enabled ? 'On' : 'Off';
            }
        </script>
    </body>
</html>

Добавление к существующему стилю

Слои хилшейда можно добавить к существующему стилю при помощи метода map.addLayer(). Пример:

map.on('styleload', function () {
    map.addLayer({
        type: 'polygon',
        id: 'hillshade-dark',
        filter: ['match', ['get', 'db_sublayer'], ['Hillshade_dark'], true, false],
        style: {
            color: ['interpolate', ['linear'], ['zoom'], 10, '#00000008', 14.5, '#00000000'],
            strokeWidth: 0,
        },
    });
    map.addLayer({
        type: 'polygon',
        id: 'hillshade-light',
        filter: ['match', ['get', 'db_sublayer'], ['Hillshade_light'], true, false],
        style: {
            color: ['interpolate', ['linear'], ['zoom'], 10, '#FFFFFF1A', 14.5, '#FFFFFF00'],
            strokeWidth: 0,
        },
    });
});

Важно: Событие StyleLoadEvent должно вызываться перед методами map.addLayer() и map.removeLayer(). Карта не может добавлять и удалять стилевые слои, пока не загрузится ее основной стиль.

<!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</title>
        <meta name="description" content="Hillshade Example" />
        <style>
            html,
            body,
            #container {
                margin: 0;
                width: 100%;
                height: 100%;
                overflow: hidden;
            }

            #buttons {
                position: absolute;
                top: 0;
                left: 0;
                padding: 8px;
                z-index: 2;
            }
        </style>
    </head>
    <body>
        <div id="container"></div>
        <script src="https://mapgl.2gis.com/api/js/v1"></script>
        <script>
            const map = new mapgl.Map('container', {
                center: [55.95302535084585, 25.471392280211518],
                zoom: 9.5,
                pitch: 41.41,
                rotation: 19.20,
                key: 'Your API access key',
            });

            map.on('styleload', function () {
                map.addLayer({
                    type: 'polygon',
                    id: 'hillshade-dark',                    
                    filter: ["match", ["get", "db_sublayer"], ["Hillshade_dark"], true, false],
                    style: {
                        color: ["interpolate", ["linear"], ["zoom"], 10, "#00000008", 14.5, "#00000000"],
                        strokeWidth: 0
                    }
                });
                map.addLayer({
                    type: 'polygon',
                    id: 'hillshade-light',
                    filter: ["match", ["get", "db_sublayer"], ["Hillshade_light"], true, false],
                    style: {
                        color: ["interpolate", ["linear"], ["zoom"], 10, "#FFFFFF1A", 14.5, "#FFFFFF00"],
                        strokeWidth: 0
                    }
                });
            });
        </script>
    </body>
</html>