Настройка интерактивной сцены | MapGL | 2GIS Documentation
MapGL JS API
Карты
Поиск
Навигация
2ГИС Про
2ГИС Линза
Личный кабинет
On‑Premise
ру
en

Настройка интерактивной сцены для glTF-плагина версии 2

Вы можете настроить интерактивную сцену недвижимости для glTF-плагина версии 2 с помощью инструмента для позиционирования моделей на карте. В инструменте вы можете разместить и спозиционировать модели на карте, а файл с предварительной конфигурацией интерактивной сцены сформируется автоматически.

Чтобы настроить интерактивную сцену:

  1. Разместите модели на карте.
  2. Настройте поэтажные планы.
  3. Добавьте интерактивную сцену на карту.

Также вы можете указать опциональные настройки сцены: интерактивность, попап и другие.

1. Разместите модели на карте

  1. Убедитесь, что модели соответствуют требованиям.

  2. Откройте инструмент для позиционирования моделей на карте.

  3. Откройте область карты в месте, в которое вы будете добавлять модели:

    Перемещение карты

  4. Нажмите Добавить модель и выберите модель из списка файлов:

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

    Примечание

    Если на карту необходимо добавить одну модель в нескольких экземплярах (например, при типовой застройке), добавьте модель из одного и того же файла нужное количество раз.

  5. Нажмите на добавленную модель. Модель будет выделена зелёным цветом, откроется панель с её настройками позиционирования:

    Выбор модели

  6. Чтобы скрыть объект на карте, который пересекается с моделью, нажмите на него или добавьте ID здания в поле ID зданий:

    Связанные объекты

  7. Спозиционируйте добавленную модель на карте:

    1. Укажите точные координаты модели в блоке Координаты в полях Долгота и Широта. Также вы можете переместить модель вручную: используйте клавиши стрелок на клавиатуре или зажмите и перетащите модель с помощью мыши.
    2. Укажите значения поворота модели для каждой оси в блоке Поворот в полях X, Y, Z. Также вы можете вращать модель вокруг оси Z: зажмите клавишу R, дождитесь пока курсор изменится на значок Поворот, зажмите и вращайте модель с помощью мыши.
    3. Укажите значение масштаба модели в блоке Масштаб в поле X, Y, Z. Также вы можете изменить масштаб модели вручную: зажмите клавишу S, дождитесь пока курсор изменится на значок Масштаб, зажмите модель с помощью мыши и перемещайте её по направлению от модели (для увеличения) или к центру (для уменьшения).
    Позиционирование модели

  8. Если на сцене необходимо разместить несколько моделей, добавьте их и повторите пункты выше для каждой добавленной модели:

    Несколько моделей на сцене

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

  9. Чтобы посмотреть итоговую сцену, снимите выделение с последней редактируемой модели. Для этого закройте панель параметров модели или нажмите клавишу Esc. Проверьте отображение модели, вращая и масштабируя карту:

    Пример результата

  10. Нажмите Получить конфиг сцены и скачайте конфигурационный файл mapgl-gltf-config.json. Файл содержит предварительную конфигурацию интерактивной сцены и массив настроек для каждой модели.

Пример конфигурационного файла:

mapgl-gltf-config.json 
[
    {
        modelId: 'zgktechnology1_47751f926b1e34b8d54a7f190ad32229e244db18',
        coordinates: [47.2452901373195, 56.13477598609533],
        modelUrl: 'zgktechnology1.glb',
        interactive: true,
        rotateX: 0,
        rotateY: 0,
        rotateZ: -14.6,
        scale: 1,
        linkedIds: ['70030076555823021'],
        floors: [],
    },
    {
        modelId: 'zgktechnology2_9543522e9e5935374df317c931022f23803cc5ef',
        coordinates: [47.24528548642873, 56.13477629396983],
        modelUrl: 'zgktechnology2.glb',
        interactive: true,
        rotateX: 0,
        rotateY: 0,
        rotateZ: -13.91,
        scale: 1,
        linkedIds: ['70030076555821177'],
        floors: [],
    },
    {
        modelId: 'zgktechnology_construction_2a6fef6a371fb7643e26b9d8f999806804e14dcf',
        coordinates: [47.24528460953851, 56.134769314919964],
        modelUrl: 'zgktechnology_construction.glb',
        interactive: true,
        rotateX: 0,
        rotateY: 0,
        rotateZ: -14.379999999999997,
        scale: 1,
        linkedIds: ['70030076561388553'],
        floors: [],
    },
];

2. Настройте поэтажные планы

  1. Откройте скачанный конфигурационный файл mapgl-gltf-config.json.

  2. Заполните массив floors для каждой модели. Для каждого здания этажи заполняются от нижнего до верхнего (от этажа с отрицательным номером или паркинга до самого высокого этажа).

    Например, чтобы добавить этаж к зданию с modelId = zgktechnology1_47751f926b1e34b8d54a7f190ad32229e244db18 (первое здание из файла конфигурации), добавьте в массив floors объект с основными параметрами этажа:

    {
    modelId: 'zgktechnology1_47751f926b1e34b8d54a7f190ad32229e244db18',
    coordinates: [47.2452901373195, 56.13477598609533],
    modelUrl: 'zgktechnology1.glb',
    interactive: true,
    rotateX: 0,
    rotateY: 0,
    rotateZ: -14.6,
    scale: 1,
    linkedIds: ['70030076555823021'],
    floors: [{
        id: '123abc',
        text: '1-10',
        modelUrl: 'zgktechnology1_floor2.glb',
    }],
}

    Укажите параметры:

    • id — уникальный ID этажа в здании.
    • text — название этажа, которое будет отображаться в UI-элементе с кнопками этажей. Например, для паркинга вы можете задать название P или -1.
    • modelUrl — путь до файла с моделью этажа. Если задан относительный путь, то итоговый URL будет строиться на основе параметра modelsBaseUrl, который указан в опциях плагина PluginOptions.

  3. Чтобы отобразить подземный этаж, добавьте свойство isUnderground со значением true:

    {
    ...
    floors: [{
        id: '123abc',
        text: '1-10',
        modelUrl: 'zgktechnology1_floor2.glb',
        isUnderground: true,
    }],
}

  4. Добавьте другие этажи к зданию:

    {
    ...
    floors: [
        {
            id: '123abc',
            text: '1-10',
            modelUrl: 'zgktechnology1_floor2.glb',
            isUnderground: true,
        },
        {
            id: '456def',
            text: '11',
            modelUrl: 'zgktechnology1_floor11.glb',
        },
    ],
}

  5. При необходимости добавьте этажи к другим зданиям и повторите пункты выше для каждого здания.

Пример конфигурационного файла с настройкой этажных планов:

mapgl-gltf-config.json 
[
    {
        modelId: 'zgktechnology1_47751f926b1e34b8d54a7f190ad32229e244db18',
        coordinates: [47.2452901373195, 56.13477598609533],
        modelUrl: 'zgktechnology1.glb',
        interactive: true,
        rotateX: 0,
        rotateY: 0,
        rotateZ: -14.6,
        scale: 1,
        linkedIds: ['70030076555823021'],
        floors: [
            {
                id: '123abc',
                text: '1-10',
                modelUrl: 'zgktechnology1_floor2.glb',
                isUnderground: true,
            },
            {
                id: '456def',
                text: '11',
                modelUrl: 'zgktechnology1_floor11.glb',
            },
        ],
    },
    {
        modelId: 'zgktechnology2_9543522e9e5935374df317c931022f23803cc5ef',
        coordinates: [47.24528548642873, 56.13477629396983],
        modelUrl: 'zgktechnology2.glb',
        interactive: true,
        rotateX: 0,
        rotateY: 0,
        rotateZ: -13.91,
        scale: 1,
        linkedIds: ['70030076555821177'],
        floors: [
            {
                id: 'qwerty',
                text: '2-15',
                modelUrl: 'zgktechnology2_floor2.glb',
            },
            {
                id: '123456',
                text: '16',
                modelUrl: 'zgktechnology2_floor16.glb',
            },
        ],
    },
    {
        modelId: 'zgktechnology_construction_2a6fef6a371fb7643e26b9d8f999806804e14dcf',
        coordinates: [47.24528460953851, 56.134769314919964],
        modelUrl: 'zgktechnology_construction.glb',
        interactive: true,
        rotateX: 0,
        rotateY: 0,
        rotateZ: -14.379999999999997,
        scale: 1,
        linkedIds: ['70030076561388553'],
        floors: [],
    },
];

3. Добавьте интерактивную сцену на карту

  1. Подключите glTF-плагин версии 2.

  2. Инициализируйте плагин.

  3. Добавьте на карту интерактивную сцену недвижимости с данными из конфигурационного файла с помощью метода addRealtyScene:

    plugin.addRealtyScene([
    {
        modelId: 'zgktechnology1_47751f926b1e34b8d54a7f190ad32229e244db18',
        coordinates: [47.2452901373195, 56.13477598609533],
        modelUrl: 'zgktechnology1.glb',
        interactive: true,
        rotateX: 0,
        rotateY: 0,
        rotateZ: -14.6,
        scale: 1,
        linkedIds: ['70030076555823021'],
        floors: [
            {
                id: '123abc',
                text: '1-10',
                modelUrl: 'zgktechnology1_floor2.glb',
                isUnderground: true,
            },
            {
                id: '456def',
                text: '11',
                modelUrl: 'zgktechnology1_floor11.glb',
            },
        ],
    },
    {
        modelId: 'zgktechnology2_9543522e9e5935374df317c931022f23803cc5ef',
        coordinates: [47.24528548642873, 56.13477629396983],
        modelUrl: 'zgktechnology2.glb',
        interactive: true,
        rotateX: 0,
        rotateY: 0,
        rotateZ: -13.91,
        scale: 1,
        linkedIds: ['70030076555821177'],
        floors: [
            {
                id: 'qwerty',
                text: '2-15',
                modelUrl: 'zgktechnology2_floor2.glb',
            },
            {
                id: '123456',
                text: '16',
                modelUrl: 'zgktechnology2_floor16.glb',
            },
        ],
    },
    {
        modelId: 'zgktechnology_construction_2a6fef6a371fb7643e26b9d8f999806804e14dcf',
        coordinates: [47.24528460953851, 56.134769314919964],
        modelUrl: 'zgktechnology_construction.glb',
        interactive: true,
        rotateX: 0,
        rotateY: 0,
        rotateZ: -14.379999999999997,
        scale: 1,
        linkedIds: ['70030076561388553'],
        floors: [],
    },
]);

Пример интерактивной сцены:

<!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="Basic realty scene config example of glTF plugin" />
    <style>
        html,
        body,
        #container {
            margin: 0;
            width: 100%;
            height: 100%;
            overflow: hidden;
        }
    </style>
</head>

<body>
    <script src="https://mapgl.2gis.com/api/js/v1"></script>
    <script src="https://unpkg.com/@2gis/mapgl-gltf@^2/dist/bundle.js"></script>

    <div id="container"></div>
    <script>
        const map = new mapgl.Map('container', {
            center: [47.245286302641034, 56.134743473834099],
            zoom: 17.9,
            key: 'Your API access key',
            pitch: 45,
            rotation: 330,
            enableTrackResize: true,
        });

        const plugin = new mapgl.GltfPlugin(map, {
            modelsLoadStrategy: 'waitAll',
            modelsBaseUrl: 'https://disk.2gis.com/digital-twin/models_s3/realty_ads/zgktechnology/',
            labelGroupDefaults: {
                fontSize: 14,
            },
            hoverOptions: {
                color: '#FFF3F3',
            },
        });

        plugin.addRealtyScene([
            {
                modelId: 'zgktechnology1_47751f926b1e34b8d54a7f190ad32229e244db18',
                coordinates: [47.2452901373195, 56.13477598609533],
                modelUrl: 'zgktechnology1.glb',
                interactive: true,
                rotateX: 0,
                rotateY: 0,
                rotateZ: -14.6,
                scale: 1,
                linkedIds: ['70030076555823021'],
                floors: [
                    {
                        id: '123abc',
                        text: '1-10',
                        modelUrl: 'zgktechnology1_floor2.glb',
                        isUnderground: true,
                    },
                    {
                        id: '456def',
                        text: '11',
                        modelUrl: 'zgktechnology1_floor11.glb',
                    },
                ],
            },
            {
                modelId: 'zgktechnology2_9543522e9e5935374df317c931022f23803cc5ef',
                coordinates: [47.24528548642873, 56.13477629396983],
                modelUrl: 'zgktechnology2.glb',
                interactive: true,
                rotateX: 0,
                rotateY: 0,
                rotateZ: -13.91,
                scale: 1,
                linkedIds: ['70030076555821177'],
                floors: [
                    {
                        id: 'qwerty',
                        text: '2-15',
                        modelUrl: 'zgktechnology2_floor2.glb',
                    },
                    {
                        id: '123456',
                        text: '16',
                        modelUrl: 'zgktechnology2_floor16.glb',
                    },
                ]
            },
            {
                modelId: 'zgktechnology_construction_2a6fef6a371fb7643e26b9d8f999806804e14dcf',
                coordinates: [47.24528460953851, 56.134769314919964],
                modelUrl: 'zgktechnology_construction.glb',
                interactive: true,
                rotateX: 0,
                rotateY: 0,
                rotateZ: -14.379999999999997,
                scale: 1,
                linkedIds: ['70030076561388553'],
                floors: [],
            },
        ]);
    </script>
</body>

</html>

Опциональные настройки

Интерактивность здания

Вы можете добавлять на сцену здания-заглушки, придомовые территории, объекты городской инфраструктуры и окружающей среды. Например, в сцене из данного примера есть строящееся здание без этажей. Чтобы со зданием на карте нельзя было взаимодействовать (например, просматривать этажи), измените значение свойства interactive на false:

{
    modelId: 'zgktechnology_construction_2a6fef6a371fb7643e26b9d8f999806804e14dcf',
    coordinates: [47.24528460953851, 56.134769314919964],
    modelUrl: 'zgktechnology_construction.glb',
    interactive: false,
    rotateX: 0,
    rotateY: 0,
    rotateZ: -14.379999999999997,
    scale: 1,
    linkedIds: ['70030076561388553'],
    floors: [],
}

Попап здания

Чтобы при наведении мыши на здание отображалась дополнительная информация о нём, добавьте в опции здания свойство popupOptions.

Пример файла:

mapgl-gltf-config.json 
[
    {
        modelId: 'zgktechnology1_47751f926b1e34b8d54a7f190ad32229e244db18',
        coordinates: [47.2452901373195, 56.13477598609533],
        modelUrl: 'zgktechnology1.glb',
        interactive: true,
        rotateX: 0,
        rotateY: 0,
        rotateZ: -14.6,
        scale: 1,
        linkedIds: ['70030076555823021'],
        popupOptions: {
            coordinates: [47.24498128610925, 56.13451011334241],
            title: 'Корпус 1. 11 этажей',
            description: 'Срок сдачи: IV кв. 2024 г. <br />15 мин. пешком до ст. м. Московская',
        },
        floors: [
            {
                id: '123abc',
                text: '1-10',
                modelUrl: 'zgktechnology1_floor2.glb',
                isUnderground: true,
            },
            {
                id: '456def',
                text: '11',
                modelUrl: 'zgktechnology1_floor11.glb',
            },
        ],
    },
    {
        modelId: 'zgktechnology2_9543522e9e5935374df317c931022f23803cc5ef',
        coordinates: [47.24528548642873, 56.13477629396983],
        modelUrl: 'zgktechnology2.glb',
        interactive: true,
        rotateX: 0,
        rotateY: 0,
        rotateZ: -13.91,
        scale: 1,
        linkedIds: ['70030076555821177'],
        popupOptions: {
            coordinates: [47.24448882381944, 56.13468481517748],
            title: 'Корпус 2. 16 этажей',
            description: 'Срок сдачи: IV кв. 2024 г. <br /> 15 мин. пешком до ст. м. Московская',
        },
        floors: [
            {
                id: 'qwerty',
                text: '2-15',
                modelUrl: 'zgktechnology2_floor2.glb',
            },
            {
                id: '123456',
                text: '16',
                modelUrl: 'zgktechnology2_floor16.glb',
            },
        ],
    },
    {
        modelId: 'zgktechnology_construction_2a6fef6a371fb7643e26b9d8f999806804e14dcf',
        coordinates: [47.24528460953851, 56.134769314919964],
        modelUrl: 'zgktechnology_construction.glb',
        interactive: false,
        rotateX: 0,
        rotateY: 0,
        rotateZ: -14.379999999999997,
        scale: 1,
        linkedIds: ['70030076561388553'],
        floors: [],
    },
];

Важно

Если у здания отключена опция интерактивности, при наведении курсора мыши на здание попап не отображается.

Ракурс камеры для зданий и этажей

Чтобы изменять ракурс камеры при активации здания или этажного плана, добавьте в опции каждого здания и этажного плана свойство mapOptions с параметрами карты.

  1. Чтобы получить параметры карты, откройте Инструменты разработчика браузера (клавиша F12), найдите подходящий ракурс камеры для здания или этажа и выполните в консоли код:

    console.log(`mapOptions: {
    center: [${map.getCenter()}],
    pitch: ${map.getPitch()},
    zoom: ${map.getZoom()},
    rotation: ${map.getRotation()},
}`);

    Пример добавления опций карты для первого здания и его этажей:

    {
    modelId: 'zgktechnology1_47751f926b1e34b8d54a7f190ad32229e244db18',
    coordinates: [47.2452901373195, 56.13477598609533],
    modelUrl: 'zgktechnology1.glb',
    interactive: true,
    rotateX: 0,
    rotateY: 0,
    rotateZ: -14.6,
    scale: 1,
    linkedIds: ['70030076555823021'],
    popupOptions: {
        coordinates: [47.24498128610925, 56.13451011334241],
        title: 'Корпус 1. 11 этажей',
        description: 'Срок сдачи: IV кв. 2024 г. <br />15 мин. пешком до ст. м. Московская',
    },
    mapOptions: {
        center: [47.24547737708662, 56.134591508663135],
        pitch: 40,
        zoom: 19,
        rotation: -41.4,
    },
    floors: [
        {
            id: '123abc',
            text: '1-10',
            modelUrl: 'zgktechnology1_floor2.glb',
            isUnderground: true,
            mapOptions: {
                center: [47.24524342863023, 56.13449524271827],
                pitch: 40,
                zoom: 20,
                rotation: -57.5,
            },
        },
        {
            id: '456def',
            text: '11',
            modelUrl: 'zgktechnology1_floor11.glb',
            mapOptions: {
                center: [47.24556663327373, 56.13456998211929],
                pitch: 40,
                zoom: 19.5,
                rotation: -62.6,
            },
        },
    ],
},

  2. Повторите пункты выше для каждого здания.

    Пример файла:

    mapgl-gltf-config.json 
    [
    {
        modelId: 'zgktechnology1_47751f926b1e34b8d54a7f190ad32229e244db18',
        coordinates: [47.2452901373195, 56.13477598609533],
        modelUrl: 'zgktechnology1.glb',
        interactive: true,
        rotateX: 0,
        rotateY: 0,
        rotateZ: -14.6,
        scale: 1,
        linkedIds: ['70030076555823021'],
        popupOptions: {
            coordinates: [47.24498128610925, 56.13451011334241],
            title: 'Корпус 1. 11 этажей',
            description: 'Срок сдачи: IV кв. 2024 г. <br />15 мин. пешком до ст. м. Московская',
        },
        mapOptions: {
            center: [47.24547737708662, 56.134591508663135],
            pitch: 40,
            zoom: 19,
            rotation: -41.4,
        },
        floors: [
            {
                id: '123abc',
                text: '1-10',
                modelUrl: 'zgktechnology1_floor2.glb',
                isUnderground: true,
                mapOptions: {
                    center: [47.24524342863023, 56.13449524271827],
                    pitch: 40,
                    zoom: 20,
                    rotation: -57.5,
                },
            },
            {
                id: '456def',
                text: '11',
                modelUrl: 'zgktechnology1_floor11.glb',
                mapOptions: {
                    center: [47.24556663327373, 56.13456998211929],
                    pitch: 40,
                    zoom: 19.5,
                    rotation: -62.6,
                },
            },
        ],
    },
    {
        modelId: 'zgktechnology2_9543522e9e5935374df317c931022f23803cc5ef',
        coordinates: [47.24528548642873, 56.13477629396983],
        modelUrl: 'zgktechnology2.glb',
        interactive: true,
        rotateX: 0,
        rotateY: 0,
        rotateZ: -13.91,
        scale: 1,
        linkedIds: ['70030076555821177'],
        popupOptions: {
            coordinates: [47.24448882381944, 56.13468481517748],
            title: 'Корпус 2. 16 этажей',
            description:
                'Срок сдачи: IV кв. 2024 г. <br /> 15 мин. пешком до ст. м. Московская',
        },
        mapOptions: {
            center: [47.245008950283065, 56.1344698491912],
            pitch: 45,
            zoom: 18.7,
            rotation: -129,
        },
        floors: [
            {
                id: 'qwerty',
                text: '2-15',
                modelUrl: 'zgktechnology2_floor2.glb',
                mapOptions: {
                    center: [47.24463456947374, 56.134675042798094],
                    pitch: 35,
                    zoom: 20,
                    rotation: -130,
                },
            },
            {
                id: '123456',
                text: '16',
                modelUrl: 'zgktechnology2_floor16.glb',
                mapOptions: {
                    center: [47.24498428988907, 56.134514900849325],
                    pitch: 35,
                    zoom: 19.2,
                    rotation: -130,
                },
            },
        ],
    },
    {
        modelId: 'zgktechnology_construction_2a6fef6a371fb7643e26b9d8f999806804e14dcf',
        coordinates: [47.24528460953851, 56.134769314919964],
        modelUrl: 'zgktechnology_construction.glb',
        interactive: false,
        rotateX: 0,
        rotateY: 0,
        rotateZ: -14.379999999999997,
        scale: 1,
        linkedIds: ['70030076561388553'],
        floors: [],
    },
];

Подписи на этажах

Вы можете разместить подписи на этажном плане, например с информацией о помещениях. Для этого настройте группы подписей для каждого этажа и укажите координаты и высоту подписей.

  1. Чтобы получить координаты, откройте Инструменты разработчика браузера (клавиша F12) и выполните в консоли код:

    map.on('click', ({ lngLat }) => {
    console.log(lngLat);
});

plugin.on('click', ({ lngLat }) => {
    console.log(lngLat);
});

    Теперь при клике на карту или любую модель в консоли будут выводится координаты клика.

  2. Чтобы сделать активным этаж, на котором вы хотите добавить подписи, нажмите на здание и выберите этаж. Например, для первого здания и этажа с именем 11 определите места, в которых будут размещены подписи, и нажимайте на них, чтобы получить координаты.

    Получение координат

    Важно

    При клике в карту или здание возвращаются координаты плоской карты, поэтому при размещении подписей для высоких этажей будут возникать искажения перспективной проекции (т.к. при просмотре сверху объект кажется больше).

  3. Чтобы добавить подписи в опции этажа, заполните массив групп в опции labelGroups этажного плана. Подробнее про опции группы см. LabelGroupOptions. Чтобы поднять подписи на высоту этажа, укажите свойство elevation у группы или у каждой подписи:

            {
            modelId: 'zgktechnology1_47751f926b1e34b8d54a7f190ad32229e244db18',
            coordinates: [47.2452901373195, 56.13477598609533],
            modelUrl: 'zgktechnology1.glb',
            ...
            floors: [
                ...,
                {
                    id: '456def',
                    text: '11',
                    modelUrl: 'zgktechnology1_floor11.glb',
                    mapOptions: {
                        center: [47.24556663327373, 56.13456998211929],
                        pitch: 40,
                        zoom: 19.5,
                        rotation: -62.6,
                    },
                    labelGroups: [
                        {
                            id: '123abc',
                            image: 'default',
                            minZoom: 18,
                            elevation: 35,
                            interactive: true,
                            labels: [
                                {
                                    coordinates: [47.245048150280994, 56.134470449142164],
                                    text: '3к\n78.4 м²',
                                },
                                {
                                    coordinates: [47.24520807647288, 56.13443854463778],
                                    text: '2к\n67 м²',
                                },
                                {
                                    coordinates: [47.245350349632965, 56.134414208205776],
                                    text: '1к\n40 м²',
                                },
                                {
                                    coordinates: [47.24542896512635, 56.13448965532694],
                                    text: '3к\n90 м²',
                                },
                                {
                                    coordinates: [47.24510451854659, 56.134541185948585],
                                    text: '3к\n77.2 м²',
                                },
                            ],
                        },
                    ],
                },
            ],
        }

  4. Чтобы при нажатии на подпись можно было перейти по ссылке на другой сайт, добавьте в поле подписи userData свойство url:

            {
            modelId: 'zgktechnology1_47751f926b1e34b8d54a7f190ad32229e244db18',
            coordinates: [47.2452901373195, 56.13477598609533],
            modelUrl: 'zgktechnology1.glb',
            ...
            floors: [
                ...,
                {
                    id: '456def',
                    text: '11',
                    modelUrl: 'zgktechnology1_floor11.glb',
                    ...,
                    labelGroups: [
                        {
                            ...,
                            labels: [
                                {
                                    coordinates: [47.245048150280994, 56.134470449142164],
                                    text: '3к\n78.4 м²',
                                    userData: {
                                        url: 'https://a101.ru/kvartiry/360810/',
                                    },
                                },
                                {
                                    coordinates: [47.24520807647288, 56.13443854463778],
                                    text: '2к\n67 м²',
                                    userData: {
                                        url: 'https://a101.ru/kvartiry/360810/',
                                    },
                                },
                                {
                                    coordinates: [47.245350349632965, 56.134414208205776],
                                    text: '1к\n40 м²',
                                    userData: {
                                        url: 'https://a101.ru/kvartiry/360810/',
                                    },
                                },
                                {
                                    coordinates: [47.24542896512635, 56.13448965532694],
                                    text: '3к\n90 м²',
                                    userData: {
                                        url: 'https://a101.ru/kvartiry/360810/',
                                    },
                                },
                                {
                                    coordinates: [47.24510451854659, 56.134541185948585],
                                    text: '3к\n77.2 м²',
                                    userData: {
                                        url: 'https://a101.ru/kvartiry/360810/',
                                    },
                                },
                            ],
                        },
                    ],
                },
            ],
        }

  5. По умолчанию подложка подписи имеет белый цвет. Чтобы её кастомизировать, укажите в поле группы image пользовательские настройки. Изображение подложки подписи должно быть в формате .svg:

            {
            modelId: 'zgktechnology1_47751f926b1e34b8d54a7f190ad32229e244db18',
            coordinates: [47.2452901373195, 56.13477598609533],
            modelUrl: 'zgktechnology1.glb',
            ...
            floors: [
                ...,
                {
                    id: '456def',
                    text: '11',
                    modelUrl: 'zgktechnology1_floor11.glb',
                    ...,
                    labelGroups: [
                        {
                            id: '123abc',
                            image: {
                                url: 'data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjRweCIgaGVpZ2h0PSIyNHB4IiB2aWV3Qm94PSIwIDAgMjQgMjQiIHZlcnNpb249IjEuMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayI+PGcgaWQ9IlBhZ2UtMSIgc3Ryb2tlPSJub25lIiBzdHJva2Utd2lkdGg9IjEiIGZpbGw9Im5vbmUiIGZpbGwtcnVsZT0iZXZlbm9kZCI+PGcgaWQ9ImV4aXQiIGZpbGw9IiM2MDVFNTAiIGZpbGwtcnVsZT0ibm9uemVybyI+PHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjI0IiBoZWlnaHQ9IjI0IiByeD0iNSI+PC9yZWN0PjwvZz48L2c+PC9zdmc+',
                                size: [38, 38],
                                stretchX: [[4, 24]],
                                stretchY: [[4, 24]],
                                padding: [5, 10, 5, 10],
                            },
                            minZoom: 18,
                            elevation: 35,
                            interactive: true,
                            labels: [...],
                        },
                    ],
                },
            ],
        }

    Укажите параметры:

    • url — URL изображения в формате data-URL.
    • size – размер изображения.
    • stretchX и stretchY — области растяжения.
    • padding — отступы от краёв для текста внутри подписи.

  6. Чтобы показать на этаже несколько групп подписей (например, если необходимо разделить проданные помещения от тех, что в продаже), добавьте вторую группу в массив labelGroups и перенесите в неё часть подписей из первой группы или задайте новые:

            {
            modelId: 'zgktechnology1_47751f926b1e34b8d54a7f190ad32229e244db18',
            coordinates: [47.2452901373195, 56.13477598609533],
            modelUrl: 'zgktechnology1.glb',
            ...
            floors: [
                ...,
                {
                    id: '456def',
                    text: '11',
                    modelUrl: 'zgktechnology1_floor11.glb',
                    ...,
                    labelGroups: [
                        {
                            id: '123abc',
                            image: {
                                url: 'data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjRweCIgaGVpZ2h0PSIyNHB4IiB2aWV3Qm94PSIwIDAgMjQgMjQiIHZlcnNpb249IjEuMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayI+PGcgaWQ9IlBhZ2UtMSIgc3Ryb2tlPSJub25lIiBzdHJva2Utd2lkdGg9IjEiIGZpbGw9Im5vbmUiIGZpbGwtcnVsZT0iZXZlbm9kZCI+PGcgaWQ9ImV4aXQiIGZpbGw9IiM2MDVFNTAiIGZpbGwtcnVsZT0ibm9uemVybyI+PHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjI0IiBoZWlnaHQ9IjI0IiByeD0iNSI+PC9yZWN0PjwvZz48L2c+PC9zdmc+',
                                size: [38, 38],
                                stretchX: [[4, 24]],
                                stretchY: [[4, 24]],
                                padding: [5, 10, 5, 10],
                            },
                            minZoom: 18,
                            elevation: 35,
                            interactive: true,
                            labels: [
                                {
                                    coordinates: [47.245048150280994, 56.134470449142164],
                                    text: '3к\n78.4 м²',
                                    userData: {
                                        url: 'https://a101.ru/kvartiry/360810/',
                                    },
                                },
                                {
                                    coordinates: [47.24520807647288, 56.13443854463778],
                                    text: '2к\n67 м²',
                                    userData: {
                                        url: 'https://a101.ru/kvartiry/360810/',
                                    },
                                },
                            ],
                        },
                        {
                            id: '456def',
                            image: 'default',
                            minZoom: 18,
                            elevation: 35,
                            interactive: true,
                            labels: [
                                {
                                    coordinates: [47.245350349632965, 56.134414208205776],
                                    text: '1к\n40 м²',
                                    userData: {
                                        url: 'https://a101.ru/kvartiry/360810/',
                                    },
                                },
                                {
                                    coordinates: [47.24542896512635, 56.13448965532694],
                                    text: '3к\n90 м²',
                                    userData: {
                                        url: 'https://a101.ru/kvartiry/360810/',
                                    },
                                },
                                {
                                    coordinates: [47.24510451854659, 56.134541185948585],
                                    text: '3к\n77.2 м²',
                                    userData: {
                                        url: 'https://a101.ru/kvartiry/360810/',
                                    },
                                },
                            ],
                        },
                    ],
                },
            ],
        }

Пример конфигурационного файла с опциональными настройками:

mapgl-gltf-config.json 
[
    {
        modelId: 'zgktechnology1_47751f926b1e34b8d54a7f190ad32229e244db18',
        coordinates: [47.2452901373195, 56.13477598609533],
        modelUrl: 'zgktechnology1.glb',
        interactive: true,
        rotateX: 0,
        rotateY: 0,
        rotateZ: -14.6,
        scale: 1,
        linkedIds: ['70030076555823021'],
        popupOptions: {
            coordinates: [47.24498128610925, 56.13451011334241],
            title: 'Корпус 1. 11 этажей',
            description: 'Срок сдачи: IV кв. 2024 г. <br />15 мин. пешком до ст. м. Московская',
        },
        mapOptions: {
            center: [47.24547737708662, 56.134591508663135],
            pitch: 40,
            zoom: 19,
            rotation: -41.4,
        },
        floors: [
            {
                id: '123abc',
                text: '1-10',
                modelUrl: 'zgktechnology1_floor2.glb',
                isUnderground: true,
                mapOptions: {
                    center: [47.24524342863023, 56.13449524271827],
                    pitch: 40,
                    zoom: 20,
                    rotation: -57.5,
                },
            },
            {
                id: '456def',
                text: '11',
                modelUrl: 'zgktechnology1_floor11.glb',
                mapOptions: {
                    center: [47.24556663327373, 56.13456998211929],
                    pitch: 40,
                    zoom: 19.5,
                    rotation: -62.6,
                },
                labelGroups: [
                    {
                        id: '123abc',
                        image: {
                            url: 'data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjRweCIgaGVpZ2h0PSIyNHB4IiB2aWV3Qm94PSIwIDAgMjQgMjQiIHZlcnNpb249IjEuMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayI+PGcgaWQ9IlBhZ2UtMSIgc3Ryb2tlPSJub25lIiBzdHJva2Utd2lkdGg9IjEiIGZpbGw9Im5vbmUiIGZpbGwtcnVsZT0iZXZlbm9kZCI+PGcgaWQ9ImV4aXQiIGZpbGw9IiM2MDVFNTAiIGZpbGwtcnVsZT0ibm9uemVybyI+PHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjI0IiBoZWlnaHQ9IjI0IiByeD0iNSI+PC9yZWN0PjwvZz48L2c+PC9zdmc+',
                            size: [38, 38],
                            stretchX: [[4, 24]],
                            stretchY: [[4, 24]],
                            padding: [5, 10, 5, 10],
                        },
                        minZoom: 18,
                        elevation: 35,
                        interactive: true,
                        labels: [
                            {
                                coordinates: [47.245048150280994, 56.134470449142164],
                                text: '3к\n78.4 м²',
                                userData: {
                                    url: 'https://a101.ru/kvartiry/360810/',
                                },
                            },
                            {
                                coordinates: [47.24520807647288, 56.13443854463778],
                                text: '2к\n67 м²',
                                userData: {
                                    url: 'https://a101.ru/kvartiry/360810/',
                                },
                            },
                        ],
                    },
                    {
                        id: '456def',
                        image: 'default',
                        minZoom: 18,
                        elevation: 35,
                        interactive: true,
                        labels: [
                            {
                                coordinates: [47.245350349632965, 56.134414208205776],
                                text: '1к\n40 м²',
                                userData: {
                                    url: 'https://a101.ru/kvartiry/360810/',
                                },
                            },
                            {
                                coordinates: [47.24542896512635, 56.13448965532694],
                                text: '3к\n90 м²',
                                userData: {
                                    url: 'https://a101.ru/kvartiry/360810/',
                                },
                            },
                            {
                                coordinates: [47.24510451854659, 56.134541185948585],
                                text: '3к\n77.2 м²',
                                userData: {
                                    url: 'https://a101.ru/kvartiry/360810/',
                                },
                            },
                        ],
                    },
                ],
            },
        ],
    },
    {
        modelId: 'zgktechnology2_9543522e9e5935374df317c931022f23803cc5ef',
        coordinates: [47.24528548642873, 56.13477629396983],
        modelUrl: 'zgktechnology2.glb',
        interactive: true,
        rotateX: 0,
        rotateY: 0,
        rotateZ: -13.91,
        scale: 1,
        linkedIds: ['70030076555821177'],
        popupOptions: {
            coordinates: [47.24448882381944, 56.13468481517748],
            title: 'Корпус 2. 16 этажей',
            description: 'Срок сдачи: IV кв. 2024 г. <br /> 15 мин. пешком до ст. м. Московская',
        },
        mapOptions: {
            center: [47.245008950283065, 56.1344698491912],
            pitch: 45,
            zoom: 18.7,
            rotation: -129,
        },
        floors: [
            {
                id: 'qwerty',
                text: '2-15',
                modelUrl: 'zgktechnology2_floor2.glb',
                mapOptions: {
                    center: [47.24463456947374, 56.134675042798094],
                    pitch: 35,
                    zoom: 20,
                    rotation: -130,
                },
            },
            {
                id: '123456',
                text: '16',
                modelUrl: 'zgktechnology2_floor16.glb',
                mapOptions: {
                    center: [47.24498428988907, 56.134514900849325],
                    pitch: 35,
                    zoom: 19.2,
                    rotation: -130,
                },
            },
        ],
    },
    {
        modelId: 'zgktechnology_construction_2a6fef6a371fb7643e26b9d8f999806804e14dcf',
        coordinates: [47.24528460953851, 56.134769314919964],
        modelUrl: 'zgktechnology_construction.glb',
        interactive: false,
        rotateX: 0,
        rotateY: 0,
        rotateZ: -14.379999999999997,
        scale: 1,
        linkedIds: ['70030076561388553'],
        floors: [],
    },
];

Пример интерактивной сцены с опциональными настройками:

<!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="Basic realty scene config example of glTF plugin" />
    <style>
        html,
        body,
        #container {
            margin: 0;
            width: 100%;
            height: 100%;
            overflow: hidden;
        }
    </style>
</head>

<body>
    <script src="https://mapgl.2gis.com/api/js/v1"></script>
    <script src="https://unpkg.com/@2gis/mapgl-gltf@^2/dist/bundle.js"></script>

    <div id="container"></div>
    <script>
        const map = new mapgl.Map('container', {
            center: [47.245286302641034, 56.134743473834099],
            zoom: 17.9,
            key: 'Your API access key',
            pitch: 45,
            rotation: 330,
            enableTrackResize: true,
        });

        const plugin = new mapgl.GltfPlugin(map, {
            modelsLoadStrategy: 'waitAll',
            modelsBaseUrl: 'https://disk.2gis.com/digital-twin/models_s3/realty_ads/zgktechnology/',
            labelGroupDefaults: {
                fontSize: 14,
            },
            hoverOptions: {
                color: '#FFF3F3',
            },
        });

        plugin.addRealtyScene([
            {
                modelId: 'zgktechnology1_47751f926b1e34b8d54a7f190ad32229e244db18',
                coordinates: [47.2452901373195, 56.13477598609533],
                modelUrl: 'zgktechnology1.glb',
                interactive: true,
                rotateX: 0,
                rotateY: 0,
                rotateZ: -14.6,
                scale: 1,
                linkedIds: ['70030076555823021'],
                popupOptions: {
                    coordinates: [47.24498128610925, 56.13451011334241],
                    title: 'Корпус 1. 11 этажей',
                    description: 'Срок сдачи: IV кв. 2024 г. <br />15 мин. пешком до ст. м. Московская',
                },
                mapOptions: {
                    center: [47.24547737708662, 56.134591508663135],
                    pitch: 40,
                    zoom: 19,
                    rotation: -41.4,
                },
                floors: [
                    {
                        id: '123abc',
                        text: '1-10',
                        modelUrl: 'zgktechnology1_floor2.glb',
                        isUnderground: true,
                        mapOptions: {
                            center: [47.24524342863023, 56.13449524271827],
                            pitch: 40,
                            zoom: 20,
                            rotation: -57.5,
                        },
                    },
                    {
                        id: '456def',
                        text: '11',
                        modelUrl: 'zgktechnology1_floor11.glb',
                        mapOptions: {
                            center: [47.24556663327373, 56.13456998211929],
                            pitch: 40,
                            zoom: 19.5,
                            rotation: -62.6,
                        },
                        labelGroups: [
                            {
                                id: '123abc',
                                image: {
                                    url: 'data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjRweCIgaGVpZ2h0PSIyNHB4IiB2aWV3Qm94PSIwIDAgMjQgMjQiIHZlcnNpb249IjEuMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayI+PGcgaWQ9IlBhZ2UtMSIgc3Ryb2tlPSJub25lIiBzdHJva2Utd2lkdGg9IjEiIGZpbGw9Im5vbmUiIGZpbGwtcnVsZT0iZXZlbm9kZCI+PGcgaWQ9ImV4aXQiIGZpbGw9IiM2MDVFNTAiIGZpbGwtcnVsZT0ibm9uemVybyI+PHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjI0IiBoZWlnaHQ9IjI0IiByeD0iNSI+PC9yZWN0PjwvZz48L2c+PC9zdmc+',
                                    size: [38, 38],
                                    stretchX: [[4, 24]],
                                    stretchY: [[4, 24]],
                                    padding: [5, 10, 5, 10],
                                },
                                minZoom: 19,
                                elevation: 35,
                                interactive: true,
                                labels: [
                                    {
                                        coordinates: [47.245048150280994, 56.134470449142164],
                                        text: '3к\n78.4 м²',
                                        userData: {
                                            url: 'https://a101.ru/kvartiry/360810/',
                                        },
                                    },
                                    {
                                        coordinates: [47.24520807647288, 56.13443854463778],
                                        text: '2к\n67 м²',
                                        userData: {
                                            url: 'https://a101.ru/kvartiry/360810/',
                                        },
                                    },
                                ],
                            },
                            {
                                id: '456def',
                                image: 'default',
                                minZoom: 19,
                                elevation: 35,
                                interactive: true,
                                labels: [
                                    {
                                        coordinates: [47.245350349632965, 56.134414208205776],
                                        text: '1к\n40 м²',
                                        userData: {
                                            url: 'https://a101.ru/kvartiry/360810/',
                                        },
                                    },
                                    {
                                        coordinates: [47.24542896512635, 56.13448965532694],
                                        text: '3к\n90 м²',
                                        userData: {
                                            url: 'https://a101.ru/kvartiry/360810/',
                                        },
                                    },
                                    {
                                        coordinates: [47.24510451854659, 56.134541185948585],
                                        text: '3к\n77.2 м²',
                                        userData: {
                                            url: 'https://a101.ru/kvartiry/360810/',
                                        },
                                    },
                                ],
                            },
                        ],
                    },
                ],
            },
            {
                modelId: 'zgktechnology2_9543522e9e5935374df317c931022f23803cc5ef',
                coordinates: [47.24528548642873, 56.13477629396983],
                modelUrl: 'zgktechnology2.glb',
                interactive: true,
                rotateX: 0,
                rotateY: 0,
                rotateZ: -13.91,
                scale: 1,
                linkedIds: ['70030076555821177'],
                popupOptions: {
                    coordinates: [47.24448882381944, 56.13468481517748],
                    title: 'Корпус 2. 16 этажей',
                    description: 'Срок сдачи: IV кв. 2024 г. <br /> 15 мин. пешком до ст. м. Московская',
                },
                mapOptions: {
                    center: [47.245008950283065, 56.1344698491912],
                    pitch: 45,
                    zoom: 18.7,
                    rotation: -129,
                },
                floors: [
                    {
                        id: 'qwerty',
                        text: '2-15',
                        modelUrl: 'zgktechnology2_floor2.glb',
                        mapOptions: {
                            center: [47.24463456947374, 56.134675042798094],
                            pitch: 35,
                            zoom: 20,
                            rotation: -130,
                        },
                    },
                    {
                        id: '123456',
                        text: '16',
                        modelUrl: 'zgktechnology2_floor16.glb',
                        mapOptions: {
                            center: [47.24498428988907, 56.134514900849325],
                            pitch: 35,
                            zoom: 19.2,
                            rotation: -130,
                        },
                    },
                ]
            },
            {
                modelId: 'zgktechnology_construction_2a6fef6a371fb7643e26b9d8f999806804e14dcf',
                coordinates: [47.24528460953851, 56.134769314919964],
                modelUrl: 'zgktechnology_construction.glb',
                interactive: false,
                rotateX: 0,
                rotateY: 0,
                rotateZ: -14.379999999999997,
                scale: 1,
                linkedIds: ['70030076561388553'],
                floors: [],
            },
        ]);
    </script>
</body>

</html>