電子国土の標高タイルデータをOpenlayersで利用する方法

電子国土で配信されている標高タイルデータをOpenlayersで利用する方法を紹介します。

こんな感じ

プログラムを取ってくる。

ここからZIPでダウンロード
https://github.com/tmizu23/ol_dem

ローカルで確認

ローカル環境で確認できるように作業をします。

js/base.jsを開いて1行目をコメントアウトします。
google chromeを一旦すべて閉じます。
コマンドプロンプトを開いて、chrome.exeに--disable-web-securityを付けて実行します。

XPの場合こんな感じ。"user"の部分を自分のユーザー名に変更してください。

"C:\Documents and Settings\user\Local Settings\Application Data\Google\Chrome\Application\chrome.exe" --disable-web-security

map.htmlを開くと標高タイルデータから作成した陰影起伏が表示されます。

※ブラウザのセキュリティが甘くなっているので、他のサイトを見に行くときは注意ください。
※標高タイルを取得する際に、CORS制限があるのでこのような作業が必要になります。

サーバーで確認

js/base.jsの1行目のコメントアウトをはずします。
サーバーにol_demのフォルダごとアップします。
proxy.cgiに実行権限を付けます。
proxy.cgiが実行できるようにサーバーを設定します。
通常のブラウザからサーバのmap.htmlにアクセスしてください。

動作確認

http://www.ecoris.co.jp/map/ol_dem/map.html

説明

Openlayersで標高タイルデータが読み込めるようにDEMクラスを拡張しました。UTFGrid.jsを流用しています。
詳しいことが知りたい場合は、ソースを読むか、コメントをいただければと思います。

感想

カシミール3Dのタイルマッププラグインに触発されて作成してみました。テキストデータはpng画像に比べデータ量が大きいのと、ブラウザでリアルタイムに陰影起伏画像を作成するので、動作は重いです。html5のキャッシュ機能を利用するともう少し実用的になるかもしれません。
現時点では、電子国土からはレベル14のデータだけが配信されているので、他のズームレベルの配信にも期待です。

以上です。