1. Прежде чем начать
Эта лаборатория призвана помочь вам понять, как создать свою первую 3D-карту с использованием фотореалистичных 3D-карт в Maps JavaScript. Вы узнаете основы загрузки правильных компонентов Maps Javascript API, отображения вашей первой 3D-карты и рисования на ней объектов.
Что вы построите.
В этой лаборатории кода вы создадите 3D-веб-приложение, которое выполняет следующие действия:
- Динамически загружает Maps JavaScript API.
- Отображает 3D-карту с центром в Си-Эн Тауэр в Торонто.
- Отображает границу вокруг местоположения.
- Отключает точки интереса на 3D-карте.
- Вытягивает границу, чтобы покрыть местоположение.
Что вы узнаете
- Начало работы с платформой Google Maps.
- Динамическая загрузка Maps JavaScript API из кода JavaScript с помощью динамического импорта библиотеки.
- Загрузите 3D-карту, используя класс Map3DElement.
- Использование полигонов и выдавливания для рисования на карте.
2. Предварительные условия
Для завершения этой лаборатории кода вам необходимо ознакомиться с представленными здесь элементами. Если вы уже знакомы с работой с платформой Google Maps, переходите к Codelab!
Необходимые продукты платформы Google Карт
В этой лаборатории кода вы будете использовать следующие продукты платформы Google Maps:
- API JavaScript Карт
Да, это все, что вам нужно, чтобы добавить 3D-карты на свою страницу, ничего больше, очень просто!
Другие требования для этой Codelab
Для выполнения этой лаборатории кода вам потребуются следующие учетные записи, службы и инструменты:
- Аккаунт Google Cloud с включенной оплатой
- Ключ API платформы Google Карт с включенным API JavaScript Карт.
- Базовые знания JavaScript, HTML и CSS.
- Текстовый редактор или IDE по вашему выбору, чтобы сохранить отредактированный файл для просмотра.
- Веб-браузер для просмотра файла во время работы.
3. Настройте
Настройте платформу Google Карт
Если у вас еще нет учетной записи Google Cloud Platform и проекта с включенной оплатой, ознакомьтесь с руководством по началу работы с платформой Google Maps, чтобы создать платежную учетную запись и проект.
- В Cloud Console щелкните раскрывающееся меню проекта и выберите проект, который вы хотите использовать для этой лаборатории кода.
- Включите API и SDK платформы Google Maps, необходимые для этой лаборатории кода, в Google Cloud Marketplace . Для этого выполните действия, описанные в этом видео или этой документации .
- Создайте ключ API на странице «Учетные данные» Cloud Console. Вы можете выполнить действия, описанные в этом видео или в этой документации . Для всех запросов к платформе Google Maps требуется ключ API.
4. Загрузите API JavaScript Карт.
После того, как вы выполнили все шаги, описанные в разделе «Настройка», все готово для того, чтобы приступить к созданию своей первой 3D-карты.
Создайте самую простую веб-страницу, какую только можете себе представить.
Сначала мы создадим очень простую веб-страницу для размещения всего нашего кода. Вы можете сделать это в любом редакторе или платформе по вашему выбору.
<!DOCTYPE html>
<html>
<head>
<title>3D Maps Codelab</title>
<style>
html,
body {
height: 100%;
margin: 0;
padding: 0;
}
</style>
</head>
<body>
</body>
</html>
Добавьте код и сохраните файл в доступном месте, используя имя, например 3dmap.html, затем откройте его в веб-браузере, чтобы просмотреть текущее состояние страницы и проверить, есть ли у вас какие-либо ошибки.
Как и в случае с 2D-картами, основой 3D-карт является Maps Javascript API, поэтому сначала вам необходимо его загрузить.
Это можно сделать несколькими способами, которые вы можете найти в разделе документации «Загрузка Maps JavaScript API» .
В этой демонстрации мы собираемся использовать более современный метод динамического импорта библиотеки, поскольку он позволяет вам контролировать только те элементы, которые вам необходимо загрузить, экономя при этом размер загрузки и время запуска.
Добавьте динамический загрузчик
Чтобы использовать динамический загрузчик, обязательно добавьте следующий тег сценария на свою веб-страницу, добавив в соответствующее место свой собственный КЛЮЧ API (который вы получили на шаге 2). Поместите этот тег сценария между разделами тела основной веб-страницы.
<script async defer>
(g => { var h, a, k, p = "The Google Maps JavaScript API", c = "google", l = "importLibrary", q = "__ib__", m = document, b = window; b = b[c] || (b[c] = {}); var d = b.maps || (b.maps = {}), r = new Set, e = new URLSearchParams, u = () => h || (h = new Promise(async (f, n) => { await (a = m.createElement("script")); e.set("libraries", [...r] + ""); for (k in g) e.set(k.replace(/[A-Z]/g, t => "_" + t[0].toLowerCase()), g[k]); e.set("callback", c + ".maps." + q); a.src = `https://maps.${c}apis.com/maps/api/js?` + e; d[q] = f; a.onerror = () => h = n(Error(p + " could not load.")); a.nonce = m.querySelector("script[nonce]")?.nonce || ""; m.head.append(a) })); d[l] ? console.warn(p + " only loads once. Ignoring:", g) : d[l] = (f, ...n) => r.add(f) && u().then(() => d[l](f, ...n)) })({
key: "YOUR_API_KEY",
v: "alpha",
});
</script>
Обратите внимание, что на этом этапе выпуска продукта мы используем альфа-ветвь API для получения доступа к 3D-картам. Он содержит большинство экспериментальных функций продуктов и позволяет тестировать код раннего доступа по мере его разработки, чтобы вы могли быть готовы использовать его во время выпуска.
Теперь у вас должна быть базовая веб-страница, содержащая динамический загрузчик (если вы откроете страницу, представление будет пустым, но не должно содержать ошибок). Теперь мы готовы добавить 3D-карту.
Если по какой-то причине ваш код не работает, вы можете перейти к шагу 6 и сравнить его с конечным результатом, чтобы увидеть, что не так.
Чтобы узнать, почему страница может не работать, посмотрите консоль ошибок в вашем браузере, чтобы выяснить причину. На странице ошибок приведены инструкции о том, как это сделать для разных браузеров, а также объясняются различные сообщения об ошибках и приводятся некоторые распространенные причины, по которым API может не работать. Это хороший ресурс, который можно использовать на протяжении всей разработки, чтобы выяснить, что может быть не так в той или иной реализации.
5. Отображение карты
Итак, теперь мы готовы добавить на страницу нашу первую 3D-карту!
3D-карты создаются с использованием класса google.maps.maps3d.Map3DElement, который позволяет нам создавать экземпляры 3D-карт и работать с ними. В этой лаборатории кода мы будем работать с объектом 3D-карты напрямую, а не через тег HTML.
Создайте функцию Init и загрузите библиотеку.
Сначала мы создадим функцию, которая загружает элемент на страницу. Посмотрите на код: сначала мы создаем асинхронную функцию, которая позволяет нам убедиться, что весь элемент загружен, прежде чем переходить к остальной части кода. Затем мы запускаем функцию init при загрузке страницы.
Добавьте это после сценария загрузки в основной раздел страницы.
<script>
async function init() {
const { Map3DElement, MapMode } = await google.maps.importLibrary("maps3d");
}
init();
</script>
Обратите внимание, что мы используем выражение await , чтобы убедиться, что библиотека загружена, прежде чем продолжить.
Создайте элемент 3D-карты и укажите местоположение.
Далее нам нужно указать местоположение, которое мы хотим видеть на карте. Для 3D-карт существует ряд различных параметров, которые можно использовать для настройки вида. Они относятся к параметрам виртуальной камеры, которые описывают то, на что вы смотрите в сцене.
Давайте создадим вид на Си-Эн Тауэр, который выглядит примерно так.
Сначала нам нужно указать координаты, которые мы хотим посмотреть. Они состоят из двух разных точек зрения.
- Точка, которую мы хотим посмотреть, включая ее высоту.
- Расстояние и направление виртуальной камеры, смотрящей на точку.
Если вы посмотрите на следующее изображение, вы сможете получить представление о том, как работают эти настройки.
Центр элемента — это точка, на которую вы смотрите, диапазон — это расстояние, на котором вы находитесь от объекта, а наклон — это угол, под которым вы просматриваете изображение. Вы также можете установить заголовок и поворот объекта, если хотите ими управлять, но здесь мы это не используем.
Теперь мы создадим 3D-карту на странице, добавим следующий код на страницу в разделе инициализации после импорта библиотеки.
const map3DElement = new Map3DElement({
center: { lat: 43.6425, lng: -79.3871, altitude: 400 },
range: 1000,
tilt: 60,
mode: MapMode.HYBRID,
});
document.body.append(map3DElement);
Сначала мы создаем элемент и устанавливаем соответствующие параметры местоположения, затем добавляем компонент на страницу (мы могли бы назначить его существующему элементу div, если бы он присутствовал, если бы мы захотели).
Теперь ваш код должен выглядеть, как в этом примере:
<!DOCTYPE html>
<html>
<head>
<title>3D Maps Codelab</title>
<style>
html,
body {
height: 100%;
margin: 0;
padding: 0;
}
</style>
</head>
<body>
<script async defer>
(g => { var h, a, k, p = "The Google Maps JavaScript API", c = "google", l = "importLibrary", q = "__ib__", m = document, b = window; b = b[c] || (b[c] = {}); var d = b.maps || (b.maps = {}), r = new Set, e = new URLSearchParams, u = () => h || (h = new Promise(async (f, n) => { await (a = m.createElement("script")); e.set("libraries", [...r] + ""); for (k in g) e.set(k.replace(/[A-Z]/g, t => "_" + t[0].toLowerCase()), g[k]); e.set("callback", c + ".maps." + q); a.src = `https://maps.${c}apis.com/maps/api/js?` + e; d[q] = f; a.onerror = () => h = n(Error(p + " could not load.")); a.nonce = m.querySelector("script[nonce]")?.nonce || ""; m.head.append(a) })); d[l] ? console.warn(p + " only loads once. Ignoring:", g) : d[l] = (f, ...n) => r.add(f) && u().then(() => d[l](f, ...n)) })({
key: "YOUR_API_KEY",
v: "alpha",
});
</script>
<script>
async function init() {
const { Map3DElement, MapMode } = await google.maps.importLibrary("maps3d");
const map3DElement = new Map3DElement({
center: { lat: 43.6425, lng: -79.3871, altitude: 400 },
range: 1000,
tilt: 60,
mode: MapMode.HYBRID
});
document.body.append(map3DElement);
}
init();
</script>
</body>
</html>
Теперь мы можем сохранить файл и открыть страницу в браузере, чтобы увидеть, как она работает. Мы должны увидеть камеру, смотрящую на башню, как показано на изображении. Поиграйтесь, прежде чем двигаться дальше и добавлять коробку над башней.
6. Добавьте и вытяните элементы
Итак, теперь, когда у нас есть 3D-карта, давайте и выделим объект для пользователей, который представляет интерес. В этом случае мы собираемся использовать многоугольник и функцию выдавливания, чтобы создать рамку вокруг башни CN, чтобы она выглядела примерно так, как показано на следующем изображении.
Скрыть беспорядок
Первое, что вы можете заметить, это то, что мы отключили точки интереса. На этой карте мы хотим, чтобы в центре внимания была сама башня, поэтому нам нужно избавиться от других визуальных элементов.
Для этого нам нужно добавить изменение кода, чтобы скрыть метки. Обновите строку режима карты на СПУТНИК, чтобы скрыть точки.
mode: MapMode.SATELLITE,
Установка этого свойства отключает метки на карте, включая не только точки интереса, но также дороги и границы, и создает «чистый» вид местоположения.
Добавьте и стилизуйте многоугольник
Следующим шагом будет добавление многоугольника на страницу. Это можно сделать в два этапа. Сначала нам нужно загрузить функции, содержащие необходимую информацию, а затем указать детали стиля многоугольника, такие как его цвет или то, отображается ли он за другими объектами.
Сначала мы добавляем на страницу необходимые классы, используя следующую строку кода.
const { Polygon3DElement, AltitudeMode } = await google.maps.importLibrary("maps3d");
При этом на страницу загружаются классы Polygon3DElement и AltitudeMode , которые необходимы для добавления многоугольного объекта в представление.
Полигон может иметь ряд различных настроек, которые могут управлять видом: от ширины обводки, цвета (по имени или шестнадцатеричному значению) и непрозрачности границы и настроек заливки до управления тем, будет ли он отображаться за другими объектами или зданиями, например: рисование перекрытых сегментов. Более подробную информацию вы можете найти в документации к классу Polygon3DElement .
Другая функция, которую нам нужно установить, — это то, чтобы многоугольник рисовался вытянутым. Это значит нарисовать многоугольник на заданной высоте, а затем продлить его до земли. Это придает многоугольнику высоту, подобную прямоугольнику (который вы можете видеть на изображении выше). Это также требует, чтобы мы установили режим высоты для многоугольника, поэтому нам нужно было загрузить константы AltitudeMode выше. Чтобы выдавить многоугольник, необходимо установить значение ABSOLUTE или RELATIVE_TO_GROUND , чтобы получить правильное положение на основе высот вершин многоугольника.
Код создает буквальный объект, содержащий эти свойства, которые затем можно использовать для создания объекта Polygon3DElement , как показано:
const polygonOptions = {
strokeColor: "#EA433580",
strokeWidth: 4,
fillColor: "#0000FF80",
altitudeMode: "ABSOLUTE",
extruded: true,
drawsOccludedSegments: true,
}
const towerPolygon = new google.maps.maps3d.Polygon3DElement(polygonOptions);
Теперь мы создали объект-полигон и нам также необходимо установить его географические координаты. Многоугольники могут иметь как внутренние, так и внешние координаты в зависимости от того, как они представляются: внутренние координаты задают форму вырезов внутри многоугольника, а внешние координаты определяют внешнюю границу многоугольника. Поскольку это многоугольник, а не линия, координаты должны начинаться и заканчиваться в одной и той же точке, чтобы придать законченную форму.
Вы можете указать координаты, используя массив объектов или литералов LatLng или LatLngAltitude, и мы можем видеть это для нашего базового многоугольника.
towerPolygon.outerCoordinates = [
{ lat: 43.6427196, lng: -79.3876802, altitude: 600 },
{ lat: 43.6421742, lng: -79.3869184, altitude: 600 },
{ lat: 43.643001, lng: -79.3866475, altitude: 600 },
{ lat: 43.6427196, lng: -79.3876802, altitude: 600 }
];
Теперь мы настроили стиль и координаты многоугольника и готовы добавить его на страницу. Полигоны являются дочерними элементами элемента карты, и их необходимо добавить к существующему объекту карты на странице. Добавьте на страницу следующий код.
map3DElement.append(towerPolygon);
Как только мы это получим, у нас должна быть следующая полная реализация, как показано здесь (за исключением того, что у нее будет собственный ключ API). Мы готовы запустить страницу и увидеть результат.
<!DOCTYPE html>
<html>
<head>
<title>3D Maps Codelab</title>
<style>
html,
body {
height: 100%;
margin: 0;
padding: 0;
}
</style>
</head>
<body>
<script async defer>
(g => { var h, a, k, p = "The Google Maps JavaScript API", c = "google", l = "importLibrary", q = "__ib__", m = document, b = window; b = b[c] || (b[c] = {}); var d = b.maps || (b.maps = {}), r = new Set, e = new URLSearchParams, u = () => h || (h = new Promise(async (f, n) => { await (a = m.createElement("script")); e.set("libraries", [...r] + ""); for (k in g) e.set(k.replace(/[A-Z]/g, t => "_" + t[0].toLowerCase()), g[k]); e.set("callback", c + ".maps." + q); a.src = `https://maps.${c}apis.com/maps/api/js?` + e; d[q] = f; a.onerror = () => h = n(Error(p + " could not load.")); a.nonce = m.querySelector("script[nonce]")?.nonce || ""; m.head.append(a) })); d[l] ? console.warn(p + " only loads once. Ignoring:", g) : d[l] = (f, ...n) => r.add(f) && u().then(() => d[l](f, ...n)) })({
key: "YOUR_API_KEY",
v: "alpha",
});
</script>
<script>
async function init() {
const { Map3DElement, MapMode } = await google.maps.importLibrary("maps3d");
const map3DElement = new Map3DElement({
center: { lat: 43.6425, lng: -79.3871, altitude: 400 },
range: 1000,
tilt: 60,
mode: MapMode.SATELLITE,
});
const { Polygon3DElement, AltitudeMode } = await google.maps.importLibrary("maps3d");
const polygonOptions = {
strokeColor: "#EA433580",
strokeWidth: 4,
fillColor: "#0000FF80",
fillOpacity: 0.2,
altitudeMode: "ABSOLUTE",
extruded: true,
drawsOccludedSegments: true,
}
const towerPolygon = new google.maps.maps3d.Polygon3DElement(polygonOptions);
towerPolygon.outerCoordinates = [
{ lat: 43.6427196, lng: -79.3876802, altitude: 600 },
{ lat: 43.6421742, lng: -79.3869184, altitude: 600 },
{ lat: 43.643001, lng: -79.3866475, altitude: 600 },
{ lat: 43.6427196, lng: -79.3876802, altitude: 600 }
];
map3DElement.append(towerPolygon);
document.body.append(map3DElement);
}
init();
</script>
</body>
</html>
Если код верен, вы должны увидеть страницу со следующей 3D-картой и многоугольником.
Вы успешно создали свою первую 3D-карту с помощью платформы Google Maps, включая загрузку Maps JavaScript API, создание 3D-карты и добавление вытянутого многоугольника.
7. Что дальше?
В этой лаборатории кода вы рассмотрели основы того, что можно делать с помощью Maps JavaScript API. Затем попробуйте добавить на карту некоторые из этих объектов:
- Добавьте кнопку для включения и выключения точек интереса.
- Добавьте несколько линий , показывающих маршрут в разные места и обратно.
- Установите некоторые граничные ограничения , чтобы контролировать, куда пользователь может переместить представление.
- Ознакомьтесь с дополнительными библиотеками, доступными для Maps JavaScript API, которые позволяют использовать дополнительные сервисы, такие как «Места» или «Маршруты».
Чтобы продолжить изучение дополнительных способов работы с платформой Google Maps и 3D в Интернете, перейдите по этим ссылкам:
- Исследование фотореалистичных 3D-карт в документации Maps JavaScript
- Черпайте вдохновение из демо-версии 3D Maps
- Проведите еще одну лабораторную работу по разработке кода платформы Google Maps.
- Ознакомьтесь с проектами платформы Google Maps с открытым исходным кодом на GitHub.
- Прочтите блог платформы Google Карт.