1. Zanim zaczniesz
Ten warsztat pomoże Ci zrozumieć, jak utworzyć pierwszą mapę 3D, korzystając z fotorealistycznych map 3D w Mapach JavaScript. Poznasz podstawy wczytywania odpowiednich komponentów interfejsu Maps JavaScript API, wyświetlania pierwszej mapy 3D i rysowania na niej elementów.
Co utworzysz.
W tym ćwiczeniu z programowania utworzysz aplikację internetową 3D, która:
- Dynamicznie wczytuje interfejs Maps JavaScript API.
- Wyświetla mapę 3D wyśrodkowaną na wieży CN Tower w Toronto.
- Wyświetla granicę wokół lokalizacji.
- Wyłącza punkty zainteresowania na mapie 3D.
- Wydłuża granicę, aby objąć lokalizację.
Czego się nauczysz
- Pierwsze kroki z Google Maps Platform
- Dynamiczne wczytywanie interfejsu Maps JavaScript API z kodu JavaScript za pomocą importu dynamicznej biblioteki.
- Załaduj mapę 3D za pomocą klasy Map3DElement.
- Rysowanie na mapie za pomocą wielokątów i wypukłości.
2. Wymagania wstępne
Aby ukończyć to ćwiczenie, musisz zapoznać się z tymi informacjami. Jeśli znasz już platformę Google Maps Platform, przejdź do Codelab.
Wymagane usługi Google Maps Platform
W tym Codelab użyjesz tych usług Google Maps Platform:
- Maps JavaScript API
To wszystko, czego potrzebujesz, aby dodać do strony mapy 3D. Bardzo proste!
Inne wymagania dotyczące tego ćwiczenia z programowania
Aby ukończyć to ćwiczenie, potrzebujesz tych kont, usług i narzędzi:
- konto Google Cloud z włączonym rozliczaniem;
- Klucz interfejsu API Google Maps Platform z włączonym interfejsem Maps JavaScript API
- podstawy JavaScriptu, HTML-a i CSS-a;
- Edytor tekstu lub IDE, aby zapisać edytowany plik i go wyświetlić.
- przeglądarkę internetową do wyświetlania pliku podczas pracy;
3. Konfiguracja
Konfigurowanie Google Maps Platform
Jeśli nie masz jeszcze konta Google Cloud Platform ani projektu z włączonymi płatnościami, zapoznaj się z artykułem Pierwsze kroki z Google Maps Platform, aby utworzyć konto rozliczeniowe i projekt.
- W konsoli Google Cloud kliknij menu projektu i wybierz projekt, którego chcesz użyć w tym CodeLab.
- Włącz interfejsy API i pakiety SDK Google Maps Platform wymagane w tym laboratorium kodu na platformie Google Cloud Marketplace. Aby to zrobić, wykonaj czynności opisane w tym filmie lub w tej dokumentacji.
- Wygeneruj klucz interfejsu API na stronie Dane logowania w konsoli Cloud. Możesz wykonać czynności opisane w tym filmie lub w tej dokumentacji. Wszystkie żądania do Google Maps Platform wymagają klucza interfejsu API.
4. Wczytywanie interfejsu Maps JavaScript API
Po wykonaniu wszystkich czynności opisanych w sekcji Konfigurowanie możesz zacząć tworzyć pierwszą mapę 3D.
Utwórz najprostszą stronę internetową, jaką możesz sobie wyobrazić.
Najpierw utworzymy bardzo podstawową stronę internetową, która będzie hostować cały nasz kod. Możesz to zrobić w dowolnym edytorze lub na dowolnej platformie.
<!DOCTYPE html>
<html>
<head>
<title>3D Maps Codelab</title>
<style>
html,
body {
height: 100%;
margin: 0;
padding: 0;
}
</style>
</head>
<body>
</body>
</html>
Dodaj kod i zapisz plik w dostępnym miejscu, nadając mu nazwę, np. 3dmap.html. Następnie otwórz go w przeglądarce, aby sprawdzić bieżący stan strony i sprawdzić, czy nie ma na niej błędów.
Podobnie jak w przypadku map 2D, podstawą map 3D jest interfejs Maps JavaScript API, więc musisz go najpierw wczytać.
Można to zrobić na kilka sposobów, które znajdziesz w sekcji Wczytywanie interfejsu Maps JavaScript API w dokumentacji.
W tym pokazie użyjemy nowocześniejszej metody importowania dynamicznej biblioteki, ponieważ pozwala ona kontrolować tylko te elementy, które trzeba wczytać, co zmniejsza rozmiar pobierania i czas uruchamiania.
Dodawanie dynamicznego ładowarki
Aby używać dynamicznego ładowarki, dodaj do strony internetowej tag skryptu, umieszczając w odpowiednim miejscu swój klucz interfejsu API (który został wygenerowany w kroku 2). Umieść ten tag skryptu między sekcjami podstawowej strony internetowej.
<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>
Pamiętaj, że na tym etapie rozwoju usługi korzystamy z gałęzi alfa interfejsu API, aby uzyskać dostęp do map 3D. Zawiera ona najbardziej eksperymentalne funkcje produktów i pozwala testować kod dostępu w czasie jego tworzenia, aby można było go używać w momencie publikacji.
Powinna już być gotowa podstawowa strona internetowa zawierająca dynamiczny ładujący (jeśli otworzysz stronę, widok będzie pusty, ale nie powinno być żadnych błędów). Możesz teraz dodać mapę 3D.
Jeśli Twój kod z jakiegoś powodu nie działa, możesz przejść do kroku 6 i porównać kod z ostatecznym wynikiem, aby sprawdzić, co jest nie tak.
Aby dowiedzieć się, dlaczego strona może nie działać, sprawdź konsolę błędów w przeglądarce. Na stronie z błędem znajdziesz instrukcje dotyczące różnych przeglądarek, a także wyjaśnienia dotyczące różnych komunikatów o błędzie i najczęstszych przyczyn, dla których interfejs API może nie działać. To przydatne źródło informacji, które można wykorzystać podczas tworzenia, aby sprawdzić, co może być nie tak z implementacją.
5. Wyświetlanie mapy
Wszystko jest już gotowe do dodania do strony pierwszej mapy 3D.
Mapy 3D są tworzone za pomocą klasy google.maps.maps3d.Map3DElement, która umożliwia tworzenie i obsługę wystąpień map 3D. W tym laboratorium kodu będziemy pracować bezpośrednio z obiektem mapy 3D, a nie za pomocą znacznika HTML.
Tworzenie funkcji init i wczytywanie biblioteki
Najpierw utworzymy funkcję, która wczyta element na stronę. W kodzie najpierw tworzymy funkcję asynchroniczną, która pozwala nam upewnić się, że cały element jest załadowany, zanim przejdziemy do dalszej części kodu. Następnie podczas wczytywania strony uruchamiamy funkcję init.
Dodaj ten kod po skrypcie wczytywania w sekcji głównej strony.
<script>
async function init() {
const { Map3DElement, MapMode } = await google.maps.importLibrary("maps3d");
}
init();
</script>
Pamiętaj, że przed kontynuacją używamy wyrażenia await, aby mieć pewność, że biblioteka została załadowana.
Tworzenie elementu mapy 3D i określanie lokalizacji
Następnie musimy określić lokalizację, którą chcemy wyświetlić na mapie. W przypadku map 3D możesz użyć różnych parametrów do ustawiania widoku. Odnoszą się one do parametrów wirtualnej kamery, które opisują, na co patrzysz w scenie.
Stwórzmy widok wieży CN, który będzie wyglądał mniej więcej tak.
Najpierw musimy określić współrzędne, które nas interesują. Składają się one z 2 różnych widoków:
- Punkt, który chcemy zobaczyć, w tym jego wysokość.
- Odległość i kierunek wirtualnej kamery, która patrzy na punkt.
Na poniższym obrazku możesz zobaczyć, jak działają te ustawienia.
Środek elementu to punkt, na który patrzysz, a zakres to odległość, w jakiej znajdujesz się od obiektu. Kąt nachylenia to kąt, pod którym widzisz obraz. Możesz też ustawić kierunek i obrót obiektu, jeśli chcesz je kontrolować, ale nie używamy tego tutaj.
Teraz utwórz mapę 3D na stronie i po zaimportowaniu biblioteki dodaj ten kod do sekcji init.
const map3DElement = new Map3DElement({
center: { lat: 43.6425, lng: -79.3871, altitude: 400 },
range: 1000,
tilt: 60,
mode: MapMode.HYBRID,
});
document.body.append(map3DElement);
Najpierw tworzymy element i ustawiamy odpowiednie parametry lokalizacji, a potem dodajemy komponent na stronie (jeśli jest dostępny, możemy przypisać go do istniejącego elementu div).
Twój kod powinien wyglądać tak:
<!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>
Możesz teraz zapisać plik i otworzyć stronę w przeglądarce, aby sprawdzić, czy działa. Powinna być widoczna kamera skierowana w dół na wieżę, jak na obrazku. Zanim przejdziesz dalej, dodaj pole nad wieżą.
6. Dodawanie i wypukanie cech
Teraz, gdy mamy mapę 3D, możemy pokazać użytkownikom, że dany obiekt jest interesujący. W tym przypadku użyjemy wielokąta i funkcji wytłaczania, aby utworzyć pudełko wokół wieży CN, tak aby wyglądało jak na tym widoku.
Ukrywanie bałaganu
Pierwszą rzeczą, którą możesz zauważyć, jest wyłączenie punktów zainteresowania. Na tej mapie chcemy, aby na pierwszy plan wysuwał się sam wieżowiec, więc musimy pozbyć się innych elementów wizualnych.
Aby to zrobić, musimy zmienić kod, aby ukryć etykiety. Aby ukryć punkty, zmień tryb mapy na SATELITARNY.
mode: MapMode.SATELLITE,
Ustawienie tej właściwości powoduje wyłączenie etykiet na mapie, co dotyczy nie tylko punktów zainteresowania, ale także linii dróg i granic. W efekcie powstaje „czysty” widok lokalizacji.
Dodawanie wielokąta i nadawanie mu stylu
Kolejnym krokiem jest dodanie wielokąta do strony. Można to zrobić w 2 sposoby. Najpierw musimy wczytać funkcje zawierające wymagane informacje, a potem określić szczegóły stylizacji wielokąta, takie jak jego kolor czy to, czy ma być wyświetlany za innymi elementami.
Najpierw dodajemy wymagane klasy do strony za pomocą tego wiersza kodu.
const { Polygon3DElement, AltitudeMode } = await google.maps.importLibrary("maps3d");
Spowoduje to załadowanie na stronę klas Polygon3DElement i AltitudeMode, które są wymagane do dodania obiektu wielokąta do widoku.
Wielokąt może mieć wiele różnych ustawień, które mogą kontrolować widok, od szerokości obrysu, koloru (na podstawie nazwy lub wartości szesnastkowej) i przezroczystości ustawień krawędzi i wypełnienia, po kontrolowanie tego, czy jest on widoczny za innymi obiektami lub budynkami, np. rysowanie zasłoniętych segmentów. Więcej informacji znajdziesz w dokumentacji klasy Polygon3DElement.
Inną funkcją, którą musimy ustawić, jest sposób, w jaki wielokąt ma być wytłaczany. Oznacza to, że należy narysować wielokąt na ustawionej wysokości, a potem rozszerzyć go w dół do ziemi. Dzięki temu wielokąt ma wysokość jak prostokąt (co widać na powyższym obrazku). Wymaga to też ustawienia trybu wysokości w wielokącie, dlatego musieliśmy załadować stałe AltitudeMode. Aby wytłaczać wielokąt, musisz ustawić tę opcję na ABSOLUTE lub RELATIVE_TO_GROUND, aby uzyskać prawidłową pozycję na podstawie wysokości wierzchołków wielokąta.
Kod tworzy obiekt dosłowny, który zawiera te właściwości. Można ich użyć do utworzenia obiektu Polygon3DElement w ten sposób:
const polygonOptions = {
strokeColor: "#EA433580",
strokeWidth: 4,
fillColor: "#0000FF80",
altitudeMode: "ABSOLUTE",
extruded: true,
drawsOccludedSegments: true,
}
const towerPolygon = new google.maps.maps3d.Polygon3DElement(polygonOptions);
Utworzyliśmy obiekt wielokąta i musimy też ustawić jego współrzędne geograficzne. Wielokąty mogą mieć zarówno współrzędne wewnętrzne, jak i zewnętrzne, w zależności od tego, jak są reprezentowane. innerCoordinates mają postać wycięć w wielokącie, a outerCoordinates definiują jego zewnętrzną krawędź. Ponieważ jest to wielokąt, a nie linia, współrzędne muszą zaczynać się i kończyć w tym samym punkcie, aby utworzyć pełny kształt.
Możesz określić współrzędne za pomocą tablicy obiektów LatLng lub LatLngAltitude albo literałów. Możemy to zobaczyć w przypadku podstawowego wielokąta.
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 }
];
Teraz, gdy skonfigurowaliśmy styl i współrzędne wielokąta, możemy go dodać do strony. Poligony są elementami podrzędnymi Elementu mapy i muszą zostać dodane do istniejącego obiektu mapy na stronie. Dodaj na stronie ten kod.
map3DElement.append(towerPolygon);
Gdy to zrobisz, powinna zostać wdrożona implementacja, jak ta widoczna tutaj (z tym, że będzie mieć Twój własny klucz interfejsu API). Jesteśmy gotowi do uruchomienia strony i sprawdzenia wyniku.
<!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>
Jeśli kod jest poprawny, powinna się wyświetlić strona z mapą 3D i wielokątem.
Udało Ci się utworzyć pierwszą mapę 3D za pomocą Google Maps Platform, w tym załadować interfejs Maps JavaScript API, utworzyć mapę 3D i dodać wytłoczony wielokąt.
7. Co dalej?
W tym ćwiczeniu z programowania omówiliśmy podstawy interfejsu Maps JavaScript API. Następnie spróbuj dodać do mapy niektóre z tych elementów:
- Dodaj przycisk do włączania i wyłączania punktów zainteresowania.
- Dodaj linie, które pokazują trasę do i z różnych miejsc.
- Ustaw ograniczenia granic, aby kontrolować, gdzie użytkownik może przenosić widok.
- Zapoznaj się z dodatkowymi bibliotekami dostępnymi w interfejsie Maps JavaScript API, które umożliwiają korzystanie z dodatkowych usług, takich jak Miejsca czy Trasy.
Aby dowiedzieć się więcej o korzystaniu z Google Maps Platform i modeli 3D w internecie, zapoznaj się z tymi artykułami: