番地ラベルの付いたメタ情報
ユーザーが、マップ上の道路ラベルをインタラクティブにして提供したいと考えています。たとえば、マップに追加情報を表示させるいくつかのオプションがあります。 この操作を行うには、番地ラベルを含むマップ タイルを表示している画像についてのメタデータ情報を取得する必要があります。
元のマップ タイル
このリクエストは、番地ラベルの付いたマップ タイルを取得します。
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
:
次のリクエストは、このマップ タイルに関する詳細情報を取得します。
メタ情報タイルリクエスト
次のコードブロックは、メタデータマップ タイルに対する完全なリクエストを示しています。
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 < vertices.length; idx+=2) {
point = vertices.slice(idx, idx+2);
street_canvas.lineTo(point[0], point[1]);
}
// Finalize
street_canvas.stroke();
</script>