Edited at

Yahoo! JavaScriptマップAPI に 赤色立体地図 を表示する

More than 1 year has passed since last update.



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


概要

アジア航測株式会社の赤色立体地図が個人向けに無料公開されました(2017/4/5)

ヤフーの提供しているJavaScriptマップにレイヤーを重ね合わせて表示してみました。


タイルの準備


ダウンロード

アジア航測のサイトより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! ディベロッパーネットワークからは個別に取得します。


参考