HERE Map Tile v2 開発者ガイド

建物を押し出しました

マップ上の建物をインタラクティブにする ( 選択時に高輝度表示するなどの機能 ) ために、ユーザーはイメージに関するメタデータ情報を取得し、押し出した建物を含むマップ タイルを表示したいと考えています。

図 1. 押し出しビルの一部を使用したタイル

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

&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
注 : この例 では、 HERE API キー を使用してリクエストを認証します。 使用可能な認証オプションについて は、『 Identity & Access Management 開発者ガイド』を参照してください。

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

リクエストに対する応答では、次のメタ情報タイルが 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 つ のpolygonsoutlines配列、およびが含まれています。各配列には、指定された頂点の配列を参照するインデックスの配列が含まれています。 この場合、頂点のインデックス (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>
図 2. メタデータを使用して反映された建物シェイプ

上記のリクエストでは、このタイルに表示されている建物の一部のみが考慮されます。 建物全体が、上記の対応の建物と、その隣の別の建物 ( 列 / 列 :) で構成 281706/171901されています。 上記のように、この建物のメタデータを要求すると(メタ情報タイルリクエスト)、結果の応答は同じ建物 ID 1609441356716643099 を提供します。

したがって、両方のタイルから多角形を結合して、建物全体の形状を反映し、多角形をマージできます。

図 3. メタデータを使用して反映された建物シェイプ
図 4. 元の建物の画像 (2 つのタイル )
図 5. 建物のイメージをハイライトしました