情報地質 第27巻 第2号 110-111頁 2016年
Geoinformatics, vol.27, no.2, pp.110-111, 2016

データタイルマップを用いたシームレス標高サービスの公開
西岡芳晴 1)・長津樹理 1)

Publishing of the Seamless Elevation Service using Data Tile Map
Yoshiharu NISHIOKA 1) and Juri Nagatsu 1)
1) 国立研究開発法人 産業技術総合研究所 地質情報研究部門 Institute of Geology and Geoinformation,
AIST, Tsukuba Central 7, 1-1, Higashi 1, Tsukuba Ibaraki, 305-8567, Japan. E-mail: y-nishioka@aist.go.jp

キーワード： Web 地図，JavaScript，標高，タイル，データ
Key words : web map, JavaScript, elevation, tile, data

1．はじめに近年，インターネットを通じて，ユーザの要望に応じて柔軟な情報提供を行うサービスが求められている．我々は，20 万分の 1 日本シームレス地質図(地質調査総合センター,2016)の Web サイト構築及び各種サービスの提供を通じて試行錯誤を繰り返した結果，面的な地図情報発信のベースフォーマットとして，データタイルマップという仕様を提案するに至った．本論では．このデータタイルマップ，この仕様に基づくシームレス標高サービス実験公開，および利用方法について紹介し，その意義について議論する．

2．データタイルマップ
データタイルマップは，我々が提案する Web 地図で面的なデータを表現するためのベースフォーマットである．イ
ンターラクティブな Web サイトの構築を支援するために，柔軟で高速な処理を行えることを目的としている．
URL http://gsj-seamless.jp/labs/datatilemap/
データタイルマップで規定している内容はそれほど多くなく，基本的には以下の 3 点である．
•••

画像ファイルフォーマットは PNG または GIF を用いる
完全に透明な画素は無効値として扱われなければならない(必須）．有効な値は透明度を 0(もしくは指定しない）を推奨する．
有効な画素の RGB 値(256 階調)から，R × 256 ×256 + G × 256 + B で得られる値をピクセル値と呼ぶ

画素から得られる RGB 値をどのように扱うか，ピクセル値を使用するかも含めて既定しておらず，実装するサービスに依存する．また，地図投影法，タイル分割法，タイルのピクセルサイズについても規定しない．

3. PNG 標高タイル
PNG 標高タイルは，Web ブラウザ上で標高データを利用したサービスを高速かつ簡便に提供するためのフォーマットである（西岡・長津, 2015b）．前項のデータタイルマ
ップの仕様に基づき，従来の無効値の仕様（ R=128, G=0,B=0）を黒色透明（R=0, G=0, B=0, A=0 ）に変更した新バージョンを作成し，正式版（ver. 1.0.0）とした．

URL

http://gsj-seamless.jp/labs/elev2/doc/png_elev_tile_1.0.0.html

従来の仕様は，「無効値である」という情報と単純に「データが存在しない」という情報を区別する用途のために無効値に特定の値を割り当てていたが，実際の使用においてほとんどニーズが無く，むしろ単純に画像として扱える方がタイル処理上好ましいと考えられたため，透明な画素を無効値とすることに改めた．

4. シームレス標高サービス実験公開2015 年 9 月より実験公開を行っているシームレス標高サービスついて，前述のデータタイルマップ， PNG 標高タイルの新仕様に基づき再構築し，新バージョンとして公開を開始した．
URL

http://gsj-seamless.jp/labs/elev2/

新バージョンでは，前述の無効値の変更を行ったほか，あらたに一部のタイルセットで正距円筒図法のタイルが利用可能となっている．正距円筒図法のタイルは Web メルカ
トル図法が扱えない極地域のデータを扱える利点があり，特にデジタル地球儀で有効である．また，本サービスではPNG 標高タイルの他，陰影タイル，段彩タイル，法線タイルの提供も行っており，これらもデータタイルマップとして利用できる．
なお，このサービスでは，国土地理院が提供する地理院タイルを標高データソースとして利用しており，サービスを二次利用する場合はデータソースの出典表示など元データの利用規約に従う必要がある．
また，このサービスは PNG 標高タイルの仕様及び活用法検討のための実験公開であり，現時点では永続的なサービスを予定していないことにご注意いただきたい．

5．利用方法5 .1 3D 地図での利用
シームレス標高サービスは各種 3D 地図 Web サイトで利用できる．データタイルマップで提供するデータは画像であり，JavaScript で処理することが可能である．我々はWeb で 3D 地 球 儀 を 表 示 す る た め の ラ イ ブ ラ リ で あ る
Cesium(agi, 2016) 用 の JavaScript に よ る ド ラ イ バ ー（Cesium では TerrainProvider と呼ぶ）を作成した．このプログラムは，Apache License 2.0 ( Apache SoftwareFoundation, 2004 )での公開を予定している．これを用い

111

れば，Cesium を用いた Web サイトや，OpenLayers3 でCesium を扱えるライブラリ Ol3-Cesium を利用して，簡単に 3D Web 地図サイトが構築できる．また，S-map(西岡，2015)には既にこのドライバが組み込まれているのでそのまま 3D 表示が可能である（ただし，Cesium 本体は別途必要）．
現 在 公 開 し て い る シ ー ム レ ス 地 質 図 3D は S-map とPNG 標高タイル（旧仕様）を用いて構築されている．
5 .2 Web 地図での標高値取得
3D に限らず，一般的な 2D 地図でも標高値を利用したい場合は多い．タイル画像から標高値を取得することは比較的簡単なプログラムで可能である．特に S-map ではピクセ
ル値を取得する機能が込まれているので利用が容易である．
5 .3 シミュレーション
さらに高度な活用方法として，取得した標高値を基にシミュレーションをしたり，また他のデータと演算処理したいるすることも可能である．データタイルマップではこのような処理はすべてクライアント側で処理でき，サーバからタイルを取得した後は，サーバへのアクセスを必要としない．このため，ユーザによるパラメータの変更，描画の確認などがインタラクティブに行える Web サイトが構築が可能である．

6．考察
現在公開されている 20 万分の 1 日本シームレス地質図の地質のみのレイヤーもこのデータタイルマップに相当す
る(地質調査総合センター，2016)．このように，データタ
イルマップはこれまでのサービスを整理して，規格として抽出したものと言える．また，我々の提案したスーマトタ
イルアーキテクチャー(西岡・長津，2015a)の実装のためのベース規格とも言える．西岡・長津(2015a)でも指摘されている通り，スマートタイルアーキテクチャーの実装には他

第1図にもベクトルタイルベースのものが考えられる．ベクトルタイルも既に一部のシステムで活用されているが，一般的に処理が遅いという問題があり，今回提案したデータタイ
ルマップはそれとは別の選択枝を提案するものと言える．

7．おわりに
現在我々は，データタイルマップを 20 万分の 1 地質図幅に応用して利用するシステムを構築中である．今後は地質図以外にも様々なデータに応用してゆきたいと考えている．

文献agi(2015) CESIUM ． http://cesiumjs.org/ (URL の 確 認
2016/5/11)
Apache Software Foundation(2004) Apache License
Version 2.0.
http://www.apache.org/licenses/LICENSE-2.0 ． (URLの確認 2016/5/11)
地質調査総合センター(2016) 20 万分の 1 日本シームレス
地 質 図 ． https://gbank.gsj.jp/seamless/ (URL の 確 認
2016/5/11)
西岡芳晴(2015) S-map: 高機能 Web 地図アプリケーションのための JavaScript ライブラリ．情報地質， vol.26,no.2, pp.90-91.
西岡芳晴・長津樹理 (2015a) スマートタイルアーキテク
チャの考案とシームレス地質図への適用．情報地質 ,vol.26. no.3, pp.113-120．
西岡芳晴・長津樹理 (2015b) PNG 標高タイル－Web 利用に適した標高ファイルフォーマットの考案と実装－．情報
地質, vol.26, no.4, pp.155-163．

PNG 標高サービスのタイル一覧

http://gsj-seamless.jp/labs/elev2/doc/seamless_elev.html