概要

フロントエンドコンポーネントの紹介

DJI FlightHub 2のフロントエンドコンポーネントには、飛行ルート作成、飛行ルートエディター、バーチャルコックピット、およびプロジェクト／マップが含まれます。これらのコンポーネントは、カスタムテーマとスタイルに対応します。本マニュアルでは、これらのコンポーネントをゼロからご自身のシステムに統合する方法を紹介します。

開始前の準備

• テクノロジースタック：React、Vue、およびHTML + CSSはすべて対応しています。
• ハードウェア要件：FlightHub 2オンプレミス版を展開するには、DJI FlightHub 2オンプレミス版展開マニュアルを参照してください。

クイックスタート

現在のバージョンでは、主に以下のコンポーネントと対応する機能コレクションを提供します。デモをダウンロードし、設定とデバッグについてはこのマニュアルを参照してください。

リリースされたコンポーネントは以下の通りです。

コンポーネント	機能コレクション	機能スクリーンショット
飛行ルート作成	飛行ルートの種類： - ウェイポイントルート - エリアルート - 斜面ルート - 幾何学ルート - 自動3Dキャプチャルート スタイルカスタマイズ
飛行ルートエディター	飛行ルートの種類： - ウェイポイントルート - エリアルート - 斜面ルート - 幾何学ルート - 自動3Dキャプチャルート 飛行ルート機能： - 飛行ルート編集と保存 - マップ注釈 - Cesium起動 - 点、線、エリア注釈 - モデルのロード スタイルカスタマイズ
バーチャルコックピット	リモートコント役割機能： - ワンクリック離陸 - ライブストリーム - WASDキー操作による手動飛行と軌跡表示 - ワンクリックRTH スタイルカスタマイズ
プロジェクト／マップ	プロジェクトマップデータ： - 点、線、エリアの注釈 - 飛行ルートと軌跡計画 - カスタムタスクエリア、カスタム制限区域 - プロジェクトデバイスリスト - ドック機体 - 手動飛行機体

チュートリアル

必要なスタイルと依存関係を追加

FlightHub 2オンプレミス版のデプロイ完了後、プライベートIPを受け取ります。このプライベートIPまたはドメイン名とポートをコードブロックのHEADセクションに入力します。

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

フロントエンドコンポーネントのコンプライアンス情報

フロントエンドコンポーネントはFlightHub 2オンプレミス版によって提供される機能に依存するため、FlightHub 2オンプレミス版のprojectTokenとprjIdを取得する必要があります。情報を取得する方法は以下の通りです。

• projectToken：FlightHub 2オンプレミス版にアクセスし、「マイ組織」（展開されたFlightHub 2ドメイン名/user-center#/my-organization）>「組織設定」>「FlightHub Sync」に移動して、組織キーを取得します。この組織キーの値はprojectTokenです。

• prjId：FlightHub 2オンプレミス版にアクセスし、プロジェクトリストをクリックし、プロジェクトを選択して、URLでプロジェクトIDを見つけます。例：https://deployed FlightHub 2 domain name/organization/4bf0039f-6434-44a8-b891-8d7b6b7ff132/project/aa9c7a78-4e97-4ced-8953-2cea96c07c00。ここで、4bf0039f-6434-44a8-b891-8d7b6b7ff132がorgIdであり、aa9c7a78-4e97-4ced-8953-2cea96c07c00がprjIdです。

#

例：

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

注

window.FH2の呼び出しが、ページが完全にロードされた（load）後に実行されるようにしてください。例えば、addEventListener('load', cb)を使用してコールバック関数cbを定義し、このコールバック内でwindow.FH2メソッドを呼び出すことができます。

コンポーネント用のコンテナを追加

例えば、ルートエディターを追加するには、ルートエディターを表示したいコードのセクションに次のコードを挿入します。

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

コンポーネントコンテナのスタイルを追加

推奨されるコンテナスタイルは以下の通りで、ターゲットコードエリアで直接使用できます。他にカスタマイズの要件がある場合は、ご自身でスタイルコードを修正できます。

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

フロントエンドコンポーネントのロード

飛行ルートエディターを例にとると、メソッドにidと対応するwayline_idを渡すことで、コンポーネントをロードできます。詳細については、マニュアルのInterface Tutorialを参照してください。

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

マップ要素をカスタマイズ（任意）

カスタマイズマップテキストを例にとると、wayline.htmlの上部にあるCustomize Mapをクリックし、マップをズームアウトして効果を確認できます。

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

テーマをカスタマイズ（任意）

デモファイルは、スタイルをカスタマイズする機能を示しています。custom-style.cssで対応するテーマスタイルを修正すると、wayline.htmlを含む4つのHTMLファイル全体で即座に効果を確認できます。custom-style.cssはCSSを使用して記述されているため、プロジェクトでもCSSを使用している場合は、プロジェクト内でスタイル変数custom-styleを直接調整できます。

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

イベントリスナーを追加（任意）

飛行ルートエディターを例にとると、保存ボタンを登録し、飛行ルートの保存時またはキャンセル時に対応するプロンプトを受け取ることができます。

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

インターフェースチュートリアル

インスタンス：window.FH2

メソッド：validateToken

パラメーター	種類	必須	説明
token	string	true	戻り値トークン検証結果：true/false

メソッド：initConfig

パラメーター	種類	必須	説明
serverUrl	string	true	バックエンドHTTPサービスアドレス
wssUrl	string	true	バックエンド双方向サービスアドレス
hostUrl	string	true	フロントエンドウェブエントリーアドレス
prjId	string	true	プロジェクトID
projectToken	string	true	OpenAPI認証トークン

メソッド：loadWaylineCreation

パラメーター	種類	必須	説明
domId	string	true	サードパーティ側フロントエンドはDOMノードIDを提供します
props	Object<WaylineCreationConfig>	false	パラメーターの詳細については、以下の表を参照してください。WaylineCreationConfig

WaylineCreationConfigパラメーターの説明：

パラメーター	種類	必須	説明
folder_id	string	false	作成された飛行ルートが保存されるフォルダ。値はフォルダIDです。提供されない場合、デフォルトフォルダとなります。

メソッド：destroyWaylineCreation

パラメーター	種類	必須	説明
-	-	-	飛行ルート作成コンポーネントインスタンスを破棄します。

メソッド：loadWayline

パラメーター	種類	必須	説明
domId	string	true	サードパーティ側フロントエンドはDOMノードIDを提供します
props	Object<WaylineConfig>	true	詳細なパラメーター説明については、下記の表を参照してください。WaylineConfig

WaylineConfigパラメーター説明：

パラメーター	種類	必須	説明
wayline_id	string	true	Wayline ID

メソッド：destroyWayline

パラメーター	種類	必須	説明
isEffect	boolean	false	飛行ルートエディターインスタンスを破棄します。現在のページに複数のコンポーネントがある場合、インスタンスを破棄するためにtrueを渡しても、他のロードされたコンポーネントには影響しません。パラメーターが渡されない場合、デフォルトでfalseになります。

メソッド：loadCockpit

パラメーター	種類	必須	説明
domId	string	true	サードパーティ側フロントエンドはDOMノードIDを提供します
props	Object<CockpitConfig>	true	詳細なパラメーターの説明については、下の表を参照してください。CockpitConfig

CockpitConfigパラメーターの説明：

パラメーター	種類	必須	説明
gatewaySn	string	true	ゲートウェイSN
droneSn	string	true	機体シリアル番号
map	boolean	false	マップをロードするかどうか。デフォルト値はtrueです。メソッドパラメータをfalseに設定すると、マップのロードが防止されます。

メソッド：destroyCockpit

パラメーター	種類	必須	説明
isEffect	boolean	false	バーチャルコックピットインスタンスを破棄します。現在のページに複数のコンポーネントがある場合、インスタンスを破棄するためにtrueを渡しても、他のロードされたコンポーネントには影響しません。パラメーターが渡されない場合、デフォルトでfalseになります。

メソッド：loadProject

パラメーター	種類	必須	説明
domId	boolean	true	プロジェクトマップをロード

メソッド：destroyProject

パラメーター	種類	必須	説明
-	-	-	プロジェクトマップを破棄

メソッド：loadFlightPath

パラメーター	種類	必須	説明
domId	string	true	サードパーティフロントエンドが提供するDOMノードID
params	IFlightPathParams	true	パラメータの詳細は下表IFlightPathParamsを参照

IFlightPathParamsのパラメータ説明：

パラメーター	種類	必須	説明
flight_path_id	string	true	飛行軌跡ID

メソッド：destroyFlightPath

パラメーター	種類	必須	説明
-	-	-	飛行記録をアンロード

メソッド：subscribe

パラメーター	種類	必須	説明
eventName	string	true	イベントを登録します： - wayline-save：飛行ルートを保存する際にトリガーされ、コールバックパラメータは正常に保存された飛行ルートのIDです - wayline-cancel：飛行ルートの保存をキャンセルする際にトリガーされ、コールバックパラメータは飛行ルートのIDです - wayline-back：飛行ルートエディターコンポーネントの戻るボタンをクリックする際にトリガーされ、コールバックパラメータは飛行ルートのIDです - wayline-creation-saved：飛行ルート作成コンポーネントを保存する際にトリガーされ、コールバックパラメータは正常に保存された飛行ルートのIDです - wayline-creation-cancel：飛行ルート作成コンポーネントの保存をキャンセルする際にトリガーされます - cesium-viewer-change：各Cesiumマップのロードにおける変更が検出された際にトリガーされます - flight-path-back：飛行記録から戻る際にトリガーされます
callback	string	false	現在の飛行ルートIDを渡します

メソッド：cesiumViewer

種類	説明
{ [key: string]: CesiumViewer }	このメソッドは、現在のページ上のすべてのCesium Viewerインスタンスにアクセスできます。現在のキー値には以下が含まれます。 - global：メインマップ - wayline_editor_support：飛行ルートエディターコンポーネント内の補助マップ。

インスタンス：window.Cesium

ネイティブのCesiumオブジェクトはwindowオブジェクトを介して直接アクセスできるため、ユーザーは自分でcesium.jsをインポートする必要はありません。

よくある質問

• FH2を呼び出すと、「property undefined」エラーが発生するのはなぜですか？

ページがロード（load）された後に、メソッドwindow.FH2を呼び出すようにしてください。また、コールバック関数を定義し、このコールバック内でwindow.FH2を呼び出すこともできます。

• FlightHub 2コンポーネントをロードした後、ウェブページのbody背景色が白くなるのはなぜですか？

現在、FlightHub 2コンポーネントをロードすると、body背景色にグローバルスタイルが適用され、これが元のウェブサイトのスタイルを上書きする可能性があります。この場合、ウェブサイトの背景色により高い優先度のスタイルを設定する必要があります。例えば、!importantスタイルを使用するなど。

• FlightHub 2コンポーネントを使用すると、なぜ一部のインターフェース要素の位置が不正確になるのですか？

例えば、飛行ルートエディターでウェイポイント、注釈、メッセージプロンプトを追加する際、一部の要素の位置が不正確になります。解決策：コンポーネントコンテナとその親コンテナが以下のスタイルプロパティを持たないことを確認してください。1. transformまたはperspectiveがnoneではない。2. filterがnoneではない。3. will-changeがtransformまたはperspectiveである。4. containがpaintである。

• TypeScriptの型推論を行うには？

以下のコードを参照してください。

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