CanvasTile
@tmizu23 ごく簡素ですが、L.TileLayer.Canvas で作ってみました。というか、つい作ってしまいました。 handygeospatial.info/2012/11/12/
— _hfu_さん (@_hfu_) 11月 12, 2012
ということで、タイルの(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タイルだ。