開発環境

データ インスペクターには、レンダラ プラグインデータまたはローカルのパーティションファイルを使用してカスタムプラットフォームコードを開発するためのレンダリング設定と埋め込みの JS エディターがあります。

ローカルパーティションファイルを使用してプラグインを開発します

データ インスペクター オンラインスタンドアロンツールには、ローカルのパーティションファイルを使用してレンダリングプラグインの開発を開始するようにデータを設定するためのウィザードが用意されています。

1. レイヤー パネル で、レイヤーを追加をクリックします。

   

2. 開いたフォームで、ローカルのパーティションファイルをアップロードします。 プラットフォームでサポートされている任意のパーティションタイプを追加できます。

   

3. 次に、ローカルスキーマファイル () をアップロード.zipするか、またはプラットフォームでホストされているスキーマの HERE リソースネーム を指定します。

   

4. スキーマにすでにレンダラ プラグインファイル (.js) が含まれている場合は、 [ データの追加 ] をクリックします。 プラグインファイルが自動的に検出されます。

   

5. ローカルのプラグインファイルがある場合は、ウィザードにアップロードして [ データの追加 ] をクリックします。

   

   注

   添付されているスキーマでプラグインが検出され、ローカルプラグインを明示的に追加した場合、スキーマからのプラグインは無視されます。 ローカルマシンからアップロードしたプラグインが、パーティション データのレンダリングに使用されます。

   プラグインの開発とテストを開始できます。 [ 詳細 ] パネルのコントロールの使用方法については、以下の章を参照してください。

   

初期データ設定はいつでも変更できます。 このためには、ローカルパーティション ID の左側にある [ その他 ] (3 つのドット ) メニューをクリックし、 [ 編集 ] または [ 削除 ] をクリックします。

プラットフォームデータを使用してプラグインを開発します

ローカルツールとプラットフォームデータ インスペクターツールの両方を使用して、プラットフォームに保存されているデータのレンダリングプラグインを記述できます。

まず、レイヤーのレンダリング設定を行う必要があります。スキーマとレンダラ プラグインを追加します。 ローカルおよびプラットフォームでホストされるスキーマとプラグインの両方がサポートされています。 次に、 JS エディターを開き、コードの書き込みを開始します。

詳細については、以下の章を参照してください。

レンダリング設定を構成します

データインスペクタのコントロールパネルにある「レイヤー」セクション では、レイヤースキーマおよびレンダリングプラグインを操作できます。

レイヤーの パーティション分割方式 およびコンテンツタイプに応じて、レイヤーのレンダリング設定を次の場合に使用できます。

• すべての HERETile レイヤーで、任意のコンテンツタイプのレイヤーのレンダリング設定を使用できます。
• コンテンツタイプ application/geo+json またはの HERETile レイヤーの場合 application/vnd.geo+json、レンダラ プラグインを使用して GeoJSON データの視覚エフェクトをカスタマイズできます ( 機能の強調表示、カスタムアイコンの提供、ツールチップの適用など ) 。
• 元々スキーマがバンドルされていない HERETile レイヤーの場合は、データデコード用に独自のスキーマを提供できます。
• 一般的なレイヤーの場合 application/x-protobuf、コンテンツタイプがであるものも含めて、レンダリング設定が有効になります。 後者の場合、データのデコードには独自のスキーマを使用できます。

スキーマを追加します

スキーマ フィールドには、現在カタログレイヤーに割り当てられているデータスキーマが表示されます。

デフォルトでは、カタログレイヤーに割り当てられている元のスキーマが、バンドルされているレンダラ プラグイン（利用可能な場合）とともにロードされます。

右側の [ 詳細 ] ボタンをクリックし 、 [Open スキーマ( カスタムデータスキーマを ZIP アーカイブとして開く )] を選択すると、カスタムデータスキーマを ZIP アーカイブとして読み込むことができます。

レンダラ プラグインを使用せずにスキーマをロードすると、データは表示されず 、レンダラ プラグイン フィールドに Missingと表示されます。 この問題を解決するには、次のいずれかの操作を行います。

• 独自のレンダラ プラグインを開発 : このために は、「プラグインを作成 」ボタンをクリックしてエディターを開き、コードを入力します。

• カスタムスキーマをリセットします。 この場合 は、 [ 詳細 ] ボタンをクリックし 、 [ リセット ] を選択して、選択したレイヤーに割り当てられている元のスキーマをロードします。

• バンドルされているレンダラ プラグインで別のデータスキーマをロードします。

レンダラ プラグインを開発します

レンダラ プラグイン フィールドに、選択したデータスキーマに現在適用されているレンダラ プラグインが表示されます。

• 見つかった件数 : 現在ロードされているスキーマでレンダラ プラグインが検出され、適用されました。

• カスタムコード : 現在ロードされているレンダラ プラグインが変更されました。

• 不足 : 現在ロードされているスキーマにバンドルされているレンダラ プラグインが見つかりませんでした。

エディターを使用すると、ローカルのプラグイン JS ファイルをデータ インスペクターにロードして、データ インスペクターにすでにロードされているレイヤーデータで実行できます。 このためには、右側の [ 詳細 ] ボタンをクリックして、 [Open プラグイン ( ファイルを開く )] を選択します。 現在ロードされているスキーマにバンドルされているレンダラ プラグインに戻るに は、 [ 詳細 ]>[ リセット ] を選択します。

プラグインコードを変更するには、プラグインを編集ボタンをクリックして埋め込みエディターを開きます。 結果に問題がなければ、 [ 詳細 ]>[ ダウンロード ] を選択して、変更した JS ファイルをダウンロードしてコードを保存できます。

埋め込み JS エディタ

プラグインコードエディタを開くには、「レンダラ プラグイン」セクションの「 Create/Edit プラグイン」ボタンをクリックします。

これは、次のような豊富な JavaScript エディタです。

• 拡張されたコード編集機能
• ライブ JS 構文の強調表示
• JS ファイルのドラッグ＆ドロップ
• コードの自動補完
• 構文エラーの表示

レンダラ プラグインを最初から作成する場合、エディターには詳細なインライン命令が含まれたプラグインテンプレートが含まれています。 データ インスペクター ライブラリ のレンダリング関数 およびスタイルプロパティのサンプル実装を参照 するには、「プラグインの例とスタイル GeoJSON の表示」を参照してください。

ローカルのプラグイン JS ファイルをエディター領域に直接ドラッグアンドドロップすることもできます。 この場合、ファイルはカタログ接続セッション中ブラウザのメモリにロードされます。

プラグインコードを起動するには、上の [ 実行 ] ボタンをクリックします。 レイヤーデータはデータ インスペクター ライブラリマップ ビューでレンダリングされます。 結果に問題がなければ、変更した JS ファイルをダウンロードして、 [ ダウンロード ] ボタンを使用してコードを保存できます）。

プラグインの開発中に発生する可能性のあるエラーは、ブラウザの開発者ツールで参照できます。

デバッグ中です

ブラウザに組み込まれている開発者ツールを使用して、レンダラ プラグインコードをデバッグできます。 一般的なブラウザで開発者ツールを起動するに Ctrl(Cmd)+Shift+J は、ショートカットを使用します。

プラグインコードおよびその評価済みオブジェクトは、グローバルスコープオブジェクトまたは <script> タグを介してアクセスできないため debugger 、デバッガの実行を一時停止するコードの行にステートメントを追加する必要があります。 開発者ツールを開いてプラグインコードを再実行すると ( 新しいタイルを選択するか 、 [ 実行] をクリック ) 、ブラウザは最初にアクティブになったブレークポイントでデバッグを開始します。 JS debugger ステートメントの詳細 については、 MDN Web Docs を参照してください。