建物を押し出しました
マップ上の建物をインタラクティブにする ( 選択時に高輝度表示するなどの機能 ) ために、ユーザーはイメージに関するメタデータ情報を取得し、押し出した建物を含むマップ タイルを表示したいと考えています。
メタ情報タイルリクエスト
&metadata=metaonly
押し出し建物の一部を持つタイルでメタデータを取得します。
https://2.base.maps.ls.hereapi.com/maptile/2.1/maptile/newest/normal.day/19/281707/171901/256/png8
?apiKey={YOUR_API_KEY}
&metadata=metaonly
&mgen=2
メタ情報タイル応答を処理しています
リクエストに対する応答では、次のメタ情報タイルが JSON オブジェクトとして提供されます。
{
"metadata": {
"street labels":[],
"labels":[],
"city center labels":[],
"buildings":[
{
"id": "1609441356716643099",
"vertices": [ 37, 161.69, 18, 199.50, 0, 189.18, 0, 142.78 ],
"polygons": [ [ 0, 1, 2, 3]],
"outlines": [ [ 0, 1, 2 ], [ 3, 0 ]]
}
],
"transit stops":[ ],
"POIs":[ ]
}
}
この応答では、建物には 8 つの頂点があり、内側の多角形については反時計回りに、外側の多角形については時計回りに並べられています。 この例では、外側の多角形のみが存在するため、内側に塗りつぶされ、内側のすべての多角形が外側に塗りつぶされます。
メタデータには、 2 つ のpolygons
outlines
配列、およびが含まれています。各配列には、指定された頂点の配列を参照するインデックスの配列が含まれています。 この場合、頂点のインデックス (0 、 1 、 2 、 3) を持つ 1 つのポリゴンがあります。このポリゴンは、建物のフラグメントの輪郭を表し、 2 つのアウトラインは頂点のインデックスも持っています。この場合、 (0, 1 、 2) および (3, 0 )。
HTML5 カンバスを使用した多角形
この情報を使用して、 HTML5 カンバスなど、建物の形状を反映した多角形を描画できます。
<canvas id="building_canvas" width="256" height="256" style="border:1px solid #d3d3d3;" />
<script>
var building_canvas = document.getElementById('building-canvas');
building_canvas.getContext('2d').clearRect(0, 0, building_canvas.width, building_canvas.height);
var bcnt = map.custom.tile_meta.metadata.buildings.length;
var bld;
console.log('There are ' + bcnt.toString() + ' buildings on the tile')
var building_canvas = document.getElementById('building-canvas').getContext('2d');
building_canvas.fillStyle = '#FFE8E8';
building_canvas.strokeStyle="green";
building_canvas.lineWidth=1;
var vertices, mpolygons, moutlines;
for (var i=0; i<bcnt; i++) {
bld = map.custom.tile_meta.metadata.buildings[i];
vertices = bld.vertices;
mpolygons = bld.polygons;
moutlines = bld.outlines;
// move to first point
building_canvas.beginPath();
for (var idx = 0; idx < mpolygons.length; idx++) {
for ( var vidx = 0; vidx < mpolygons[idx].length; vidx++ ) {
var index = 2*mpolygons[idx][vidx];
point = vertices.slice(index, index+2);
if ( vidx == 0 ) {
building_canvas.moveTo(point[0], point[1]);
}
building_canvas.lineTo(point[0], point[1]);
}
}
building_canvas.fill();
building_canvas.beginPath();
for (var idx = 0; idx < moutlines.length; idx++) {
for ( var vidx = 0; vidx < moutlines[idx].length; vidx++ ) {
var index = 2*moutlines[idx][vidx];
point = vertices.slice(index, index+2);
if ( vidx == 0 ) {
building_canvas.moveTo(point[0], point[1]);
}
building_canvas.lineTo(point[0], point[1]);
}
}
building_canvas.stroke();
building_canvas.closePath();
}
</script>
上記のリクエストでは、このタイルに表示されている建物の一部のみが考慮されます。 建物全体が、上記の対応の建物と、その隣の別の建物 ( 列 / 列 :) で構成 281706/171901
されています。 上記のように、この建物のメタデータを要求すると(メタ情報タイルリクエスト)、結果の応答は同じ建物 ID 1609441356716643099
を提供します。
したがって、両方のタイルから多角形を結合して、建物全体の形状を反映し、多角形をマージできます。