Frontend-Komponenten-Integration

Grundlegende Einführung

Einführung in Frontend-Komponenten

Die DJI FlightHub 2 Frontend-Komponenten umfassen: Flugrouten-Erstellung, Flugrouten-Editor, virtuelles Cockpit und Projekt/Karte. Diese Komponenten unterstützen benutzerdefinierte Designs und Stile. Dieses Handbuch erläutert, wie Sie diese Komponenten von Grund auf in Ihr eigenes System integrieren können.

Vorbereitung vor dem Starten

Technologie-Stack: React, Vue und HTML + CSS werden alle unterstützt.
Hardware-Anforderungen: Beachten Sie das Bereitstellungshandbuch der DJI FlightHub 2 On-Premises Version zur Bereitstellung der FlightHub 2 On-Premises Version.

Schnellstart

Die aktuelle Version bietet hauptsächlich die folgenden Komponenten und entsprechende Funktionssammlungen. Sie können die Demo herunterladen und sich für Konfiguration und Fehlerbehebung auf dieses Handbuch beziehen.

Die veröffentlichten Komponenten sind wie folgt:

Komponente	Funktionssammlung	Funktions-Screenshot
Flugrouten-Erstellung	Flugrouten-Typen: - Wegpunkt-Route - Flächenroute - Hangroute - Geometrische Route - Smart 3D Capture Route Stil-Anpassung
Flugrouten-Editor	Flugrouten-Typen: - Wegpunkt-Route - Flächenroute - Hangroute - Geometrische Route - Smart 3D Capture Route Flugrouten-Funktionen: - Flugroutenbearbeitung und Speichern - Kartenanmerkungen - Cesium öffnen - Punkt-, Linien-, Flächenanmerkungen - Modellladen Stil-Anpassung
Virtuelles Cockpit	Fernsteuerungsfunktionen: - Start mit einem Klick - Livestream - Manueller Flug und Flugbahn-Anzeige durch Drücken der WASD-Tasten - Rückkehr mit einem Klick Stil-Anpassung
Projekt/Karte	Projektdaten der Karte: - Punkt-, Linien-, Flächenanmerkungen - Flugrouten- und Flugbahnplanung - Benutzerdefinierter Aufgabenbereich, benutzerdefiniertes Flugbeschränkungsgebiet - Projekt-Geräteliste - Dock-Fluggerät - Manuelles Fluggerät

Tutorial

Erforderliche Stile und Abhängigkeiten hinzufügen

Nach Abschluss der Bereitstellung der lokalen Version von FlightHub 2 erhalten Sie eine private IP-Adresse. Geben Sie diese private IP-Adresse oder den Domänennamen und Anschluss in den HEAD-Abschnitt des Codeblocks ein.

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

Compliance Info für Frontend-Komponenten

Die Frontend-Komponenten sind abhängig von Funktionen, die von der lokalen Version von FlightHub 2 bereitgestellt werden, daher ist es notwendig, das projectToken und die prjId der lokalen Version von FlightHub 2 zu erhalten. Sie können die Informationen folgendermaßen erhalten:

projectToken: Greifen Sie auf die lokale Version von FlightHub 2 zu, gehen Sie zu „Meine Organisation“ (bereitgestellter FlightHub 2 Domainname/user-center#/my-organization) > Organisationseinstellungen > FlightHub Sync, um den Organisationsschlüssel zu erhalten. Dieser Organisationsschlüsselwert ist projectToken.
prjId: Greifen Sie auf die lokale Version von FlightHub 2 zu, klicken Sie auf die Projektliste, wählen Sie ein Projekt aus und finden Sie die Projekt-ID in der URL. Zum Beispiel: https://deployed FlightHub 2 domain name/organization/4bf0039f-6434-44a8-b891-8d7b6b7ff132/project/aa9c7a78-4e97-4ced-8953-2cea96c07c00, where 4bf0039f-6434-44a8-b891-8d7b6b7ff132 is the orgId, and aa9c7a78-4e97-4ced-8953-2cea96c07c00 is the prjId.

Beispiel:

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

Hinweis

Stellen Sie sicher, dass der Aufruf von window.FH2 ausgeführt wird, nachdem die Seite vollständig geladen wurde (load). Zum Beispiel können Sie addEventListener('load', cb) verwenden, um eine Callback-Funktion cb zu definieren und die window.FH2-Methode innerhalb dieses Callbacks aufzurufen.

Fügen Sie einen Container für die Komponente hinzu

Um einen Routeneditor hinzuzufügen, fügen Sie zum Beispiel den folgenden Code in den Bereich Ihres Codes ein, in dem der Routeneditor angezeigt werden soll:

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

Fügen Sie den Stil des Komponenten-Containers hinzu

Nachfolgend sind die empfohlenen Container-Stile aufgeführt, die direkt im Zielcodebereich verwendet werden können. Wenn es andere benutzerdefinierte Anforderungen gibt, können Sie den Stilcode selbst ändern.

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

Frontend-Komponenten laden

Am Beispiel des Flugrouten-Editors können Sie die Komponente laden, indem Sie die id und die entsprechende wayline_id an die Methode übergeben. Weitere Details finden Sie im Interface Tutorial des Handbuchs.

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

Kartenelemente anpassen (Optional)

Am Beispiel von benutzerdefiniertem Kartentext können Sie oben in wayline.html auf Customize Map klicken und die Karte verkleinern, um den Effekt zu sehen.

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

Design anpassen (Optional)

Die Demo-Datei zeigt die Möglichkeit, Stile anzupassen. Sie können entsprechende Designstile in custom-style.css ändern und die Auswirkungen sofort in allen vier HTML-Dateien, einschließlich wayline.html, sehen. custom-style.css ist in CSS geschrieben. Wenn Ihr Projekt also ebenfalls CSS verwendet, können Sie die Stilvariablen custom-style direkt in Ihrem Projekt anpassen.

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

Event-Listener hinzufügen (Optional)

Am Beispiel des Flugrouten-Editors können Sie die Schaltfläche „Speichern“ abonnieren und entsprechende Meldungen beim Speichern oder Abbrechen der Flugroute erhalten.

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

Schnittstellen-Tutorial

Instanz: window.FH2

Methode: validateToken

Parameter	Typ	Erforderlich	Beschreibung
Token	String	true	Gibt das Ergebnis der Token-Validierung zurück: true/false

Methode: initConfig

Parameter	Typ	Erforderlich	Beschreibung
serverUrl	String	true	Adresse des Backend-HTTP-Dienstes
wssUrl	String	true	Adresse des Backend-Duplex-Dienstes
hostUrl	String	true	Adresse des Frontend-Web-Einstiegs
prjId	String	true	Projekt-ID
projectToken	String	true	OpenAPI-Authentifizierungstoken

Methode: loadWaylineCreation

Parameter	Typ	Erforderlich	Beschreibung
domId	String	true	Das Frontend eines Drittanbieters stellt die DOM-Knoten-ID bereit
props	Object<WaylineCreationConfig>	false	Eine detaillierte Parameterbeschreibung finden Sie in der folgenden Tabelle: WaylineCreationConfig

Parameterbeschreibung von WaylineCreationConfig:

Parameter	Typ	Erforderlich	Beschreibung
folder_id	String	false	Der Ordner, in dem die erstellte Flugroute gespeichert wird. Der Wert ist die Ordner-ID. Wenn dieser Wert nicht angegeben wird, ist dies der Standardordner.

Methode: destroyWaylineCreation

Parameter	Typ	Erforderlich	Beschreibung
-	-	-	Instanz der Komponente zur Flugrouten-Erstellung löschen

Methode: loadWayline

Parameter	Typ	Erforderlich	Beschreibung
domId	String	true	Das Frontend eines Drittanbieters stellt die DOM-Knoten-ID bereit
props	Object<WaylineConfig>	true	Eine detaillierte Parameterbeschreibungen finden Sie in der folgenden Tabelle: WaylineConfig.

WaylineConfig Parameterbeschreibung:

Parameter	Typ	Erforderlich	Beschreibung
wayline_id	String	true	Wayline-ID

Methode: destroyWayline

Parameter	Typ	Erforderlich	Beschreibung
isEffect	boolesch	false	Instanz des Flugrouten-Editors löschen. Wenn auf der aktuellen Seite mehrere Komponenten vorhanden sind, hat die Übergabe von „true“ zum Löschen der Instanz keine Auswirkungen auf andere geladene Komponenten. Wenn dieser Wert nicht angegeben wird, wird standardmäßig „false“ ausgewählt.

Methode :loadCockpit

Parameter	Typ	Erforderlich	Beschreibung
domId	String	true	Das Frontend eines Drittanbieters stellt die DOM-Knoten-ID bereit
props	Object<CockpitConfig>	true	Eine detaillierte Beschreibung der Parameter finden Sie in der folgenden Tabelle: CockpitConfig

Beschreibung der CockpitConfig-Parameter:

Parameter	Typ	Erforderlich	Beschreibung
gatewaySn	String	true	Gateway-Seriennummer
droneSn	String	true	Seriennummer des Fluggeräts
Karte	boolesch	false	Ob die Karte geladen werden soll. Der Standardwert ist „true“. Das Setzen des Methodenparameters auf „false“ verhindert das Laden der Karte.

Methode: destroyCockpit

Parameter	Typ	Erforderlich	Beschreibung
isEffect	boolesch	false	Instanz des virtuellen Cockpits löschen. Wenn auf der aktuellen Seite mehrere Komponenten vorhanden sind, hat die Übergabe von „true“ zum Löschen der Instanz keine Auswirkungen auf andere geladene Komponenten. Wenn dieser Wert nicht angegeben wird, wird standardmäßig „false“ ausgewählt.

Methode: loadProject

Parameter	Typ	Erforderlich	Beschreibung
domId	boolesch	true	Projektkarte laden

Methode: destroyProject

Parameter	Typ	Erforderlich	Beschreibung
-	-	-	Projektkarte zerstören

Methode: loadFlightPath

Parameter	Typ	Erforderlich	Beschreibung
domId	String	true	Vom Drittanbieter-Frontend bereitgestellte DOM-Knoten-ID
params	IFlightPathParams	true	Detaillierte Parameterbeschreibung siehe folgende Tabelle: IFlightPathParams

IFlightPathParams-Parameter:

Parameter	Typ	Erforderlich	Beschreibung
flight_path_id	String	true	Flugpfad-ID

Methode: destroyFlightPath

Parameter	Typ	Erforderlich	Beschreibung
-	-	-	Flugaufzeichnung entladen

Methode: subscribe

Parameter	Typ	Erforderlich	Beschreibung
eventName	String	true	Events abonnieren: - wayline-save: Wird ausgelöst, wenn eine Flugroute gespeichert wird, und der Callback-Parameter ist die ID der erfolgreich gespeicherten Flugroute - wayline-cancel: Wird ausgelöst, wenn das Speichern einer Flugroute abgebrochen wird, und der Callback-Parameter ist die ID der Flugroute - wayline-back: Wird ausgelöst, wenn auf die Schaltfläche „Zurück“ in der Flugrouten-Editor-Komponente geklickt wird, und der Callback-Parameter ist die ID der Flugroute - wayline-creation-saved: Wird ausgelöst, wenn eine Flugrouten-Erstellungs-Komponente gespeichert wird, und der Callback-Parameter ist die ID der erfolgreich gespeicherten Flugroute - wayline-creation-cancel: Wird ausgelöst, wenn das Speichern einer Flugrouten-Erstellungs-Komponente abgebrochen wird - cesium-viewer-change: Wird ausgelöst, wenn Änderungen beim Laden jeder Cesium-Karte erkannt werden - flight-path-back: Wird ausgelöst bei der Rückkehr aus der Flugaufzeichnung
Callback	String	false	Die aktuelle Flugrouten-ID übergeben

Methode: cesiumViewer

Typ	Erklärung
{ [key: string]: CesiumViewer }	Diese Methode bietet Zugriff auf alle Cesium Viewer-Instanzen auf der aktuellen Seite. Die Schlüsselwerte umfassen derzeit: - global: Hauptkarte - wayline_editor_support: Hilfskarte in der Flugrouten-Editor-Komponente.

Instanz: window.Cesium

Native Cesium-Objekte können direkt über das window-Objekt aufgerufen werden, sodass Sie cesium.js nicht selbst importieren müssen.

FAQs

Warum führt der Aufruf von FH2 zu einem Fehler „property undefined“?

Stellen Sie sicher, dass Sie die Methode window.FH2 aufrufen, nachdem die Seite geladen wurde (load). Sie können auch verwenden, um eine Callback-Funktion zu definieren und window.FH2 innerhalb dieses Callbacks aufrufen.

Warum wird die Hintergrundfarbe des Body-Elements der Website weiß, nachdem die FlightHub 2 Komponente geladen wurde?

Derzeit wendet das Laden der FlightHub 2 Komponente einen globalen Stil auf die Hintergrundfarbe des Body-Elements an, was den ursprünglichen Website-Stil überschreiben kann. In diesem Fall müssen Sie einen Stil mit höherer Priorität für die Hintergrundfarbe der Website festlegen, wie z. B. die Verwendung des !important-Stils.

Warum führt die Verwendung der FlightHub 2 Komponente dazu, dass einige Benutzeroberflächenelemente ungenau positioniert sind?

Zum Beispiel ist beim Hinzufügen von Wegpunkten, Anmerkungen und Meldungsaufforderungen im Flugrouten-Editor die Positionierung einiger Elemente ungenau. Lösung: Stellen Sie sicher, dass der Komponenten-Container und seine übergeordneten Container nicht die folgenden Stil-Eigenschaften aufweisen: 1. transform oder perspective nicht none ist; 2. filter nicht none ist; 3. will-change transform oder perspective ist; 4. contain paint ist

Wie führt man eine TypeScript-Inferenz durch?

Beziehen Sie sich auf den folgenden Code:

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

Frontend-Komponenten-Integration

# Grundlegende Einführung

# Einführung in Frontend-Komponenten

# Vorbereitung vor dem Starten

# Schnellstart

# Tutorial

# Erforderliche Stile und Abhängigkeiten hinzufügen

# Compliance Info für Frontend-Komponenten

#

# Fügen Sie einen Container für die Komponente hinzu

# Fügen Sie den Stil des Komponenten-Containers hinzu

# Frontend-Komponenten laden

# Kartenelemente anpassen (Optional)

# Design anpassen (Optional)

# Event-Listener hinzufügen (Optional)

# Schnittstellen-Tutorial

# Instanz: window.FH2

# Instanz: window.Cesium

# FAQs