Integracja komponentów frontendu

Podstawowe wprowadzenie

Wprowadzenie do komponentów frontendowych

Komponenty frontendowe DJI FlightHub 2 obejmują: tworzenie tras lotu, edytor tras lotu, wirtualny kokpit oraz projekt/mapę. Komponenty te obsługują niestandardowe motywy i style. Ten podręcznik przedstawia, jak zintegrować te komponenty z Twoim systemem od podstaw.

Przygotowanie przed rozpoczęciem

Stos technologiczny: obsługiwane są React, Vue oraz HTML + CSS.
Wymagania sprzętowe: zapoznaj się z Podręcznikiem wdrożenia wersji on-premises DJI FlightHub 2, aby wdrożyć wersję on-premises FlightHub 2.

Szybki start

Bieżąca wersja oferuje głównie następujące komponenty i odpowiadające im zestawy funkcji. Możesz pobrać Demo i skorzystać z tego podręcznika do konfiguracji i debugowania.

Wydane komponenty są następujące:

Komponent	Zestaw funkcji	Zrzut ekranu funkcji
Tworzenie tras lotu	Typy tras lotu: - Trasa punktów kontrolnych - Trasa obszarowa - Trasa nachylona - Trasa geometryczna - Trasa Smart 3D Capture Dostosowywanie stylu
Edytor tras lotu	Typy tras lotu: - Trasa punktów kontrolnych - Trasa obszarowa - Trasa nachylona - Trasa geometryczna - Trasa Smart 3D Capture Funkcje tras lotu: - Edycja i zapisywanie tras lotu - Adnotacje mapy - Otwarcie Cesium - Adnotacje punktów, linii i obszarów - Wczytywanie modeli Dostosowywanie stylu
Wirtualny kokpit	Funkcje zdalnego sterowania: - Start jednym kliknięciem - Transmisja na żywo - Lot ręczny i wyświetlanie trajektorii za pomocą klawiszy WASD - RTH jednym kliknięciem Dostosowywanie stylu
Projekt/Mapa	Dane mapy projektu: - Adnotacje punktów, linii i obszarów - Planowanie tras lotu i trajektorii - Niestandardowy obszar zadania, niestandardowa strefa ograniczeń - Lista urządzeń projektu - Statek powietrzny docka - Statek powietrzny lotu ręcznego

Tutorial

Dodanie wymaganych stylów i zależności

Po ukończeniu wdrożenia wersji on-premises FlightHub 2 otrzymasz prywatny adres IP. Wprowadź ten prywatny adres IP lub nazwę domeny i port w sekcji HEAD bloku kodu.

<!DOCTYPE html>
<html>
  <head>
    <script type="text/javascript" src="http://Private IP or domain name/paas.js" fh2></script>
    <title>Demo</title>
  </head>
  <body>
  </body>
</html>

Informacje o zgodności komponentów frontendowych

Komponenty frontendowe zależą od funkcji udostępnianych przez wersję on-premises FlightHub 2, dlatego konieczne jest uzyskanie projectToken i prjId wersji on-premises FlightHub 2. Metody uzyskania informacji są następujące:

projectToken: uzyskaj dostęp do wersji on-premises FlightHub 2, przejdź do Moja organizacja (wdrożona nazwa domeny FlightHub 2/user-center#/my-organization) > Ustawienia organizacji > FlightHub Sync, aby uzyskać klucz organizacji. Ta wartość klucza organizacji to projectToken.
prjId: uzyskaj dostęp do wersji on-premises FlightHub 2, kliknij listę projektów, wybierz projekt i znajdź identyfikator projektu w adresie URL. Na przykład: https://wdrożona nazwa domeny FlightHub 2/organization/4bf0039f-6434-44a8-b891-8d7b6b7ff132/project/aa9c7a78-4e97-4ced-8953-2cea96c07c00, gdzie 4bf0039f-6434-44a8-b891-8d7b6b7ff132 to orgId, a aa9c7a78-4e97-4ced-8953-2cea96c07c00 to prjId.

Przykład:

window.FH2.initConfig({
   serverUrl: 'http://Enter the domain name and backend service port here. Default port number is 30812',
   wssUrl: 'ws://Enter the domain name and backend service port here. Default port number is 30812/duplex/web',
   hostUrl: 'http://Enter the IP or domain name of the web page and the port number here',
 
   // Copy prjId value and paste here
   prjId: 'cdca2736-8096-4729-9bc7-497ad5b60d5e',
   // Copy projectToken value and paste here
   projectToken: 'MTczMDg4NDI1NHx1NUR3RWxNajc5VnF4QWJuY1BvZmxUenlwYzdnRnBUazFSQnRhMXZOODlPSlVrdFhQekdFTjJKb0I1UkNNUlhtaFR0M3k2WllBdWNJTFVGNDZ4eHp3aWJnSnZ0TjVhNDdNMDUtcUlNQmZRUEtKYjNHeWIyLVZNTm80Qzd6TnMyTUNNSmFsWjZVQ0tkVWtEOU1tWVB5cDNSeWhLQW1NUXJrSzhnQkJhVl9saW5Bazhwbl9KQzg2b2FmWUVULWJoMWowbWh2aEV5X1BtZW9pZm1sRGJmajNoa1QxN280emluNDk1eUFaTUw4ZEJMRmljczIxY0twVmZBNVhiMU81b3Y2UmlNY3dZazFHLTY4Q3ljdFJVdWZuUmVxUUo1VGxEcnJrYkFZNGlpTGVjdC1jNnprYU5nSkFpLWdRbXJ5M2JraEVGUlJJY3YwUUk1TUlDMzZDd2tRc2dlOHNIblFVaHNwb1ozVFJ2MmtoenhZa1pMN0RCbVk4QkVNOVNvaVN1NmszVGRBTE1MMWVLRE5wMFY5VmFrN0FJSzgtcjZaaUstaThwNU9yd0E0V05iNE15eWswc1lXRnFVUzJGZm1wdG0xR0k5WXB0TzRZZUpMeHhCNGVBNEZKZkdaTC1NUV9iRGtXR3EwNXBpOUlBSUd2WFBnYl8tbEJ0NV9qRTRtZG45SDJBZkdpUFZJSktrOFhhSkdqNHEtOUxaUXdvT2NSV0FhUklnQXdINFdFRHR3TGhrPXwr7HTdhghvb4TN9rYRlDyCE9Mzc4Q89m4H3_B24WRKVg=='
})

Uwaga

Upewnij się, że wywołanie window.FH2 jest wykonywane po całkowitym załadowaniu strony (load). Na przykład możesz użyć addEventListener('load', cb), aby zdefiniować funkcję wywołania zwrotnego cb i wywołać metodę window.FH2 w ramach tego wywołania zwrotnego.

Dodanie kontenera dla komponentu

Na przykład, aby dodać edytor tras, wstaw następujący kod w sekcji swojego kodu, w której ma być wyświetlany edytor tras:

<div class="fh2-container">
    <div id="wayline-header"></div>
    <div class="project-details">
        <div id="project-app-container"></div>
        <div id="project-middle-container"></div>
        <div id="project-right-micro-app" class="right-micro-app">
            <div class="maps-micro-app">
                <div id="project-map-app-placeholder" class="map-app-placeholder">
                    <div id="map-app-global" class="map-app-container"></div>
                </div>
            </div>
            <div id="wayline-app-container"></div>
        </div>
    </div>
</div>

Dodanie stylu kontenera komponentu

Poniżej znajdują się zalecane style kontenera, które można bezpośrednio użyć w docelowym obszarze kodu. Jeśli istnieją inne niestandardowe wymagania, możesz samodzielnie zmodyfikować kod stylów.

<!DOCTYPE html>
<html>
  <head>
    <!-- start -->
    <style>
        .fh2-container {
            display: flex;
            flex-direction: column;
            /* Set the width and height of the container where you want to load the component */
            height: 100vh;
            width: 100vw;
        }
 
        #project-app-container>div, .map-app-container>div {
            width: 100%;
            height: 100%;
        }
 
        .project-details {
            position: relative;
            width: 100%;
            display: flex;
            flex: 1;
            overflow: auto;
        }
 
        .project-details .right-micro-app {
            position: relative;
            display: flex;
            flex: 1;
        }
 
        .project-details .right-micro-app .maps-micro-app {
            display: flex;
            flex: 1;
        }
 
        .project-details .right-micro-app .map-app-placeholder {
            flex: 1;
            position: relative;
            display: flex;
            flex-direction: column;
        }
 
        .project-details .right-micro-app .map-app-container {
            height: 100%;
        }
 
        .project-details .right-micro-app #wayline-app-container {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            pointer-events: none;
        }
    </style>
    <title>Demo</title>
  </head>
  <body>
  </body>
</html>

Wczytywanie komponentów frontendowych

Na przykładzie edytora tras lotu możesz wczytać komponent, przekazując id i odpowiadający mu wayline_id do metody. Więcej szczegółów znajdziesz w Tutorialu interfejsów podręcznika.

window.FH2.loadWayline("wayline-app-container", {
      wayline_id: 'bded3cf1-c924-4cd0-95d0-4bd642ddda09',
})

Dostosowywanie elementów mapy (opcjonalnie)

Na przykładzie niestandardowego tekstu mapy możesz kliknąć Personalizuj mapę u góry wayline.html i pomniejszyć mapę, aby zobaczyć efekt.

<!DOCTYPE html>
<html>
  <head>
    <link href="./custom-style.css" rel="stylesheet">
  </head>
  <body>
    <div class="btn-bar">
        <button id="CesiumMapBtn" onclick="addCustomCesiumData()">Customize Map</button>
    </div>
    <script>
        const CesiumMapBtn = document.getElementById('CesiumMapBtn')
        CesiumMapBtn.style.display = 'none'
        window.addEventListener('load', function () {
            // Wait until the map instance is ready, and then display the map customization button
            window.FH2.subscribe('cesium-viewer-change', (key) => {
                if (window.FH2.cesiumViewer.global) {
                    CesiumMapBtn.style.display = 'inline-block'
                }
            })
        })
        
        // Example: Customize the map, adding custom text to the map
        function addCustomCesiumData () {
            for (const key in window.FH2.cesiumViewer) {
                if (Object.prototype.hasOwnProperty.call(window.FH2.cesiumViewer, key)) {
                    const ins = window.FH2.cesiumViewer[key].entities.add({
                        position: window.Cesium.Cartesian3.fromDegrees(113.93,  22.57, 50),
                        label: {
                            text: "User custom text",
                        },
                    })
                }
            }
        }
    </script>
  </body>
</html>

Dostosowywanie motywu (opcjonalnie)

Plik demo prezentuje możliwość dostosowywania stylów. Możesz modyfikować odpowiednie style motywu w custom-style.css i natychmiast zobaczyć efekty w czterech plikach HTML, w tym wayline.html. custom-style.css jest napisany w CSS, więc jeśli Twój projekt również używa CSS, możesz bezpośrednio dostosować zmienne stylów custom-style w ramach swojego projektu.

<!DOCTYPE html>
<html>
  <head>
    <link href="./custom-style.css" rel="stylesheet">
  </head>
  <body>
    <div class="btn-bar">
        <button onclick="changeTheme()">Customize Style</button>
    </div>
    <script>
        function changeTheme () {
            document.body.className = document.body.className ? '' : 'set-change-color'
        }
    </script>
  </body>
</html>

Dodanie nasłuchiwania zdarzeń (opcjonalnie)

Na przykładzie edytora tras lotu możesz subskrybować przycisk zapisywania i otrzymywać odpowiednie komunikaty podczas zapisywania lub anulowania trasy lotu.

window.FH2.subscribe('wayline-cancel', () => {
    console.log('Canceled saving flight route')
})
window.FH2.subscribe('wayline-save', () => {
    console.log('Flight route saved')
})

Tutorial interfejsów

Instancja: window.FH2

Metoda: validateToken

Parametr	Typ	Wymagane	Opis
token	string	true	Zwraca wynik weryfikacji tokena: true/false

Metoda: initConfig

Parametr	Typ	Wymagane	Opis
serverUrl	string	true	Adres usługi HTTP backendu
wssUrl	string	true	Adres usługi Duplex backendu
hostUrl	string	true	Adres wpisu web frontendu
prjId	string	true	ID projektu
projectToken	string	true	Token uwierzytelniania OpenAPI

Metoda: loadWaylineCreation

Parametr	Typ	Wymagane	Opis
domId	string	true	Frontend innej firmy dostarcza ID węzła DOM
props	Object<WaylineCreationConfig>	false	Szczegółowy opis parametrów znajduje się w tabeli poniżej: WaylineCreationConfig

Opis parametrów WaylineCreationConfig:

Parametr	Typ	Wymagane	Opis
folder_id	string	false	Folder, w którym przechowywana jest utworzona trasa lotu. Wartością jest ID folderu. Jeśli nie zostanie podana, zostanie użyty folder domyślny.

Metoda: destroyWaylineCreation

Parametr	Typ	Wymagane	Opis
-	-	-	Niszczy instancję komponentu tworzenia tras lotu

Metoda: loadWayline

Parametr	Typ	Wymagane	Opis
domId	string	true	Frontend innej firmy dostarcza ID węzła DOM
props	Object<WaylineConfig>	true	Szczegółowe opisy parametrów znajdują się w tabeli poniżej: WaylineConfig.

Opis parametrów WaylineConfig:

Parametr	Typ	Wymagane	Opis
wayline_id	string	true	ID trasy lotu

Metoda: destroyWayline

Parametr	Typ	Wymagane	Opis
isEffect	boolean	false	Niszczy instancję edytora tras lotu. Jeśli na bieżącej stronie znajduje się wiele komponentów, przekazanie true w celu zniszczenia instancji nie wpłynie na pozostałe wczytane komponenty. Jeśli nie zostanie przekazany żaden parametr, domyślnie false.

Metoda: loadCockpit

Parametr	Typ	Wymagane	Opis
domId	string	true	Frontend innej firmy dostarcza ID węzła DOM
props	Object<CockpitConfig>	true	Szczegółowy opis parametrów znajduje się w tabeli poniżej: CockpitConfig

Opis parametrów CockpitConfig:

Parametr	Typ	Wymagane	Opis
gatewaySn	string	true	SN bramki
droneSn	string	true	SN statku powietrznego
map	boolean	false	Czy wczytać mapę. Wartość domyślna to true. Ustawienie parametru metody na false uniemożliwia wczytanie mapy.

Metoda: destroyCockpit

Parametr	Typ	Wymagane	Opis
isEffect	boolean	false	Niszczy instancję wirtualnego kokpitu. Jeśli na bieżącej stronie znajduje się wiele komponentów, przekazanie true w celu zniszczenia instancji nie wpłynie na pozostałe wczytane komponenty. Jeśli nie zostanie przekazany żaden parametr, domyślnie false.

Metoda: loadProject

Parametr	Typ	Wymagane	Opis
domId	boolean	true	Wczytuje mapę projektu

Metoda: destroyProject

Parametr	Typ	Wymagane	Opis
-	-	-	Niszczy mapę projektu

Metoda: loadFlightPath

Parametr	Typ	Wymagane	Opis
domId	string	true	ID węzła DOM dostarczone przez frontend innej firmy
params	IFlightPathParams	true	Szczegóły parametrów znajdują się w tabeli poniżej: IFlightPathParams

Parametry IFlightPathParams:

Parametr	Typ	Wymagane	Opis
flight_path_id	string	true	ID trajektorii lotu

Metoda: destroyFlightPath

Parametr	Typ	Wymagane	Opis
-	-	-	Zwalnia rekord lotu

Metoda: subscribe

Parametr	Typ	Wymagane	Opis
eventName	string	true	Subskrybuj zdarzenia: - wayline-save: wyzwalane podczas zapisywania trasy lotu, a parametr wywołania zwrotnego to ID pomyślnie zapisanej trasy lotu - wayline-cancel: wyzwalane podczas anulowania zapisu trasy lotu, a parametr wywołania zwrotnego to ID trasy lotu - wayline-back: wyzwalane po kliknięciu przycisku wstecz na komponencie edytora tras lotu, a parametr wywołania zwrotnego to ID trasy lotu - wayline-creation-saved: wyzwalane podczas zapisywania komponentu tworzenia tras lotu, a parametr wywołania zwrotnego to ID pomyślnie zapisanej trasy lotu - wayline-creation-cancel: wyzwalane podczas anulowania zapisu komponentu tworzenia tras lotu - cesium-viewer-change: wyzwalane podczas wykrywania zmian w wczytywaniu każdej mapy Cesium - flight-path-back: wyzwalane po powrocie z rekordu lotu
callback	string	false	Przekazuje bieżące ID trasy lotu

Metoda: cesiumViewer

Typ	Wyjaśnienie
{ [key: string]: CesiumViewer }	Ta metoda zapewnia dostęp do wszystkich instancji Cesium Viewer na bieżącej stronie. Wartości kluczy obecnie obejmują: - global: mapa główna - wayline_editor_support: mapa pomocnicza w komponencie edytora tras lotu.

Instancja: window.Cesium

Natywne obiekty Cesium można uzyskać bezpośrednio przez obiekt window, więc użytkownicy nie muszą samodzielnie importować cesium.js.

FAQ

Dlaczego wywołanie FH2 powoduje błąd 'property undefined'?

Upewnij się, że wywołujesz metodę window.FH2 po załadowaniu strony (load). Możesz również użyć w celu zdefiniowania funkcji wywołania zwrotnego i wywołać window.FH2 w ramach tego wywołania zwrotnego.

Dlaczego kolor tła body strony internetowej zmienia się na biały po wczytaniu komponentu FlightHub 2?

Obecnie wczytanie komponentu FlightHub 2 stosuje globalny styl do koloru tła body, co może nadpisać oryginalny styl witryny. W takim przypadku musisz ustawić styl o wyższym priorytecie dla koloru tła witryny, na przykład używając stylu !important.

Dlaczego użycie komponentu FlightHub 2 powoduje niedokładne pozycjonowanie niektórych elementów interfejsu?

Na przykład podczas dodawania punktów kontrolnych, adnotacji i komunikatów w edytorze tras lotu pozycjonowanie niektórych elementów jest niedokładne. Rozwiązanie: upewnij się, że kontener komponentu i jego kontenery nadrzędne nie mają następujących właściwości stylów: 1. transform lub perspective nie jest none; 2. filter nie jest none; 3. will-change to transform lub perspective; 4. contain to paint

Jak wykonać wnioskowanie TypeScript?

Zapoznaj się z następującym kodem:

export type eventName = 'wayline-save' | 'wayline-cancel' | 'cesium-viewer-change'
export interface IWaylineParams {
  wayline_id: string;
}
 
export interface ICockpitParams {
  gateway_sn: string;
  drone_sn: string;
}
 
export interface IFH2Config {
  userId: string;
  orgId: string;
  prjId: string;
  serverUrl: string;
  wssUrl: string;
  hostUrl: string;
  token?: string;
}
export interface FH2 extends Record<string, any> {
  validateToken: (token: string) => boolean;
  initConfig: (config: IFH2Config) => void;
  subscribe: (eventName: eventName, callback: (...args: any[]) => void) => void;
  unsubscribe: (eventName: eventName) => void;
  destroyWayline: () => void;
  loadWayline: (domId: string, routerName: string, params?: IWaylineParams) => void;
  updateWayline: (routerName: string, params?: IWaylineParams) => void;
}

Integracja komponentów frontendu

# Podstawowe wprowadzenie

# Wprowadzenie do komponentów frontendowych

# Przygotowanie przed rozpoczęciem

# Szybki start

# Tutorial

# Dodanie wymaganych stylów i zależności

# Informacje o zgodności komponentów frontendowych

#

# Dodanie kontenera dla komponentu

# Dodanie stylu kontenera komponentu

# Wczytywanie komponentów frontendowych

# Dostosowywanie elementów mapy (opcjonalnie)

# Dostosowywanie motywu (opcjonalnie)

# Dodanie nasłuchiwania zdarzeń (opcjonalnie)

# Tutorial interfejsów

# Instancja: window.FH2

# Instancja: window.Cesium

# FAQ