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

Eksplorator obszaru 3D to rozwiązanie, które umożliwia poznawanie społeczności w w 3D. Rozwiązanie to wykorzystuje: Realistyczne kafelki 3D od Google, Wyszukiwanie miejsc, Szczegóły miejsca, oraz interfejsy API autouzupełniania.

Pierwsze kroki:

Włącz

Dostosuj do swoich potrzeb

Eksplorator obszarów 3D pozwala w znacznym stopniu dostosować na wrażeniach klientów. Możesz dostosować za pomocą panelu sterowania interfejsu użytkownika lub pliku config.json.

Gotowe do dostosowania? 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 swoją podróżą, wybierając typ orbity kamery: klasyczny lub intrygującą falę sinusową.

  • Stała orbita:

    To jest okrągła orbita o stałej wysokości i wokół określonego punktu a interesem publicznym.

    Zobacz, jak działa stała orbita, eksplorując Google Sydney

  • Dynamiczna orbita:

    Kamera płynnie porusza się w trajektorii fali sinusoidalnej wokół wyznaczonego ciekawego miejsca. Ten wyjątkowy ruch pozwala widzom zauważyć punkt interesujące na różnych wysokościach i pod różnymi kątami, oferując dynamiczne wciągające doznania wizualne.

    Zobacz, jak działa dynamiczna orbita, analizując obiekt Eiffla .

Ciekawe miejsca:

  • Dostosuj swoją eksplorację, określając rodzaje miejsc, które chcesz odwiedzić odkrywać. Wybieraj spośród muzeów, parków, szkół i innych miejsc, używając types tablica w config.json.
  • Ustaw maksymalną liczbę wyświetlanych ciekawych miejsc, dostosowując odpowiednio density.
  • Zmień searchRadius (in meters), aby uwzględnić ukryte perełki lub atrakcje w pobliżu w konkretnych obszarach.
  • Za pomocą parametru speed (in revolutions per minute) ustaw szybkość ruchu kamery.

Wstępne wczytywanie eksploracji: dostosowywanie adresów URL

Eksplorator obszarów 3D umożliwia wstępne zdefiniowanie eksploracji za pomocą adresu URL i personalizacji reklam. Eliminuje to konieczność konfigurowania ręcznej konfiguracji, co usprawnia pracę. z perspektywy użytkownika.

Tworzenie idealnego adresu URL:

Wystarczy dołączyć do adresu URL Eksploratora obszarów określone parametry, 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 URL ustawia punkt początkowy o określonej szerokości i długości geograficznej, od razu przeniesie 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 ciekawych miejsc.
  • poi.searchRadius: promień wyszukiwania ciekawych miejsc w pobliżu.
  • camera.speed: prędkość na orbicie kamery.
  • camera.orbitType: typ orbity kamery („stała orbita” lub „dynamiczna orbita”).

Zalety dostosowywania adresów URL:

  • Aby zwiększyć wygodę użytkowników, wstępnie zdefiniuj wybrane ustawienia.
  • Udostępniaj docelowe podróże z określonymi, wstępnie załadowanymi lokalizacjami i ważnymi miejscami.
  • Sprawnie umieszczaj w witrynach wstępnie skonfigurowane funkcje Area Explorera.

Korzystając z funkcji dostosowywania adresów URL, możesz tworzyć zaproś innych do udziału w wyselekcjonowanych przygodach.

Dalsze dostosowania

W poprzedniej sekcji omawialiśmy dostosowania dostępne za pomocą interfejsu użytkownika lub konfiguracji . Dostępnych jest jednak kilka innych wbudowanych parametrów, modyfikować, aby jeszcze bardziej dostosować aplikację.

Aby wprowadzić te zaawansowane modyfikacje, musisz przyjrzeć się kodowi w sekcji src/utils/cesium.js plik znajduje się w katalogu src. Poniżej Zmienne – można zmieniać, aby zmienić wygląd i sposób działania aplikacji

Wysokość aparatu

Kontroluj pozycję kamery podczas lotu w kierunku wybranego punktu przez dostosowanie wartości CAMERA_HEIGHT. Im wyższa wartość, tym większa pomniejszony i panoramiczny widok, a niższe wartości zbliżą go do szczegóły tego 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 z lotu ptaka do punktu.
  • Przykładowe wartości:
    • 50: Bliższy widok, uwydatnianie szczegółów
    • 200: Bardziej panoramiczny widok.

Nachylenie kamery

Początkowa wartość pochylenie kamery jest definiowane przez funkcję BASE_PITCH. Użyj wartości ujemnych, aby przechylić w dół a pozytywny dla spojrzenia w górę. Aby dodać subtelny, dynamiczny ruch eksplorację, 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 (odchylenie o 30 stopni w dół)
    • AUTO_ORBIT_PITCH_AMPLITUDE: 10 (zmiana nachylenia o 10 stopni czas).

Opis: Zachęta kamery to wizualne przechylenie mapy, mierzone w stopni. Jest to tzw. przechylenie. Te ustawienia określają wartość początkową kamery i dynamiczna regulacja tonacji podczas rotacji automatycznych.

Przykładowe wartości:

  • BASE_PITCH: 0 (poziom aparatu)
  • AUTO_ORBIT_PITCH_AMPLITUDE: 0 (brak odmiany)

Zasięg i zoom kamery

Te parametry określają stopień powiększenia, po którym następuje skupienie pkt. 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 powiększenia w aparacie)

Opis: te ustawienia określają zmienność zakresu w trakcie korzystania z kamery. ruch i poziom powiększenia, by przyjrzeć się bliżej.

Przykładowe wartości:

  • RANGE_AMPLITUDE_RELATIVE: 1 (odmiana w pełnym zakresie)
  • 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 przywrócić kamerę do pierwotnego położenia, Użyte wartości: CAMERA_OFFSET. To ustawienie obejmuje nagłówek (obrót), wysokość (pochylenie) i zasięg (odległość kamery od środka).

  • Ustawienie: CAMERA_OFFSET
  • Wartości domyślne:
    • heading: 0 (bez przesunięcia obrotu)
    • pitch: Cez.Math.toRadians(-30) (kąt 30 stopni w dół)
    • range: 800 (800 metrów od centrum)
  • Opis: definiuje nagłówek, ton i zakres kamery widok.
  • Przykładowe wartości:
    • heading: 45 (stopnie, widok na północny zachód)
    • range: 1500 metrów (dalej od centrum)

Współrzędne początkowe:

Elementy START_COORDINATES określają początkową długość, szerokość i wysokość dla aparat fotograficzny. To miejsce, w którym rozpocznie się eksploracja, ustaw więc ją na interesujący Cię obszar które użytkownicy zobaczą jako pierwsze.

// 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 obiekcie config.json wyznacza środek obszaru. Jest początkowy punkt widzenia kamery w przeglądarce Cesium.coordinates: Definiuje szerokość (lat) i długość geograficzna (lng) miejsca, w którym chcesz włączyć aparat przesuń palcem od dołu do góry. Dostosuj te wartości, aby ustawić kamerę w dowolnym miejscu kuli ziemskiej.

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

Ta konfiguracja umożliwia uruchamianie aplikacji 3D Place Navigator powiększony widok konkretnej lokalizacji. Za pomocą narzędzia Google do geokodowania możesz sprawdzić szerokość i długość geograficzną. współrzędne adresu lub nazwy miejsca, podając je w lokalizacji obiekt:

  1. Otwórz stronę Geocoding .
  2. Utwórz żądanie geokodowania kliknij „Wypróbuj samodzielnie”. i w polu „Adres” wpisz wybraną lokalizację. . Możesz podać adres, nazwy miejsc, a nawet punktów orientacyjnych.
  3. Wygeneruj współrzędne kliknij „Uruchom”. , aby przesłać prośbę. zwróci odpowiedź zawierającą różne informacje na temat lokalizacji, w tym szerokości i długości geograficznej wyświetlanych pod geometry.location.
  4. Użyj geokodów. Skopiuj pobrane wartości szerokości i długości geograficznej i wklej ją do obiektu coordinates w swojej konfiguracji.

Uwaga: geokody używane w ten sposób muszą być zgodne z warunkami określonymi w Mapach Google. Warunki korzystania z platformy Usługi 3.4, że nie mogą być przechowywane w pamięci podręcznej dłużej niż 30 dni i muszą musi zostać odświeżona.

obraz

W tej konfiguracji używane jest narzędzie Geocoding, aby automatycznie określić dane siedziby Google w Mountain View w Kalifornii oraz aplikacji 3D Place Navigator i wyśrodkuj aparat na tej lokalizacji.

Zaawansowane opcje dostosowywania

Możesz wprowadzić dodatkowe modyfikacje, analizując kod. W następnej sekcji omówiono kilka opcji

Dodaj nową ścieżkę kamery

Rozwiązanie udostępnia gotowe rozwiązanie 2 różnych ścieżek 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ć nowego obliczenia ścieżki w panelu konfiguracji,zapoznaj się z wdrożenie 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 Począwszy od wiersza 4, typy miejsc, które są dostępne w wersji demonstracyjnej.

Jeśli chcesz użyć określonych typów miejsc bez zmiany źródła wersji demonstracyjnej może po prostu dodać je do pliku config.json w katalogu poi.types

Dostosuj styl (css)

Pracowaliśmy przy stylach ze zmiennymi CSS. Są obsługiwane na każdym kierunku i umożliwić zmianę jednego wiersza w centralnym miejscu określonych właściwości CSS. Nasze zmienne CSS są zdefiniowane w src/main.css.. możesz dostosować kolory, ustawienia czcionek, dopełnienia lub marginesy dla całego tekstu, aplikacji.

Nakładanie dodatkowych danych

Aby dodać więcej danych, zaktualizuj plik src/utils/cesium.js oraz zapoznaj się z dokumentacją cezową, by dodać GeoJSON lub inne odniesienia geograficzne na kulę ziemską.

Usuń sekcje konfiguracji

Aplikacja JavaScript składa się z trzech głównych sekcji: plik konfiguracji: demo/src/[config-panel.js](config-panel.js): location, poi i camera. Każda z tych sekcji zawiera opcje konfiguracji różnych aspektach aplikacji. Deweloperzy mogą dostosować te sekcje z uwzględnieniem ich konkretnych potrzeb.

1.Usuń określoną sekcję z konfiguracji

  • Sekcja lokalizacji

Aby usunąć sekcję location, znajdź w kodzie następujący wiersz i skomentować lub usunąć:

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

Aby usunąć sekcję poi, znajdź następujący wiersz w kodzie i komentarz lub usunąć:

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

Aby usunąć sekcję camera, znajdź następujący wiersz w kodzie i komentarz lub usunąć:

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

2. Zaktualizuj połączone konfiguracje

Po usunięciu sekcji musisz zaktualizować połączoną konfigurację obiektu. 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. Dostosuj elementy interfejsu

Jeśli usunięcie sekcji oznacza też usunięcie powiązanych elementów interfejsu, zaktualizuj kod odpowiednio w kodzie HTML. Jeśli na przykład chcesz usunąć konkretną stronę w panelu administracyjnym, na przykład Szybkość kamery, musisz zaktualizować JavaScript i HTML.

4. Usuń sekcję ustawień aparatu

Aby usunąć sekcję ustawień aparatu z interfejsu użytkownika, znajdź ten wiersz i skomentować lub usunąć:

const cameraSettingsSecgetCameraSettingsSection(cameraConfig);

Usuwanie podsumowania sekcji lokalizacji

const locationSection = await getLocationSettingsSection(locationConfig);

Podsumowanie

W tym dokumencie omówiliśmy różne opcje dostosowywania w Eksploratorze obszarów, aby dostosować eksplorację 3D. Przez zmianę zachowanie kamery, dostosowywanie przechylenia i zmianę poziomów powiększenia, wyjątkowe i ciekawe elementy, które pokazują wybrane przez Ciebie ustawienia i punkty w interesie publicznym.

Pamiętaj, żeby poeksperymentować z różnymi konfiguracjami i dostosować aby dostosować je do konkretnych potrzeb. Korzystając z możliwości możesz tworzyć wciągające, spersonalizowane podróże, z odbiorcami i zrealizowaniem Waszych wizji.