Fleet Telematics の詳細データセットレイヤーを地図に表示します

HERE Maps API for Javascript を使用すると、 Fleet Telematics の高度なデータセットの主題図レイヤーをマップに簡単に重ねることができます。 Fleet Telematics の高度なデータセット レイヤーを使用すると、郵便番号、国勢調査データ、道路クラス、交差点表示などの追加データを提供することで、地図の操作性を向上できます。 利用可能な主題図レイヤの詳細については、 Fleet Telematics の API リファレンス のレイヤのドキュメントを参照してください。

次のコード例は、 Fleet Telematics の詳細データセット主題図レイヤを含む簡単なユースケースを示しています。このレイヤでは、マップユーザーが郵便番号データのポリゴンの中心点マーカーをタップして、詳細情報を表示できます。 コードが実行されると、次の操作が実行されます。

1. サービスのインスタンスを取得します。
2. 'PSTLCB_GEN' 主題図レイヤおよびポリラインレンダリングタイプを使用してプロバイダを作成します。

/**
 * Assuming that "map" and "platform" are already initialized
 */
 // Create default map layers:
var service = platform.getPlatformDataService();

style = new H.map.SpatialStyle();
// create tile provider and layer that displays postcode boundaries
var boundariesProvider = new H.service.extension.platformData.TileProvider(service,
{
  layer: 'PSTLCB_GEN', level: 12
}, {
  resultType: H.service.extension.platformData.TileProvider.ResultType.POLYLINE,
  styleCallback: function(data) {return style}
});
var boundaries = new H.map.layer.TileLayer(boundariesProvider);
map.addLayer(boundaries);

上記の例では H.map.SpatialStyle 、既定の設定でが使用されていますが、 API では、スタイルコールバックを変更してカスタムデータ属性を反映できます。 次のコードでは、前の例の初期ステップを次のように拡張しています。

1. 'PSTLCB_MP' ポストコード領域の中心点を含む主題図レイヤーを追加して、 resultType をに設定 H.map.Markerしたレイヤーを作成します。
2. 'PSTLCB_MP' レイヤーを担当するタイルプロバイダに TAP イベントリスナーを登録しています。

// create tile provider and layer that displays postcode area centroids
var centroidsProvider = new H.service.extension.platformData.TileProvider(service,
{
  layer: 'PSTLCB_MP', level: 12
}, {
  resultType: H.service.extension.platformData.TileProvider.ResultType.MARKER
});
var centroids = new H.map.layer.MarkerTileLayer(centroidsProvider);
map.addLayer(centroids);

// add events listener, that outputs data provided by the Platform Data Extenstion and
// associated with the H.map.Marker
centroidsProvider.addEventListener('tap', function(ev) {
  var markerData = ev.target.getData();
  console.log(markerData.getCell('POSTAL_CODE'), markerData.getCell('ISO_COUNTRY_CODE'))
});

リスナーは、マップユーザーがマップ ( 空間 ) オブジェクト ( マーカーなど ) をタップしたときに呼び出されるコールバック関数です。 渡されたイベントからオブジェクトを取得し、そのオブジェクトに関連付けられている情報をコンソールに出力します。

次の図は、このコードがマップに与える影響を示しています。

Fleet Telematics 拡張データセットの検索結果を表示および一致させます

HERE Maps API for Javascript で Fleet Telematics 拡張データセットのデータを表示するもう 1 つのオプションは、SearchRequestクラスを使用することです。 このオプションは、既存のデータ ( ジオ コーディング、ルーティングなどの結果 ) に Fleet Telematics 拡張データセット REST API 主題図レイヤによって提供されたデータの注釈を付ける場合に使用します。 SearchRequest データイベントを使用すると、バウンディング ボックス内のデータを柔軟に検索し、リンク ID 、名前などのさまざまな属性を使用して結果を既存のデータと照合できます

SearchRequest 次のコード例は、 Fleet Telematics 拡張データセットを使用して既存のデータに機能を使用する方法を示しています。 コードが実行されると、次の操作が実行されます。

1. 'EVCHARGING_POI' 主題図レイヤのSearchRequestを作成します。
2. 'data' のイベントにイベントリスナーを追加 SearchRequestします。
3. イベントリスナーは、 event 引数で使用可能なデータを処理し、使用可能なリンク ID のセットと照合します。 一致するものがある場合、コードはマップ オブジェクトをマップに追加します。

/**
 * Assuming that "map" and "platform" are already initialized, and there is
 * a processed routing response that includes a polyline and an array of 'linkids'
 * that represent legs of the route.
 */
var service = platform.getPlatformDataService();

// search the charging stations by the bounding box
service.searchByBoundingBox(['EVCHARGING_POI'], ['POI_ID'], polyline.getBoundingBox(),
  (rows) => {
    rows.forEach((row) => {
      map.addObject(
        new H.map.Marker(
          // read marker position from the data row
          row.getCell('WKT').getGeometries()[0]
        )
      );
    })
  }, (e) => {console.log(e)});