情報地質 第26巻 第2号 090-091頁 2015年
Geoinformatics, vol.26, no.2, pp.090-091, 2015

S-map: 高機能 Web 地図アプリケーションのための JavaScript ライブラリ
西岡芳晴*

S-map: JavaScript library for sophisticated web map application
Yoshiharu NISHIOKA ** 国立研究開発法人 産業技術総合研究所 地質情報研究部門 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，Leaflet，シームレス地質図，エナジーコーン
Key words : web map, JavaScript, Leaflet, Seamless Geological Map,energy cone

1．はじめにS-map は，2015 年 5 月 10 日に公開を開始した日本シームレス地質図(地質調査総合センター, 2015)の新ビューアのために開発された JavaScript 地図描画ライブラリである．
ただし，現状では地図描画そのものは Leaflet(VladimirAgafonkin, 2015)が行い，S-map は Leaflet を利用するためのラッパーライブラリという位置づけになっている（第1 図 ） ． S-map の S に は Seamless, Simple, Smart,
Sophisticated の 意 味 が 込 め ら れ て お り ， よ り 高 機 能 な
Web 地図作成支援を目指して外部公開を予定している．また，将来的には Cesium(agi, 2015)を使った 3D 描画にも対応する予定である．本論ではこの S-map についてその機能・特徴を紹介し，公開されている Web サイトでの利用事
例として日本シームレス地質図とエナジコーンを取り上げる．

クリプトとしては以下の 1 行を記述するだけでブラウザいっぱいに広がった地理院地図が表示される Web アプリケーションを記述できる．
Smap.map();
2.2 主な機能
S-map は一般的な 2D 地図描画機能を備えている．すな
わち，タイルマップの描画，単独画像の描画，複数レイヤー対応，マウス・タップによる地図移動，ズームなどである．Leaflet が単体では対応していない KML の描画も機能制限つきであはるが行える．ユーザコントローラとしてはゲームパッドに対応している．地名検索にも対応しており，東京大学空間情報科学研究センターの CSIS シンプルジオコーディング実験(東京大学空間情報科学研究センター ,2006)を利用することができる．

3. S-map の特徴
3.1 Promise のサポート
S-map で は ， 非 同 期 処 理 を 簡 潔 に 記 述 す る た め のPromise をサポートしている．Promise は，生成時点ではまだ完了していない処理を表現するオブジェクトで，JavaScript の次期バージョン(ES6)で導入される予定ではあるが，現時点でも Chrome, Firefox などのブラウザでは利用可能である．S-map では，画像の取得関数など多くの関数で戻り値のオブジェクトとして利用している．ただし，
Internet Explorer などはまだ対応していないため，S-map
第 1 図 S-map の位置づけ内で実装したものを使用している．
3.2 スマートタイル支援機能
2．S-map 概要
スマートタイルは，Web 地図システムにおいてサーバ側
2.1 設計コンセプトのピラミッドタイルとクライアント側の描画の間に高速な
S-map は 単 一 の フ ァ イ ル smap.js と し て 提 供 さ れ る ． タイル変換プロセスを追加するシステムアーキテクチャのsmap.js では，名前空間としてグローバル変数 Smap が定名称である（西岡，2015）．タイル変換プロセスの実装を義され，S-map が提供するオブジェクトや関数はすべて行う場所はサーバ側とクラインアント側の両方が可能であSmap の子孫メンバーとして定義される．
るが，S-map ではクライアント側での実装を支援する機能
S-map の提供する機能はシンプルであり，基本的にはユが用意されている．具体的には， Layer オブジェクトのーザは Map オブジェクトと Layer オブジェクト利用する． convertTile 関数と drawTile 関数で，両者はいずれもライ
それらのオブジェクトの提供にはいわやるクラスは使用せブラリの利用者がオーバーライドして使用する．前者は引ず，オブジェクトを返す関数が提供される．また，オブジ数として元タイルが描画された Canvas を受け取りそれをェクトは原則として動的に変更でき，変更された場合は描元にタイルを描画するが，後者は元タイル画像を受け取ら画に反映されるように実装している．
ないという違いがある．
Map を生成する関数 Smap.map は，デフォルト設定で3.3 ダウンロード支援機能動作するように設計されているので，最も単純な場合はス
S-map には，ライブラリ利用者のダウロード機能実装を91支援するために，Map オブジェクトと Layer オブジェクトそれぞれに cutImage メソッドが提供されている．これらは緯度経度で範囲を指定して，その範囲の PNG 画像を返す．さらに URL の内容をファイルとしてダウンロードする関数（saveURL）や地図画像を KMZ としてダウンロードできる関数（mapToKMZ）も提供している．
3.4 ピクセル情報取得機能
S-map では，緯度経度を指定して Layer オブジェクトからピクセル情報を取得するための機能も提供している ．
getPixel メソッドは RGBA の 4 つの要素を配列として返し，getPixelRGB メソッドは RGB を 1 つにまとめた 24bit 整数として返す．getPixelInfo メソッドは，あらかじめ凡例情報辞書を配列として与えておくことにより，そのピクセルに対応する凡例情報を取得することができる．てシミュレーション計算を行い，結果をタイルとして生成している．この手法を使った場合，従来 10 秒程度かかっていたシミュレーションをきわめて高速(1 秒以下)でおこなうことができる．

4. 利用事例

agi(2015) CESIUM ． http://cesiumjs.org/ (URL の 確 認2015/5/13)
Apache Software Foundation(2014) Apache License
Version 2.0．
http://www.apache.org/licenses/LICENSE-2.0 ． (URLの確認 2015/5/13)
地質調査総合センター(2015) 20 万分の 1 日本シームレス
地 質 図 ． https://gbank.gsj.jp/seamless/ (URL の 確 認2015/5/13)
産総研 G-EVER 推進チーム(2015) -火山重力流シミュレーシ
ョン-エナジーコーンモデル．
http://g-ever1.org/quick/ (URL の確認 2015/5/13)
宝田晋治・山元孝広・中野 司・村田泰章・風早康平・川辺禎久・阪口圭一・曽屋龍典(1993) 雲仙岳 1991-92 年噴火の火砕流コンピューターシミュレーション．地質調査
所月報, vol.44, no.1, pp.25-54.
東 京 大 学 空 間 情 報 科 学 研 究 セ ン タ ー (2006) Geocoding
Tools&Utilities．
http://newspat.csis.u-tokyo.ac.jp/geocode/ (URL の確認 2015/5/13)
西岡芳晴・長津樹理・宝田晋治(2014) PNG 標高タイルを用いたエナジーコーンシミュレーション．情報地質，vol.25, no.2, pp.112-113.
西岡芳晴 (2015) スマートタイルアーキテクチャの考案とシームレス地質図への適用．情報地質(印刷中）
Vladimir Agafonkin(2015) Leaflet.
http://leafletjs.com/ (URL の確認 2015/5/13)

4.1 日本シームレス地質図
冒頭で述べたとおり S-map は日本シームレス地質図のために開発されたものであり，日本シームレス地質図では Smap 機能をふんだんに活用している．地質単元ごとの表示/非表示の切り替えは前節の drawTile を利用して，クライアント側実装スマートタイルで行っている．PHP によるサーバ側スマートタイルを採用していた以前のビューアに比べて，クライアント－サーバ間のアクセスが抑えられ，レスポンスが高速になりまたサーバ負荷も軽減される．また，クリック(タップ)位置の凡例情報や標高値の表示には前節のピクセル情報取得機能を利用している．さらに，描画された地質図をユーザ環境に保存するために前節のダウンロード支援機能を利用している．
4.2 エナジーコーン「火山重力流シミュレーション-エナジーコーンモデル」は，
G-EVER 火山災害予測システムで試験公開されているもの
で(産総研 G-EVER 推進チーム, 2015)，国土地理院の地理院タイル(標高）を元に作成した PNG 標高タイルを利用している(宝田ほか, 1993, 西岡ほか, 2014)．S-map はこのエナジーコーンでも利用されており， PNG 標高タイルとして取得したデータから，前節の convertTile メソッドによっ

第2図

エナジーコーンシミュレーション
http://g-ever1.org/quick/

5．終わりにS-map は，現在外部公開を目指して最終調整中である．
ラ イ セ ン ス は Apache License 2.0(Apache SoftwareFoundation, 2014)を予定している．また，今後は Cesium
エンジンを実装して 3D に対応する予定であり，小型三次元入力デイバイスである Leap Motion Controler にも対応する予定である．

文献