Leafletのタイルサイズを正方形以外にする方法

こちらの方法を用いて、オリジナル画像でスクロールできる方法を試しています。
https://qiita.com/wakufactory/items/13204ae04f39b7bbeb51

「tileSize:512」と指定すると、タイルの一辺のサイズをデフォルトの256から512に変更できるのですが、
依然として正方形のままです。例えば、サイズを「512×1024」にするにはどうすれば良いでしょうか？

#試したコード

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja-JP">
<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:[-180,120], zoom:1, crs:L.CRS.Simple,}); //100単位で大胆に数値を変えないと動かない

    var canvasTiles = L.tileLayer.canvas({async:false, continuousWorld:true, tileSize:512, attribution: "地図データ：<a href='http://souzoumap.webcrow.jp/Maps/Maps.HTM' target='_blank'>想像地図研究所</a>"});

    canvasTiles.drawTile = function(canvas, tilePoint, zoom) {
        var w = Math.pow(2,zoom) ;
        
        var ctx = canvas.getContext('2d');
        ctx.font = "bold 20px 'Arial'";
        ctx.fillRect(0,0,511,511) ; //塗りつぶしの範囲
        ctx.fillStyle = '#00ff00'; //文字色
        ctx.fillText("左上の座標("+tilePoint.x/w+", "+(-1*tilePoint.y/w)+")",10,20) ; 
        ctx.fillText("　右上の座標("+(tilePoint.x/w+1/w)+", "+(-1*tilePoint.y/w)+")",10,50) ; 

        if(-1*tilePoint.y>=0 && tilePoint.x>=0)　//N>=0 かつ E>=0
        {ctx.fillText("地図番号：Z"+zoom+"N"+(-1*tilePoint.y)+"E"+tilePoint.x,10,80)} ; //地図番号
        if(-1*tilePoint.y<0 && tilePoint.x>=0)　//N<0 かつ E>=0
        {ctx.fillText("地図番号：Z"+zoom+"S"+tilePoint.y+"E"+tilePoint.x,10,80)} ; //地図番号
    }
    canvasTiles.addTo(map);
    map.on('click', function(e) {
        var c = e.latlng;
        console.log(c.lng/512+"/"+(-c.lat)/512);
    });
}

</script>
<body>
<div id="map"></div>
</body>
</html>

行動規範の内容に同意します

回答1件

ベストアンサー

タイルは正方形である前提で組まれているものなので、変形タイルは難しいと思います。

サイズを1024のタイルにして、タイルのHTMLで画像を二つ並べるようにしてみてはいかがでしょう。
L.GridLayerでタイル自体の生成方法を指定できます。

【L.GridLayerでコピペ可能なタイル座標の表示 - monomotiの日記】
http://monomoti.hatenablog.jp/entry/ac2016

【Documentation - Leaflet - a JavaScript library for interactive maps】
http://leafletjs.com/reference-1.3.0.html#gridlayer

投稿2018/02/17 04:34

kei344

総合スコア69625

koridentetsu

2018/02/17 04:55

説明不足ですみません。「512×1024」というのは例えで、実際には様々な縦横比(841×1189や、1681×2377など)で試してみたいと思っておりました。正方形でないとできない、とすると、Leafletで望む物をつくることは難しい、ということになりそうですので、他の方法を考えてみたいと思います。

kei344

2018/02/17 04:57

たぶん元画像自体をつなげてタイルに分割するほうが早いと思います。

koridentetsu

2018/02/17 05:08

元画像を繋げると10万ピクセルくらいになってしまい、PCの処理能力的にその方法は無理でした。そのため、OpenLayersなど、別の方法を試してみようと思います。

kei344

2018/02/17 06:29

【Documentation - Leaflet - a JavaScript library for interactive maps】 http://leafletjs.com/reference-1.3.0.html#gridlayer-tilesize > Width and height of tiles in the grid. Use a number if width and height are equal, or L.point(width, height) otherwise. ドキュメントに上記記述があるので、タイルサイズは自分で指定できるようです。

koridentetsu

2018/02/17 07:34

ありがとうございます。先程、この方法を試してみましたが、「tileSize:512」を「tileSize:L.point(1681,2377)」に置き換えても動作しませんでした。どこを直せば良いでしょうか?

kei344

2018/02/17 10:55

すみませんが、手元に検証環境が無いため、「ドキュメントに書いてある」以上のことはわかりません。

koridentetsu

2018/02/17 13:14

ありがとうございます。詳しく読んでみたところ、GridLayerは確かにご教示頂いた方法で長方形にすることができても、tileLayerではできないようですね。よって、Leafletでタイルを正方形ではなく長方形にするのは、難しいようなので、OpenLayersなど、他の方法で同じことが実現できないか検討してみます。

行動規範の内容に同意します