Narzędzie 3D Area Explorer umożliwia odkrywanie społeczności w pociągającej grafice 3D. Rozwiązanie wykorzystuje: fotorealistyczne kafelki 3D Google, wyszukiwanie miejsc, szczegóły miejsca i interfejsy Autocomplete API.
Pierwsze kroki:
Włącz
Dostosowywanie
Rozwiązanie 3D Area Explorer można w dużej mierze dostosować do potrzeb, co pozwala dopasować je do ścieżek klientów. Możesz je dostosować za pomocą panelu sterowania w interfejsie lub pliku config.json.
Gotowy do personalizacji? Aby to zrobić:
Lokalizacja
Określ punkt początkowy, dostosowując współrzędne geograficzne w pliku config.json.
Sterowanie kamerą
Przejmij kontrolę nad swoją podróżą, wybierając typ orbity kamery: klasyczną ścieżkę okrągłą lub intrygującą sinusoidę.
Orbita stała:
Jest to okrągła orbita o stałej wysokości i określonym punkcie zainteresowania.
Aby zobaczyć stałą orbitę w działaniu, odwiedź biuro Google w Sydney.
Orbita dynamiczna:
Kamera płynnie porusza się po trajektorii w kształcie sinusoidy wokół wybranego miejsca. Dzięki temu widzowie mogą obserwować interesujący punkt z różnych wysokości i kątów, co zapewnia dynamiczne i wciągające wrażenia wizualne.
Aby zobaczyć, jak działa orbita dynamiczna, obejrzyj wieżę Eiffla.
Ważne miejsca:
- Dostosuj eksplorację, określając rodzaje miejsc, które chcesz odkryć. Wybierz muzea, parki, szkoły itp. za pomocą tablicy
typesw plikuconfig.json. - Ustaw maksymalną liczbę wyświetlanych ciekawych miejsc, dostosowując parametr
density. - Zmień ustawienie
searchRadius (in meters), aby uwzględnić ukryte perły w pobliżu lub skupić się na konkretnych obszarach. - Ustaw wybraną prędkość ruchu kamery za pomocą parametru
speed (in revolutions per minute).
Wczytywanie w tle Twojej eksploracji: zagłębiaj się w temat dzięki dostosowywaniu adresu URL
Narzędzie 3D Area Explorer umożliwia wstępną definicję eksploracji za pomocą adresu URL. Dzięki temu nie trzeba konfigurować ręcznie, co ułatwia korzystanie z usługi.
Tworzenie idealnego adresu URL:
Wystarczy dodać określone parametry do adresu URL Eksploratora obszaru, 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 współrzędne geograficzne podane w adresie URL, natychmiast przenosząc 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 oddzielonych przecinkami typów punktów POI do wyświetlenia.poi.density: wybrana maksymalna liczba punktów POI.poi.searchRadius: promień wyszukiwania pobliskich punktów POI.camera.speed: prędkość orbity kamery.camera.orbitType: typ orbity kamery („orbita stała” lub „orbita dynamiczna”).
Zalety dostosowywania adresu URL:
- Uprość korzystanie z urządzenia przez użytkowników, definiując wstępnie wybrane ustawienia.
- udostępniać docelową podróż z określonymi wstępnie załadownymi lokalizacjami i miejscami docelowymi;
- bezproblemowo umieszczać w witrynach wstępnie skonfigurowane funkcje Area Explorer;
Dzięki dostosowywaniu adresów URL możesz tworzyć niepowtarzalne wrażenia i zapraszać innych do udziału w wybranych przygodach.
Dalsze opcje personalizacji
W poprzedniej sekcji omówiliśmy zmiany dostępne w interfejsie lub pliku konfiguracyjnym. Jest też kilka innych wbudowanych parametrów, które możesz modyfikować, aby jeszcze bardziej dostosować aplikację do swoich potrzeb.
Aby wprowadzić te zaawansowane ustawienia, musisz sprawdzić kod w pliku src/utils/cesium.js w katalogu src. Aby zmienić wygląd i sposób działania aplikacji, możesz zmienić te zmienne:
Wysokość kamery
Aby kontrolować, jak wysoko kamera ma się znajdować podczas lotu w kierunku punktu, dostosuj wartość CAMERA_HEIGHT. Większe wartości zapewniają bardziej oddalony widok panoramiczny, a niższe – bardziej szczegółowy widok danego 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 celem podczas lotu do punktu.
- Przykładowe wartości:
- 50: widok z bliska, który podkreśla szczegóły.
- 200: widok bardziej panoramiczny.
Kąt pochylenia kamery
Początkowy przechylenie kamery jest zdefiniowane przez parametr BASE_PITCH. Użyj wartości ujemnych, aby uzyskać widok z poziomego ujęcia, oraz wartości dodatnich, aby uzyskać widok z góry. Aby dodać subtelny ruch dynamiczny do eksploracji, 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_PITCHiAUTO_ORBIT_PITCH_AMPLITUDE - Wartości domyślne:
BASE_PITCH: -30 (30 stopni nachylenia w dół)AUTO_ORBIT_PITCH_AMPLITUDE: 10 (zmienianie wysokości dźwięku o 10 stopni w czasie)
Opis: pochylenie kamery to wizualne pochylenie mapy, które jest mierzone w stopniach. Inna nazwa to „tilt”. Te ustawienia określają początkową wysokość kamery i dynamiczną korektę wysokości podczas automatycznych obrotów.
Przykładowe wartości:
BASE_PITCH: 0 (kamera pozioma)AUTO_ORBIT_PITCH_AMPLITUDE: 0 (brak zmiany wysokości dźwięku)
Zasięg i zoom kamery
Te parametry określają stopień przybliżenia stosowany podczas skupiania się na określonych punktach. Mniejsze wartości oznaczają większe przybliżenie.
// 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 zoomu aparatu)
Opis: te ustawienia określają zakres zmiany podczas ruchu kamery oraz poziom powiększenia, aby uzyskać bliższy widok.
Przykładowe wartości:
RANGE_AMPLITUDE_RELATIVE: 1 (wariant pełnego zakresu)ZOOM_FACTOR: 10 (mniejszy zoom)
// 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 zresetować kamerę do pierwotnej pozycji, używane są wartości CAMERA_OFFSET. Ustawienie to obejmuje kierunek (obrót), pochylenie (przechylenie) i zakres (odległość kamery od środka).
- Ustawienie:
CAMERA_OFFSET - Wartości domyślne:
heading: 0 (bez przesunięcia obrotowego)pitch: Cesium.Math.toRadians(-30) (pitching 30 degrees downwards)range: 800 (800 metrów od centrum)
- Opis: definiuje kierunek, pochylenie i zakres kamery do resetowania widoku.
- Przykładowe wartości:
heading: 45 (stopnie, widok na północny zachód)range: 1500 metrów (dalej od centrum)
Początkowe współrzędne:
START_COORDINATES określa początkową długość geograficzną, szerokość geograficzną i wysokość kamery. Tutaj rozpoczyna się eksploracja, więc ustaw 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 tys. km nad powierzchnią)
Przykładowe wartości:
longitude: -122.4934,latitude: 37.7951 (Golden Gate Bridge)height: 2000 (bliższa pozycja początkowa)
Wczytywanie zdefiniowanej wstępnie lokalizacji
Obiekt location w elementie config.json określa środek obszaru. Jest to początkowy punkt widzenia kamery w przeglądarce Cesium:coordinates Definiuje szerokość geograficzną (lat) i długość geograficzną (lng) lokalizacji, do której ma najpierw przesunąć się kamera. Dostosuj te wartości, aby ustawić kamerę w konkretnej lokalizacji na kuli ziemskiej.
{
"location": {
"coordinates": { "lat": null, "lng": null }
},
Ta konfiguracja umożliwia uruchomienie aplikacji 3D Place Navigator z przybliżeniem na wybraną lokalizację. Aby uzyskać współrzędne geograficzne adresu lub nazwy miejsca, użyj narzędzia do geokodowania Google, podając je w obiekcie location:
- Otwórz narzędzie do geokodowania.
- Utwórz żądanie geokodowania Kliknij sekcję „Wypróbuj samodzielnie” i wpisz wybraną lokalizację w polu „Adres”. Możesz podać adres, nazwę miejsca lub nawet punkty orientacyjne.
- Generowanie współrzędnych Kliknij przycisk „Uruchom”, aby przesłać prośbę. 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żywanie geokodów Skopiuj z odpowiedzi wartości współrzędnych geograficznych i wklej je do obiektu
coordinatesw konfiguracji.
Uwaga: kody geolokalizacji używane w ten sposób muszą być zgodne z Warunkami korzystania z usługi Map Google Platform określonymi w sekcji 3.4, czyli nie mogą być przechowywane w pamięci podręcznej dłużej niż 30 dni i muszą zostać odświeżone po tym czasie.
Ta konfiguracja użyje narzędzia do geokodowania, aby automatycznie określić współrzędne siedziby głównej Google w Mountain View w Kalifornii, i uruchomi aplikację 3D Place Navigator z kamerą wyśrodkowaną na tej lokalizacji.
Zaawansowane opcje dostosowywania
Możesz dostosować go jeszcze bardziej, zagłębiając się w kod. W sekcji poniżej znajdziesz informacje o niektórych opcjach
Dodawanie nowej ścieżki kamery
Rozwiązanie implementuje 2 różne ścieżki kamery:
fixed-orbit" | "dynamic-orbit"
Jeśli chcesz, możesz utworzyć nową ścieżkę kamery i zaimplementować ją za pomocą
/src/utils/cesium.js w funkcji calculateAutoOrbitFrame.
Aby użyć nowego obliczenia ścieżki w panelu konfiguracji,zapoznaj się z implementacją w dokumentacji demo/src/camera-settings.js.
Dodawanie kolejnych typów miejsc
Listę typów miejsc w konfiguracji można dostosować w pliku demo/src/place-settings.js. Na linii 4 znajdują się typy miejsc dostępne w wersji demonstracyjnej.
Jeśli chcesz użyć określonych typów miejsc bez zmiany źródła wersji demonstracyjnej, możesz je po prostu dodać do pliku config.json w folderze poi.types.
Dostosowywanie stylu (CSS)
W przypadku stylów korzystaliśmy z zmiennych CSS. Są one obsługiwane we wszystkich głównych przeglądarkach 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.. Możesz w nim dostosowywać kolory, ustawienia czcionki oraz wypełnienie lub marginesy w całej aplikacji.
Mapowanie dodatkowych danych
Aby nałożyć dodatkowe dane, musisz zaktualizować plik src/utils/cesium.js i skonsultować się z dokumentacją cesium dotyczącą dodawania do globusa danych GeoJSON lub innych danych z uwzględnieniem położenia geograficznego.
Usuwanie sekcji konfiguracji
Nasza aplikacja JavaScript ma w pliku konfiguracyjnym 3 główne sekcje: 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ą dostosowywać te sekcje do swoich potrzeb.
1.Usuwanie określonej sekcji z konfiguracji
- Sekcja Lokalizacja
Aby usunąć sekcję location, odszukaj w kodzie ten wiersz i go skomentuj lub usuń:
const locationConfig = { ...config.location, ...customConfig.location };
- Sekcja POI
Aby usunąć sekcję poi, odszukaj w kodzie ten wiersz i go skomentuj lub usuń:
const poiConfig = { ...config.poi, ...customConfig.poi };
- Sekcja aparatu
Aby usunąć sekcję camera, odszukaj w kodzie ten wiersz i go skomentuj lub usuń:
const cameraConfig = { ...config.camera, ...customConfig.camera };
2. Aktualizowanie połączonych konfiguracji
Po usunięciu sekcji konieczne jest zaktualizowanie połączonego obiektu konfiguracji. Ten obiekt łączy domyślną konfigurację z dowolnymi opcjami dostosowywania.
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 powoduje też usunięcie powiązanych elementów interfejsu, zaktualizuj kod HTML. Jeśli na przykład chcesz usunąć z panelu administracyjnego konkretny dział, np. szybkość kamery, musisz zaktualizować kod JS i HTML.
4. Usuwanie sekcji ustawień aparatu
Aby usunąć sekcję ustawień aparatu z interfejsu, znajdź ten wiersz i zkomentuj go lub usuń:
const cameraSettingsSecgetCameraSettingsSection(cameraConfig);
Podsumowanie usuwania sekcji Lokalizacja
const locationSection = await getLocationSettingsSection(locationConfig);
Podsumowanie
W tym dokumencie omówiliśmy różne opcje dostosowywania dostępne w narzędziu Area Explorer, które umożliwiają dostosowanie eksploracji w 3D do własnych potrzeb. Modyfikując działanie kamery, dostosowując kąt nachylenia obrazu i zmieniając poziomy powiększenia, możesz tworzyć niepowtarzalne i ciekawe treści, które pokazują wybrane ustawienia i punkty zainteresowania.
Eksperymentuj z różnymi konfiguracjami i dostosuj parametry do swoich potrzeb. Dzięki możliwościom personalizacji możesz tworzyć wciągające i spersonalizowane treści, które przyciągną uwagę odbiorców i urzeczytelnią Twoją wizję.