世界の測量

Sibling of "Relevant, Timely, and Accurate, " but much lighter and shorter ※自らの所属する組織の見解を示すものでない

CanvasTile


ということで、タイルの(zoom/columns/row)の表示を HTML5 canvas を使ってタイル化して表示するサンプルを作成した。
CanvasTile
主要なコードは、次の通り。

var can = L.tileLayer.canvas();
can.drawTile = function(canvas, tilePoint, zoom) {
  var ctx = canvas.getContext('2d');
  ctx.strokeRect(0, 0, 255, 255);
  ctx.textAlign = 'center';
  ctx.font = '22px sans-serif';
  ctx.fillStyle = '#f00';
  ctx.strokeStyle = '#fff'
  ctx.fillText(zoom + '/' + tilePoint.x + '/' + tilePoint.y, 128, 128);
}
map.addLayer(can);

地図表示を見るとわかるが、つまりこれは、XYZタイルだ。