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

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.

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

  • 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ń ustawienie searchRadius (in meters), aby uwzględnić ukryte perły w pobliżu lub skupić się na określonych obszarach.
  • Za pomocą parametru speed (in revolutions per minute) ustaw szybkość ruchu kamery.

Wstępny załadunek Twojej eksploracji: zaawansowane dostosowywanie adresu 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 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 wyszukiwarce, aby natychmiast przetransportować 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 ciekawych miejsc.
  • poi.searchRadius: promień wyszukiwania ciekawych miejsc w pobliżu.
  • camera.speed: prędkość orbity kamery.
  • camera.orbitType: typ orbity kamery („stała orbita” lub „dynamiczna orbita”).

Zalety dostosowywania adresów URL:

  • Uprość korzystanie z urządzenia przez użytkowników, definiując wstępnie 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 omówiliśmy zmiany dostępne w interfejsie lub pliku konfiguracyjnym. Dostępnych jest jednak kilka innych wbudowanych parametrów, modyfikować, aby jeszcze bardziej dostosować aplikację.

Aby wprowadzić te zaawansowane ustawienia, musisz sprawdzić kod w pliku src/utils/cesium.js 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żą obraz 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 celem podczas lotu do punktu.
  • Przykładowe wartości:
    • 50: widok z bliska, który podkreśla szczegóły.
    • 200: widok bardziej panoramiczny.

Nachylenie kamery

Początkowa wartość pochylenie kamery jest definiowane przez funkcję BASE_PITCH. Użyj wartości ujemnych, aby przechylić w dół a pozytywne na wyższe. Aby dodać subtelny ruch dynamiczny do eksploracji, zmień parametr 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 (zmiana nachylenia o 10 stopni czas).

Opis: pochylenie kamery to wizualne pochylenie mapy, które jest mierzone w stopniach. Jest to również nazywane przechyleniem. 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:

START_COORDINATES określa początkową długość geograficzną, szerokość geograficzną i wysokość kamery. 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 (Golden Gate Bridge)
    • 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ść geograficzną (lat) i długość geograficzną (lng) lokalizacji, do której ma najpierw przesunąć się kamera. 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 narzędzie do geokodowania.
  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. Generowanie współrzędnych Kliknij przycisk „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: 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.

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 dostosować go jeszcze bardziej, zagłębiając się w kod. W następnej sekcji omówiono kilka opcji

Dodaj nową ścieżkę kamery

Gotowe rozwiązanie wdraża 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ć 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 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że po prostu dodać je do pliku config.json w katalogu poi.types

Dostosowywanie stylu (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 pliku src/main.css.. Możesz w nim dostosowywać kolory, ustawienia czcionki oraz wypełnienie lub marginesy w całej 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 dotycząca 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);

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