ジオシェイプ·Maps API　for JavaScript

www.here.com にアクセス

ジオシェイプ

HERE Maps API for Javascript を使用すると、円、長方形、ポリライン、およびポリゴン ( 短時間のspatials ) を使用して、マップ上の領域を簡単に強調表示して境界を設定できます。紙の地図に鉛筆やペンで描画するのと同じように、オンラインマップ上に描画することができますが、API では形状、色、線の太さだけでなく、描画することもできるため、より柔軟に描画できます。形だけでなく透明度も。さらに重要なのは、spatialsによって、正確な地理的精度でシェイプを配置できることです。

polyline (H.map.Polyline)は、一連のポイント ( API では geo.LineStringとして表されます ) および Maps API がマップ上の行をトレースする方法を定義するスタイルで定義されたマップ上の行です。ルートに似たパスを描画するには、ポリラインを使用できます。 polygon (H.map.Polygon)は、閉じた形状であることを除き、ポリラインと似ています。そのため、マップ上の領域の表示や強調表示に使用できます。ポリラインとは異なり、ポリゴンはオプションのアウトラインでトレースされ、任意の色で塗りつぶすことができます。

長方形 (H.map.Rect)および円 (H.map.Circle) は、多角形の拡張です。

ジオシェイプを表示するには、対応する API クラスをインスタンス化し、結果のオブジェクトをマップオブジェクトに追加する必要があります。

マップに円を追加

次の例では、マップに円を追加する方法を示します。

    // Instantiate a map object:
var map = new H.Map(...);

// 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);

このコードでは、マップオブジェクトを作成し、円をインスタンス化して、その中心と半径の緯度と経度を提供し、最後に円をマップに追加します。

次の図は、結果を示しています。

円を使用したマップ — 図 1. 円を使用したマップ

ジオシェイプスタイルの設定

Maps API では、スタイルを設定してジオシェイプの外観をカスタマイズできます。カスタマイズオプションには次のものがあります。

Style プロパティ	説明
`strokeColor`	図形のアウトラインの色です
`lineWidth`	アウトラインの幅 ( ピクセル単位 )
`fillColor`	シェイプの領域を塗りつぶす色です（ポリラインでは無視されます）
`lineCap`	アウトラインの終端処理のレンダリングスタイル
`lineJoin`	アウトライン内の頂点のレンダリングスタイル

次の例では、四角形オブジェクトにカスタムスタイルを適用する方法を示します。

// Create a map object:
var map = new H.Map(...);

// Create a style object:
var customStyle = {
  strokeColor: 'black',
  fillColor: 'rgba(255, 255, 255, 0.5)',
  lineWidth: 10,
  lineCap: 'square',
  lineJoin: 'bevel'
};

// 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()});

コードが実行されると、次のものが作成されます

マップオブジェクト
線、塗り潰しの色、線のプロパティなど、スタイルの詳細を保持するオブジェクト
四角形のインスタンス。角の地理的座標を指定し、スタイルオブジェクトを提供します

最後の 2 つの関数呼び出しでは、マップに矩形が追加され、矩形全体が表示されるようにマップビューの境界が設定されます。

次のイメージは、結果のマップビューを示しています。

カスタムスタイルの四角形を使用したマップ — 図 2. カスタムスタイルの四角形を使用したマップ

任意の地理的ポイントからの形状

上記の例では、定義済みの図形を使用して、円と四角形をそれぞれマップに配置しています。ただし、ほとんどの場合、地図の図形は、 GPS トレースや経路情報などのさまざまな任意のソースから作成されます。

次の例では、任意の地理的ポイントをポリラインに変換します。まず、マップオブジェクトを作成し、次に緯度と経度で定義されたポイントの配列を作成します。次の手順では、ポイントを順序付きのポイントのセットを表すオブジェクト (LineStringH.geo.LineString) に変換します。このインスタンスLineStringは、ポリラインのポイントソースです。

この例では、ポリラインをマップに追加し、ビューの境界を設定して図形全体を表示することで終了します。

// Create a map object:
var map = new H.Map(...);

// 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()});

次の図は、このコードで作成されたポリラインを含むマップを示しています。

ポリラインを使用したマップ — 図 3. ポリラインを使用したマップ

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

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