※ ヤフー地図に赤色立体地図を重ねる(飯能駅周辺)

概要

アジア航測株式会社の赤色立体地図が個人向けに無料公開されました(2017/4/5)
ヤフーの提供しているJavaScriptマップにレイヤーを重ね合わせて表示してみました。

タイルの準備

ダウンロード

アジア航測のサイトよりGeoTIFF形式で地図が配布されているので、
表示したいエリアを選びダウンロードします。

http://www.mapshop.co.jp/products/list.php?category_id=239

GeoTIFF形式とは

位置情報や地図の投影法などのメタデータが埋め込まれたtiff画像です。

https://ja.wikipedia.org/wiki/GeoTIFF

タイルに切り出し

ヤフー、国土地理院タイル等のウェブ地図は、地図画像をタイルに分けて配布しています。

http://maps.gsi.go.jp/development/siyou.html#siyou-zm

gdal2tile.py準備

OSXの場合は以下のサイトよりインストーラで導入できます。

パスが通っていなかったので、適宜設定します。

$ echo 'export PATH=/Library/Frameworks/GDAL.framework/Programs:$PATH' >> ~/.bash_profile
$ source ~/.bash_profile

コマンドが使えるようになったので切り出します。各種オプションはgdalのサイトに記載されています。
今回は東京周辺の画像を準備していたので5339.tifというファイル名です。
実行すると5339という名前のディレクトリが生成され、{z}/{x}/{y}.pngの階層でタイルが生成されます。

$ gdal2tiles.py 5339.tif

タイルの基準点の変換

gdal2tiles.pyで切り出したタイル画像の基準点はTMS形式でタイルの右下を基準点に切り出しています。
Web地図はXYZ形式という左上を基準点にしているので変換が必要です。

静岡市オルソ化航空写真 Tile Map Service の使い方 - Qiita

tms2xyz.pyで画像の基準点を変換することができます。
以下のコマンドで5339_xyzディレクトリに出力されます。

$ curl -O https://raw.githubusercontent.com/smellman/creating_tiles_with_global_map_support_files/blob/master/2014/tms2xyz.py
$ python tms2xyz.py 5339 5339_xyz

Yahoo! JavaScriptマップと重ねて表示する

タイル追加部分は、ローカルのファイルを参照するようにします。

// 赤色立体地図レイヤーを定義
var layer = new Y.ImageTileLayer();
// YOLP地図向けに座標を変換
layer.getImageSrc = function(x, y, z) {
    function calc(x, y, z) {
        t = {};
        t.x = x;
        t.z = z - 1;
        t.y = Math.floor((y + 0.5) * -1 + Math.pow(2, t.z) / 2);
        return t;
    }
    var t = calc(x, y, z);
    return './5339_xyz/' + t.z + '/' + t.x + '/' + t.y + '.png';
}
// 透過を設定
layer.setOpacity(0.8);
// レイヤーを追加
map.addLayer(layer);

全体のコード

https://gist.github.com/ctyo/9d4ba4f761b18ce9245664624ee7e677

これで表示することができます。
アプリケーションIDはYahoo! ディベロッパーネットワークからは個別に取得します。

参考

タイル変換参考
タイル地図がおもしろい- SlideShare
Yahoo! JavaScriptマップ参考
YOLP(地図):Yahoo! JavaScriptマップAPIサンプル - Yahoo!デベロッパーネットワーク
Yahoo! JavaScriptマップAPI に OpenStreetMap と地理院地図を表示する - Qiita
タイル画像を利用する - YOLP JavaScriptマップAPI サンプルコード