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 =newH.Map(...);// Instantiate a circle object (using the default style):var circle =newH.map.Circle({lat:52.51,lng:13.4},8000);// Add the circle to the map:
map.addObject(circle);
Maps API では、スタイルを設定してジオシェイプの外観をカスタマイズできます。 カスタマイズオプションには次のものがあります。
Style プロパティ
説明
strokeColor
図形のアウトラインの色です
lineWidth
アウトラインの幅 ( ピクセル単位 )
fillColor
シェイプの領域を塗りつぶす色です(ポリラインでは無視されます)
lineCap
アウトラインの終端処理のレンダリングスタイル
lineJoin
アウトライン内の頂点のレンダリングスタイル
次の例では、四角形オブジェクトにカスタムスタイルを適用する方法を示します。
// Create a map object:var map =newH.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 =newH.map.Rect(newH.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()});
// Create a map object:var map =newH.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 =newH.geo.LineString();
points.forEach(function(point){
linestring.pushPoint(point);});// Initialize a polyline with the linestring:var polyline =newH.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()});