GeoJSON レンダラを実装します

目的: データインスペクターを使用して GeoJSON レンダラプラグインを実装します

複雑さ: 初心者向け

所要時間: 30 分

前提条件: 資格情報を取得し、資格情報を確認して、 Protobuf スキーマをプラットフォームに公開します

HERE platform カタログには、ほとんどが地理的に分割された位置データを含むレイヤーが含まれています。データインスペクターライブラリでは、カスタム GeoJSON レンダリングプラグインを使用して、 Protobuf でエンコードされた地理的に分割されたデータをベースマップの上にレンダリングできます。

このチュートリアルでは、指定した座標で地理マーカーを表示する単純な GeoJSON レンダラプラグインを実装する方法を示します。

このチュートリアルでは、次のトピックについて説明します。

GeoJSON レンダラプラグインのリソースを準備します
GeoJSON レンダラプラグインを実装します
GeoJSON レンダラプラグインをスキーマに添付します

GeoJSON レンダラプラグインのリソースを準備します

GeoJSON レンダラプラグインの実装を開始する前に、このレンダラプラグインを使用するリソースを作成する必要があります。

まず、次の OLP CLI コマンドを使用して、 proto スキーマを生成します。

olp schema generate com.here.platform.tutorial render_schema --type proto

注

グループ ID には、通常、などのグループ ID に対するチーム / 製品の階層が含まれている必要 com.some-company.automated-driving.schemaがあります。このようにして、異なるチームがスキーマを個別に管理できます。

スキーマをアーティファクトサービスに展開すると、そのグループ ID が組織によって予約され、この場合は他のレルムで再利用できなくなります。したがって com.example、、 com.here.schema、、などの汎用グループ ID の値を指定 com.here.exampleすると、スキーマをアーティファクトサービスリポジトリにアップロードできなくなり、カタログで使用したり、他のユーザーと共有したりできなくなります。

OLP CLI は次の出力を返します。

Schema has been successfully generated in /home/user/render_schema.

Protobuf スキーマの詳細については、「 Protobuf スキーマをプラットフォームに公開」チュートリアルを参照してください。

指定した座標で地理的マーカーを表示するレンダラプラグインを実装します。そのため、latおよびlonのパラメーターのタイプをdoubleに設定し、追加情報を含むstringタイプの新しいhintパラメーターを追加することで、生成されたスキーマのproto/src/main/proto/com/here/platform/tutorial/render_schema/v1/render_schema.protoファイルを更新する必要があります。

  syntax = "proto3";
  package com.here.platform.tutorial.render_schema.v1;

   message MainProtobufMessage {
       double lat = 1;
       double lon = 2;
       string hint = 3;
   }

これで、ルートスキーマプロジェクトから次の OLP CLI コマンドを使用してスキーマを展開できます。

olp schema put

OLP CLI は次の出力を返します。

Schema hrn:here:schema::realm:com.here.platform.tutorial:render_schema_v1:1.0.0 has been created.

次のステップで使用するスキーマ HERE リソースネームを保存します。

スキーマが作成されたら、バージョン付レイヤーを使用してカタログを作成するために移動できます。

次の OLP CLI コマンドを実行して、カタログの作成から始めましょう。

olp catalog create render-tutorial-catalog "Renderer Catalog" --summary "Renderer Catalog" --description "Renderer Catalog"

OLP CLI は次の出力を返します。

Catalog hrn:here:data::realm:renderer-tutorial-catalog has been created.

次のステップで使用するカタログ HERE リソースネームを保存します。

次のステップでは、上記で作成したカタログにバージョン付レイヤーを追加します。

application/x-protobufコンテンツタイプ、 heretile:12 パーティション分割、および上記で作成したスキーマを使用して、バージョン管理されたrenderer-layerを追加してみましょう。

Linux

窓

olp catalog layer add hrn:here:data::realm:render-tutorial-catalog renderer-layer renderer-layer --summary "Renderer layer" \
--description "Renderer layer" --coverage "DE" --versioned --content-type application/x-protobuf \
--partitioning heretile:12 --schema hrn:here:schema::realm:com.here.render.tutorial:render_schema_v1:1.0.0

olp catalog layer add hrn:here:data::realm:render-tutorial-catalog renderer-layer renderer-layer --summary "Renderer layer" ^
--description "Renderer layer" --coverage "DE" --versioned --content-type application/x-protobuf ^
--partitioning heretile:12 --schema hrn:here:schema::realm:com.here.platform.tutorial:render_schema_v1:1.0.0

注

レルムで請求タグが必要な場合は、layerセクションにbillingTags: ["YOUR_BILLING_TAG"]プロパティを追加して設定ファイルを更新します。

OLP CLI は次の出力を返します。

Layer renderer-layer has been added to the catalog.

注

データインスペクターライブラリを使用すると、バージョン管理されたレイヤー、揮発性のレイヤー、およびオブジェクトストアのレイヤータイプを表示できます。

次に、レイヤーの renderer-example.partition に OLP CLI を設定します。に renderer-example.partition は、次の地理座標を持つ protobuf シリアル化データが含まれています Golden Gate Bridge in San Francisco。

シリアル番号付き

"lat": 37.82171
"lon": -122.47881
"hint": "Golden Gate Bridge in San Francisco"

proto データをシリアル化するには _java 、または _scala バインディングを次のように使用します。

Java

Scala

File serializedProto = new File("serializedProto.txt");
serializedProto.createNewFile();
Render.MainProtobufMessage.newBuilder()
        .setLon(13)
        .setLat(52)
        .setHint("Golden Gate Bridge in San Francisco")
        .build().writeTo(Files.newOutputStream(serializedProto.toPath()));

val serializedProto = new File("serializedProto.txt")
serializedProto.createNewFile
Render.MainProtobufMessage.newBuilder
    .setLon(-122.47881)
    .setLat(37.82171)
    .setHint("Golden Gate Bridge in San Francisco")
    .build.writeTo(Files.newOutputStream(serializedProto.toPath))

パーティションをレイヤーにアップロードするには、次の OLP CLI コマンドを実行します。

olp catalog layer partition put hrn:here:data::realm:renderer-tutorial-catalog renderer-layer --partitions=19319036:renderer-example.partition

OLP CLI は次の出力を返します。

 100% [===========================================================] 1/1 (0:00:00 / 0:00:00) 

Partition 19319036 was successfully uploaded.

次のセクションに移動して、 GeoJSON レンダラプラグインを追加し、アップロードされたデータを表示してみましょう。

GeoJSON レンダラプラグインを実装します

次のいずれかの環境を使用して、カスタム GeoJSON レンダリングプラグインを開発できます。

データインスペクターオンラインスタンドアロンツール: HERE platform でホストされているオンラインのスタンドアロンツール。データを視覚化できるように、スキーマ用のレンダラプラグインを簡単に記述できます。

インストールは必要ありません。ローカルのパーティションファイルをアップロードし、スキーマ ( ローカルまたは HERE リソースネーム ) を指定して、プラグインを書き込み、テストするだけです。
HERE platform データ検査 : HERE platform ポータルで、レイヤーの詳細ページに移動し、Inspectタブを選択するか、 olp catalog inspect <catalog HRN>OLP CLI コマンドを実行します。

このオプションを有効にするには、 Node.js 、追加のデータインスペクターライブラリモジュール、またはサードパーティ製コンポーネントをインストールする必要はありません。プラットフォーム資格情報でポータルにログインするだけです。
ローカルデータインスペクター： このオプションを使用するには、サンプルアプリケーションとともに Node.js およびデータインスペクターライブラリをインストールする必要があります。

このチュートリアルでは、最初のアプローチを使用します。データインスペクターオンラインスタンドアロンツール。

データインスペクターのオンラインスタンドアロンツールを開きましょう。

次のページが表示されます。

[ レイヤーを追加 ] をクリックし、前のセクションで作成したカタログとレイヤーを選択します。 [ データの追加] をクリックします

レイヤーを含むカタログをデータインスペクターページに追加すると、アップロードされたパーティションがマップおよび There's no rendering plugin bundled with the schema. メッセージに表示されます。

次のステップでは、 GeoJSON レンダラプラグインを設定します。

指定した座標で地理的マーカーを表示するレンダラプラグインを実装します。以前は、次のエンコードされたパーティションをバージョン付レイヤーにアップロードしていました。

"lat": 37.82171
"lon": -122.47881
"hint": "Golden Gate Bridge in San Francisco"

したがって、レンダラプラグインは、定義 hint され提供された座標でツールチップを表示する必要があります。ここでは Golden Gate Bridge in San Francisco、ブリッジの座標を使用してパーティションをアップロードしたので、を表示する必要があります。

レンダラプラグインを追加するには、コントロールパネルに移動し、レンダラプラグインセクションの Create プラグイン をクリックします。

「プラグインを作成」をクリックすると、データインスペクターによって次のコードでコードエディタが開きます。


/**
* Renderer plugin to convert JSON data to GeoJSON.
*
* Generated GeoJSON must be created according to GeoJSON Specification:
* https://tools.ietf.org/html/rfc7946
*
* This template is an example of plugin to generate the GeoJSON object based on decoded partition
* content (the same data structure as in Decoded Data panel).
*
* Renderer plugin must return an object with one of these functions in it:
*
* 
* getGeoJSON: function (params) { ... }
* getGeoJSONAsync: async function (params) { ... }
* 
*
* Both synchronous `getGeoJSON` and asynchronous `getGeoJSONAsync` functions return
* an object with GeoJSON data in property `body`:
* 
* {
*     contentType: "application/geo+json; charset=utf-8",
*     body: geoJsonData
* }
* 
*
* Only one of these functions must be declared, if both are present plugin will not be used.
  */
  (() => {
  "use strict";

  /** @type {RendererPlugin} */
  const plugin = {
  /**
  * Generates object with GeoJSON data.
  *
  * @param {object} params.logger Logger to log information to console.
  * @param {object} params.layer All properties as well as dataUrl, name, partitioning and
  * originalConfiguration.
  * @param {object} params.decodeResult Decoded data of the partition.
  * @param {object} params.mapUtils Various converters like `mercatorConverter`,
  * `heretileToQuad`, `hdmapCoordinateToLonLat`, etc.
  * @param {object} params.geometryDataProviders Various geometry data providers to map data.
  * @returns {object} An object with generated GeoJSON data.
  */
  getGeoJSON: function (params) {
  // Implement either this or `getGeoJSONAsync` function.
  // See more detailed description in the header of this file.

           // By default, logger will display only messages of `warn` and `error` levels.
           // To enable all of them, set level to `0`.
           const logger = params.logger;
           logger.level = 0;
           logger.info(`Creating GeoJSON for tile ${params.decodeResult.partitionId}`);

           // To debug plugin, put a `debugger` keyword and activate browser's developer tools.
           // Dev tools will activate a breakpoint at each occurrence of `debugger` keyword:
           // debugger;

           // Returning sample empty GeoJSON object
           return {
               contentType: "application/geo+json; charset=utf-8",
               body: { // Add your GeoJSON features here
                   "type": "FeatureCollection",
                   "features": []
               }
           }
       }
  };

  return plugin;
  })();

これは、 GeoJSON レンダラプラグインを実装する必要があるメインファイルです）。デフォルト FeatureCollection では、この JavaScript は空の値を返します。つまり、まだ何も表示されていません。この JavaScript ファイルを更新するには、 GeoJSON を追加します。このファイルには、hint値とlon Pointlat 座標を持つtooltipプロパティが含まれています。

            // Prepare GeoJSON to visualize
            var result = {
                "type": "FeatureCollection",
                "features": [
                    {
                        "type": "Feature",
                        "properties": {
                            "tooltip" : data.hint
                        },
                        "geometry": {
                            "type": "Point",
                            "coordinates": [
                                data.lon,
                                data.lat
                            ]
                        }
                    }
                ]
            };

更新された JavaScript ファイルは次のようになります。

    (() => {
    "use strict";
    const plugin = {
        getGeoJSON:function (params) {

            // Destructuring of the `params` object.
            const {logger, decodeResult } = params;

            // Partition data decoded with the schema protobuf
            var data = decodeResult.data;

            logger.info("Data successfully loaded");

            // Prepare GeoJSON to visualize
            var result = {
                "type": "FeatureCollection",
                "features": [
                    {
                        "type": "Feature",
                        "properties": {
                            "tooltip" : data.hint
                        },
                        "geometry": {
                            "type": "Point",
                            "coordinates": [
                                data.lon,
                                data.lat
                            ]
                        }
                    }
                ]
            };

            // Return an object with GeoJSON data
            return {
                contentType: "application/vnd.geo+json; charset=utf-8",
                body: result
            };
        }
    };
    return plugin;
})();

ブラウザに組み込まれている開発者ツールを使用して、レンダラプラグインコードをデバッグできます。一般的なほとんどのブラウザで開発者ツールを起動するに Ctrl(Cmd)+Shift+J は、ショートカットを使用します。プラグインコードおよびその評価済みオブジェクトは、グローバルスコープオブジェクトまたは <script> タグを介してアクセスできないため debugger; 、デバッガの実行を一時停止するコード行にステートメントを追加する必要があります。

return ステートメントの前にdebugger;ステートメントを追加して、result変数に正しい FeatureCollection オブジェクトが含まれていることを確認しましょう。

    (() => {
    "use strict";
    const plugin = {
        getGeoJSON:function (params) {
            const {logger, decodeResult } = params;
            var data = decodeResult.data;

            logger.info("Data successfully loaded");
            var result = {
                "type": "FeatureCollection",
                "features": [
                    {
                        "type": "Feature",
                        "properties": {
                            "tooltip" : data.hint
                        },
                        "geometry": {
                            "type": "Point",
                            "coordinates": [
                                data.lon,
                                data.lat
                            ]
                        }
                    }
                ]
            };

            // DEBUGGER: Application will stoped at this line
            debugger;
            // DEBUGER: Application will stoped at this line

            return {
                contentType: "application/vnd.geo+json; charset=utf-8",
                body: result
            };
        }
    };
    return plugin;
})();

上記のコードをコードエディタに貼り付け、 Ctrl(Cmd)+Shift+J ショートカットを使用してブラウザで開発者ツールを開くことができるようになりました。 [ ファイル名を指定して実行 ] ボタンをクリックしデバッガは debugger; 、ステートメントを追加した行でアプリケーションを一時停止し、アプリケーションの状態をデバッグできます。

上の図から、result変数にパーティションにアップロードしたデータと同じFeatureCollectionsデータが含まれていることがわかります。

ここで、上記のコードスニペットで提供されている GeoJSON が適切に表示されていることを確認し、 debugger; コードからステートメントを削除して、このコードをデータインスペクターのコードエディタに貼り付け、 [ 実行] をクリックします。

すべてが正しく設定されている場合は、次のような結果になります。

ここで、 Prepare resources for GeoJSON rendering plugin このレンダラプラグインをセクションで作成したスキーマに添付できます。

GeoJSON レンダラプラグインをスキーマに添付します

GeoJSON レンダラプラグインを実装し、正しく動作することを確認したら、スキーマに添付して、スキーマを含むすべてのカタログでこのプラグインをデフォルトで使用できます。

レンダラプラグインをスキーマに添付するに ds/src/main/resources/renderers/com.here.platform.tutorial.render_schema.v1.MainProtobufMessage.js は、 GeoJSON レンダラーファイルを作成し、前のセクションで実装した JavaScript コードを使用します。

注

レンダラプラグインを実装する場合は、レンダラプラグインファイルに適切な名前を付けてください。その名前 ( .js 拡張子なし ) は、データスキーマ(ds) モジュールのビルド済みアーティファクト (ZIP アーカイブ ) のMETA-INF/layer.manifest.jsonマニフェストファイル内のmessageフィールドと一致する必要があります。

これで、 GeoJSON レンダラプラグインが含まれた状態でスキーマを再展開できます。このためには、ルートスキーマプロジェクトから次の OLP CLI コマンドを実行します。

olp schema put

OLP CLI は次の出力を返します。

Schema hrn:here:schema::realm:com.here.platform.tutorial:render_schema_v1:1.0.0 has been created.

レンダラプラグインでスキーマを展開したら 、データインスペクターを開き、コントロールパネル にデフォルトでレンダラプラグインが表示され、パーティションが表示されていることを確認できます。

結論

このチュートリアルでは、 GeoJSON レンダラプラグインを実装して、データインスペクターを使用してバージョン付レイヤーでパーティションを表示する方法を練習しました。

詳細情報

データインスペクターの使用方法の詳細については、『データインスペクターガイド』を参照してください
データインスペクターを使用してレンダリングプラグインを作成する方法の詳細については、『レンダリングプラグインの作成ガイド』を参照してください。
レンダラプラグインのデバッグ方法の詳細については、『データインスペクター開発環境ガイド』を参照してください。
OLP CLI を使用してスキーマを操作する方法の詳細については、『 OLP CLI ガイド』を参照してください。

GeoJSON レンダラを実装します

GeoJSON レンダラを実装します

GeoJSON レンダラプラグインのリソースを準備します

注

注

注

GeoJSON レンダラプラグインを実装します

GeoJSON レンダラプラグインをスキーマに添付します

注

結論

詳細情報

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

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

開発者

GeoJSON レンダラを実装します

GeoJSON レンダラ プラグイン のリソースを準備します

注

注

注

GeoJSON レンダラ プラグイン を実装します

GeoJSON レンダラ プラグイン をスキーマ に添付します

注

結論

詳細情報

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

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

開発者

GeoJSON レンダラプラグインのリソースを準備します

GeoJSON レンダラプラグインを実装します

GeoJSON レンダラプラグインをスキーマに添付します

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