地図上にデータ ハブスペースを表示します

HERE Data Hub はリアルタイムの位置データ管理サービスで、 CLI や HERE Studio などのデータ ハブツールのセットを使用して、地理空間データのアップロードと管理を簡単に行うことができます。 HERE Maps API for Javascript を使用すると、データ ハブスペースとして提示されたデータを既存のアプリケーションに簡単に追加できます。 また、 HERE Maps API for Javascript では、ルーティング、ジオ コーディング、 Fleet Telematics 拡張データセットなどの HERE サービスを使用する新しいアプリケーションをデータ ハブとともに構築できます。

以下のコード例では、開発者がデータ ハブに精通しており、開発者がデータ ハブスペースを作成したことを前提としています。 次の単純なユースケースには、 2 つのスペースが含まれています。 1 つは建物のフットプリントのパブリックデータを含み、もう 1 つは開発者が定義したデータを含みます。 コードが実行されると、次のアクションが実行されます。

1. データ ハブ サービスのインスタンスを取得し、そのインスタンスにデータ ハブアクセス トークンを渡します。
2. 各スペースに 1 つのデータ ハブプロバイダを作成 H.map.layer.TileLayerし、として追加します。

// provided that the platform and the map are instantiated.
const service = platform.getXYZService({
  token: <YOUR_DATA_HUB_ACCESS_TOKEN>,
});

// create a provider for the public buildings data
const buildingsSpaceProvider = new H.service.xyz.Provider(service, <DATA_HUB_SPACE_ID>, {
  'min': 14
});
const buildingsSpaceLayer = new H.map.layer.TileLayer(buildingsSpaceProvider);
// add a layer to the map
map.addLayer(buildingsSpaceLayer);

// create a provider for the custom user defined data
const customSpaceProvider = new H.service.xyz.Provider(service, <DATA_HUB_SPACE_ID>);
const customSpaceLayer = new H.map.layer.TileLayer(customSpaceProvider);
// add a layer to the map
map.addLayer(customSpaceLayer);

上記の例で は、データ ハブが デフォルトのスタイルおよび設定で使用されていますが、 API では、レイヤーのスタイルを変更してインタラクティブにすることができます。 次のコードでは、前の例の初期ステップを次のように拡張しています。

1. 建物レイヤーの外観（この場合は色）を変更します。
2. Buildings レイヤーをインタラクティブにし、タイルプロバイダに TAP イベントリスナーを登録します。

// get the style for the layer
var style = buildingsSpaceProvider.getStyle();

// change the color of the polygons
style.setProperty('layers.xyz.polygons.draw.polygons.color', 'red');

style.setInteractive(['xyz'], true);
buildingsSpaceProvider.addEventListener('tap', (evt) => {console.log(evt.target.getData())});

// make the objects within the provider interactive
style.setInteractive(['xyz'], true);

// add an event listener to the provider
// the event listener outputs into the console the data associated 
// with the object
buildingsSpaceProvider.addEventListener('tap', (evt) => {
  console.log(evt.target.getData())
});

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

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

データがスペース内に存在する場合は、形状に関連付けられているラベルをレンダリングすることもできます。 次のコードを上記のスニペットに適用すると、ラベルの表示を有効にする設定規則が追加されます。

// get the style for the layer
var style = buildingsSpaceProvider.getStyle();

// set the configuration for the label display
buildingsSpaceLayer.getProvider().getStyle().setProperty('layers.xyz.labels', {
  draw: {
    text: {
      text_source: 'properties.street',
      // collide: false,
      priority: 0,
      font: {
        size: '14px',
        fill: 'blue',
        stroke: {
          color: 'white',
          width: '1px'
        }
      }
    }
  }
});

以下の図は、上記の設定の影響を示しています。