Introducción básica

Introducción a los componentes de Frontend

Los componentes de frontend de DJI FlightHub 2 incluyen: creación de rutas de vuelo, editor de rutas de vuelo, cabina virtual y proyecto/mapa. Estos componentes admiten temas y estilos personalizados. Este manual hablará sobre cómo integrar estos componentes en su propio sistema desde cero.

Preparación antes de comenzar

• Stack tecnológico: Son compatibles React, Vue y HTML + CSS.
• Requisitos de hardware: Consulte el Manual de despliegue de la versión local de DJI FlightHub 2 para desplegar la versión local de FlightHub 2.

Inicio rápido

La versión actual ofrece principalmente los siguientes componentes y colecciones de características correspondientes. Puede descargar la Demo y consultar este manual con fines de configuración y depuración.

Los componentes lanzados son los siguientes:

Componente	Colección de características	Captura de pantalla de características
Creación de rutas de vuelo	Tipos de rutas de vuelo: - Ruta de puntos de trayectoria - Ruta de área - Ruta de pendiente - Ruta geométrica - Ruta de captura 3D inteligente Personalización de estilo
Editor de rutas de vuelo	Tipos de rutas de vuelo: - Ruta de puntos de trayectoria - Ruta de área - Ruta de pendiente - Ruta geométrica - Ruta de captura 3D inteligente Funciones de ruta de vuelo - Edición y guardado de ruta de vuelo - Anotaciones en el mapa - Cesium abierto - Anotaciones de punto, línea, área - Carga de modelos Personalización de estilo
Cabina virtual	Funciones del control remoto: - Despegue con un clic - Transmisión en directo - Vuelo manual y visualización de trayectoria presionando las teclas WASD - RPO con un clic Personalización de estilo
Proyecto/mapa	Datos del mapa del proyecto: - Anotaciones de punto, línea, área - Planificación de ruta de vuelo y trayectoria - Área de tarea personalizada, zona restringida personalizada - Lista de dispositivos del proyecto - Aeronave de dock - Aeronave de vuelo manual

Tutorial

Añadir estilos y dependencias requeridos

Después de completar la implementación de la versión local de FlightHub 2, recibirá una IP privada. Introduzca esta IP privada o nombre de dominio y puerto en la sección HEAD del bloque de código.

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

Información de conformidad de componentes de Frontend

Los componentes de frontend dependen de las capacidades proporcionadas por la versión local de FlightHub 2, por lo que es necesario obtener el projectToken y prjId de la versión local de FlightHub 2. Los métodos para obtener la información son los siguientes:

• projectToken: Acceda a la versión local de FlightHub 2, vaya a Mi organización (nombre de dominio de FlightHub 2 desplegado/user-center#/my-organization) > Configuración de la organización > FlightHub Sync para obtener la clave de la organización. Este valor clave de la organización es projectToken.

• prjId: Acceda a la versión local de FlightHub 2, haga clic en la lista de proyectos, seleccione un proyecto y encuentre el ID del proyecto en la URL. Por ejemplo: https://nombre de dominio de FlightHub 2 desplegado/organization/4bf0039f-6434-44a8-b891-8d7b6b7ff132/project/aa9c7a78-4e97-4ced-8953-2cea96c07c00, donde 4bf0039f-6434-44a8-b891-8d7b6b7ff132 es el orgId y aa9c7a78-4e97-4ced-8953-2cea96c07c00 es el prjId.

#

Ejemplo:

window.FH2.initConfig({
    serverUrl: 'http://Introduzca aquí el nombre de dominio y el puerto del servicio backend. El número de puerto predeterminado es 30812',
    wssUrl: 'ws://Introduzca aquí el nombre de dominio y el puerto del servicio backend. El número de puerto predeterminado es 30812/duplex/web',
    hostUrl: 'http://Introduzca la IP o el nombre de dominio de la página web y el número de puerto aquí',
 
    // Copie el valor de prjId y péguelo aquí
    prjId: 'cdca2736-8096-4729-9bc7-497ad5b60d5e',
    // Copie el valor de projectToken y péguelo aquí
    projectToken: 'MTczMDg4NDI1NHx1NUR3RWxNajc5VnF4QWJuY1BvZmxUenlwYzdnRnBUazFSQnRhMXZOODlPSlVrdFhQekdFTjJKb0I1UkNNUlhtaFR0M3k2WllBdWNJTFVGNDZ4eHp3aWJnSnZ0TjVhNDdNMDUtcUlNQmZRUEtKYjNHeWIyLVZNTm80Qzd6TnMyTUNNSmFsWjZVQ0tkVWtEOU1tWVB5cDNSeWhLQW1NUXJrSzhnQkJhVl9saW5Bazhwbl9KQzg2b2FmWUVULWJoMWowbWh2aEV5X1BtZW9pZm1sRGJmajNoa1QxN280emluNDk1eUFaTUw4ZEJMRmljczIxY0twVmZBNVhiMU81b3Y2UmlNY3dZazFHLTY4Q3ljdFJVdWZuUmVxUUo1VGxEcnJrYkFZNGlpTGVjdC1jNnprYU5nSkFpLWdRbXJ5M2JraEVGUlJJY3YwUUk1TUlDMzZDd2tRc2dlOHNIblFVaHNwb1ozVFJ2MmtoenhZa1pMN0RCbVk4QkVNOVNvaVN1NmszVGRBTE1MMWVLRE5wMFY5VmFrN0FJSzgtcjZaaUstaThwNU9yd0E0V05iNE15eWswc1lXRnFVUzJGZm1wdG0xR0k5WXB0TzRZZUpMeHhCNGVBNEZKZkdaTC1NUV9iRGtXR3EwNXBpOUlBSUd2WFBnYl8tbEJ0NV9qRTRtZG45SDJBZkdpUFZJSktrOFhhSkdqNHEtOUxaUXdvT2NSV0FhUklnQXdINFdFRHR3TGhrPXwr7HTdhghvb4TN9rYRlDyCE9Mzc4Q89m4H3_B24WRKVg=='
})

Aviso

Asegúrese de que la llamada a window.FH2 se ejecute después de que la página se haya cargado completamente (load). Por ejemplo, puede usar addEventListener('load', cb) para definir una función de callback cb y llamar al método window.FH2 dentro de este callback.

Añadir un contenedor para el componente

Por ejemplo, para añadir un editor de rutas, inserte el siguiente código en la sección del código donde desea que se muestre el editor de rutas:

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

Añadir el estilo del contenedor de componentes

A continuación se presentan los estilos de contenedor recomendados, que pueden ser utilizados directamente en el área de código objetivo. Si existen otros requisitos personalizados, puede modificar el código de estilo usted mismo.

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

Cargar componentes de frontend

Usando el editor de rutas de vuelo como ejemplo, puede cargar el componente pasando el id y el wayline_id correspondiente al método. Consulte el Interface Tutorial del manual para obtener más información

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

Personalizar elementos del mapa (opcional)

Usando texto de mapa personalizado como ejemplo, puedes hacer clic en Customize Map en la parte superior de wayline.html y alejar el mapa para ver el efecto.

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

Personalizar tema (opcional)

El archivo de la demo muestra la capacidad de personalizar estilos. Puede modificar los estilos de tema correspondientes en custom-style.css y ver inmediatamente los efectos en los cuatro archivos HTML, incluyendo wayline.html. custom-style.css está escrito usando CSS, por lo que si el proyecto también emplea CSS, puede ajustar directamente las variables de estilo custom-style dentro del proyecto.

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

Añadir oyente de eventos (opcional)

Usando el editor de rutas de vuelo como ejemplo, puede suscribirte al botón de guardar y recibir los avisos correspondientes al guardar o cancelar la ruta de vuelo.

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

Tutorial de la interfaz

Instancia: window.FH2

Método: validateToken

Parámetro	Tipo	Obligatorio	Descripción
token	string	true	Devuelve el resultado de la validación del token: true/false

Método: initConfig

Parámetro	Tipo	Obligatorio	Descripción
serverUrl	string	true	Dirección del servicio HTTP de backend
wssUrl	string	true	Dirección del servicio dúplex de backend
hostUrl	string	true	Dirección de entrada web de frontend
prjId	string	true	ID de proyecto
projectToken	string	true	Token de autenticación de OpenAPI

Método: loadWaylineCreation

Parámetro	Tipo	Obligatorio	Descripción
domId	string	true	El frontend de terceros proporciona el ID del nodo DOM
props	Objeto<WaylineCreationConfig>	false	Para una descripción detallada de los parámetros, consulte la siguiente tabla: WaylineCreationConfig

Descripción del parámetro WaylineCreationConfig:

Parámetro	Tipo	Obligatorio	Descripción
folder_id	string	false	La carpeta donde se almacena la ruta de vuelo creada. El valor es el ID de la carpeta. Si no se proporciona, será la carpeta predeterminada.

Método: destroyWaylineCreation

Parámetro	Tipo	Obligatorio	Descripción
-	-	-	Destruir la instancia del componente de creación de ruta de vuelo

Método: loadWayline

Parámetro	Tipo	Obligatorio	Descripción
domId	string	true	El frontend de terceros proporciona el ID del nodo DOM
props	Objeto<WaylineConfig>	true	Para una descripción detallada de los parámetros, consulte la siguiente tabla: WaylineConfig.

Descripción del parámetro WaylineConfig:

Parámetro	Tipo	Obligatorio	Descripción
wayline_id	string	true	ID de Wayline

Método: destroyWayline

Parámetro	Tipo	Obligatorio	Descripción
isEffect	booleano	false	Destruir la instancia del editor de rutas de vuelo. Si hay múltiples componentes en la página actual, el paso a true para destruir la instancia no afectará a otros componentes cargados. Si no se pasa ningún parámetro, el valor predeterminado es false.

Método: loadCockpit

Parámetro	Tipo	Obligatorio	Descripción
domId	string	true	El frontend de terceros proporciona el ID del nodo DOM
props	Objeto<CockpitConfig>	true	Para una descripción detallada de los parámetros, consulte la siguiente tabla: CockpitConfig

Descripción del parámetro CockpitConfig:

Parámetro	Tipo	Obligatorio	Descripción
gatewaySn	string	true	N/S de gateway
droneSn	string	true	N/S de la aeronave
mapa	booleano	false	Si se debe cargar el mapa. El valor predeterminado es true. Establecer el parámetro del método en false impide que se cargue el mapa.

Método: destroyCockpit

Parámetro	Tipo	Obligatorio	Descripción
isEffect	booleano	false	Destruir la instancia de cabina virtual. Si hay múltiples componentes en la página actual, el paso a true para destruir la instancia no afectará a otros componentes cargados. Si no se pasa ningún parámetro, el valor predeterminado es false.

Método: loadProject

Parámetro	Tipo	Obligatorio	Descripción
domId	booleano	true	Cargar mapa del proyecto

Método: destroyProject

Parámetro	Tipo	Obligatorio	Descripción
-	-	-	Destruir mapa del proyecto

Método: loadFlightPath

Parámetro	Tipo	Obligatorio	Descripción
domId	string	true	ID del nodo DOM proporcionado por el frontend de terceros
params	IFlightPathParams	true	Consulte los detalles de los parámetros en la siguiente tabla: IFlightPathParams

Parámetros de IFlightPathParams:

Parámetro	Tipo	Obligatorio	Descripción
flight_path_id	string	true	ID de la trayectoria de vuelo

Método: destroyFlightPath

Parámetro	Tipo	Obligatorio	Descripción
-	-	-	Desinstalar registro de vuelo

Método: subscribe

Parámetro	Tipo	Obligatorio	Descripción
eventName	string	true	Suscribirse a eventos: - wayline-save: Se activa al guardar una ruta de vuelo y el parámetro de callback es el ID de la ruta de vuelo guardada correctamente - wayline-cancel: Se activa al cancelar el guardado de una ruta de vuelo y el parámetro de callback es el ID de la ruta de vuelo - wayline-back: Se activa al hacer clic en el botón de retroceso en el componente del editor de rutas de vuelo y el parámetro de callback es el ID de la ruta de vuelo - wayline-creation-saved: Se activa al guardar un componente de creación de ruta de vuelo y el parámetro de callback es el ID de la ruta de vuelo guardada correctamente - wayline-creation-cancel: Se activa al cancelar el guardado de un componente de creación de ruta de vuelo - cesium-viewer-change: Se activa cuando se detectan cambios en la carga de cada mapa de Cesium - flight-path-back: Se activa al regresar desde el registro de vuelo
callback	string	false	Pasar el ID de la ruta de vuelo actual

Método: cesiumViewer

Tipo	Explicación
{ [key: string]: CesiumViewer }	Este método da acceso a todas las instancias de Cesium Viewer en la página actual. Los valores clave actualmente incluyen: - global: Mapa principal - wayline_editor_support: Mapa auxiliar en el componente del editor de rutas de vuelo.

Instancia: window.Cesium

Se puede acceder directamente a los objetos nativos de Cesium a través del objeto window, por lo que los usuarios no necesitan importar cesium.js explícitamente.

Preguntas frecuentes

• ¿Por qué llamar a FH2 da lugar a un error de «property undefined»?

Asegúrese de llamar al método window.FH2 después de que la página se haya cargado (load). También puede definir una función de callback y llamar a window.FH2 dentro de este callback.

• ¿Por qué el color de fondo del cuerpo de la página web se vuelve blanco después de cargar el componente FlightHub 2?

Actualmente, cargar el componente FlightHub 2 aplica un estilo global al color de fondo del cuerpo, lo que puede anular el estilo original del sitio web. En este caso, necesita establecer un estilo de mayor prioridad para el color de fondo del sitio web, como usar el estilo !important.

• ¿Por qué el uso del componente FlightHub 2 hace que algunos elementos de la interfaz tengan una posición inexacta?

Por ejemplo, al añadir puntos de trayectoria, anotaciones y mensajes en el editor de rutas de vuelo, la posición de algunos elementos es inexacta. Solución: Asegúrese de que el contenedor del componente y sus contenedores principales no tengan las siguientes propiedades de estilo: 1. transform o perspective no es none; 2. filter no es none; 3. will-change es transform o perspective; 4. contain es paint

• ¿Cómo realizar la inferencia de TypeScript?

Consulte el siguiente código:

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