Ta strona została przetłumaczona przez Cloud Translation API.

Eksplorator obszarów 3D: przewodnik dotyczący dostosowywania

Eksplorator obszaru 3D to rozwiązanie, które pozwala odkrywać społeczności w zachwycającym widoku 3D. Rozwiązanie to wykorzystuje: stworzone przez Google fotorealistyczne kafelki 3D, wyszukiwanie miejsc, szczegóły miejsc i interfejsy API autouzupełniania.

Pierwsze kroki:

Włącz

Dostosuj do swoich potrzeb

Rozwiązanie 3D Area Explorer można w dużym stopniu dostosować, co pozwala dostosować sposób korzystania z niego do ścieżki klienta. Możesz dostosować ustawienia w panelu sterowania w interfejsie lub za pomocą pliku config.json.

Gotowe do dostosowania? Aby to zrobić:

Lokalizacja

Określ punkt początkowy, dostosowując szerokość i długość geograficzną w pliku config.json.

Sterowanie kamerą

Przejmij kontrolę nad swoją podróżą, wybierając rodzaj orbity kamery: klasyczna okrągła ścieżka lub intrygująca fala sinusoidalna.

Stała orbita:

Jest to okrągła orbita o stałej wysokości i wokół konkretnego punktu orientacyjnego.

Zobacz, jak działa stała orbita, eksplorując biuro Google Sydney.
Dynamiczna orbita:

Kamera płynnie porusza się w trajektorii fali sinusoidalnej wokół wyznaczonego punktu. Dzięki temu widzowie mogą obserwować ciekawe miejsca z różnych wysokości i pod różnymi kątami, co zapewnia dynamiczne i wciągające doznania wizualne.

Zobacz, jak działa dynamiczna orbita, eksplorując wieżę Eiffla.

Ciekawe miejsca:

Dostosuj swoją eksplorację, wybierając typy miejsc, które chcesz odkryć. Za pomocą tablicy types w config.json możesz wybierać spośród muzeów, parków, szkół i innych miejsc.
Ustaw maksymalną liczbę wyświetlanych ciekawych miejsc, dostosowując parametr density.
Zmień searchRadius (in meters), by uwzględnić ukryte perełki lub skupić się na konkretnych obszarach.
Za pomocą parametru speed (in revolutions per minute) ustaw szybkość ruchu kamery.

Wstępne wczytywanie eksploracji: dostosowywanie adresów URL

Eksplorator obszarów 3D umożliwia wstępne zdefiniowanie eksploracji za pomocą dostosowywania adresów URL. Dzięki temu nie trzeba ręcznie konfigurować ustawień, a wygoda użytkowników jest prostsza.

Tworzenie idealnego adresu URL:

Wystarczy dołączyć do adresu URL Eksploratora obszarów określone parametry, aby wstępnie ustawić lokalizację i inne ustawienia. Na przykład:

https://{base-url}/#location.coordinates.lat=40.7424396&location.coordinates.lng=-74.0061439

Ten adres URL ustawia punkt początkowy na podanej szerokości i długości geograficznej i od razu przenosi Cię do wybranej lokalizacji. Dostępne parametry:

location.coordinates.lat: szerokość geograficzna wybranej lokalizacji.
location.coordinates.lng: długość geograficzna wybranej lokalizacji.
poi.types: rozdzielana przecinkami lista typów ciekawych miejsc do wyświetlenia.
poi.density: wybrana maksymalna liczba ciekawych miejsc.
poi.searchRadius: promień wyszukiwania ciekawych miejsc w pobliżu.
camera.speed: prędkość na orbicie kamery.
camera.orbitType: typ orbity kamery („stała orbita” lub „dynamiczna orbita”).

Zalety dostosowywania adresów URL:

Aby zwiększyć wygodę użytkowników, wstępnie zdefiniuj wybrane ustawienia.
Udostępniaj docelowe podróże z określonymi, wstępnie załadowanymi lokalizacjami i ważnymi miejscami.
Sprawnie umieszczaj w witrynach wstępnie skonfigurowane funkcje Area Explorera.

Dzięki możliwości dostosowywania adresów URL możesz tworzyć spersonalizowane wrażenia i zapraszać innych na przygody.

Uwaga: wypróbuj w pełni wczytany, niestandardowy adres URL: https://js-3d-area-explorer-demo-dev-t6a6o7lkja-uc.a.run.app/#camera.orbitType=fixed-orbit&camera.speed=2.2&poi.types=restaurant&poi.types=parking&poi.types=movie_theater&poi.types=bus_station&poi.density=40&poi.searchRadius=5100

Dalsze dostosowania

W poprzedniej sekcji omawialiśmy dostosowania dostępne za pomocą interfejsu użytkownika lub pliku konfiguracji. Istnieje jednak też kilka innych parametrów wbudowanych, które możesz zmodyfikować, aby jeszcze bardziej dostosować aplikację.

Aby wprowadzić te zaawansowane dostosowania, musisz zajrzeć do kodu w pliku src/utils/cesium.js znajdującym się w katalogu src. Te zmienne można zmienić, by zmienić wygląd i sposób działania aplikacji

Wysokość aparatu

Dostosowuj wartość CAMERA_HEIGHT, aby kontrolować pozycję kamery podczas lotu do określonego punktu. Im wyższe wartości, tym bardziej pomniejszony i panoramiczny widok, a niższe wartości pozwalają przybliżyć szczegóły obszaru.

// Camera height (in meters) above the target when flying to a point.
const CAMERA_HEIGHT = 100;

Ustawienie: CAMERA_HEIGHT
Wartość domyślna: 100
Opis: określa wysokość kamery nad lokalizacją docelową podczas przelotu do punktu.
Przykładowe wartości:
- 50: Bliższy widok, uwydatnianie szczegółów
- 200: Bardziej panoramiczny widok.

Nachylenie kamery

Początkowe przechylenie kamery jest określane przez funkcję BASE_PITCH. Użyj wartości ujemnych dla przechylenia w dół i wartości dodatnich dla widoku w górę. Aby dodać do eksploracji subtelny, dynamiczny ruch, zmień AUTO_ORBIT_PITCH_AMPLITUDE.

// Pitch 30 degrees downwards
const BASE_PITCH = -30;
// change the pitch by 10 degrees over time
const AUTO_ORBIT_PITCH_AMPLITUDE = 10;

Ustawienie: BASE_PITCH i AUTO_ORBIT_PITCH_AMPLITUDE
Wartości domyślne:
- BASE_PITCH: -30 (odchylenie o 30 stopni w dół)
- AUTO_ORBIT_PITCH_AMPLITUDE: 10 (zmienia ton w czasie o 10 stopni)

Opis: nachylenie kamery to wizualne nachylenie mapy, mierzone w stopniach. Jest to tzw. przechylenie. Te ustawienia określają początkowy ton i dynamiczną korektę dźwięku kamery podczas obrotów automatycznych.

Przykładowe wartości:

BASE_PITCH: 0 (poziom aparatu)
AUTO_ORBIT_PITCH_AMPLITUDE: 0 (brak odmiany)

Zasięg i zoom kamery

Te parametry określają stopień powiększenia stosowany przy koncentrowaniu się na określonych punktach. Mniejsze wartości oznaczają większe powiększenie.

// Distance variation relative to initial range.
const RANGE_AMPLITUDE_RELATIVE = 0.55;

// Determines how much the camera should zoom in or out
const ZOOM_FACTOR = 20;

Ustawienie: RANGE_AMPLITUDE_RELATIVE i ZOOM_FACTOR

Wartości domyślne:

RANGE_AMPLITUDE_RELATIVE: 0,55 (względna odległość)
ZOOM_FACTOR: 20 (współczynnik powiększenia w aparacie)

Opis: te ustawienia określają zmienność zakresu podczas ruchu kamery oraz poziom powiększenia, co pozwala uzyskać pełniejszy obraz.

Przykładowe wartości:

RANGE_AMPLITUDE_RELATIVE: 1 (odmiana w pełnym zakresie)
ZOOM_FACTOR: 10 (mniejsze powiększenie)

// Camera heading (rotation), pitch (tilt), and range (distance) for resetting view.
const CAMERA_OFFSET = {
  heading: 0, // No rotation offset.
  pitch: Cesium.Math.toRadians(BASE_PITCH),
  range: 800, // 800 meters from the center.
};

Resetowanie aparatu

Gdy użytkownik chce przywrócić kamerę do pierwotnej pozycji, używane są wartości CAMERA_OFFSET. Obejmuje ono kierunek (obrót), wysokość (pochylenie) i zasięg (odległość kamery od środka).

Ustawienie: CAMERA_OFFSET
Wartości domyślne:
- heading: 0 (bez przesunięcia obrotu)
- pitch: Cez.Math.toRadians(-30) (kąt 30 stopni w dół)
- range: 800 (800 metrów od centrum)
Opis: określa nagłówek, ton i zakres kamery, w których chcesz zresetować widok.
Przykładowe wartości:
- heading: 45 (stopnie, widok na północny zachód)
- range: 1500 metrów (dalej od centrum)

Współrzędne początkowe:

Elementy START_COORDINATES określają początkową długość, szerokość i wysokość kamery. W tym miejscu rozpocznie się eksploracja, dlatego ustaw ją na obszar, który użytkownicy mają zobaczyć jako pierwszy.

// Default camera start position in longitude, latitude, and altitude.
const START_COORDINATES = {
  longitude: 0,
  latitude: 60,
  height: 15000000, // 15,000 km above the surface
};

Ustawienie: START_COORDINATES
Wartości domyślne:
- longitude: 0
- latitude: 60
- height: 15000000 (15 000 km nad powierzchnią)
Przykładowe wartości:
- longitude: -122.4934, latitude: 37.7951 (most Golden Gate)
- height: 2000 (bliższa pozycja początkowa)

Wczytywanie wstępnie zdefiniowanej lokalizacji

Obiekt location w obiekcie config.json wyznacza środek obszaru. To początkowy punkt obserwacyjny kamery w przeglądarce Cez.coordinates: Określa szerokość (lat) i długość geograficzną (lng) lokalizacji, z której kamera ma korzystać w pierwszej kolejności. Dostosuj je, aby ustawić kamerę w dowolnym miejscu na kuli ziemskiej.

  {
  "location": {
    "coordinates": { "lat": null, "lng": null }
  },

Ta konfiguracja umożliwia uruchamianie aplikacji 3D Place Navigator w wybranym przez Ciebie miejscu. Możesz użyć narzędzia Google do geokodowania, by uzyskać szerokość i długość geograficzną adresu lub nazwy miejsca, określając ją w obiekcie lokalizacji:

Otwórz Geocoding Tool.
Utwórz żądanie geokodowania Kliknij sekcję „Wypróbuj samodzielnie” i wpisz wybraną lokalizację w polu „Adres”. Możesz podać adres, nazwę miejsca, a nawet punkty orientacyjne.
Wygeneruj współrzędne Kliknij przycisk „Uruchom”, aby przesłać żądanie. Narzędzie zwróci odpowiedź zawierającą różne informacje o lokalizacji, w tym współrzędne szerokości i długości geograficznej wyświetlane w sekcji geometry.location.
Użyj geokodów: Skopiuj wartości szerokości i długości geograficznej pobrane z odpowiedzi i wklej je do obiektu coordinates w ramach konfiguracji.

Uwaga: geokody muszą być zgodne z warunkami przedstawionymi w sekcji 3.4 Warunków korzystania z usługi Google Maps Platform. Geokody nie mogą być przechowywane w pamięci podręcznej dłużej niż 30 dni i muszą zostać odświeżone po tym czasie.

obraz

W tej konfiguracji użyto narzędzia Geocoding do automatycznego określenia współrzędnych siedziby głównej Google w Mountain View w Kalifornii (Kalifornia) i uruchomienia aplikacji 3D Place Navigator z kamerą wyśrodkowaną na tej lokalizacji.

Zaawansowane opcje dostosowywania

Możesz wprowadzić dodatkowe modyfikacje, analizując kod. W następnej sekcji omówiono kilka opcji

Dodaj nową ścieżkę kamery

Rozwiązanie udostępnia gotowe rozwiązanie 2 różnych ścieżek kamery:

fixed-orbit" | "dynamic-orbit"

Jeśli jednak chcesz utworzyć nową ścieżkę kamery, możesz ją zaimplementować za pomocą

/src/utils/cesium.js w funkcji calculateAutoOrbitFrame.

Aby użyć nowego obliczenia ścieżki w panelu konfiguracji,zapoznaj się z implementacją w demo/src/camera-settings.js.

Dodaj więcej typów miejsc

Listę typów miejsc w konfiguracji można dostosować w pliku demo/src/place-settings.js. Począwszy od wiersza 4, typy miejsc są dostępne w wersji demonstracyjnej.

Jeśli chcesz użyć określonych typów miejsc bez zmiany źródła wersji demonstracyjnej, możesz dodać je do pliku config.json w katalogu poi.types

Dostosuj styl (css)

Pracowaliśmy przy stylach ze zmiennymi CSS. Są obsługiwane przez wszystkie popularne przeglądarki i umożliwiają zmianę jednego wiersza w jednym miejscu oraz aktualizację określonych właściwości CSS. Nasze zmienne CSS są zdefiniowane w src/main.css.. Można w nim dostosować kolory, ustawienia czcionek oraz dopełnienia i marginesy dla całej aplikacji.

Nakładanie dodatkowych danych

Aby nałożyć dodatkowe dane, musisz zaktualizować plik src/utils/cesium.js i zapoznać się z dokumentacją cezową dotyczącą dodawania do kuli ziemskiej danych GeoJSON lub innych danych geograficznych.

Usuń sekcje konfiguracji

Nasza aplikacja JavaScript w pliku konfiguracji ma 3 główne sekcje: demo/src/[config-panel.js](config-panel.js): location, poi i camera. Każda z tych sekcji zawiera opcje konfiguracji do różnych aspektów aplikacji. Deweloperzy mogą dostosowywać te sekcje do swoich potrzeb.

1.Usuń określoną sekcję z konfiguracji

Sekcja lokalizacji

Aby usunąć sekcję location, znajdź w kodzie ten wiersz i komentarz lub go usuń:

const locationConfig = { ...config.location, ...customConfig.location };

Sekcja POI

Aby usunąć sekcję poi, znajdź w kodzie następujący wiersz i w komentarzu lub go usuń:

const poiConfig = { ...config.poi, ...customConfig.poi };

Sekcja aparatu

Aby usunąć sekcję camera, znajdź w kodzie następujący wiersz i w komentarzu lub go usuń:

const cameraConfig = { ...config.camera, ...customConfig.camera };

2. Zaktualizuj połączone konfiguracje

Po usunięciu sekcji musisz zaktualizować połączony obiekt konfiguracji. Ten obiekt scala konfigurację domyślną ze wszystkimi dostosowaniami. Usuń odpowiednią właściwość z obiektu combinedConfig:

const combinedConfig = {
 location: { ...config.location, ...customConfig.location }, // Remove if location section is removed

 poi: { ...config.poi, ...customConfig.poi }, // Remove if poi section is removed
 camera: { ...config.camera, ...customConfig.camera }, // Remove if camera section is removed
};

3. Dostosuj elementy interfejsu

Jeśli usunięcie sekcji oznacza też usunięcie powiązanych elementów interfejsu, odpowiednio zaktualizuj kod w kodzie HTML. Jeśli na przykład chcesz usunąć z panelu administracyjnego konkretną sekcję, taką jak Szybkość kamery, musisz zaktualizować odpowiednio zarówno kod js, jak i HTML.

4. Usuń sekcję ustawień aparatu

Aby usunąć z interfejsu sekcję ustawień aparatu, znajdź ten wiersz i dodaj do niego komentarz lub usuń go:

const cameraSettingsSecgetCameraSettingsSection(cameraConfig);

Usuwanie podsumowania sekcji lokalizacji

const locationSection = await getLocationSettingsSection(locationConfig);

Podsumowanie

W tym dokumencie przyjrzeliśmy się różnym opcjom dostosowywania dostępnym w Eksploratorze obszarów, które pozwalają dostosować eksplorację 3D. Modyfikując działanie kamery, dostosowując jej przechylenie i zmieniając poziomy powiększenia, możesz tworzyć niepowtarzalne i wciągające doświadczenia z wybranymi przez Ciebie ustawieniami i ciekawymi miejscami.

Pamiętaj, by poeksperymentować z różnymi konfiguracjami i dostosować parametry do swoich potrzeb. Korzystając z możliwości dostosowywania, możesz tworzyć wciągające, spersonalizowane ścieżki, które przyciągną uwagę odbiorców i urzeczywistnią Twoją wizję.