Чтобы переводить контент на ваш предпочитаемый язык, Google использует технологии на основе искусственного интеллекта. Переводы от ИИ могут содержать ошибки.

Рекомендации по работе с 3D-картами

В этом руководстве подробно рассматриваются веб-компоненты 3D Maps и особенности их интеграции с вашим приложением.

Пример использования для поиска мест и маршрутов. — Пример поиска мест и маршрутов.

О чем важно помнить

Чтобы обеспечить плавную и быструю работу интерактивных и визуальных элементов, воспользуйтесь следующими подходами.

Загрузка карты

Для оптимального удобства пользователей при начальной загрузке и настройке рендеринга 3D-карт сочетаются методы настройки браузера и рекомендации по пользовательскому интерфейсу.

Загрузка API. Используйте асинхронную динамическую загрузку 3D-карт, чтобы загружать Maps JavaScript API при начальной загрузке страницы.
Библиотеки. Загружайте библиотеки программно, когда это необходимо, например google.maps.importLibrary("maps3d"). Если вы используете веб-компоненты, например <gmp-map-3d>, непосредственно на HTML-странице с прямой загрузкой скрипта, библиотеки будут загружаться автоматически в нужное время.
Управление объектами базовой карты. Используйте собственный идентификатор mapId, чтобы фильтровать объекты инфраструктуры на базовой карте (режим HYBRID) и управлять их плотностью, особенно если в приложении есть собственный набор пользовательских элементов, таких как маркеры или ломаные линии. Это предотвращает визуальный беспорядок и потенциальное перекрытие. Вы также можете отключить такие элементы векторных фрагментов базовой карты, как объекты инфраструктуры, ломаные линии дорог, названия дорог и улиц (режим SATELLITE).
События. Прослушивайте события gmp-steadystate или gmp-error, чтобы создавать последующую логику, например загрузку маркеров или анимацию камеры.

Последовательность загрузки карты — Фоновый холст > Минимизированные фрагменты > Сетка рельефа > Сетка поверхности (например, здания) > Места и названия дорог, Параллельно загружаемые пользовательские элементы (маркеры, 3D-модели и т. д.)

Взаимодействие с пользователем. Прежде чем вносить изменения в контент карты, дождитесь события gmp-steadystate. Если пользователь начинает взаимодействовать с картой (панорамировать, масштабировать) до начального события gmp-steadystate, то событие активируется только после того, как пользователь прекратит взаимодействие. Не показывайте и не обновляйте оверлеи (например, маркеры или многоугольники), когда пользователь панорамирует или масштабирует карту. Для этого отслеживайте события gmp-centerchange, gmp-headingchange, gmp-rangechange, gmp-rollchange и gmp-tiltchange.
Используйте requestAnimationFrame() (rAF) для непрерывных обновлений и строго отделяйте интенсивные вычисления от вызовов отрисовки.
- Используйте rAF. Это позволяет синхронизировать обновления с частотой обновления экрана браузера, чтобы получить плавную анимацию с частотой 60 кадров/с и снизить энергопотребление.
- Не выполняйте ресурсоемкие задачи, не связанные с отрисовкой, во время последнего обновления.
- Разделяйте логику. Выполняйте всю интенсивную логику перед минимальными вызовами обновления веб-компонентов в цикле rAF.
Начальные настройки сцены. На скорость загрузки влияют <gmp-map-3d> настройки камеры, например наклон. Чем больше вы увеличиваете или наклоняете изображение, тем больше многоугольников отображается и загружается. Уровень детализации также зависит от местоположения (например, город с множеством зданий или сельская местность, где есть только природные объекты).
- Рекомендуем использовать изображения с меньшим увеличением (с большой высоты) и небольшим наклоном или без него.
- Добавьте на карту границы (пример), чтобы пользователи оставались в определенной области, а фрагменты могли полностью загрузиться.
Визуальный прелоадер. Хотя <gmp-map-3d> загружается очень быстро, на устройствах с низкой производительностью (слабым графическим процессором) или при низкой скорости подключения (медленный 4G) для отображения в полном разрешении может потребоваться некоторое время. В этом случае вы можете создать заставку с изображением, анимацией или текстом, которая будет показываться, пока загружается 3D-сцена. Ниже приведены ключевые события, которые можно использовать.

Пример предварительной загрузки — Пример предзагрузчика

// create the map in the background and wait for gmp-steadystate event
async function initMap() {
    await google.maps.importLibrary("maps3d");
    const map = document.querySelector('gmp-map-3d');
    const div = document.querySelector('div'); // preloader "
    map.addEventListener('gmp-steadystate', ({isSteady}) => {
        if (isSteady) {
            div.style.display = 'none';
        }
    });
}
initMap();

2D-карта:
- Вместо нее таким пользователям можно показывать альтернативную двухмерную карту (SATELLITE), на которой будут отображаться ваши геоданные, например маркеры.

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

Эффективность визуальных элементов и управление ими

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

Маркеры

Пример загрузки маркера — Пример: 150–300 мс для загрузки 300 маркеров с 41 разными глифами SVG (современный ноутбук: macOS M3 Pro, Chrome).

Оптимальный вариант персонализации
- PinElement. Для базовых изменений маркера (цвет, масштаб, граница, текстовый глиф) используйте элемент <gmp-pin> или класс PinElement. Это самый эффективный метод настройки.
- Используйте маркеры HTMLImageElement или SVGElement только в случае необходимости. Они позволяют добавлять прозрачность или вставлять изображение, например значок, в SVGElement (требуется кодирование base64). Они будут растрированы при загрузке, что приведет к снижению производительности. HTMLImageElement и SVGElement должны быть заключены в элемент <template>, прежде чем их можно будет назначить слоту по умолчанию Marker3DElement.
- Добавление простого HTML- или CSS-кода пока недоступно.
Управление поведением при наложении. Используйте свойство маркера collisionBehavior. Для важных маркеров, которые должны быть видны всегда, задайте соответствующее поведение. Менее важные маркеры можно скрыть, чтобы не загромождать карту, особенно при высоком уровне масштабирования.
Только критически важные объекты инфраструктуры. Используйте drawsWhenOccluded (или задайте свойство программно) только для маркеров, которые обязательно должны быть видны сквозь здания или рельеф (например, цель спасательной операции, подземный кабель или аватар пользователя).
Проверка перекрытия. Поскольку карта трехмерная, маркеры могут быть визуально скрыты (перекрыты) зданиями или рельефом. Протестируйте разные углы камеры и высоту маркеров, чтобы убедиться, что важные объекты инфраструктуры остаются видимыми, или реализуйте логику для корректировки видимости и высоты при перекрытии.
Используйте высоту. На 3D-картах маркеры должны использовать позицию со значением высоты. Для маркеров, связанных с рельефом или зданиями, используйте altitudeMode: 'RELATIVE_TO_GROUND', 'RELATIVE_TO_MESH' или аналогичные настройки, чтобы маркер правильно привязывался при наклоне или повороте карты.

Многоугольники и ломаные линии

Пример загрузки многоугольников — Пример: 100–150 мс для загрузки 1000 многоугольников (современный ноутбук: macOS M3 Pro, Chrome)

Упрощение геометрии. Перед рендерингом примените к данным о маршруте алгоритм упрощения. Это позволяет уменьшить количество вершин, сохраняя общую форму, и значительно повысить скорость отрисовки, особенно для сложных границ или маршрутов.
Прореживание по уровню масштабирования. Если у вас очень большой набор данных, загружайте геометрию с высокой детализацией, только когда пользователь увеличивает масштаб. При низком уровне масштабирования достаточно упрощенной версии ломаной линии или многоугольника.
Предварительный расчет для вытянутых многоугольников. Если многоугольники вытянуты (extruded: true), данные пути определяют трехмерный объем (сетку). Обработка сложных многоугольников с большим количеством вершин требует значительных вычислительных ресурсов. Убедитесь, что исходные данные для многоугольников максимально просты.
Проверьте производительность ломаных линий и многоугольников. Если вы добавляете много сложных ломаных линий или многоугольников, особенно с экструзией для 3D, убедитесь, что они не вызывают падения частоты кадров. При необходимости ограничьте количество вершин или используйте алгоритмы упрощения.
При обновлении фигуры изменяйте весь массив path за одну операцию, а не в цикле по отдельным элементам. Одна операция присваивания (например, polyline.path = newPathArray;) гораздо эффективнее, чем несколько итеративных обновлений.
По возможности избегайте вытянутых ломаных линий. Хотя для размещения ломаных линий в трехмерном пространстве можно использовать значение высоты, вытягивание ломаной линии (например, за счет ширины обводки и большого диапазона высот) может быть графически интенсивным. По возможности используйте 2D-ломаные линии на земле (RELATIVE_TO_GROUND) или минимальную ширину обводки, чтобы повысить производительность.
Используйте drawsOccludedSegments только для критически важных элементов маршрута. Фоновые или контекстные фигуры могут быть частично скрыты трехмерными объектами карты. Показ некритичной скрытой геометрии усложняет рендеринг.

3D-модели

Отрисовка 3D-моделей в формате GLB и интерактивные функции, такие как событие gmp-click, в элементе <gmp-map-3d> работают очень быстро.

Сжимайте файлы . Чтобы обеспечить быструю загрузку, особенно в мобильных сетях, размер сложных файлов моделей GLB не должен превышать 5 МБ (в идеале он должен быть меньше). Основной способ сделать это – применить сжатие Draco к данным сетки в файлах GLB. Это позволяет значительно уменьшить размер файла (часто более чем на 50%) с минимальной потерей качества.
Центрируйте начало координат. Убедитесь, что ПО для 3D-моделирования экспортирует модель с началом координат (точка 0, 0, 0) в центре основания модели. Это упрощает позиционирование и поворот на карте, обеспечивая правильную привязку модели к координатам широты и долготы.
Управление CORS. Если файлы модели размещены в другом домене или CDN, отличном от вашего веб-приложения, необходимо настроить сервер хостинга так, чтобы он включал необходимые заголовки совместного использования ресурсов из разных источников (CORS), например Access-Control-Allow-Origin: *. В противном случае карта не сможет загрузить модель.