GeoJSON レンダラを実装します
目的: データ インスペクター を使用して GeoJSON レンダラ プラグイン を実装します
複雑さ: 初心者向け
所要時間: 30 分
前提条件: 資格情報 を取得し、 資格情報 を確認して 、 Protobuf スキーマ をプラットフォーム に公開します
HERE platform カタログには、ほとんどが地理的に分割された位置データを含むレイヤーが含まれています。 データ インスペクター ライブラリでは、カスタム GeoJSON レンダリングプラグインを使用して、 Protobuf でエンコードされた地理的に分割されたデータをベース マップの上にレンダリングできます。
このチュートリアルでは、指定した座標で地理マーカーを表示する単純な 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
を追加してみましょう。
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
バインディングを次のように使用します。
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
Point
lat
座標を持つ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 ガイド』を参照してください。