ジオシェイプを使用する

HERE Maps API for Javascriptを使用すると、円、長方形、折れ線、多角形（空間とも呼ばれます）を使用して、マップ上の領域を強調表示したり境界を設定したりすることができます。紙の上に鉛筆やペンで描くのと同じように、これらの図形をオンラインマップ上に直接描くことができます。このAPIでは、図形の色、線の太さ、透明度を柔軟に設定できる幅広いオプションが用意されています。さらに、空間フィーチャーを使用すると、正確な地理的精度で各図形を正確に配置できます。

一般的な空間フィーチャー

HERE Maps API for Javascriptで最も一般的な空間フィーチャーの種類 (ポリライン、ポリゴン、長方形、円) について説明します。

折れ線（ H.map.Polyline）は、点のセットによって定義されるマップ上の直線です（APIでは、 H.geo.LineString）を指定し、Maps APIでマップ上の線をレンダリングする方法を指定するスタイルを指定します。ポリラインのインスタンスは、ルートのようなパスを描画するために使用できます。

多角形（ H.map.Polygon)は折れ線に似ていますが、閉じた形状を表します。そのため、ポリゴンは地図上のエリアの強調や表示をするのに役立ちます。デフォルトでアウトラインや塗りつぶしの色がないポリラインとは異なり、ポリゴンはオプションのアウトラインで縁取りし、任意の色で塗りつぶすことができます。

長方形（ H.map.Rect)および円( H.map.Circle)は、ポリゴンの基本的なジオメトリに基づいて構築された特殊なポリゴンタイプです。

地理的な図形を表示するには、関連するAPIクラスのインスタンスを作成し、結果のオブジェクトをMapオブジェクトに追加する必要があります。この手順については、次のセクションで説明します。

📘
注
次のセクションでは、コード追加を導入するための基礎として、「HERE Maps API for Javascriptの使用を開始する」で説明したベースマップを基にしています。

地図上に円を描画する

次の例は、地図上に円を追加する方法を示しています。

// Instantiate a circle object (using the default style):
var circle = new H.map.Circle({lat: 52.51, lng: 13.4}, 8000);

// Add the circle to the map:
map.addObject(circle);

前の例のコードでは、円をインスタンス化し、その中心の緯度と経度、および半径を指定し、最後にその円を地図に追加しています。

次の図は、結果として表示される地図の例です。円を使用した地図

空間フィーチャーのスタイルを設定する

Maps API for JavaScriptを使用すると、スタイル設定によって地理的図形の外観をカスタマイズできます。使用可能なカスタマイズオプションには、次のものがあります。

スタイルのプロパティ	説明
`strokeColor`	図形のアウトラインの色
`lineWidth`	アウトラインの幅 (ピクセル単位)
`fillColor`	図形の領域を塗りつぶす色 (ポリラインでは無視されます)
`lineDash`	ポリラインの破線の長さと間隔

ジオシェイプに適用できるスタイルプロパティの詳細については、APIリファレンスのH.map.SpatialStyleクラスドキュメントを参照してください。

以下の例は、カスタムスタイリングを長方形オブジェクトに適用する方法を示しています。

// Create a style object:
var customStyle = {
  strokeColor: 'black',
  fillColor: 'rgba(255, 255, 255, 0.5)',
  lineWidth: 10,
  lineDash: [2, 2]
};

// Create a rectangle and pass the custom style as an options parameter:
var rect = new H.map.Rect(new H.geo.Rect(53.5, 12.5, 51.5, 14.5), 
  { style: customStyle });

// Add the rectangle to the map:
map.addObject(rect);

// Zoom the map to fit the rectangle:
map.getViewModel().setLookAtData({bounds: rect.getBoundingBox()});

前の例のコードでは、主に次の3つのオブジェクトを作成しています。

線の色や塗りつぶしの色、線のプロパティなどのスタイル情報を保持するオブジェクト。
地理座標 (四隅の座標) を指定し、スタイルオブジェクトの参照を提供する長方形のインスタンス。
最後の2つの関数呼び出しは、長方形を地図に追加し、長方形全体が地図の境界内に表示されるようにマップビューの境界を設定しています。

次の図は、結果として表示されるマップビューの例です。カスタムスタイルの長方形を使用した地図

任意の地理的ポイントに基づく空間フィーチャー

前の例では、事前定義された図形を使用して、地図上に円と長方形をそれぞれ追加する方法を紹介しました。しかしほとんどの場合、地図上の図形はGPSトレースやルート検索情報などの任意のソースから作成されます。次の例は、任意の地理的ポイントをポリラインに変換する方法を示しています。

これを実現するために、コードは緯度と経度の座標を使用してポイントの配列を定義し、これらのポイントを LineStringオブジェクト（ H.geo.LineString)。順序付けられた点のセットを表します。このLineStringインスタンスは、ポリラインのポイントソースとして機能します。

最後に、コードはそのポリラインを地図に追加し、図形全体が地図の境界内に表示されるようにビューの境界を設定します。

// Define points to represent the vertices of a short route in Berlin, Germany:
var points = [
  { lat: 52.5309825, lng: 13.3845921 },
  { lat: 52.5311923, lng: 13.3853495 },
  { lat: 52.5313532, lng: 13.3861756 },
  { lat: 52.5315142, lng: 13.3872163 },
  { lat: 52.5316215, lng: 13.3885574 },
  { lat: 52.5320399, lng: 13.3925807 },
  { lat: 52.5321472, lng: 13.3935785 },
  { lat: 52.5323832, lng: 13.395499  },
  { lat: 52.5324261, lng: 13.3959818 },
  { lat: 52.5325012, lng: 13.397795  },
  { lat: 52.5325656, lng: 13.3986318 },
  { lat: 52.5326192, lng: 13.3989215 },
  { lat: 52.5325119, lng: 13.3989751 },
  { lat: 52.5323081, lng: 13.3991039 },
  { lat: 52.5318789, lng: 13.3994472 },
  { lat: 52.5301194, lng: 13.4009278 },
  { lat: 52.5297546, lng: 13.4012604 },
  { lat: 52.5296152, lng: 13.4014106 },
  { lat: 52.5289822, lng: 13.4018934 },
  { lat: 52.5276947, lng: 13.4029663 },
  { lat: 52.5271797, lng: 13.4033203 },
  { lat: 52.5269973, lng: 13.4033954 },
  { lat: 52.5265145, lng: 13.4035349 },
  { lat: 52.5260746, lng: 13.4036851 },
  { lat: 52.5260103, lng: 13.4038353 },
  { lat: 52.5256562, lng: 13.40464   },
  { lat: 52.5253022, lng: 13.4053588 },
  { lat: 52.5250447, lng: 13.4059381 },
  { lat: 52.5249588, lng: 13.4062278 },
  { lat: 52.5249267, lng: 13.4064317 },
  { lat: 52.5249052, lng: 13.406775  },
  { lat: 52.5248623, lng: 13.4069574 },
  { lat: 52.5241864, lng: 13.4089208 },
  { lat: 52.5241327, lng: 13.4091246 },
  { lat: 52.5240898, lng: 13.409307  },
  { lat: 52.5240040, lng: 13.4096611 },
  { lat: 52.5239503, lng: 13.4101653 },
  { lat: 52.5239289, lng: 13.4110343 },
  { lat: 52.5238967, lng: 13.4117103 },
  { lat: 52.5238752, lng: 13.4120321 },
  { lat: 52.5236285, lng: 13.4126866 },
  { lat: 52.5231242, lng: 13.4139311 },
  { lat: 52.5227809, lng: 13.4146714 },
  { lat: 52.5224799, lng: 13.4152412 }
];

// Initialize a linestring and add all the points to it:
var linestring = new H.geo.LineString();
points.forEach(function(point) {
  linestring.pushPoint(point);
});

// Initialize a polyline with the linestring:
var polyline = new H.map.Polyline(linestring, { style: { lineWidth: 10 }});

// Add the polyline to the map:
map.addObject(polyline);

// Zoom the map to fit the rectangle:
map.getViewModel().setLookAtData({bounds: polyline.getBoundingBox()});

次の画像は、前の例のコードによって作成されたポリラインを使用した地図を示しています。