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

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

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

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

Рекомендации по повышению эффективности

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

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

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

Загрузка API. Используйте асинхронную динамическую загрузку 3D-карт для загрузки Maps JavaScript API при начальной загрузке страницы.
Библиотеки. Загружайте библиотеки программно, когда это необходимо, например google.maps.importLibrary("maps3d"). Если вы используете веб-компоненты, например <gmp-map-3d>, непосредственно на HTML-странице с прямой загрузкой скрипта, библиотеки будут загружаться автоматически в нужное время.
Управление объектами базовой карты. Используйте собственный идентификатор карты, чтобы фильтровать объекты инфраструктуры на базовой карте (в режиме 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-модели

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

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