ガイドv3.2 API Referencev3.1 API Reference
ガイド
  1. 開発者ガイド
  2. 地図をカスタマイズする

HERE Indoor Mapを統合する

 HERE Maps API for JavaScript version 3.2

HERE Indoor Mapは複数のフロアにまたがる建物のジオメトリーや関心地点など、屋内空間をモデリングする高品質の地図を提供します。HERE Indoor Map の詳細については、HERE Indoor Map のユーザー ガイドを参照してください。

このチュートリアルでは、Maps API で HERE Indoor Map を統合して使用する方法について説明します。

HERE Indoor Map 統合の前提条件

Maps API で HERE Indoor Map を統合するには、次の前提条件が必要です。

  1. アプリの資格情報で、リクエストされた Indoor Map にアクセスできる必要があり、また関連する Indoor Map を含むカタログのカタログ HRN も必要になります。
  2. HERE Indoor Map のモジュール スクリプトを HTML ページの <head> セクションに含めます。
<!DOCTYPE html>
  <html>
  <head>
  ...
  <script src="https://js.api.here.com/v3/3.2/mapsjs-core.js"
     type="text/javascript"></script>  
  <script src="https://js.api.here.com/v3/3.2/mapsjs-mapevents.js"
     type="text/javascript"></script>
  <script src="https://js.api.here.com/v3/3.2/mapsjs-service.js"
     type="text/javascript"></script>
  <script src="https://js.api.here.com/v3/3.2/mapsjs-ui.js"
     type="text/javascript"></script>
  <script src="https://js.api.here.com/v3/3.2/mapsjs-venues.js"
     type="text/javascript"></script>
  ...
  </head>

マップにデータを表示する

📘

注

次のセクションでは、「HERE Maps API for Javascriptの使用を開始する」で説明したベースマップを基盤として、コードを追加する方法を説明します。

サービスのインスタンスを作成する

プラットフォームオブジェクトを使用してH.venues.Serviceのインスタンスを取得し (venues.Serviceはプラットフォームで最新のサービスを提供します)、Indoor Mapsを読み込み、読み込まれたIndoor Mapを制御するためのH.venues.Providerオブジェクトを作成します。サービスのインスタンス化の詳細については、「H.service.Platform.getVenuesService」を参照してください。

インスタンスの作成方法として、有効な Indoor Map のコレクション HRN を使用する場合と使用しない場合の 2 つの方法があります。

コレクション HERE リソースネームを使用せずにサービスのインスタンスを作成する

HERE リソースネームが提供されない場合は、有効な OAuth トークン値を設定する必要があります。設定しない場合、H.venues.Service は機能しません。このリンクには、HERE プラットフォームで有効な OAuth トークンを取得する方法の詳細が記載されています。

// Get instance of the Indoor Maps service
const venuesService = platform.getVenuesService({ 
  token: "Platform token"
});

コレクション HERE リソースネームを使用してサービスのインスタンスを作成する

有効な HERE リソースネーム値を設定する必要があります。設定しない場合、H.venues.Service は機能しません。このリンクには、プロジェクトの有効な HERE リソースネーム文字列を取得する詳しい方法が記載されています。

HERE リソースネームが提供される場合は、さらに HERE プラットフォーム API キーまたはトークンのいずれかが必要です。

// Get instance of the Indoor Maps service
const venuesService = platform.getVenuesService({ 
  apikey: 'API KEY',
  hrn: 'Platform hrn for indoor maps catalog'
});

使用可能なすべての Indoor Map のリストを取得する

H.venues.Service オブジェクトは、getMapInfoList メソッドを通じて Indoor Map 情報リストを提供します。この関数は、指定された HERE リソースネームから使用可能な屋内マップのリストを取得します。

// Get a list of indoor maps
venuesService.getMapInfoList().then((res) => {
  console.log("Indoor Maps: ", res)
}).catch((e) => {
  console.error("Error when fetching map list", e)
})

Indoor Mapを読み込む

H.venues.Serviceのインスタンスを使用し (venues.Serviceはプラットフォームで最新のサービスを提供します)、Indoor Mapsを読み込み、読み込まれたIndoor Mapを制御するためのH.venues.Providerオブジェクトを作成します。サービスのインスタンス化の詳細については、「H.service.Platform.getVenuesService」を参照してください。

// Indoor Maps provider interacts with a tile layer to visualize and control the Indoor Map
const venuesProvider = new H.venues.Provider();

// Indoor Maps service provides a loadVenue method
venuesService.loadVenue(VENUE_ID).then((venue) => {
  // add Indoor Map to the venues provider
  venuesProvider.addVenue(venue);
  venuesProvider.setActiveVenue(venue);

 // create a tile layer for the Indoor Maps provider
  map.addLayer(new H.map.layer.TileLayer(venuesProvider));

  // center the map on the Indoor Map
  map.setCenter(venue.getCenter());
  map.setZoom(15);
});
HERE Indoor Mapの例

前の例は、HERE Maps API for Javascriptを介して表示されるHERE Indoor Mapを示したものです。

階を変更する

Provider は屋内マップの制御を容易にします。現在の階に関する情報を取得するか、階を変更するには、次のように設定します。

// Get active Indoor Map
const venue = venuesProvider.getActiveVenue();

// get current level index
venue.getActiveLevelIndex();

// and change level
venue.setActiveLevelIndex(1);

ラベル設定をオーバーライドする

デフォルトのラベル設定をオーバーライドするには、H.venues.Service の H.venues.Service.LABEL_TEXT_PREFERENCE_OVERRIDE から labelTextPreferenceOverride の値を設定します。

// This is an option to override label preference. 
// If both space name and address are available for a given space, they will take priority over the rest of labels, in the given order.
const labelTextPreferenceOverride = [
  H.venues.Service.LABEL_TEXT_PREFERENCE_OVERRIDE.SPACE_NAME,
  H.venues.Service.LABEL_TEXT_PREFERENCE_OVERRIDE.INTERNAL_ADDRESS
]

// Indoor Maps service provides a loadVenue method
venuesService.loadVenue(VENUE_ID, { labelTextPreferenceOverride }).then((venue) => {
  // add Indoor Map to the venues provider
  venuesProvider.addVenue(venue);
  venuesProvider.setActiveVenue(venue);

 // create a tile layer for the Indoor Maps provider
  map.addLayer(new H.map.layer.TileLayer(venuesProvider));
});

検索機能

H.venues.Venue オブジェクトは、search メソッドを通じて検索機能を提供します。検索文字列では大文字と小文字が区別されず、近い一致も検索されます。

// Get the active Indoor Map
const venue = venuesProvider.getActiveVenue();

// Search for bathrooms
venue.search('Bathroom');

HERE Indoor Map ユーザー インターフェース

デフォルトのユーザー インターフェース要素は、H.venues.ui.DrawingControl と H.venues.ui.LevelControl を使用して図面と階を制御します。

// Get the active Indoor Map
const venue = venuesProvider.getActiveVenue();

// Create the level control
const levelControl = new H.venues.ui.LevelControl(venue);
ui.addControl('level-control', levelControl);

// Create the drawing control:
const drawingControl = new H.venues.ui.DrawingControl(venue);
ui.addControl('drawing-control', drawingControl);

HERE Indoor Map のオブジェクト

HERE Indoor Map のデータは、オブジェクトの階層内にカプセル化されます。これらのオブジェクトは他の MapObject と同じように動作し、次のクラスで表されます。

  • H.venues.Venue
  • H.venues.Drawing
  • H.venues.Level
  • H.venues.Geometry

ルートは Venue で、これには 1 つ以上の Drawing、1 つ以上の Level が含まれます。そして Level オブジェクトは、関連する Geometry オブジェクトのコレクションを保持します。各オブジェクトに関連付けられた未加工データには、getData() メソッドを通じてアクセスできます。クラスは H.map.Feature を拡張します。

14 日前の更新