GeoJSON レンダラを実装します

データ インスペクター ライブラリ コンポーネントを使用して GeoJSON レンダラ プラグインを作成し、スキーマとバンドルできます。

スキーマを公開してレイヤーで使用すると 、 HERE platform ポータルのカタログレイヤーの [ 検査 ] タブでレンダリングされたデータを確認できます。

GeoJSON レンダラーを作成するには、次の手順を実行します。

  1. オプション Custom data using custom JavaScript translators to GeoJSONを指定して Web アプリジェネレータをインストールし、 生成されたサンプルアプリケーションで使用できるようになるrenderer.plugin.template.jsファイルを拡張して、レンダラプロジェクトを作成します。 詳細については、「レンダラプラグインの作成」の章を参照してください。

    データ インスペクターライブラリのレンダリング関数およびスタイルプロパティのサンプル実装については 、「プラグインの例 」の章を参照してください。

  2. レンダラのプラグインを ds/src/main/resources/renderers フォルダにコピーします。

スキーマ GeoJSON レンダラの例

前の章で生成したスキーマプロジェクトに基づいて、 GeoJSON レンダラーを使用して地理マーカーをレンダリングしてみましょう。

  1. proto/src/main/proto/com/here/example/v1/test_schema.proto 次のようにファイルを編集します。

    syntax = "proto3";
    
    package com.here.example.v1;
    
    // MainProtobufMessage is a placeholder, and this value must match the package/messagename in
    // the mainMessage tag of the layer-manifest-plugin in the schema_ds module.
    message MainProtobufMessage {
        double lat = 1;
        double lon = 2;
        string hint = 3;
    }
    
  2. GeoJSON レンダラーファイルを作成 ds/src/main/resources/renderers/com.here.example.v1.MainProtobufMessage.js し、次の JavaScript コードを使用します。

     (() => {
         "use strict";
         /**
         * 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 the `body` property:
         *
         * {
         *     contentType: "application/vnd.geo+json; charset=utf-8",
         *     body: geoJsonData
         * }
         *
         *
         * Only one of these functions must be declared. If both are present, the plugin will not be
         * used.
         */
         const plugin = {
             /**
              * Generates an 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`, and more.
              * @param {object} params.geometryDataProviders Various geometry data providers to map data.
              * @returns {object} An object with generated GeoJSON data.
              */
              getGeoJSON:function (params) {
    
                  // Destructuring of the `params` object.
                  const { logger, layer, decodeResult, mapUtils } = 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;
     })();
    

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

  3. スキーマを公開します。

    mvn deploy
    
  4. OLP コマンド ライン インターフェース( CLI )を使用してカタログを作成します。

    olp catalog create renderer-catalog "Renderer Catalog" --summary="Renderer Catalog"
    
  5. CLI を使用して、新しく作成したカタログ内にレイヤーを作成します。

    Linux
    olp catalog layer add hrn:here:data:::renderer-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:::com.here.example:test_rendering_schema_2_v1:1.0.0
    olp catalog layer add hrn:here:data:::renderer-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:::com.here.example:test_rendering_schema_2_v1:1.0.0
  6. レイヤー上のデータに CLI を入力します。

    サンプルのパーティション データ HERE をダウンロードできます。 このファイルには、地理座標を持つ protobuf シリアル化データが含まれています。

    olp catalog layer partition put hrn:here:data:::renderer-catalog renderer-layer --partitions=23618402:resources/renderer-example.partition
    

    完了すると、 hrn:here:data:::renderer-catalog カタログのrenderer-layerレイヤーの [ 検査 ] タブにサンプルのパーティション データがレンダリングされます。

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

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