Introduzione di base

Introduzione ai componenti frontend

I componenti frontend di DJI FlightHub 2 includono: creazione di rotte di volo, editor di rotte di volo, cockpit virtuale e progetto/mappa. Questi componenti supportano temi e stili personalizzati. Questo manuale illustra come integrare questi componenti nel tuo sistema da zero.

Preparazione prima di iniziare

• Stack tecnologico: sono supportati React, Vue e HTML + CSS.
• Requisiti hardware: fai riferimento al Manuale di distribuzione della versione On-Premises di DJI FlightHub 2 per distribuire la versione On-Premises di FlightHub 2.

Guida rapida

La versione corrente offre principalmente i seguenti componenti e relativi insiemi di funzionalità. Puoi scaricare la Demo e fare riferimento a questo manuale per la configurazione e il debug.

I componenti rilasciati sono i seguenti:

Componente	Insieme di funzionalità	Screenshot delle funzionalità
Creazione di rotte di volo	Tipi di rotte di volo: - Rotte waypoint - Rotte ad area - Rotte in pendenza - Rotte geometriche - Rotte Smart 3D Capture Personalizzazione dello stile
Editor di rotte di volo	Tipi di rotte di volo: - Rotte waypoint - Rotte ad area - Rotte in pendenza - Rotte geometriche - Rotte Smart 3D Capture Funzioni delle rotte di volo: - Modifica e salvataggio delle rotte di volo - Annotazioni sulla mappa - Apertura Cesium - Annotazioni di punti, linee e aree - Caricamento dei modelli Personalizzazione dello stile
Cockpit virtuale	Funzioni di controllo remoto: - Decollo con un clic - Livestream - Volo manuale e visualizzazione della traiettoria premendo i tasti WASD - RTH con un clic Personalizzazione dello stile
Progetto/Mappa	Dati della mappa del progetto: - Annotazioni di punti, linee e aree - Pianificazione di rotte di volo e traiettorie - Area attività personalizzata, Zona di restrizione personalizzata - Elenco dei dispositivi del progetto - Aeromobile del dock - Aeromobile a volo manuale

Tutorial

Aggiungere gli stili e le dipendenze richiesti

Dopo aver completato la distribuzione della versione on-premises di FlightHub 2, riceverai un IP privato. Inserisci questo IP privato o nome di dominio e porta nella sezione HEAD del blocco di codice.

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

Informazioni sulla conformità dei componenti frontend

I componenti frontend dipendono dalle funzionalità fornite dalla versione on-premises di FlightHub 2, quindi è necessario ottenere projectToken e prjId della versione on-premises di FlightHub 2. I metodi per ottenere le informazioni sono i seguenti:

• projectToken: accedi alla versione on-premises di FlightHub 2, vai su La mia organizzazione (dominio di FlightHub 2 distribuito/user-center#/my-organization) > Impostazioni dell'organizzazione > FlightHub Sync per ottenere la chiave dell'organizzazione. Questo valore della chiave dell'organizzazione è projectToken.

• prjId: accedi alla versione on-premises di FlightHub 2, fai clic sull'elenco dei progetti, seleziona un progetto e trova l'ID del progetto nell'URL. Ad esempio: https://dominio di FlightHub 2 distribuito/organization/4bf0039f-6434-44a8-b891-8d7b6b7ff132/project/aa9c7a78-4e97-4ced-8953-2cea96c07c00, dove 4bf0039f-6434-44a8-b891-8d7b6b7ff132 è l'orgId e aa9c7a78-4e97-4ced-8953-2cea96c07c00 è il prjId.

#

Esempio:

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=='
})

Nota

Assicurati che la chiamata di window.FH2 venga eseguita dopo il caricamento completo della pagina (load). Ad esempio, puoi utilizzare addEventListener('load', cb) per definire una funzione di callback cb e chiamare il metodo window.FH2 all'interno di questa callback.

Aggiungere un contenitore per il componente

Ad esempio, per aggiungere un editor di rotte, inserisci il seguente codice nella sezione del tuo codice in cui desideri che l'editor di rotte venga visualizzato:

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

Aggiungere lo stile del contenitore del componente

Di seguito sono riportati gli stili consigliati per il contenitore, che possono essere utilizzati direttamente nell'area di codice di destinazione. Se ci sono altri requisiti personalizzati, puoi modificare tu stesso il codice degli stili.

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

Caricare i componenti frontend

Utilizzando l'editor di rotte di volo come esempio, puoi caricare il componente passando id e il corrispondente wayline_id al metodo. Per maggiori dettagli, fai riferimento al Tutorial delle interfacce del manuale.

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

Personalizzare gli elementi della mappa (facoltativo)

Utilizzando il testo personalizzato della mappa come esempio, puoi fare clic su Personalizza mappa nella parte superiore di wayline.html e ridurre la mappa per vedere l'effetto.

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

Personalizzare il tema (facoltativo)

Il file demo mostra la capacità di personalizzare gli stili. Puoi modificare i temi corrispondenti in custom-style.css e vedere immediatamente gli effetti nei quattro file HTML, incluso wayline.html. custom-style.css è scritto utilizzando CSS, quindi se anche il tuo progetto utilizza CSS, puoi modificare direttamente le variabili di stile custom-style all'interno del tuo progetto.

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

Aggiungere un listener di eventi (facoltativo)

Utilizzando l'editor di rotte di volo come esempio, puoi sottoscrivere il pulsante di salvataggio e ricevere i relativi prompt durante il salvataggio o l'annullamento della rotta di volo.

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

Tutorial delle interfacce

Istanza: window.FH2

Metodo: validateToken

Parametro	Tipo	Obbligatorio	Descrizione
token	string	true	Restituisce il risultato della validazione del token: true/false

Metodo: initConfig

Parametro	Tipo	Obbligatorio	Descrizione
serverUrl	string	true	Indirizzo del servizio HTTP del backend
wssUrl	string	true	Indirizzo del servizio Duplex del backend
hostUrl	string	true	Indirizzo dell'ingresso web del frontend
prjId	string	true	ID del progetto
projectToken	string	true	Token di autenticazione OpenAPI

Metodo: loadWaylineCreation

Parametro	Tipo	Obbligatorio	Descrizione
domId	string	true	Il frontend di terze parti fornisce l'ID del nodo DOM
props	Object<WaylineCreationConfig>	false	Per la descrizione dettagliata dei parametri, vedi la tabella seguente: WaylineCreationConfig

Descrizione dei parametri di WaylineCreationConfig:

Parametro	Tipo	Obbligatorio	Descrizione
folder_id	string	false	La cartella in cui viene salvata la rotta di volo creata. Il valore è l'ID della cartella. Se non viene fornito, verrà utilizzata la cartella predefinita.

Metodo: destroyWaylineCreation

Parametro	Tipo	Obbligatorio	Descrizione
-	-	-	Distrugge l'istanza del componente di creazione delle rotte di volo

Metodo: loadWayline

Parametro	Tipo	Obbligatorio	Descrizione
domId	string	true	Il frontend di terze parti fornisce l'ID del nodo DOM
props	Object<WaylineConfig>	true	Per le descrizioni dettagliate dei parametri, vedi la tabella seguente: WaylineConfig.

Descrizione dei parametri di WaylineConfig:

Parametro	Tipo	Obbligatorio	Descrizione
wayline_id	string	true	ID della rotta di volo

Metodo: destroyWayline

Parametro	Tipo	Obbligatorio	Descrizione
isEffect	boolean	false	Distrugge l'istanza dell'editor di rotte di volo. Se nella pagina corrente sono presenti più componenti, passare true per distruggere l'istanza non influirà sugli altri componenti caricati. Se non viene passato alcun parametro, il valore predefinito è false.

Metodo: loadCockpit

Parametro	Tipo	Obbligatorio	Descrizione
domId	string	true	Il frontend di terze parti fornisce l'ID del nodo DOM
props	Object<CockpitConfig>	true	Per la descrizione dettagliata dei parametri, vedi la tabella seguente: CockpitConfig

Descrizione dei parametri di CockpitConfig:

Parametro	Tipo	Obbligatorio	Descrizione
gatewaySn	string	true	SN del gateway
droneSn	string	true	SN dell'aeromobile
map	boolean	false	Se caricare la mappa. Il valore predefinito è true. Impostando il parametro del metodo su false si impedisce il caricamento della mappa.

Metodo: destroyCockpit

Parametro	Tipo	Obbligatorio	Descrizione
isEffect	boolean	false	Distrugge l'istanza del cockpit virtuale. Se nella pagina corrente sono presenti più componenti, passare true per distruggere l'istanza non influirà sugli altri componenti caricati. Se non viene passato alcun parametro, il valore predefinito è false.

Metodo: loadProject

Parametro	Tipo	Obbligatorio	Descrizione
domId	boolean	true	Carica la mappa del progetto

Metodo: destroyProject

Parametro	Tipo	Obbligatorio	Descrizione
-	-	-	Distrugge la mappa del progetto

Metodo: loadFlightPath

Parametro	Tipo	Obbligatorio	Descrizione
domId	string	true	ID del nodo DOM fornito dal frontend di terze parti
params	IFlightPathParams	true	Vedi la tabella seguente per i dettagli dei parametri: IFlightPathParams

Parametri di IFlightPathParams:

Parametro	Tipo	Obbligatorio	Descrizione
flight_path_id	string	true	ID della traiettoria di volo

Metodo: destroyFlightPath

Parametro	Tipo	Obbligatorio	Descrizione
-	-	-	Scarica il record di volo

Metodo: subscribe

Parametro	Tipo	Obbligatorio	Descrizione
eventName	string	true	Sottoscrivi gli eventi: - wayline-save: attivato durante il salvataggio di una rotta di volo e il parametro di callback è l'ID della rotta di volo salvata con successo - wayline-cancel: attivato quando viene annullato il salvataggio di una rotta di volo e il parametro di callback è l'ID della rotta di volo - wayline-back: attivato quando si fa clic sul pulsante indietro del componente editor di rotte di volo e il parametro di callback è l'ID della rotta di volo - wayline-creation-saved: attivato durante il salvataggio di un componente di creazione di rotte di volo e il parametro di callback è l'ID della rotta di volo salvata con successo - wayline-creation-cancel: attivato quando viene annullato il salvataggio di un componente di creazione di rotte di volo - cesium-viewer-change: attivato quando vengono rilevate modifiche nel caricamento di ciascuna mappa Cesium - flight-path-back: attivato al ritorno dal record di volo
callback	string	false	Passa l'ID corrente della rotta di volo

Metodo: cesiumViewer

Tipo	Spiegazione
{ [key: string]: CesiumViewer }	Questo metodo fornisce l'accesso a tutte le istanze di Cesium Viewer nella pagina corrente. I valori delle chiavi attualmente includono: - global: mappa principale - wayline_editor_support: mappa ausiliaria nel componente editor di rotte di volo.

Istanza: window.Cesium

Gli oggetti nativi di Cesium possono essere accessibili direttamente tramite l'oggetto window, quindi gli utenti non devono importare cesium.js da soli.

FAQ

• Perché la chiamata a FH2 genera un errore 'property undefined'?

Assicurati di chiamare il metodo window.FH2 dopo il caricamento della pagina (load). Puoi anche utilizzare per definire una funzione di callback e chiamare window.FH2 all'interno di questa callback.

• Perché il colore di sfondo del body della pagina web diventa bianco dopo il caricamento del componente FlightHub 2?

Attualmente, il caricamento del componente FlightHub 2 applica uno stile globale al colore di sfondo del body, che potrebbe sovrascrivere lo stile originale del sito. In questo caso, devi impostare uno stile con priorità più alta per il colore di sfondo del sito, ad esempio utilizzando lo stile !important.

• Perché l'utilizzo del componente FlightHub 2 causa un posizionamento impreciso di alcuni elementi dell'interfaccia?

Ad esempio, quando aggiungi waypoint, annotazioni e prompt dei messaggi nell'editor di rotte di volo, il posizionamento di alcuni elementi è impreciso. Soluzione: assicurati che il contenitore del componente e i suoi contenitori parent non abbiano le seguenti proprietà di stile: 1. transform o perspective non è none; 2. filter non è none; 3. will-change è transform o perspective; 4. contain è paint

• Come eseguire l'inferenza TypeScript?

Fai riferimento al seguente codice:

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;
}