Эта страница переведена с помощью Cloud Translation API.

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

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

Example use case for place search and route finding. — Пример поиска места и построения маршрута.

Вопросы производительности

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

Загрузить карту

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

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

Map loading sequence — Фоновое полотно > Минимизированные тайлы > Сетка местности > Поверхностная сетка (например, здания) > Точки интереса и обозначения дорог, пользовательские элементы загружаются параллельно (маркеры, 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-сцена будет загружаться в фоновом режиме. См. ключевые события для использования ниже:

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

// 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();

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

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

Производительность и управление визуальными элементами

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

Маркеры

Marker loading example — Пример сценария: загрузка 300 маркеров с 41 различным SVG- значком занимает 150-300 мс (современный ноутбук: 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' или аналогичные, чтобы обеспечить правильную привязку маркера при наклоне или повороте карты.

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

Polygon loading example — Пример сценария: загрузка 1000 полигонов занимает 100-150 мс (современный ноутбук: macOS M3 Pro, Chrome).

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

3D-модели

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

3D model loading example — Пример сценария: отображение 1000 изображений движущейся по траектории трехмерной модели источника света (200 КБ) занимает около 2 секунд. (Современный ноутбук: macOS M3 Pro, Chrome)

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