概要
アジア航測株式会社の赤色立体地図が個人向けに無料公開されました(2017/4/5)
ヤフーの提供しているJavaScriptマップにレイヤーを重ね合わせて表示してみました。
- ブラタモリでもおなじみの「赤色立体地図」無料ダウンロード提供、日本全国から好きな地域を選択可 -INTERNET Watch
- http://www.mapshop.co.jp/products/list.php?category_id=239
タイルの準備
ダウンロード
アジア航測のサイトよりGeoTIFF形式で地図が配布されているので、
表示したいエリアを選びダウンロードします。
GeoTIFF形式とは
位置情報や地図の投影法などのメタデータが埋め込まれたtiff画像です。
タイルに切り出し
ヤフー、国土地理院タイル等のウェブ地図は、地図画像をタイルに分けて配布しています。
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形式という左上を基準点にしているので変換が必要です。
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);
全体のコード
これで表示することができます。
アプリケーションIDはYahoo! ディベロッパーネットワークからは個別に取得します。