3D-карты в Maps JavaScript позволяют создавать реалистичные трехмерные карты. В нем есть инструменты для настройки стиля карты, улучшения специальных возможностей и удобства использования, что позволяет разрабатывать привлекательные и интерактивные приложения.
Ниже показаны примеры того, что можно делать с 3D-картами в Maps JavaScript API.
Зачем использовать 3D-карты в Maps JavaScript API
3D-карты в Maps JavaScript предоставляют класс Map3DElement (<gmp-map-3d>) в библиотеке maps3d, чтобы вы могли использовать трехмерные изображения Google в своих приложениях. 3D-карты предоставляют встроенный интерфейс обработки 3D-изображений, с помощью которого вы можете добавлять 3D-изображения реальных объектов, видов городов и туров по достопримечательностям или экспериментировать с ними.
Используйте 3D-карты <gmp-map-3d> (Map3DElement в библиотеке maps3d) для 3D-рельефа, наклона камеры, направления и диапазона облета, экструдированных 3D-зданий и 3D-объектов, таких как Marker3DElement (<gmp-marker-3d>). Для плоских 2D-карт дорог, стандартных 2D-маркеров AdvancedMarkerElement и 2D-векторных стилей используйте 2D-карты <gmp-map> (MapElement или google.maps.Map в библиотеке maps).
Что можно делать с 3D-картами в Maps JavaScript API?
- Создавайте реалистичные карты. Показывайте фотореалистичные трехмерные аэрофотоснимки городов, рельефа и достопримечательностей в режиме
SATELLITEилиHYBRID(в этом случае на спутниковые снимки накладываются ярлыки базовой карты) или показывайте стилизованную трехмерную базовую карту в режимеROADMAP, используя свойствоmode. Подробнее о том, как изменить режим карты… - Настройте стиль карты.
- Облачные стили 3D-карт. Управляйте видимостью и стилями объектов инфраструктуры и дорог на базовой карте. Подробнее о том, как настраивать 3D-карты…
- Собственные маркеры, всплывающие окна, ломаные линии и многоугольники. Вы можете отмечать местоположения и рисовать 3D-маршруты или границы на карте, используя
MarkerElement,Marker3DElement,Marker3DInteractiveElement,PopoverElement,Polyline3DElementиPolygon3DElement. Подробнее о маркерах, всплывающих окнах, фигурах и линиях… - 3D-модели и объекты glTF. Добавляйте собственные 3D-модели glTF с физически корректным рендерингом (PBR) для зданий, достопримечательностей или объектов с реальными координатами, используя
Model3DElement. Подробнее о моделях…
- Создавайте карты с эффектом присутствия
- Заданные траектории камеры. Направляйте пользователей по 3D-карте с помощью заданных траекторий камеры и орбитальных анимаций, используя
flyCameraToиflyCameraAround. Подробнее об анимации траекторий камеры… - Управление взаимодействием с пользователем. Настройте элементы управления и перемещение камеры, доступные пользователям. Дополнительную информацию можно найти в статьях Управление 3D-картой и ее просмотр, Ограничение области просмотра и границ камеры и Управление положением камеры.
- Заданные траектории камеры. Направляйте пользователей по 3D-карте с помощью заданных траекторий камеры и орбитальных анимаций, используя
Пример
Чтобы загрузить библиотеку maps3d и отобразить элемент <gmp-map-3d> с атрибутами mode="HYBRID", center (lat,lng,altitude), range, tilt и heading, используйте следующий фрагмент кода:
<gmp-map-3d
style="height: 400px; width: 100%;"
mode="HYBRID"
center="40.7484,-73.9857,200"
range="900"
tilt="67"
heading="35">
</gmp-map-3d>
<script async
src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&v=beta&libraries=maps3d">
</script>
Замените YOUR_API_KEY ключом API платформы Google Карт.
Как использовать 3D-карты в Maps JavaScript API
| 1 | Настройка | Начните с раздела Настройка JavaScript API и выполните все инструкции. |
| 2 | Как оплачивается Maps JavaScript API | Подробную информацию вы найдете в статье Статистика использования и оплата. |
| 3 | Как создать карту | Подробнее о том, как начать работу… |
Покрытие
Фотореалистичные 3D-модели зданий и достопримечательностей доступны в некоторых городах в поддерживаемых странах и регионах. В регионах, где нет покрытия 3D-сетки (например, в Индии), <gmp-map-3d> отображает двухмерные спутниковые снимки или изображения дорог, наложенные на трехмерный рельеф местности без выдавленных 3D-зданий. Чтобы показать достопримечательность в области, не покрытой 3D-сеткой, вы можете разместить по ее координатам пользовательскую 3D-модель glTF с помощью Model3DElement или использовать 2D-объект <gmp-map>. Чтобы узнать, в каких странах доступна эта функция, ознакомьтесь со статьей Доступность сервисов платформы Google Карт (столбец Maps JavaScript 3D).
Дальнейшие действия
- Ознакомьтесь с руководством по началу работы и создайте карту Hello World. 3D-карта.
- Попробуйте практическую работу, чтобы узнать, как добавлять объекты на карту.
- Узнайте больше о маркерах и анимации в следующей практической работе.
- Посмотрите нашу подборку примеров кода, чтобы найти то, что вам подходит.