HERE Map Tile v2 開発者ガイド

番地ラベルの付いたメタ情報

ユーザーが、マップ上の道路ラベルをインタラクティブにして提供したいと考えています。たとえば、マップに追加情報を表示させるいくつかのオプションがあります。 この操作を行うには、番地ラベルを含むマップ タイルを表示している画像についてのメタデータ情報を取得する必要があります。

注 : これらの例 では、 HERE API キー を使用して要求を認証します。 使用可能な認証オプションについて は、『 Identity & Access Management 開発者ガイド』を参照してください。

元のマップ タイル

このリクエストは、番地ラベルの付いたマップ タイルを取得します。

https://2.base.maps.ls.hereapi.com/maptile/2.1/maptile/newest/normal.day/14/8818/5384/256/png8
?apiKey={YOUR_API_KEY}

応答には、次の住所の番地ラベルが含まれています Berliner Ring:

図 1. マップ タイルとストリートラベル

次のリクエストは、このマップ タイルに関する詳細情報を取得します。

メタ情報タイルリクエスト

次のコードブロックは、メタデータマップ タイルに対する完全なリクエストを示しています。

https://2.base.maps.ls.hereapi.com/maptile/2.1/maptile/newest/normal.day/14/8818/5384/256/png8
?apiKey={YOUR_API_KEY}
&metadata=metaonly
&mgen=2

メタ情報タイル応答を処理しています

この要求では、クエリ パラメーター metadata が応答にメタデータのみを含めることを指定し、クエリ パラメーター mgen が応答に含めるメタ情報を指定します。

{
  "metadata": {
    "street labels":[ { "name":"Berliner Ring", "font size":"15", "vertices": [ 82.37, 214.71, 90.64, 189.39, 91.79, 185.92, 94.70, 177.84, 97.71, 170.14, 103.47, 155.49, 118.07, 127.86 ] } ],
    "labels":[ ... ],
    "city center labels":[],
    "buildings":[  ],
    "transit stops":[  ],
    "POIs":[  ]
  }
}
  
注 : 応答の一部は 、例の概要で説明されているように変更されます。

この情報を使用すると、ストリートラベルを検索してインタラクティブにすることができます。 メタ情報タイルには vertices、道路セグメントのポリラインとフォントサイズを表すの配列があります。

これらを使用 verticesすると、 HTML5 カンバスで太い線を描画できます。

<canvas id="street_canvas" width="256" height="256" style="border:1px solid #d3d3d3;" />
<script>
  // Assuming we have metadata from described request
  var vertices = [ 82.37, 214.71, 90.65, 189.39, 91.80, 185.92, 94.70, 177.84, 97.71, 170.13, 103.47, 155.49, 118.07, 127.86 ]
  var font_size = 15

  var street_canvas = document.getElementById('street_canvas').getContext('2d');
  
  street_canvas.lineWidth = font_size;
  street_canvas.beginPath();

  // Move to start point
  var point = vertices.slice(0, 2);
  street_canvas.moveTo(point[0], point[1]);
  
  // Draw rest of the points
  for (var idx = 2; idx &lt; vertices.length; idx+=2) {
    point = vertices.slice(idx, idx+2);
    street_canvas.lineTo(point[0], point[1]);      
  }

  // Finalize
  street_canvas.stroke();
</script>
図 2. 反射型道路ラベルポリライン