Планы этажей

Для некоторых зданий доступны поэтажные планы. Они отображаются на стилевом масштабе 18 и выше.

<!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="Example of a building with floors" />
        <style>
            html,
            body,
            #container {
                margin: 0;
                width: 100%;
                height: 100%;
                overflow: hidden;
            }
        </style>
    </head>
    <body>
        <div id="container"></div>
        <script>
            function initMap() {
                const map = new mapgl.Map('container', {
                    center: [55.278765, 25.197039],
                    zoom: 19,
                    rotation: -3,
                    pitch: 45,
                    key: 'Your API access key',
                });
            }
        </script>
        <script src="https://mapgl.2gis.com/api/js/v1?callback=initMap" async defer></script>
    </body>
</html>

События

При показе поэтажного плана вызывается событие floorplanshow (см. FloorPlanShowEvent). При скрытии поэтажного плана вызывается событие floorplanhide (см. FloorPlanHideEvent).

Если при показе поэтажного плана был изменён номер текущего этажа (используя кнопки этажей или метод setFloorPlanLevel()), то будет вызвано событие floorlevelchange (см. FloorLevelChangeEvent).

Чтобы подписаться на эти события, нужно использовать метод on().

map.on('floorplanshow', (e) => {
    alert(`План ${e.floorPlanId} показан.`);
});
map.on('floorplanhide', (e) => {
    alert(`План ${e.floorPlanId} скрыт.`);
});
map.on('floorlevelchange', (e) => {
    alert('Изменён номер этажа.');
});

<!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="Example of floor events" />
        <style>
            html,
            body,
            #container {
                margin: 0;
                width: 100%;
                height: 100%;
                overflow: hidden;
            }
        </style>
    </head>
    <body>
        <div id="container"></div>
        <script>
            function initMap() {
                const map = new mapgl.Map('container', {
                    center: [55.278765, 25.197039],
                    zoom: 16,
                    rotation: -3,
                    pitch: 45,
                    key: 'Your API access key',
                });

                map.on('floorplanshow', (e) => {
                    alert(`Floor plan ${e.floorPlanId} shows.`);
                });

                map.on('floorplanhide', (e) => {
                    alert(`Floor plan ${e.floorPlanId} hides.`);
                });
            }
        </script>
        <script src="https://mapgl.2gis.com/api/js/v1?callback=initMap" async defer></script>
    </body>
</html>

Изменение этажа

Чтобы изменить номер отображаемого этажа, нужно вызвать метод setFloorPlanLevel() и указать два параметра: идентификатор плана и индекс этажа. Оба этих значения можно получить, подписавшись на событие FloorPlanShowEvent.

Пример ниже меняет поведение карты, чтобы при показе поэтажного плана первоначально отображался последний этаж здания. Для этого в обработчике события floorplanshow вызывается метод setFloorPlanLevel(), в который передаётся индекс последнего этажа.

map.on('floorplanshow', (e) => {
    const length = e.floorLevels.length;
    const { floorLevelIndex } = e.floorLevels[length - 1];
    map.setFloorPlanLevel(e.floorPlanId, floorLevelIndex);
});

<!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="Example of floor level change" />
        <style>
            html,
            body,
            #container {
                margin: 0;
                width: 100%;
                height: 100%;
                overflow: hidden;
            }
        </style>
    </head>
    <body>
        <div id="container"></div>
        <script>
            function initMap() {
                const map = new mapgl.Map('container', {
                    center: [55.278765, 25.197039],
                    zoom: 19,
                    rotation: -3,
                    pitch: 45,
                    key: 'Your API access key',
                });

                map.on('floorplanshow', (e) => {
                    const length = e.floorLevels.length;
                    const { floorLevelIndex } = e.floorLevels[length - 1];
                    map.setFloorPlanLevel(e.floorPlanId, floorLevelIndex);
                });
            }
        </script>
        <script src="https://mapgl.2gis.com/api/js/v1?callback=initMap" async defer></script>
    </body>
</html>