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
.
Przejmij kontrolę nad swoją podróżą, wybierając rodzaj orbity kamery: klasyczna okrągła ścieżka lub intrygująca fala sinusoidalna.
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.
Wystarczy dołączyć do adresu URL Eksploratora obszarów określone parametry, aby wstępnie ustawić lokalizację i inne ustawienia. Na przykład:
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:
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.
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.
Uwaga: ta metoda upraszcza proces znajdowania współrzędnych i zmniejsza konieczność ręcznej identyfikacji. Umożliwia łatwe poznawanie lokalizacji z użyciem jej adresu lub nazwy w Twojej konfiguracji.
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
Aby usunąć sekcję location
, znajdź w kodzie ten wiersz i komentarz lub go usuń:
const locationConfig = { ...config.location, ...customConfig.location };
Aby usunąć sekcję poi
, znajdź w kodzie następujący wiersz i w komentarzu lub go usuń:
const poiConfig = { ...config.poi, ...customConfig.poi };
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ę.