ガイドv3.2 API Referencev3.1 API Reference
ガイド
  1. 開発者ガイド

マップオブジェクトを管理する

 HERE Maps API for JavaScript version 3.2

Maps API for JavaScriptは、地図上のオブジェクトを簡単に整理できるオブジェクトモデルを提供します。このAPIは、オブジェクトをマーカー、空間、グループの3つのタイプに分類します。

マーカー

マーカーは、地図上の位置を視覚的に示すもので、地理座標 (緯度と経度) と関連付けられたアイコンで表されます。地図をパンするとマーカーの位置は変化しますが、そのサイズは地図のズームレベルに関係なく一定です。

APIにはさまざまなシナリオに対応する2タイプのマーカーが用意されています。

詳細については、「マーカーを追加する」を参照してください。

ジオシェイプ

空間オブジェクト (空間) は、このガイドではジオシェイプとも呼ばれ、円、長方形、ポリライン、ポリゴンを表します。これらのオブジェクトを使用して、地図上のエリアをマークできます。空間オブジェクトは一連の地理的ポイントによって定義され、地図のパンやズームに合わせて移動および拡大縮小されます。これにより、画面上の図形の位置が地理的位置を正確に反映することが保証されます。

空間オブジェクトには、アウトラインのレンダリング方法や塗りつぶし方法 (閉じた図形の場合) を決定するスタイル情報が含まれています。Maps APIでは、次のクラスを使用して空間オブジェクトを表します。

オーバーレイ

オーバーレイは、地図上の長方形のエリアをビットマップ画像で覆うオブジェクトです。一連の地理的ポイントによって定義されます。画像は、動的に生成することも、サーバーから静的ビットマップとして取得することもできます。

詳細については、「カスタムオーバーレイを表示する」を参照してください。

グループ

グループは、子オブジェクト (マーカー、空間、サブグループ) のコレクションを保持できる論理コンテナです。グループを使用すると、マップオブジェクトを効率的に管理でき、オブジェクトを個別に操作することなく、追加、削除、表示、非表示といった一括操作が可能になります。さらに、グループは、含まれるすべてのオブジェクトを含むバウンディングボックスの計算を容易にし、グループ内の子オブジェクトから発生するイベントをリッスンする機能も提供します。

詳細については、APIリファレンスのH.map.Groupドキュメントを参照してください。

オブジェクトを追加または削除する

各マップオブジェクトのタイプは、APIのクラスに対応します。こうしたクラスのインスタンスを新しく作成しても、地図上には自動的に表示されません。HTMLのドキュメントオブジェクトモデル (DOM) のノードと同様に、オブジェクトはaddObject()メソッドを使用して明示的にルートグループに追加する必要があります。逆に、地図からオブジェクトを削除するには、removeObject()メソッドを使用します。

グループには独自のaddObject()およびremoveObject()メソッドがあり、HTML DOMのコンテナ要素のように動作します。地図上に空のグループを作成し、後から個々のオブジェクトを追加することも可能です。

次のコード例は、その方法を示しています。

  • 空のグループを作成する
  • それを地図に追加する
  • マーカーを作成し、グループのメンバーにする
// Create a group that can hold map objects:
const group = new H.map.Group();

// Add the group to the map object (created earlier):
map.addObject(group);

// Create a marker:
const marker = new H.map.Marker(map.getCenter());

// Add the marker to the group (which causes 
// it to be displayed on the map)
group.addObject(marker);

マップオブジェクトのレンダリング順序を理解する

HERE Maps API for Javascriptのレンダリングエンジンは、マップオブジェクトを評価した後、空間オブジェクト、マーカー、DOMマーカーを別々のパスでレンダリングします。そのため、空間、マーカー、DOMマーカーは混在できません。空間オブジェクトは、メインシーンの地理空間内に他のマップレイヤーと同様にレンダリングされます。その後、APIはすべての通常のMarkersをレンダリングし、最後にすべてのDomMarkersをレンダリングします。

次のステップ

詳細については、以下を参照してください。

14 日前の更新