データインスペクターを HTML に埋め込みます

データインスペクターライブラリには Data Inspector 、バンドルにパックされたコンポーネントのセットが含まれています。このセットを使用すると、コンパイルや追加のインストールを行うことなく、データインスペクターを HTML + JavaScript の純粋な単ページアプリケーションに埋め込むことができます。 HERE platform でホストされているバンドルは、データインスペクターライブラリコンポーネントで構築されます。

HTML に埋め込まれたデータインスペクター機能の実際の実装を表示するには、データインスペクターライブラリの例でHTML+JS single page applicationサンプルアプリケーションを参照してください。

サンプルの Web アプリを作成します

Data Inspector 以下の手順では、バンドルを Web ページに簡単に統合する方法について説明します。

Data Inspector バンドルを Web ページに統合するには、次のものが必要です。

安定したインターネット接続
有効なプラットフォーム資格情報
Data Inspector バンドル
ローカルまたはリモートの Web サーバーでホストされ、実行されているシンプルな HTML Web ページ
three.min.js GitHub からダウンロードできる、 3 つの .js ライブラリのコピーであるファイル

Data Inspector バンドルは次のように配布されます。

js/data-inspector-bundle.js: Data Inspector バンドル
js/data-inspector-decoder-bundle.js: デコーダーがバンドルされます
js/vendors-bundle.js: サードパーティの依存関係を持つバンドル
js/monaco-editor/editor.worker.bundle.js: Monaco エディタとのバンドル ( GeoJSON プラグインエディタでは必須)
js/monaco-editor/ts.worker.bundle.js: Monaco エディタとのバンドル ( GeoJSON プラグインエディタでは必須 )
resources: 必要なイメージおよびフォントが含まれているフォルダ
LICENSE
HERE_NOTICE: サードパーティの依存関係に関するライセンス通知が含まれたファイル
README.md

サンプルの Web アプリを作成するには、次の手順に従います

Web アプリの空のフォルダを作成します。
Data Inspector ポータルからバンドルアーカイブをダウンロードします。
バンドルのルートフォルダの内容をドキュメントルートに展開します。
Three.js ライブラリアーカイブをダウンロードします。データインスペクターライブラリでは、 3 つの .js バージョン 0.127 が使用されています。

three.min.js ファイルを js 自分のフォルダにコピーします。

その結果、 Web サイトのファイル構造は次のようになります。

resources/
   ...
   resources files
   ...
js/
   monaco-editor/
      editor.worker.bundle.js
      ts.worker.bundle.js
   three.min.js
   vendors-bundle.js
   data-inspector-bundle.js
   data-inspector-decoder-bundle.js

index.html ルートディレクトリにファイルを作成します。ページ <body> のタグの末尾に、次のものを含めます。
```
<script src="./js/three.min.js"></script>
<script src="./js/vendors-bundle.js"></script>
<script src="./js/data-inspector-bundle.js"></script>
```
注

すべてのデータインスペクターライブラリコンポーネントが DI オブジェクトを通して公開されます。
( DataInspector データインスペクターライブラリの最上位のコンポーネント ) のコンテナ要素を作成し、次のスクリプトタグの前に配置します。
```
<div id="map-here"></div>
```

フォントの追加先 <head>:

<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link rel="prefetch" href="https://fonts.googleapis.com/css2?family=Fira+Mono:wght@400;500;700&display=swap" as="style">
<link rel="prefetch" href="https://fonts.googleapis.com/css2?family=Fira+Sans:wght@300;400;500;700&display=swap" as="style">
<link href="https://fonts.googleapis.com/css2?family=Fira+Mono:wght@400;500;700&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Fira+Sans:wght@300;400;500;700&display=swap" rel="stylesheet">

スタイルの追加先 <head>:

<style>
    body {
        margin: 0;
    }

    #map-here {
        box-sizing: border-box;
        width: 100vw;
        height: 100vh;
        padding: 5vh 5vw;
    }

    #map-here.full-screen {
        padding: 0;
        width: 100%;
        height: 100%;
    }
</style>

次のインスタンスを作成 DataInspectorします。

<script type="text/javascript">
    var basicConfig = {
        lookupServiceEnvironment: DI.LookupEnvironment.HERE,
        mapView: {
            decoder: {
               url: "./js/data-inspector-decoder-bundle.js"
            },
            theme:
                "./resources/normal.reduced.night.json"
       },
        monacoEditorWorkersBasePath: "./js/monaco-editor",
        widgets: {
            authForm: {
                accessKeyForm: true,
                localAuthForm: true
            }
        },
        toolbar: {
            languageSelector: true
        }
    };
    var customDataRenderingConfig = {
        enableCoverage: true,
        enableFiltering: true,
        enableInfoPanel: true,
        enableExtendedCoverage: true,
        interactiveDataSource: {
            hrn: "hrn:here:data::olp-here:rib-2",
            layer: "topology-geometry"
        }
    };
    new DI.DataInspector(
        basicConfig,
        document.getElementById("map-here"),
        customDataRenderingConfig
    );
</script>

動作を確認するには、以下のサンプル HTML コード全体を index.html 、前の手順で作成したファイルにコピーして貼り付けます。

<head>
    <meta charset="utf-8">
    <title>Data Inspector</title>
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link rel="prefetch" href="https://fonts.googleapis.com/css2?family=Fira+Mono:wght@400;500;700&display=swap" as="style">
    <link rel="prefetch" href="https://fonts.googleapis.com/css2?family=Fira+Sans:wght@300;400;500;700&display=swap" as="style">
    <link href="https://fonts.googleapis.com/css2?family=Fira+Mono:wght@400;500;700&display=swap" rel="stylesheet">
    <link href="https://fonts.googleapis.com/css2?family=Fira+Sans:wght@300;400;500;700&display=swap" rel="stylesheet">
    <style>
        body {
            margin: 0;
        }

        #map-here {
            box-sizing: border-box;
            width: 100vw;
            height: 100vh;
            padding: 5vh 5vw;
        }

        #map-here.full-screen {
            padding: 0;
            width: 100%;
            height: 100%;
        }
    </style>
</head>

<body>
    <div id="map-here"></div>

    <script src="./js/three.min.js"></script>
    <script src="./js/vendors-bundle.js"></script>
    <script src="./js/data-inspector-bundle.js"></script>

    <script type="text/javascript">
        var basicConfig = {
            lookupServiceEnvironment: DI.LookupEnvironment.HERE,
            mapView: {
                decoder: {
                    url: "./js/data-inspector-decoder-bundle.js"
                },
                theme:
                    "./resources/normal.reduced.night.json"
            },
            monacoEditorWorkersBasePath: "./js/monaco-editor",
            widgets: {
                authForm: {
                    accessKeyForm: true,
                    localAuthForm: true
                }
            },
            toolbar: {
                languageSelector: true
            }
        };
        var customDataRenderingConfig = {
            enableCoverage: true,
            enableFiltering: true,
            enableInfoPanel: true,
            enableExtendedCoverage: true,
            interactiveDataSource: {
                hrn: "hrn:here:data::olp-here:rib-2",
                layer: "topology-geometry"
            }
        };
        new DI.DataInspector(
            basicConfig,
            document.getElementById("map-here"),
            customDataRenderingConfig
        );
    </script>
</body>

ローカル Web サーバーでアプリを実行するには、安定版の NodeJS をインストールします。
ローカル Web サーバーを使用して、フォルダの内容を提供します。
```
npx serve
```
Web アプリをローカルで実行するには、コンソール出力のアドレスを使用します。通常はです http://localhost:5000。
プラットフォーム資格情報を使用してプラットフォームに接続します。

その結果、次のように表示されます。

図 1. プラットフォームデータの視覚化機能を備えた単一ページのアプリケーション

このサンプルコードを正しく実行するには、次の操作を行う必要があります。

含まれている .js すべてのファイルの名前を確認します。
プラットフォームカタログの HERE リソースネーム (hrn) および表示するレイヤーの名前 (layer) を指定します。
クライアントのアクセストークンまたはプラットフォーム資格情報（here.access.key.id + here.access.key.secret のペア）を使用してプラットフォームに接続します。

使用許諾

すべてのライセンス条件および制限事項については、Data Inspector JavaScript ファイルとともに配布されているLICENSE.mdおよびHERE_NOTICE.mdファイルを参照してください。

データインスペクターを HTML に埋め込みます

データインスペクターを HTML に埋め込みます

サンプルの Web アプリを作成します

注

使用許諾

「」に一致する結果は件です

「」に一致する結果はありません

開発者

データ インスペクターを HTML に埋め込みます

サンプルの Web アプリを作成します

注

使用許諾

「」に一致する結果は 件です

「」に一致する結果はありません

開発者

データインスペクターを HTML に埋め込みます

「」に一致する結果は件です