Настройка интерактивной сцены для glTF-плагина версии 2
Вы можете настроить интерактивную сцену недвижимости для glTF-плагина версии 2 с помощью инструмента для позиционирования моделей на карте. В инструменте вы можете разместить и спозиционировать модели на карте, а файл с предварительной конфигурацией интерактивной сцены сформируется автоматически.
Чтобы настроить интерактивную сцену:
Также вы можете указать опциональные настройки сцены: интерактивность, попап и другие.
1. Разместите модели на карте
-
Убедитесь, что модели соответствуют требованиям.
-
Откройте область карты в месте, в которое вы будете добавлять модели:
-
Нажмите Добавить модель и выберите модель из списка файлов:
Примечание
Если на карту необходимо добавить одну модель в нескольких экземплярах (например, при типовой застройке), добавьте модель из одного и того же файла нужное количество раз.
-
Нажмите на добавленную модель. Модель будет выделена зелёным цветом, откроется панель с её настройками позиционирования:
-
Чтобы скрыть объект на карте, который пересекается с моделью, нажмите на него или добавьте ID здания в поле ID зданий:
-
Спозиционируйте добавленную модель на карте:
- Укажите точные координаты модели в блоке Координаты в полях Долгота и Широта. Также вы можете переместить модель вручную: используйте клавиши стрелок на клавиатуре или зажмите и перетащите модель с помощью мыши.
- Укажите значения поворота модели для каждой оси в блоке Поворот в полях X, Y, Z. Также вы можете вращать модель вокруг оси Z: зажмите клавишу
R, дождитесь пока курсор изменится на значок
, зажмите и вращайте модель с помощью мыши. - Укажите значение масштаба модели в блоке Масштаб в поле X, Y, Z. Также вы можете изменить масштаб модели вручную: зажмите клавишу
S, дождитесь пока курсор изменится на значок
, зажмите модель с помощью мыши и перемещайте её по направлению от модели (для увеличения) или к центру (для уменьшения).
-
Если на сцене необходимо разместить несколько моделей, добавьте их и повторите пункты выше для каждой добавленной модели:
Если необходимо удалить модель со сцены, нажмите значок
рядом с именем модели и подтвердите удаление. -
Чтобы посмотреть итоговую сцену, снимите выделение с последней редактируемой модели. Для этого закройте панель параметров модели или нажмите клавишу
Esc. Проверьте отображение модели, вращая и масштабируя карту:
-
Нажмите Получить конфиг сцены и скачайте конфигурационный файл
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. Настройте поэтажные планы
-
Откройте скачанный конфигурационный файл
mapgl-gltf-config.json. -
Заполните массив
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.
-
Чтобы отобразить подземный этаж, добавьте свойство
isUndergroundсо значениемtrue:{ ... floors: [{ id: '123abc', text: '1-10', modelUrl: 'zgktechnology1_floor2.glb', isUnderground: true, }], } -
Добавьте другие этажи к зданию:
{ ... floors: [ { id: '123abc', text: '1-10', modelUrl: 'zgktechnology1_floor2.glb', isUnderground: true, }, { id: '456def', text: '11', modelUrl: 'zgktechnology1_floor11.glb', }, ], } -
При необходимости добавьте этажи к другим зданиям и повторите пункты выше для каждого здания.
Пример конфигурационного файла с настройкой этажных планов:
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. Добавьте интерактивную сцену на карту
-
Добавьте на карту интерактивную сцену недвижимости с данными из конфигурационного файла с помощью метода
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 с параметрами карты.
-
Чтобы получить параметры карты, откройте Инструменты разработчика браузера (клавиша
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, }, }, ], }, -
Повторите пункты выше для каждого здания.
Пример файла:
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: [], }, ];
Подписи на этажах
Вы можете разместить подписи на этажном плане, например с информацией о помещениях. Для этого настройте группы подписей для каждого этажа и укажите координаты и высоту подписей.
-
Чтобы получить координаты, откройте Инструменты разработчика браузера (клавиша
F12) и выполните в консоли код:map.on('click', ({ lngLat }) => { console.log(lngLat); }); plugin.on('click', ({ lngLat }) => { console.log(lngLat); });Теперь при клике на карту или любую модель в консоли будут выводится координаты клика.
-
Чтобы сделать активным этаж, на котором вы хотите добавить подписи, нажмите на здание и выберите этаж. Например, для первого здания и этажа с именем
11определите места, в которых будут размещены подписи, и нажимайте на них, чтобы получить координаты.
Важно
При клике в карту или здание возвращаются координаты плоской карты, поэтому при размещении подписей для высоких этажей будут возникать искажения перспективной проекции (т.к. при просмотре сверху объект кажется больше).
-
Чтобы добавить подписи в опции этажа, заполните массив групп в опции
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 м²', }, ], }, ], }, ], } -
Чтобы при нажатии на подпись можно было перейти по ссылке на другой сайт, добавьте в поле подписи
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/', }, }, ], }, ], }, ], } -
По умолчанию подложка подписи имеет белый цвет. Чтобы её кастомизировать, укажите в поле группы
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— отступы от краёв для текста внутри подписи.
-
Чтобы показать на этаже несколько групп подписей (например, если необходимо разделить проданные помещения от тех, что в продаже), добавьте вторую группу в массив
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>