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

Eksplorator obszarów 3D to rozwiązanie, które umożliwia poznawanie społeczności w urzekającym świecie 3D. Rozwiązanie wykorzystuje: fotorealistyczne kafelki 3D Google, wyszukiwanie miejsc, szczegóły miejsc i interfejsy API autouzupełniania.

Pierwsze kroki:

Włącz

Dostosuj do swoich potrzeb

Rozwiązanie 3D Area Explorer można doskonale dostosować do własnych potrzeb. Możesz je dostosować w panelu sterowania w interfejsie lub za pomocą 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ą.

  • Orbita stała:

    To kolisty orbita na stałej wysokości i wokół konkretnego punktu orientacyjnego.

    Sprawdź, jak działa stała orbita, zwiedzając biuro Google w Sydney.

  • Orbita dynamiczna:

    Kamera porusza się płynnie w fali sinusoidalnej wokół wybranego miejsca. Ten unikalny ruch umożliwia widzom oglądanie ciekawych miejsc z różnych wysokości i kątów, oferując dynamiczne i niezwykłe doznania wizualne.

    Zobacz dynamiczną orbitę w akcji, eksplorując wieżę Eiffla.

Ciekawe miejsca:

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

Wstępne wczytywanie eksploracji: zaawansowane dostosowywanie adresów URL

Korzystając z funkcji 3D Area Explorer, możesz wstępnie zdefiniować swoją eksplorację za pomocą dostosowywania adresów URL. Eliminuje to potrzebę ręcznej konfiguracji, co upraszcza obsługę.

Jak utworzyć idealny adres URL:

Wystarczy dołączyć określone parametry do adresu URL eksploratora obszaru, aby wstępnie skonfigurować 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ą, aby natychmiast przejść 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 ciekawych miejsc.
  • poi.searchRadius: promień wyszukiwania ważnych miejsc w pobliżu.
  • camera.speed: prędkość kamery na orbicie.
  • camera.orbitType: typ orbity kamery („stałe orbity” lub „dynamiczne orbity”).

Zalety dostosowywania adresów URL:

  • Aby zwiększyć wygodę użytkowników, określ wstępnie wybrane ustawienia.
  • Udostępniaj wybrane wcześniej lokalizacje i ciekawe miejsca.
  • Bezproblemowo umieszczaj w witrynach wstępnie skonfigurowane narzędzia Area Explorer.

Wykorzystując dostosowanie adresu URL, możesz tworzyć spersonalizowane treści i zapraszać innych do udziału w wyselekcjonowanych wyprawach.

Dodatkowe możliwości dostosowywania

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

Aby wprowadzić takie zaawansowane zmiany, musisz spojrzeć na kod w pliku src/utils/cesium.js w katalogu src. Aby zmienić wygląd i styl aplikacji, możesz zmienić podane niżej zmienne:

Wysokość aparatu

Kontroluj wysokość, na jakiej ustawia się kamera podczas lotu do określonego punktu, dostosowując wartość CAMERA_HEIGHT. Wyższe wartości oznaczają większy pomniejszony widok panoramiczny, a niższe wartości przybliżają do szczegółów 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 lokalizacją docelową podczas lotu do określonego punktu.
  • Przykładowe wartości:
    • 50. Zbliżenie, uwydatnienie szczegółów.
    • 200: Bardziej panoramiczny widok.

Nachylenie kamery

Początkowe pochylenie kamery jest określane przez BASE_PITCH. Wartości ujemne oznaczają przechylenie w dół, a wartości dodatnie dla widoku w górę. Aby dodać do eksploracji subtelny, dynamiczny ruch, zmień ustawienie 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 w dół o 30 stopni)
    • AUTO_ORBIT_PITCH_AMPLITUDE: 10 (zmiana kąta o 10 stopni w czasie)

Opis: Nachylenie kamery to wizualne nachylenie mapy mierzone w stopniach. To tzw. przechylenie. Te ustawienia określają początkową tonację kamery i dynamiczną korektę tonu podczas automatycznych obrotów.

Przykładowe wartości:

  • BASE_PITCH: 0 (kamera na poziomie)
  • AUTO_ORBIT_PITCH_AMPLITUDE: 0 (bez zmiany wysokości tonu)

Zasięg i zoom kamery

Te parametry określają stopień powiększenia, które jest stosowane, gdy skupia się na konkretnych 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 zmienność odległości)
  • ZOOM_FACTOR: 20 (współczynnik powiększenia kamery)

Opis: te ustawienia określają zmienność zakresu podczas ruchu kamery i poziom powiększenia, aby zapewnić dokładniejszą analizę.

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 pierwotnego położenia, używane są wartości CAMERA_OFFSET. To ustawienie obejmuje kierunek (obrót), tonację (przechylenie) i zakres (jak daleko od środka znajduje się kamera).

  • Ustawienie: CAMERA_OFFSET
  • Wartości domyślne:
    • heading: 0 (bez przesunięcia rotacji)
    • pitch: Cesium.Math.toRadians(-30) (przechylenie 30 stopni w dół)
    • range: 800 (800 metrów od centrum)
  • Opis: określa nagłówek, ton i zasięg kamery, których można użyć do zresetowania widoku.
  • Przykładowe wartości:
    • heading: 45 (stopnie, widok północno-zachodni)
    • range: 1500 m (dalej od środka)

Uruchom współrzędne:

Parametr START_COORDINATES określa początkową długość i szerokość geograficzną oraz wysokość kamery. To tutaj rozpocznie się eksploracja, więc 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: 15 000 000 (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 ustawia środek obszaru. 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 przesunąć kamerę. Dostosuj te wartości, aby ustawić kamerę w dowolnym miejscu na kuli ziemskiej.

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

Ta konfiguracja umożliwia uruchamianie aplikacji 3D Place Navigator z powiększeniem w określonej lokalizacji. Za pomocą narzędzia do geokodowania Google możesz pobrać współrzędne szerokości i długości geograficznej adresu lub nazwy miejsca, określając go w obiekcie lokalizacji:

  1. Otwórz narzędzie geokodowania.
  2. 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.
  3. 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 jej szerokość i długość geograficzną wyświetlane w sekcji geometry.location.
  4. Użyj geokodów Skopiuj wartości szerokości i długości geograficznej pobrane z odpowiedzi i wklej je do obiektu coordinates w swojej konfiguracji.

Uwaga: używane w ten sposób geokody muszą być zgodne z warunkami opisanymi w sekcji 3.4 Warunki korzystania z usług Google Maps Platform. Oznacza to, że nie mogą być przechowywane w pamięci podręcznej przez ponad 30 dni, a po tym czasie muszą zostać odświeżone.

obraz

W tej konfiguracji wykorzystano narzędzie do geokodowania do automatycznego określenia współrzędnych siedziby Google w Mountain View w Kalifornii i uruchomienia aplikacji 3D Place Navigator z kamerą wyśrodkowaną na danej lokalizacji.

Zaawansowane dostosowania

Możesz wprowadzić dodatkowe zmiany, zagłębiając się w kod. Poniższa sekcja przedstawia niektóre z dostępnych opcji.

Dodaj nową ścieżkę kamery

Gotowe rozwiązanie implementuje 2 różne ścieżki kamery:

fixed-orbit" | "dynamic-orbit"

Ale jeśli chcesz utworzyć nową ścieżkę kamery, możesz ją wdrożyć za pomocą

/src/utils/cesium.js w funkcji calculateAutoOrbitFrame.

Aby użyć tej nowej 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. Od wiersza 4. znajdują się typy miejsc, które są dostępne w wersji demonstracyjnej.

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

Dostosuj styl (CSS)

W przypadku stylów, w których pracowaliśmy ze zmiennymi CSS, Są obsługiwane przez każdą główną przeglądarkę i umożliwiają zmianę jednego wiersza w jednym miejscu i aktualizację określonych właściwości CSS. Nasze zmienne CSS są zdefiniowane tutaj: src/main.css.. Możesz tam dostosować kolory, ustawienia czcionki, dopełnienia lub marginesy dla całej aplikacji.

Nakładanie dodatkowych danych

Aby nałożyć dodatkowe dane, należy zaktualizować plik src/utils/cesium.js i zapoznać się z dokumentacją cezu, aby dowiedzieć się, jak dodać do kuli ziemskiej dane GeoJSON lub inne dane geograficzne.

Usuń sekcje 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.Usuwanie konkretnej sekcji z konfiguracji

  • Sekcja Lokalizacja

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

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

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

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

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

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

2. Zaktualizuj połączone konfiguracje

Po usunięciu sekcji konieczne jest zaktualizowanie obiektu połączonej 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. Dostosowywanie elementów interfejsu

Jeśli usunięcie sekcji oznacza również usunięcie powiązanych elementów interfejsu, zmień odpowiednio kod w kodzie HTML. Jeśli na przykład chcesz usunąć z panelu administracyjnego konkretną sekcję, np. szybkość aparatu, musisz zaktualizować zarówno kod js, jak i kod HTML.

4. Usuń sekcję ustawień aparatu

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

const cameraSettingsSecgetCameraSettingsSection(cameraConfig);

Usuwanie podsumowania sekcji lokalizacji

const locationSection = await getLocationSettingsSection(locationConfig);

Podsumowanie

W tym dokumencie omówiliśmy różne opcje dostosowywania dostępne w Eksploratorze obszarów, by dostosować eksplorację 3D. Modyfikując działanie kamery, dostosowując nachylenie obrazu i zmieniając poziomy powiększenia, możesz tworzyć wyjątkowe i ciekawe ujęcia przedstawiające wybrane przez Ciebie ustawienia i ciekawe miejsca.

Eksperymentuj z różnymi konfiguracjami i dopasowuj parametry do swoich potrzeb. Wykorzystując możliwości dostosowywania, możesz tworzyć wciągające, spersonalizowane podróże, które przyciągną uwagę odbiorców i zrealizują Twoją wizję.