3D Area Explorer to rozwiązanie, które umożliwia odkrywanie społeczności w fascynującym 3D. Wykorzystuje ono: fotorealistyczne kafelki 3D Google, wyszukiwanie miejsc, informacje o miejscu, i interfejsy Autocomplete API.
Pierwsze kroki:
Włącz
Dostosowywanie działania usługi
Rozwiązanie 3D Area Explorer można w dużym stopniu dostosować, co pozwala dopasować je do ścieżek klientów. Możesz dostosować je za pomocą panelu sterowania w interfejsie lub pliku config.json.
Chcesz dostosować? 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 podróżą, wybierając typ orbity kamery: klasyczną ścieżkę kołową lub intrygującą sinusoidę.
Stała orbita:
Jest to orbita kołowa na stałej wysokości wokół określonego ciekawego miejsca.
Zobacz stałą orbitę w działaniu, odkrywając biuro Google w Sydney.
Dynamiczna orbita:
Kamera płynnie porusza się po trajektorii sinusoidalnej wokół wyznaczonego ciekawego miejsca. Ten unikalny ruch umożliwia widzom obserwowanie ciekawego miejsca z różnych wysokości i pod różnymi kątami, co zapewnia dynamiczne i wciągające wrażenia wizualne.
Zobacz dynamiczną orbitę w działaniu, odkrywając Wieżę Eiffla.
Ważne miejsca:
- Dostosuj eksplorację, określając typy miejsc, które chcesz odkryć. Wybierz muzea, parki, szkoły i inne miejsca za pomocą tablicy
typesw plikuconfig.json. - Ustaw maksymalną liczbę wyświetlanych ważnych miejsc, dostosowując parametr
density. - Zmień parametr
searchRadius (in meters), aby uwzględnić pobliskie ukryte perełki lub skupić się na określonych obszarach. - Ustaw wybraną prędkość ruchu kamery za pomocą parametru
speed (in revolutions per minute).
Wstępne wczytywanie eksploracji: szczegółowe informacje o dostosowywaniu adresu URL
3D Area Explorer umożliwia wstępne zdefiniowanie eksploracji za pomocą dostosowywania adresu URL. Eliminuje to konieczność ręcznej konfiguracji, co usprawnia obsługę.
Tworzenie idealnego adresu URL:
Po prostu dołącz określone parametry do adresu URL Area Explorer, 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 określone współrzędne geograficzne, co natychmiast 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: lista typów ważnych miejsc rozdzielona przecinkami do wyświetlenia.poi.density: wybrana maksymalna liczba ważnych miejsc.poi.searchRadius: promień wyszukiwania pobliskich ważnych miejsc.camera.speed: prędkość orbity kamery.camera.orbitType: typ orbity kamery („fixed-orbit” lub „dynamic-orbit”).
Zalety dostosowywania adresu URL:
- Usprawnij obsługę, wstępnie definiując wybrane ustawienia.
- Udostępniaj ukierunkowane podróże z określonymi wstępnie wczytanymi lokalizacjami i ważnymi miejscami.
- Bezproblemowo umieszczaj wstępnie skonfigurowane eksploracje Area Explorer w witrynach.
Dzięki dostosowywaniu adresu URL możesz tworzyć spersonalizowane eksploracje i zapraszać innych do udziału w przygotowanych przygodach.
Dalsze dostosowywanie
W poprzedniej sekcji omówiliśmy dostosowania dostępne w interfejsie lub pliku konfiguracyjnym. Istnieje jednak też kilka innych wbudowanych parametrów, które możesz zmodyfikować, aby jeszcze bardziej dostosować aplikację.
Aby wprowadzić te zaawansowane dostosowania, musisz zapoznać się z kodem w pliku src/utils/cesium.js znajdującym się w katalogu src. Możesz zmienić te zmienne, aby zmienić wygląd i działanie aplikacji.
Wysokość kamery
Określ, jak wysoko ma się znajdować kamera podczas lotu do punktu, dostosowując wartość CAMERA_HEIGHT. Wyższe wartości zapewnią bardziej oddalony widok panoramiczny, a niższe – zbliżą Cię do szczegółów 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 lotu do punktu.
- Przykładowe wartości:
- 50: widok z bliska, z naciskiem na szczegóły.
- 200: bardziej panoramiczna perspektywa.
Pochylenie kamery
Początkowe pochylenie kamery jest określone przez parametr BASE_PITCH. Użyj wartości ujemnych, aby pochylić kamerę w dół, a wartości dodatnich, aby uzyskać widok z góry. Aby dodać subtelny dynamiczny ruch do eksploracji, zmień parametr 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_PITCHiAUTO_ORBIT_PITCH_AMPLITUDE - Wartości domyślne:
BASE_PITCH: -30 (pochylenie o 30 stopni w dół)AUTO_ORBIT_PITCH_AMPLITUDE: 10 (zmiana pochylenia o 10 stopni w czasie)
Opis: pochylenie kamery to wizualne pochylenie mapy, które jest mierzone w stopniach. Jest ono też nazywane nachyleniem. Te ustawienia określają początkowe pochylenie kamery i dynamiczne dostosowanie pochylenia podczas automatycznych obrotów.
Przykładowe wartości:
BASE_PITCH: 0 (pozioma kamera)AUTO_ORBIT_PITCH_AMPLITUDE: 0 (brak zmian pochylenia)
Zasięg i powiększenie kamery
Te parametry określają stopień powiększenia stosowany podczas ustawiania ostrości 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 zmiana odległości)ZOOM_FACTOR: 20 (współczynnik powiększenia kamery)
Opis: te ustawienia określają zmianę zasięgu podczas ruchu kamery i poziom powiększenia, aby uzyskać bliższy widok.
Przykładowe wartości:
RANGE_AMPLITUDE_RELATIVE: 1 (pełna zmiana zasięgu)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 kamery
Gdy użytkownik chce zresetować kamerę do pierwotnej pozycji, używane są wartości CAMERA_OFFSET. To ustawienie obejmuje kierunek (obrót), pochylenie (nachylenie) i zasięg (odległość kamery od środka).
- Ustawienie:
CAMERA_OFFSET - Wartości domyślne:
heading: 0 (brak przesunięcia obrotu)pitch: Cesium.Math.toRadians(-30) (pochylenie o 30 stopni w dół)range: 800 (800 metrów od środka)
- Opis: określa kierunek, pochylenie i zasięg kamery na potrzeby resetowania widoku.
- Przykładowe wartości:
heading: 45 (stopni, widok na północny zachód)range: 1500 metrów (dalej od środka)
Współrzędne początkowe:
Parametr START_COORDINATES określa początkową długość i szerokość geograficzną oraz wysokość kamery. To miejsce, w którym rozpocznie się eksploracja, więc ustaw je 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: 0latitude: 60height: 15000000 (15 000 km nad powierzchnią)
Przykładowe wartości:
longitude: -122.4934,latitude: 37.7951 (Golden Gate Bridge)height: 2000 (bliższa pozycja początkowa)
Wczytywanie wstępnie zdefiniowanej lokalizacji
Obiekt location w pliku config.json ustawia środek obszaru. Jest to
początkowy punkt widzenia kamery w przeglądarce Cesium.coordinates Określa
szerokość geograficzną (lat) i długość geograficzną (lng) lokalizacji, do której kamera ma się
najpierw przesunąć. Dostosuj te wartości, aby ustawić kamerę w dowolnej lokalizacji na świecie.
{
"location": {
"coordinates": { "lat": null, "lng": null }
},
Ta konfiguracja umożliwia uruchomienie aplikacji 3D Place Navigator z powiększeniem określonej lokalizacji. Aby uzyskać współrzędne geograficzne adresu lub nazwy miejsca, możesz użyć narzędzia do geokodowania Google, określając je w obiekcie lokalizacji:
- Otwórz narzędzie do Geokodowania.
- Utwórz prośbę o geokodowanie Kliknij sekcję „Wypróbuj” 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ć prośbę. Narzędzie zwróci odpowiedź zawierającą różne informacje o lokalizacji, w tym jej szerokość i długość geograficzną wyświetlane w sekcji
geometry.location. - Użyj geokodów Skopiuj pobrane wartości szerokości i długości geograficznej z odpowiedzi i wklej je do obiektu
coordinatesw konfiguracji.
Ta konfiguracja użyje narzędzia do geokodowania, aby automatycznie określić współrzędne siedziby Google w Mountain View w Kalifornii, i uruchomi aplikację 3D Place Navigator z kamerą wyśrodkowaną w tej lokalizacji.
Zaawansowane dostosowywanie
Możesz wprowadzić dodatkowe dostosowania, zagłębiając się w kod. W tej sekcji znajdziesz kilka opcji.
Dodawanie nowej ścieżki kamery
Rozwiązanie domyślnie implementuje 2 różne ścieżki 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ć tego nowego obliczania ścieżki w panelu konfiguracji,zapoznaj się z
implementacją w demo/src/camera-settings.js.
Dodawanie większej liczby typów miejsc
Listę typów miejsc na potrzeby konfiguracji można dostosować w pliku demo/src/place-settings.js. Od wiersza 4 znajdują się typy miejsc dostępne w wersji demonstracyjnej.
Jeśli chcesz używać określonych typów miejsc bez zmiany źródła wersji demonstracyjnej, możesz po prostu dodać je do pliku config.json w sekcji poi.types.
Dostosowywanie stylu (CSS)
W przypadku stylów używaliśmy zmiennych CSS. Są one obsługiwane przez wszystkie główne przeglądarki i umożliwiają zmianę jednej linii w centralnym miejscu oraz aktualizowanie określonych właściwości CSS. Nasze zmienne CSS są zdefiniowane w pliku src/main.css.. Tam
można dostosować kolory, ustawienia czcionek oraz dopełnienia lub 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ą Cesium, aby dowiedzieć się, jak dodać do globu dane GeoJSON lub inne dane z odniesieniem geograficznym.
Usuwanie sekcji konfiguracji
Nasza aplikacja JavaScript ma 3 główne sekcje w pliku konfiguracji: demo/src/[config-panel.js](config-panel.js): location, poi i camera. Każda z tych sekcji zawiera opcje konfiguracji różnych aspektów aplikacji. Deweloperzy mogą dostosować te sekcje do swoich potrzeb.
1. Usuń konkretną sekcję z konfiguracji.
- Sekcja lokalizacji
Aby usunąć sekcję location, znajdź w kodzie ten wiersz i dodaj do niego komentarz lub usuń go:
const locationConfig = { ...config.location, ...customConfig.location };
- Sekcja ważnych miejsc
Aby usunąć sekcję poi, znajdź w kodzie ten wiersz i dodaj do niego komentarz lub usuń go:
const poiConfig = { ...config.poi, ...customConfig.poi };
- Sekcja kamery
Aby usunąć sekcję camera, znajdź w kodzie ten wiersz i dodaj do niego komentarz lub usuń go:
const cameraConfig = { ...config.camera, ...customConfig.camera };
2. Aktualizowanie połączonych konfiguracji
Po usunięciu sekcji musisz zaktualizować połączony obiekt konfiguracji. Ten obiekt łączy konfigurację domyślną z dowolnymi 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. Dostosowywanie elementów 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ę, np. prędkość kamery, musisz zaktualizować zarówno kod JavaScript, jak i HTML.
4. Usuwanie sekcji ustawień kamery
Aby usunąć sekcję ustawień kamery z interfejsu, znajdź ten wiersz i dodaj do niego komentarz lub usuń go:
const cameraSettingsSecgetCameraSettingsSection(cameraConfig);
Podsumowanie usuwania sekcji lokalizacji
const locationSection = await getLocationSettingsSection(locationConfig);
Podsumowanie
W tym dokumencie omówiliśmy różne opcje dostosowywania dostępne w Area Explorer, które pozwalają dostosować eksplorację 3D. Dzięki modyfikowaniu zachowania kamery, dostosowywaniu pochylenia wizualnego i zmianie poziomów powiększenia możesz tworzyć unikalne i angażujące eksploracje, które prezentują wybrane ustawienia i ważne miejsca.
Pamiętaj, aby eksperymentować z różnymi konfiguracjami i dostosowywać parametry do swoich potrzeb. Dzięki możliwościom dostosowywania możesz tworzyć wciągające i spersonalizowane podróże, które przyciągają uwagę odbiorców i pozwalają zrealizować Twoją wizję.