leafletで地図以外の画像を扱う場合 #JavaScript

leafletを使ってメルカトル図法の地図以外のものを表示する場合、緯度経度の座標系は使いにくいので、座標系を変更します。

これにはL.mapのオプションに、crs:L.CRS.Simpleを指定します。

var map = L.map('map',{
  crs:L.CRS.Simple
})

これだけだとタイルレイヤがうまく表示されないので、タイルレイヤのオプションに、continuousWorld:true を指定する必要があります。

var canvasTiles = L.tileLayer.canvas(
  {continuousWorld:true}
);

この場合緯度経度の座標は、Zoom0のタイルのピクセルサイズに一致し、デフォルトタイルでは右下が(255,-255)になります。LatLng値を(0,0)-(1.0,1.0)に正規化すると使いやすいでしょう。

map.on('click', function(e) {
    var c = e.latlng;
    console.log(c.lng/256+"/"+(-c.lat)/256);
});

以上を踏まえて、canvasタイルレイヤを使って、タイル座標と正規化した緯度経度座標を表示するサンプルです。

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title> leaflet tile sample</title>
<link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet-0.7.3/leaflet.css" />
<script src="http://cdn.leafletjs.com/leaflet-0.7.3/leaflet.js"></script>
</head>
<style>
html, body {
    width: 100%;
    height: 100%;
    margin:0 ;
}
#map {
    width: 100%;
    height: 100%;
}
</style>
<script>
onload = function() {
    var map = L.map('map',{
        center:[0,0],
        zoom:1,
        crs:L.CRS.Simple,
    });

    var canvasTiles = L.tileLayer.canvas({async:false,continuousWorld:true});
    canvasTiles.drawTile = function(canvas, tilePoint, zoom) {
        var w = Math.pow(2,zoom) ;
        if(tilePoint.x<0 || tilePoint.y<0 || tilePoint.x>=w || tilePoint.y>=w) return ;
        var ctx = canvas.getContext('2d');
        ctx.font = "bold 20px 'Arial'";
        ctx.fillRect(0,0,255,255) ;
        ctx.fillStyle = '#fff';
        ctx.fillText(zoom+"/"+tilePoint.x/w+","+tilePoint.y/w,10,20) ;
        ctx.fillText(zoom+"-"+tilePoint.x+"-"+tilePoint.y,10,50) ;  
    }
    canvasTiles.addTo(map);
    map.on('click', function(e) {
        var c = e.latlng;
        console.log(c.lng/256+"/"+(-c.lat)/256);
    });
}
</script>
<body>
<div id="map"></div>
</body>
</html>

実働ページ