Dostosowywanie eksploratora obszaru 3D

Eksplorator obszaru 3D to rozwiązanie, które umożliwia odkrywanie społeczności w atrakcyjnym formacie 3D. Rozwiązanie wykorzystuje: fotorealistyczne kafelki 3D Google, wyszukiwanie miejsc, informacje o miejscu oraz interfejsy API autouzupełniania.

Pierwsze kroki:

Włącz

Dostosowywanie działania

Rozwiązanie 3D Area Explorer można w dużym stopniu dostosować do ścieżek klienta. Możesz dostosować ustawienia 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ą falę sinusoidalną.

  • Stała orbita:

    Jest to orbita kołowa na stałej wysokości wokół określonego punktu zainteresowania.

    Aby zobaczyć, jak działa stała orbita, odwiedź biuro Google w Sydney.

  • Dynamiczny ruch po orbicie:

    Kamera płynnie porusza się po trajektorii fali sinusoidalnej wokół wyznaczonego punktu zainteresowania. Ten wyjątkowy ruch umożliwia widzom obserwowanie interesującego miejsca z różnych wysokości i pod różnymi kątami, co zapewnia dynamiczne i wciągające wrażenia wizualne.

    Aby zobaczyć, jak działa dynamiczna orbita, odkryj wieżę Eiffla.

Ważne miejsca:

  • Dostosuj eksplorację, określając typy miejsc, które chcesz odkryć. Wybieraj spośród muzeów, parków, szkół i innych miejsc, korzystając z tablicy types w config.json.
  • Ustaw maksymalną liczbę wyświetlanych ciekawych miejsc, dostosowując parametr density.
  • Zmodyfikuj searchRadius (in meters), aby uwzględnić ukryte perełki w pobliżu lub skupić się na konkretnych obszarach.
  • Ustaw wybraną szybkość ruchu kamery za pomocą parametru speed (in revolutions per minute).

Wstępne wczytywanie eksploracji: szczegółowe omówienie dostosowywania adresów URL

Eksplorator obszaru 3D umożliwia wstępne zdefiniowanie eksploracji za pomocą dostosowywania adresu URL. Dzięki temu nie trzeba ręcznie konfigurować ustawień, co ułatwia korzystanie z usługi.

Tworzenie idealnego adresu URL:

Wystarczy dołączyć 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 określoną szerokość i długość geograficzną, 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 rozdzielona przecinkami typów ciekawych miejsc do wyświetlenia.
  • poi.density: wybrana maksymalna liczba ciekawych miejsc.
  • poi.searchRadius: promień wyszukiwania pobliskich ciekawych miejsc.
  • camera.speed: szybkość obrotu kamery.
  • camera.orbitType: typ orbity kamery („fixed-orbit” lub „dynamic-orbit”).

Zalety dostosowywania adresów URL:

  • Uprość obsługę, wstępnie definiując wybrane ustawienia.
  • Udostępniaj ukierunkowane podróże z określonymi, wstępnie wczytanymi lokalizacjami i ciekawymi miejscami.
  • płynnie umieszczać wstępnie skonfigurowane środowiska Area Explorer w witrynach;

Dzięki dostosowywaniu adresów URL możesz tworzyć spersonalizowane treści i zapraszać innych do udziału w przygotowanych przygodach.

Dalsze dostosowywanie

W poprzedniej sekcji omówiliśmy dostosowania dostępne w interfejsie lub pliku konfiguracji. Istnieje jednak kilka innych wbudowanych parametrów, które możesz zmodyfikować, aby jeszcze bardziej dostosować aplikację.

Aby wprowadzić te zaawansowane dostosowania, musisz sprawdzić kod w pliku src/utils/cesium.js znajdującym się w katalogu src. Możesz zmienić te zmienne, aby dostosować wygląd i działanie aplikacji:

Wysokość aparatu

Dostosowując wartość CAMERA_HEIGHT, możesz kontrolować, jak wysoko kamera ustawia się podczas lotu w kierunku punktu. Wyższe wartości zapewnią bardziej oddalony, panoramiczny widok, a niższe wartości przybliżą 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 wybraną lokalizacją podczas przelotu do punktu.
  • Przykładowe wartości:
    • 50: widok z bliska, podkreślający szczegóły.
    • 200: szersza perspektywa.

Nachylenie kamery

Początkowe nachylenie kamery jest określane przez parametr BASE_PITCH. Użyj wartości ujemnych, aby przechylić widok w dół, i wartości dodatnich, aby przechylić go w górę. Aby dodać do eksploracji subtelny ruch dynamiczny, zmień wartość 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 (nachylenie 30 stopni w dół)
    • AUTO_ORBIT_PITCH_AMPLITUDE: 10 (zmiana wysokości o 10 stopni w czasie)

Opis: nachylenie kamery to wizualne nachylenie mapy mierzone w stopniach. Jest to tzw. pochylenie. Te ustawienia określają początkowe nachylenie kamery i dynamiczne dostosowywanie nachylenia podczas automatycznych obrotów.

Przykładowe wartości:

  • BASE_PITCH: 0 (kamera na poziomie oczu)
  • AUTO_ORBIT_PITCH_AMPLITUDE: 0 (brak zmian wysokości głosu)

Zasięg i powiększenie kamery

Te parametry określają poziom 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ą zakres zmian podczas ruchu kamery i poziom powiększenia, aby uzyskać zbliżenie.

Przykładowe wartości:

  • RANGE_AMPLITUDE_RELATIVE: 1 (pełny zakres)
  • 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. To ustawienie obejmuje kierunek (obrót), nachylenie (przechylenie) i zakres (odległość kamery od środka).

  • Ustawienie: CAMERA_OFFSET
  • Wartości domyślne:
    • heading: 0 (brak przesunięcia obrotu)
    • pitch: Cesium.Math.toRadians(-30) (nachylenie 30 stopni w dół)
    • range: 800 (800 metrów od środka)
  • Opis: określa kierunek, nachylenie i zakres kamery na potrzeby resetowania widoku.
  • Przykładowe wartości:
    • heading: 45 (stopnie, widok z północnego zachodu)
    • range: 1500 metrów (dalej od centrum)

Współrzędne początkowe:

START_COORDINATES definiują początkową długość i szerokość geograficzną oraz wysokość kamery. To będzie punkt początkowy eksploracji, więc ustaw go 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 config.json ustawia środek obszaru. Jest to początkowy punkt widzenia kamery w przeglądarce Cesium.coordinates: Określa szerokość (lat) i długość (lng) geograficzną lokalizacji, do której kamera ma najpierw przesunąć widok. Dostosuj te wartości, aby ustawić kamerę w dowolnym miejscu na świecie.

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

Ta konfiguracja umożliwia uruchomienie aplikacji 3D Place Navigator z powiększeniem wybranej lokalizacji. Możesz użyć narzędzia Google do geokodowania, aby uzyskać współrzędne geograficzne adresu lub nazwy miejsca, określając je w obiekcie lokalizacji:

  1. Otwórz narzędzie do geokodowania.
  2. Utwórz żądanie geokodowania Kliknij sekcję „Wypróbuj” i wpisz wybraną lokalizację w polu „Adres”. Możesz podać adres, nazwę miejsca, a nawet punkty orientacyjne.
  3. 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.
  4. Użyj kodów geograficznych: skopiuj pobrane wartości szerokości i długości geograficznej z odpowiedzi i wklej je do obiektu coordinates w konfiguracji.

Uwaga: kody geograficzne używane w ten sposób muszą być zgodne z warunkami określonymi w sekcji 3.4 Warunków korzystania z usługi Google Maps Platform, tzn. nie mogą być przechowywane w pamięci podręcznej dłużej niż 30 dni i po tym czasie muszą zostać odświeżone.

obraz

Ta konfiguracja używa 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ą na tej lokalizacji.

Zaawansowane opcje dostosowywania

Możesz wprowadzić dodatkowe dostosowania, zagłębiając się w kod. W sekcji poniżej znajdziesz kilka opcji.

Dodawanie nowej ścieżki kamery

Rozwiązanie to od razu po uruchomieniu 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.

Dodaj więcej typów miejsc

Listę typów miejsc w konfiguracji można dostosować w pliku demo/src/place-settings.js. Od wiersza 4 zaczynają się typy miejsc dostępne w wersji demonstracyjnej.

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

Dostosowywanie stylu (CSS)

W przypadku stylów użyliśmy zmiennych CSS. Są obsługiwane przez wszystkie główne przeglądarki i umożliwiają zmianę jednego wiersza w centralnym miejscu oraz aktualizację określonych właściwości CSS. Nasze zmienne CSS są zdefiniowane w pliku src/main.css.. Możesz w nim 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 kuli ziemskiej dane GeoJSON lub inne dane z odniesieniami geograficznymi.

Usuwanie sekcji konfiguracji

Nasza aplikacja w języku 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ą dostosowywać te sekcje do swoich potrzeb.

1.Usuwanie konkretnej sekcji z konfiguracji

  • Sekcja Lokalizacja

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

const locationConfig = { ...config.location, ...customConfig.location };
  • Sekcja POI

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

const poiConfig = { ...config.poi, ...customConfig.poi };
  • Sekcja Aparat

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

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

2. Aktualizowanie połączonych konfiguracji

Po usunięciu sekcji należy zaktualizować obiekt połączonej 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 również usunięcie powiązanych elementów interfejsu, odpowiednio zaktualizuj kod HTML. Jeśli na przykład chcesz usunąć z panelu administracyjnego konkretną sekcję, np. szybkość kamery, musisz zaktualizować zarówno kod JS, jak i kod HTML.

4. Usuwanie sekcji ustawień aparatu

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

const cameraSettingsSecgetCameraSettingsSection(cameraConfig);

Podsumowanie sekcji dotyczącej usuwania lokalizacji

const locationSection = await getLocationSettingsSection(locationConfig);

Podsumowanie

W tym dokumencie omówiliśmy różne opcje dostosowywania dostępne w Eksploratorze obszaru, które pozwalają dostosować sposób eksploracji w 3D. Modyfikując zachowanie kamery, dostosowując nachylenie wizualne i zmieniając poziomy powiększenia, możesz tworzyć unikalne i atrakcyjne treści, które prezentują wybrane ustawienia i ciekawe 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 zachwycą odbiorców i pozwolą Ci zrealizować Twoją wizję.