HERE Indoor Map を統合します

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

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

HERE Indoor Map を統合するための前提条件

HERE Indoor Map を Maps API に統合するには、次の前提条件を満たす必要があります。

  1. アプリ 資格情報 は、要求された屋内地図へのアクセス権を持っている必要があります。また、関連する屋内地図を含むカタログのカタログ HERE リソースネーム が必要です。

  2. HTML <head> ページのセクションに HERE Indoor Map モジュールスクリプトを追加します。

<!DOCTYPE html>
  <html>
  <head>
  ...
  <script src="https://js.api.here.com/v3/3.1/mapsjs-core.js"
     type="text/javascript"></script>
  <script src="https://js.api.here.com/v3/3.1/mapsjs-mapevents.js"
     type="text/javascript"></script>
  <script src="https://js.api.here.com/v3/3.1/mapsjs-service.js"
     type="text/javascript"></script>
  <script src="https://js.api.here.com/v3/3.1/mapsjs-ui.js"
     type="text/javascript"></script>
  <script src="https://js.api.here.com/v3/3.1/mapsjs-venues.js"
     type="text/javascript"></script>
  ...
  </head>

地図にデータを表示しています

地図上でデータを作成して表示するには、はじめにで説明されている手順に従います。

サービスのインスタンスを作成しています

プラットフォーム オブジェクトを使用 して、屋内地図を読み込んで、ロードされた屋内地図を制御するH.venues.Providerオブジェクトを作成するための（プラットフォーム での最新のサービスを提供します。 Service2 は、これらのサービスを提供します）のH.venues.Service2インスタンスを取得します。 H.service.Platform.getVenuesService サービスのインスタンス化の詳細については、を参照してください。

有効な屋内地図コレクション HERE リソースネーム の有無にかかわらず、インスタンスを作成するには 2 つの方法があります。

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

HERE リソースネーム が指定されていない場合は、有効な OAuth トークン 値を設定する必要が H.venues.Service2 あります。設定されていない場合、は動作しません。 このリンクには、 HERE platform で有効な OAuth トークンを取得する方法の詳細が含まれています。

// Get instance of the Indoor Maps service
// The second parameter 'opt_version' signifies the venues version. 
//    2 = latest venue service, 1 = legacy service
const venuesService = platform.getVenuesService({ 
  token: "Platform token"
}, 2);

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

有効な HERE リソースネーム 値を設定する必要が H.venues.Service2 あります。設定しないと、は動作しません。 このリンクには、プロジェクトの有効な HERE リソースネーム 文字列を取得する方法についての詳細情報が含まれています。 HERE リソースネーム が提供されている場合は、さらに HERE platform の API キーまたはトークン が必要です。 

// Get instance of the Indoor Maps service
// The second parameter 'opt_version' signifies the venues version. 
//    2 = latest venue service, 1 = legacy service
const venuesService = platform.getVenuesService({ 
  apikey: 'API KEY',
  hrn: 'Platform hrn for indoor maps catalog'
}, 2);

利用可能なすべての屋内地図のリストを取得しています

H.venues.Service2 このオブジェクトは getMapInfoList 、メソッドを通して屋内地図情報リストを提供します。 この機能は、指定された 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)
})

屋内地図を読み込んでいます

H.venues.Service2 屋内地図を読み込んで H.venues.Provider 、読み込まれた屋内地図を制御するオブジェクトを作成するには、 (BORITES.Service2 がプラットフォーム の最新サービスを提供します ) のインスタンスを使用します。 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 の例
図 1. HERE Indoor Map の例

上の例は、マップ上の 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.Service2 の H.venues.Service2.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.Service2.LABEL_TEXT_PREFERENCE_OVERRIDE.SPACE_NAME,
  H.venues.Service2.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されます。

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

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