OSMに表示する画像タイルレイヤーの位置決めをしたい

Question

GW期間特にやることもなく、日々Javascriptと格闘しております。

Open Street Mapのカスタマイズを継続しているのですが、やりたい事をひとつ達成すると、またあれがやりたいこれがやりたいと、どんどん欲が出てくるものですね。

###前提・実現したいこと
OSM上に手書きメモを残したいと思っているのですが、まさかOSMに直接記録するわけにもいかないため、Leaflet.jsで一枚レイヤーを作り、その上に記録しようと思っております。これはPHP＋GDで動的に実現するつもりですが、現段階では考えないことにします。

とりあえずはデフォルトレイヤー上に画像レイヤーを一枚乗せるところまでいきたいと思っています。
また画像ですが、せっかくなので Zoomify でタイル化したものを使うつもりです。

###発生している問題・エラーメッセージ
参考1、2ともに、「osm」がデフォルトのマップレイヤー、「tegaki」が今回追加する画像レイヤーです。それぞれのレイヤーは切り替え表示が可能で、ここまでは動作することを確認しています。また「lat」「lng」は、Geolocationで取得した現在地情報が入ります。これも動作確認済みです。

問題は「tegaki」レイヤーを表示したときに表示されるタイル画像の位置決めが出来ないんです。参考1も2もサンプルのタイル画像を表示するところまでは出来るのですが、いずれも表示される場所がアフリカ大陸から北極にかけてドドーンと。画像のX軸方向中心はおそらくグリニッジ子午線と思われます。アトランティス大陸があったと言われるあたりですね（汗）デフォルトの座標が緯度経度ゼロのポイントなんでしょうか。

実際に使う画像は町内程度のサイズ、大きくても市内サイズですので、サンプルのタイル画像ほど大きくはなりません。これを任意の位置に持ってこようにも、どこをいじっても画像の位置が変えられないんです。

###参考1 zoomify_layer.jsを使用

var osm = L.tileLayer(
    "http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png", {
        attribution: "© <a href='http://osm.org/copyright'>OpenStreetMap</a> contributors"
    }
);

var imageUrl = 'http://mapy.vugtk.cz/kreibich/zoomify/beroun/',
    imageSize = {
        width: 7112,
        height: 5377
    };

var tegaki = new ZoomifyLayer(imageUrl, imageSize);

var map = L.map(
    "map", {
        center: [lat, lng],
        layers: [osm],
        zoom: 15
    }
);

###参考2 L.TileLayer.Zoomify.jsを使用

var osm = L.tileLayer(
    "http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png", {
        attribution: "© <a href='http://osm.org/copyright'>OpenStreetMap</a> contributors"
    }
);

var tegaki = L.tileLayer.zoomify('http://thematicmapping.org/playground/zoomify/books/', {
    width: 5472,
    height: 3648,
    tolerance: 0.8,
    continuousWorld: true,
    //bounds: ([140.40, 40],[150, 50]),
    attribution: 'Photo: Bjørn Sandvik'
});

var map = L.map(
    "map", {
        center: [lat, lng],
        layers: [osm],
        zoom: 15
    }
);

###試したこと
リファレンス を読みながら、tilelayerの要素を中心に、位置情報の設定ができそうなところはいろいろいじってみたつもりです。
惜しいところまで来ているとは思うのですが、あと一歩が進みません。もしかしたらJavascriptというよりもライブラリの仕様なのかもしれません。レイヤー画像の位置決めさえ出来ればいいのですが、不可能なようであれば、代替案などアドバイス頂けたらありがたいです。何卒よろしくお願いいたします。

###補足情報(言語/FW/ツール等のバージョンなど)
Leaflet
ZoomifyLayer
Leaflet.Zoomify

---

###さらに試したこと
この際タイル化した画像じゃなく、ただの画像でもいいやと思い、次のソースを試してみました。

var w = 960,
    h = 720,
    url = 'mac.jpg';

var bounds = new L.LatLngBounds([0, 0], [960, 720]);

var tegaki = L.imageOverlay(url, bounds, {
    continuousWorld: true,
    crs: L.CRS.Simple
});

色々調べて「L.CRS.Simple」を使うのではないかと思い、従前のソースのtegaki以下を変更してみました。
結果は変わりませんでした。やはり画像は緯度経度0度付近から始まってしまいます。今回の場合は解像度のせいか、世界地図に縦横比を合わせたみたいに画像が歪んでしまいました。

英語サイトを中心に情報を漁っていますが、自分のように地図レイヤーの上に画像レイヤーを重ねて、切り替えて使いたいという事例には辿り着きませんでした。こういう使い方は一般的ではないのでしょうか。zoomifyを使う場合も含めて、画像レイヤー一枚をleefletで使う事例は多いのですが…知識が浅いせいか応用もききません。

Answer 1

今回はタイル画像ではなく、一枚の画像をマップレイヤーの上に重ねて、無理やり対応しました。

var map = L.map('map', {
    maxZoom: 24,
    minZoom: 1
    //crs: L.CRS.Simple
}).setView([lat, lng], 15);

var imageUrl = 'mac.jpg'
var imageBounds = [[40.0, 140.0], [40.1, 140.1]];
var tegaki = L.imageOverlay(imageUrl, imageBounds).addTo(map);

mapを定義する中で、L.CRS.Simpleとするとデフォルトのマップも表示出来なくなりました。tileLayerの中に設定するとエラーは出ないのですが、効いているのか効いていないのかよく分かりません。
肝はimageBoundsの中の座標設定でした。画像サイズがどのように座標に影響してくるかよく分かりませんでしたので、数値をちょこちょこ変えながら目的の位置に持ってくることが出来ましたが、かなり面倒くさいです。いずれ時間をみて関数作るかライブラリに頼ることを検討しようと思います。

Comments

[kei344]

> L.CRS.Simpleとするとデフォルトのマップも表示出来なくなりました。
L.CRS.Simple は画像「だけ」を表示するためのものだと思われます。

> 数値をちょこちょこ変えながら目的の位置に持ってくることが出来ましたが、かなり面倒くさいです。
Google Map など座標が表示されるもので当たりをつけるか、書かれておられるように、なにかツールを作成されるのが良いと思います。位置の調整は面倒なものです。

[capella]

さきほど解決済みにしました。自分の回答をベストアンサーにするのに躊躇していました(笑)

Answer 2

画像のX軸方向中心はおそらくグリニッジ子午線と思われます。アトランティス大陸があったと言われるあたりですね（汗）デフォルトの座標が緯度経度ゼロのポイントなんでしょうか。

そうです、TMS(Tile Map Service) で x,y が 0,0 は経緯度0度です。

tileLayer の引数に渡しているURL {z}/{x}/{y}.png の {z} はズームレベル、{x}{y} はそこを起点とした画像番号です。

http://cdn-ak.f.st-hatena.com/images/fotolife/s/smellman/20151225/20151225174254.png

【地図タイルについて - smellman's Broken Diary】
http://smellman.hatenablog.com/entry/2015/12/26/054520

---

Google をはじめ多くのサービスが WMTS(Web Map Tile Service) 形式で {x}{y} を作っているため、その情報であればが多くあります。

【マップタイプ | Google Maps JavaScript API | Google Developers】
https://developers.google.com/maps/documentation/javascript/maptypes#PixelCoordinates

【TrailNote：座標の変換（世界座標、ピクセル座標、タイル座標、緯度・経度）】
http://www.trail-note.net/tech/coordinate/

【タイル座標確認ツール】
http://gsj-seamless.jp/labs/tools/tileCoord.html

【真ん中のタイルを１枚選ぶ：グーグルマップのしくみを探る（５） | mapli.net】
http://www.mapli.net/blogs/google-maps-mechanism/how-google-map-works5/

【Google Mapsのタイル座標とタイルの取得先 - Let's Try It!】
http://www.letstryit.net/2010/10/google-maps.html

【地理院地図｜地理院タイル仕様】
http://maps.gsi.go.jp/development/siyou.html

---

タイル画像の位置決めが出来ないんです。

位置決めについては、画像自体のファイル名を変更するか、ZoomifyLayer を元にプラグインを作成し、getTileUrl のタイミングでタイル番号を適宜ずらすなどが考えられます。ファイル名の変更がお勧めです。

Comments

[capella]

ありがとうございます。
非常にグレーなやり方なんですけど、何とか自己解決しました（汗）