web application of earthquake 3d mapping using svg

// Web application of earthquake 3D mapping using SVG //

Takeo NOMURA (Nagashima Labo. Thesis 2008) PAGE 1

ＳＶＧを用いた地震データ検索・３Ｄ表示アプリケーションの開発

// 長島研究室 // 野村　剛生

2008 年度機械創成工学科卒業研究発表会

2009 年 2 月 5 日

// Web application of earthquake 3D mapping using SVG//

Takeo NOMURA (Nagashima Labo. Thesis 2008)

はじめに

PAGE 2

前年度研究概要

• テキスト形式 →　　データ検索困難• ラスタ画像 →　　 2 次利用困難

気象庁公開地震データの問題点

Fig.1 気象庁公開地震データ（引用元：気象庁）

連携困難




PAGE 3

開発プログラム概要


Fig.3 日本 2D 地震表示システムFig.2 地震検索システム




PAGE 4

スペック概要


Fig.4 EarthQuake3D JP Fig.5 EarthQuake3D



スペック概要

PAGE 5

スペック詳細解説

(a) 複合的検索機能の実装(b) 3D マッピングの実現(c) アニメーションの実現(d) インタラクティブな動作を実現(e) 様々なグラフィック表示条件を指定可能(f) スタンドアロン型動作の実現(g) オンライン・オフラインともに動作可能(h) Web ブラウザ上で動作可能(i) XML データ読み込み機能の実装(j) 再現 SVG コードの出力機能の実

装(k) ソースコードを入手可能

開発プログラムスペック概要



スペックの詳細解説

PAGE 6

(b) 3D マッピングの実現

(a) 複合的検索機能の実装

1. 地震データ検索が可能

2. 検索条件を複数指定可能

3. 該当データをカウント可能

Fig.6 震源検索機能




PAGE 7

マッピング性能対比


1. EarthQuake3D

Fig.7 EarthQuake3D 利点

利点

• 広域を分析可能




PAGE 8

(c) 　アニメーションの実現


2. EarthQuake3D JP

Fig.8 EarthQuake3D JP の利点

利点

• 震源深さ分析に最適

海面に目線を合わせた場合




PAGE 9

(d) 　インタラクティブな動作を実現

(c) 　アニメーションの実現

Fig.9 アニメーション

1. 3D アニメーション可能

• 緯度・経度増分指定可能

• 遠近表現の強化




PAGE 10

(e) 様々なグラフィック表示条件

(d) 　インタラクティブな動作を実現

1. 画像クリックで詳細表示可能

Fig.2 EarthQuake3D JP

クリッ

ク

Fig.10 詳細表示機能




PAGE 11

(f) スタンドアロン型動作の実現

(e) 様々なグラフィック表示条件を指定可能

1. 検索条件と連動可能

2. 表示中心を指定可能

3. 地図表示精度変更可能

(a) 1% プロット ( 精度低 )

Fig.12 地図表示精度の対比

(b) 100% プロット（精度高）

Fig.11 マグニチュードで色分け




PAGE 12

(g) オンライン・オフラインともに動作可能

(f) スタンドアロン型動作の実現

1. インストール不要

Zip 書庫解凍するだけで準備 OK

Fig.13 実行ファイル一式

クリック

長島研究室　野村研究員のページhttp://www.mech.tohoku-gakuin.ac.jp/nken/labo2008/nomura/index.html




PAGE 13

オンライン動作の仕組み


1. オンライン実行可能

　

Fig.14 オンライン実行可能

長島研究室野村研究員のページhttp://www.mech.tohoku-gakuin.ac.jp/nken/labo2008/nomura/index.html

クリック




PAGE 14

(h) Web ブラウザ上で動作可能


2. オンライン動作模式図

　

Fig.15 オンライン動作模式図

データサーバ

クライアント

データリクエストプログラム

（ページ表示）

XMLデータ

URL にアクセス

データサーバ

クライアント

プログラム地震データ読込指

示

プログラムの配列上にデータを格納

(a)URL アクセス (b) 地震 XML データ取得の仕組み

オンライン　

オフライン




PAGE 15

(i) XML データ読み込み機能の実装

(h) Web ブラウザ上で動作可能

Adobe SVG Viewerプラグインをインストールすれば誰でも利用可能に！

Fig.16 Web ブラウザ上で利用可能




PAGE 16

(j) 再現 SVG コードの出力機能の実装

(i) XML データ読み込み機能の実装

•XML データだからこそ、ブラウザで読み込むことができる。

•プログラムとデータが分離している。

プログラムを直さずデータ追加可能 Fig.17 読み込み可能な XML データ形式




PAGE 17

(k) ソースコードを入手可能

(j) 再現 SVG コードの出力機能の実装

1. 再現可能な静的な SVGコードの出力が可能

ベクタ画像対応ソフトウェアで編集可能

Fig.18 SVG コード出力の様子

実行結果をファイルに保存可能！




PAGE 18

デモンストレーション

(k) ソースコードを入手可能

1. オープンソース

2. 転用可能

3. テキスト形式

Fig.19 ソースコードの一部




PAGE 19

まとめ


デモンストレーションを行います。

スクリーンにご注目ください。



まとめ

PAGE 20

まとめ

1. SVG を用いて地震データの 3D 表現が可能になった

2. 地震の 3D アニメーションが可能となった



END

PAGE 21

END

END



前年度研究拡張

PAGE 22


前年度 2D 研究拡張

Fig.21 世界対応Fig.20 日本（機能・精度向上）



ソースコード転用例

PAGE 23

ソースコード転用例

Fig.23 全世界汎用プロットシステム（世界の首都）

Fig.22 日本汎用プロットシステム　　（日本の大学・短大・高

専）



用語解説

PAGE 24

SVG

Scalable Vector Graphics

Fig.27 SVG記述例

概要2001 年に W3C により勧告された画像規格

特徴テキストデータで画像データを記述

利点拡大縮小時に劣化なしアフィン変換可能



用語解説

PAGE 25

MSXML

概要 Microsoft社が提供する XML 解釈用ライブラリ

web application of earthquake 3d mapping using svg

Documents