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

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

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 wokół konkretnego punktu orientacyjnego.

Aby zobaczyć stałą orbitę w działaniu, odwiedź biuro Google w Sydney.
Orbita dynamiczna:

Kamera płynnie porusza się w trajektorii fali sinusoidalnej wokół wyznaczonego punktu. To nietypowe działanie umożliwia widzom obserwowanie interesującego punktu z różnych wysokości i kątów, zapewniając 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 types w pliku config.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).

Wstępny załadowanie eksploracji: zagłębianie się w temat dzięki dostosowywaniu adresu URL

Eksplorator obszarów 3D umożliwia wstępne zdefiniowanie eksploracji za pomocą dostosowywania adresów 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: rozdzielana przecinkami lista typów ciekawych miejsc 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:

Aby zwiększyć wygodę użytkowników, wstępnie zdefiniuj wybrane ustawienia.
udostępniać docelową podróż z określonymi wstępnie załadownymi lokalizacjami i punktami POI;
bezproblemowo umieszczać w witrynach wstępnie skonfigurowane funkcje Area Explorer;

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 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ść aparatu

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: Bliższy widok, uwydatnianie szczegółów
- 200: Bardziej panoramiczny widok.

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_PITCH i AUTO_ORBIT_PITCH_AMPLITUDE
Wartości domyślne:
- BASE_PITCH: -30 (30° w dół)
- AUTO_ORBIT_PITCH_AMPLITUDE: 10 (zmienia ton w czasie o 10 stopni)

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 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 zoomu aparatu)

Opis: te ustawienia określają zakres zmian 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 (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 zresetować 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 obrotowego)
- 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)

Początkowe współrzędne:

START_COORDINATES określa początkową długość geograficzną, szerokość geograficzną 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 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 elementach config.json określa środek obszaru. Jest to początkowy punkt widzenia kamery w przeglądarce Cesium:coordinates Określa szerokość (lat) i długość geograficzną (lng) lokalizacji, z której kamera ma korzystać jako pierwsza. 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, możesz użyć 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, a 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 w obiekcie coordinates w swojej 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 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 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 różnych aspektów aplikacji. Deweloperzy mogą dostosowywać te sekcje do swoich potrzeb.

1.Usuwanie określonej sekcji z konfiguracji

Sekcja lokalizacji

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 umieśl w nim znacznik komentarza lub usuń go:

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

Sekcja dotycząca 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. 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. Dostosuj elementy 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ąć z interfejsu sekcję ustawień aparatu, znajdź ten wiersz i dodaj do niego komentarz lub usuń go:

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 aplikacji 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ę.