時系列・地理空間情報に関するデータ分析・可視化
サンプルアプリケーション
2023 年度版
利用マニュアル

情報通信研究機構 総合テストベッド研究開発推進センター

改版履歴
版数

作成年月日

1.0

2024/7/31

改定箇所

改定内容、理由新規作成i

＜目 次＞

1

はじめに ............................................................................................................................ 1

2

WebGIS アプリケーション ................................................................................................ 2
2.1
3 次元テンプレート WebGIS アプリケーション ........................................................... 2
2.1.1 アプリケーションの起動 .............................................................................................. 2
2.1.2 レイヤパネル機能......................................................................................................... 3
2.1.2.1
レイヤの表示、非表示の切り替え .................................................................. 4
2.1.2.2
レイヤの透過度の変更 .................................................................................... 52.1.2.3
レイヤの固定 .................................................................................................. 52.1.2.4
レイヤの削除 .................................................................................................. 62.1.2.5
標高 ................................................................................................................. 72.1.3 タイムライン機能......................................................................................................... 82.1.3.1
日付の変更 ...................................................................................................... 82.1.3.2
時間の変更 .................................................................................................... 102.1.3.3
タイムスライダーの再生 .............................................................................. 102.1.3.4
タイムスライダーで日付と時間の変更 ......................................................... 102.1.4 地図表示操作機能....................................................................................................... 112.1.4.1
各ボタンの説明 ............................................................................................. 122.1.5 その他の機能 .............................................................................................................. 132.1.5.1
画面キャプチャ ............................................................................................. 132.1.5.2
連続画面キャプチャ...................................................................................... 142.1.5.3
データ取得(日進市) ....................................................................................... 152.1.5.4
データ取得(アメダス) ................................................................................... 162.1.5.5
カメラ設定 .................................................................................................... 182.1.5.5.1

カメラズーム ....................................................................................... 192.1.5.5.2

カメラ傾斜 .......................................................................................... 202.1.5.5.3

カメラ回転 .......................................................................................... 21

2.1.5.5.4 ViewURL ............................................................................................. 22
2.1.5.5.5 Set Position ......................................................................................... 23
2.2
災害状況可視化 WebGIS アプリケーション................................................................ 24
2.2.1 アプリケーションの起動 ............................................................................................ 24
2.2.2 レイヤパネル機能....................................................................................................... 252.2.2.1
レイヤの表示、非表示の切り替え ................................................................ 26
2.2.2.2
レイヤの透過度の変更 .................................................................................. 27
2.2.2.3
レイヤの固定 ................................................................................................ 27
2.2.2.4
標高 ............................................................................................................... 282.2.2.5
その他の機能 ................................................................................................ 28
2.2.3 タイムライン機能....................................................................................................... 30
2.2.3.1
日付の変更 .................................................................................................... 30
2.2.3.2
時間の変更 .................................................................................................... 32
2.2.3.3
タイムスライダーの再生 .............................................................................. 32
2.2.3.4
タイムスライダーで日付と時間の変更 ......................................................... 32
2.2.4 その他の機能 .............................................................................................................. 33
2.2.4.1
360 度画像 .................................................................................................... 33ii

2.2.4.2
2.2.4.3
2.2.4.4

ひまわり雲データ ......................................................................................... 34
アニメーション移動ボタン ........................................................................... 35
カメラ設定 .................................................................................................... 36

2.2.4.4.1

カメラズーム ....................................................................................... 36

2.2.4.4.2

カメラ傾斜 .......................................................................................... 37

2.2.4.4.3

カメラ回転 .......................................................................................... 38

2.2.4.4.4 ViewURL ............................................................................................. 39
2.3
2 次元及び 2.5 次元 WebGIS アプリケーション ......................................................... 40
2.3.1 アプリケーションの起動 ............................................................................................ 40
2.3.2 ログイン ..................................................................................................................... 41
2.3.3 基盤地図変更 .............................................................................................................. 43
2.3.4 レイヤ表示・非表示 ................................................................................................... 44
2.3.5 前処理（補間・集約）データの表示 .......................................................................... 46
2.3.6 Geojson追加表示 ......................................................................................................... 49
2.3.7 タイムライン機能....................................................................................................... 50
2.3.7.1
日付の変更 .................................................................................................... 50
2.3.7.2
時刻の変更 .................................................................................................... 51
2.3.7.3
タイムスライダーの再生 .............................................................................. 52
2.3.7.4
再生設定変更 ................................................................................................ 52
2.3.7.5
タイムスライダーで日付と時間の変更 ......................................................... 54
2.3.8 その他の機能 .............................................................................................................. 55
2.3.8.1
画面キャプチャ ............................................................................................. 55
2.3.8.2
連続画面キャプチャ...................................................................................... 56
2.3.8.3
ViewURL ...................................................................................................... 57
2.3.8.4
地図の拡縮など ............................................................................................. 59
2.3.9 MapLibre をベースにしたWebGISアプリケーションについて ............................... 592.4
人口動態等可視化 Web アプリケーション................................................................... 60
2.4.1 アプリケーションの起動 ............................................................................................ 60
2.4.2 ログイン ..................................................................................................................... 60
2.4.3 基盤地図変更 .............................................................................................................. 63
2.4.4 レイヤ表示・非表示 ................................................................................................... 63
3ライブラリ....................................................................................................................... 65
3.1
タイムスライダー ........................................................................................................ 65
3.1.1 概要 ............................................................................................................................ 65
3.1.2 現在時刻の変更 .......................................................................................................... 65
3.1.3 自動再生 ..................................................................................................................... 67
3.1.4 スキップ ..................................................................................................................... 68
3.1.5 縮尺の変更 ................................................................................................................. 69
3.1.6 現在時刻への切り替え ............................................................................................... 70
3.1.7 開始時刻、終了時刻の変更 ........................................................................................ 71
3.1.8 タイムレンジの指定 ................................................................................................... 72
3.2
ViewURL ..................................................................................................................... 74
3.2.1 概要 ............................................................................................................................ 74
3.2.2 表示データ情報の一時記録 ........................................................................................ 74iii

3.2.3 表示データ情報の復元 ............................................................................................... 75
3.3
時空間同期機能 ............................................................................................................ 76
3.3.1 概要 ............................................................................................................................ 76
3.3.2 空間同期 ..................................................................................................................... 76
3.3.1 時間同期 ..................................................................................................................... 77
3.4
連続画像キャプチャ ..................................................................................................... 78
3.4.1 概要 ............................................................................................................................ 78
3.4.2 連続画像キャプチャ ................................................................................................... 78
3.5360 度画像保存 ............................................................................................................ 79
3.5.1 概要 ............................................................................................................................ 79
3.5.2 サブビューの表示/非表示 ........................................................................................... 79
3.5.3 360 度画像保存 ........................................................................................................... 81
3.5.4 解像度変更 ................................................................................................................. 82
3.5.5 次の処理への待ち時間変更 ........................................................................................ 83iv

1 はじめに国立研究開発法人情報通信研究機構では、NICT 総合テストベッドを運用しており、デジタル社会の実現にむけ、多様なデータを活用し新たなサービスを創成する研究開発基盤としてサービスレイヤテストベッド「DCCS（Data Centric Cloud Service）」の開発を進めております。
本案件では、同開発プロジェクトの一環として試作している時系列地理空間情報に関するデータ分析・可視化システム（以下「データ分析・可視化システム」という。
）について機能及び性能等の検証、並びに機能改善を継続的に実施しております。
2023 年度開発では、従来の MapBox 版に加え MapLibre 版を追加し、同時に性能改善を図っています。
本書では、本システムにおける、各 WebGIS アプリケーションおよび可視化ライブラリに関しての、ユーザ利用マニュアルについて記載します。

1

2 WebGIS アプリケーション
2.1 3 次元テンプレート WebGIS アプリケーション
2.1.1 アプリケーションの起動
ブラウザから https://tb-gis-web.jgn-x.jp/itowns_template/ にアクセスして起動する。ログインが必要な場合は、画面の指示に従ってログインを行う。起動すると下記のような画面が表示される。

右上の「ログイン」をクリックしてアプリケーションにログインすると、下記のような画面が表示される。

2

2.1.2 レイヤパネル機能
画面左上には「レイヤパネル」が表示されている。
「メニューを閉じる」または「メニューを開く」をクリックすることによって、「レイヤパネル」全体を折りたたみ表示または通常表示となる。

全体を折りたたみ表示する下記のような画面が表示される。

3

2.1.2.1

レイヤの表示、非表示の切り替え

メニュー内のレイヤを展開し、「visible」のチェックボックスにチェックを入れることで、地図上にレイヤを表示ができる。また、「visible」のチェックボックスのチェックを外すことで、地図上へのレイヤを非表示できる。

4

2.1.2.2

レイヤの透過度の変更

メニュー内のレイヤを展開し、「opacity」の数値を変更することによって、地図上に表示されるレイヤの透明度を調整することができる。0 で完全に不透明になり、1 で完全表示される。

2.1.2.3

レイヤの固定メニュー内のレイヤを展開し、「frozen」にチェックボックスにチェックを入れると、そのレイヤの自動更新が停止される。

5

2.1.2.4

レイヤの削除メニュー内のレイヤを展開し、「delete」をクリックすると、そのレイヤをメニューから削除する。

6

2.1.2.5

標高「標高」レイヤを展開すると、「DEM」レイヤが表示される「DEM」レイヤを展開し、「scale」の数値を変更することによって、標高の倍率を変更できる。

7

2.1.3 タイムライン機能
本アプリケーションには、3.1 タイムスライダーが組み込んである。機能詳細は同項を参照。

2.1.3.1

日付の変更

8

地図上部に表示されているカレンダーアイコンをクリックすると、下記のカレンダーが表示されるので、こちらから日付を変更できる。

9

2.1.3.2

時間の変更

時計アイコンをクリックすると、時刻がカレントタイムに移動する。

2.1.3.3

タイムスライダーの再生

再生設定アイコンをクリックすると、下記の再生設定メニューが表示される。

再生設定メニュー内の「コマ送り速度」、「コマ送り間隔」をそれぞれ設定し、再生ボタンをクリックすると、タイムラインが再生される。

2.1.3.4

タイムスライダーで日付と時間の変更

地図下部にあるタイムスライダーのつまみをスライドさせることによって、時刻の変更を行うことができる。

10

2.1.4 地図表示操作機能

画面の左下に地図の表示を操作できる複数のボタンがある。

また、画面の右下には地図の拡大、縮小に対応したスケールバーがある。

11

2.1.4.1

各ボタンの説明７つのボタンが用意されている。上から順に説明する。



地図の表示を初期の位置に戻す。



地図の表示を上側に傾ける。



地図の表示を下側に傾ける。



地図の表示を拡大する。



地図の表示を縮小する。



地図の表示を 3D にする。



北が真上になるように地図を表示する。

12

2.1.5 その他の機能

赤枠部の表示はログインユーザー名に従って変更される。

2.1.5.1

画面キャプチャ「画面キャプチャ」ボタンをクリックすると、画面キャプチャ機能が呼び出され、ディスプレー画面全体やウインドーに表示された画面のスクリーンショットがダウンロードされる。

13

2.1.5.2

連続画面キャプチャ

本アプリケーションには、3.4 連続画像キャプチャが組み込んである。機能詳細は同項を参照。
「連続画面キャプチャ」ボタンをクリックすると、連続画面キャプチャ機能が呼び出され、ディスプレー画面全体やウインドーに表示された画面のスクリーンショットが連続でダウンロードされる。

14

2.1.5.3

データ取得(日進市)「データ取得(日進市)」ボタンをクリックすると、日進市の周辺にカメラが移動し、移動体データを表示させるための項目選択画面が表示される。

取得項目：取得する日進市データの種類を設定でき、「速度」と「PM2.5」が選択できる。



期間(開始)：取得する日進市データ範囲の開始期間を設定する。
期間(終了)：取得する日進市データ範囲の終了期間を設定する。
リサンプル：取得する日進市データの値を設定でき、「平均値」「最大値」「最小値」「スプライン補間」「線形補間」が選択できる。(※)

時間粒度：取得する日進市データの値を設定する時間粒度で、取得する日進市データの時間間隔を設定する。

大きさ(標準比)：表示されているオブジェクトの大きさを変更する。

※リサンプル項目が、「平均値」、「最大値」、「最小値」の場合、時間粒度の選択項目は、
「年」
15

「月」
「日」
「時間」「分」になる。また、リサンプル項目が、「スプライン補間」「線形補間」の場合、時間粒度の選択項目は、「秒」のみになる。

それぞれの項目を選択し、「取得・表示」をクリックすると、選択した項目に該当する範囲の移動体データが画面に表示される。

移動体データの取得が完了すると、「結果 DL」がクリックできるようになる。
「結果 DL」
をクリックすると、取得した範囲の移動体データが JSON ファイルとして出力される。

2.1.5.4

データ取得(アメダス)「データ取得(アメダス)」ボタンをクリックすると、固定局のアメダスデータを表示させるための項目選択画面が表示される。

16

取得項目：取得するアメダスデータの種類を設定でき、「24 時間降雨量」と「気温」「積雪深」が選択できる。



期間(開始)：取得するアメダスデータ範囲の開始期間を設定する。
期間(終了)：取得するアメダスデータ範囲の終了期間を設定する。
リサンプル：取得するアメダスデータの値を設定でき、「平均値」「最大値」「最小値」「スプライン補間」「線形補間」が選択できる。(※)

時間粒度：取得するアメダスデータの値を設定する時間粒度で、取得するアメダスデータの時間間隔を設定する。

大きさ(標準比)：表示されているオブジェクトの大きさを変更する。

※リサンプル項目が、「平均値」、「最大値」、「最小値」の場合、時間粒度の選択項目は、「年」「月」「日」「時間」「分」になる。また、リサンプル項目が、「スプライン補間」「線形補間」の場合、時間粒度の選択項目は、「分」と「秒」のみになる。
それぞれの項目を選択し、「取得・表示」をクリックすると、選択した項目に該当する範囲の移動体データが画面に表示される。

移動体データの取得が完了すると、「結果 DL」がクリックできるようになる。
「結果 DL」
をクリックすると、取得した範囲の移動体データが JSON ファイルとして出力される。

17

2.1.5.5

カメラ設定

地図の右部にある「カメラの設定」からカメラ設定を行うことができる。

18

2.1.5.5.1

カメラズーム「camera zoom」の数値を変更する、もしくは「camera zoom」下のバーのつまみを移動することによって、地図の拡大・縮小を行うことができる。数値が大きいほど地図が拡大され、低いほど拡大される。

19

2.1.5.5.2

カメラ傾斜「camera tilt」の数値を変更する、もしくは「camera tilt」下のバーのつまみを移動することによってことによって、カメラの傾斜を変更することができる。90 で真上を見て、-90 で真下を見る。

20

2.1.5.5.3

カメラ回転「camera pan」の数値を変更する、もしくは「camera pan」下のバーのつまみを移動することによってことによって、カメラを回転することができる。1～180 は時計回りに回転、-1～-180 は反時計回りに回転する。

21

2.1.5.5.4

ViewURL

本アプリケーションには、3.2 ViewURL が組み込んである。機能詳細は同項を参照。
「ViewURL」ボタンをクリックすると、ViewURL 機能が呼び出され、現在の画面の URLが表示される

22

2.1.5.5.5

Set Position「latitude」、「longitude」、「altitude」の 3 つの項目に任意の数字を入れ、「Set Position」のボタンをクリックすると、その座標を中心として地図が表示される。

23

2.2 災害状況可視化 WebGIS アプリケーション
2.2.1 アプリケーションの起動
ブラウザから https://tb-gis-web.jgn-x.jp/itowns_template/ にアクセスして起動する。ロ
グインが必要な場合は、画面の指示に従ってログインを行う。起動すると下記のような画面が表示される。

右上の「ログイン」をクリックしてアプリケーションにログインすると、下記のような画面が表示される

24

2.2.2 レイヤパネル機能
画面左上には「レイヤパネル」が表示されている。
「メニューを閉じる」または「メニューを開く」をクリックすることによって、「レイヤパネル」全体を折りたたみ表示または通常表示となる。

全体を折りたたみ表示する下記のような画面が表示される

25

2.2.2.1

レイヤの表示、非表示の切り替え

メニュー内のレイヤを展開し、「visible」のチェックボックスにチェックを入れることで、地図上にレイヤを表示ができる。また、「visible」のチェックボックスのチェックを外すことで、地図上へのレイヤを非表示できる。

26

2.2.2.2

レイヤの透過度の変更

メニュー内のレイヤを展開し、「opacity」の数値を変更することによって、地図上に表示されるレイヤの透明度を調整することができる。0 で完全に不透明になり、1 で完全表示される。

2.2.2.3

レイヤの固定メニュー内のレイヤを展開し、「frozen」にチェックボックスにチェックを入れると、そのレイヤの自動更新が停止される。

27

2.2.2.4

標高「標高」レイヤを展開すると、「DEM」レイヤが表示される「DEM」レイヤを展開し、「scale」の数値を変更することによって、標高の倍率を変更できる。

2.2.2.5

その他の機能テンプレートアプリケーションには、開発時に便利なデバッグツールが付属している。

・「Display charts」：地図上に下記のチャートが表示される。

※ピンク：texture count 青：geometry count・『debug Camera』：地図の右下に下記のような図が表示される。
28

・『freeze update』：自動更新を停止する。
・『Debug event』：下記のように[Events]レイヤがメニューに追加され、地図の緯度経度を確認できる。

※「latitude」
・・・緯度、「longitude」・・・経度

29

2.2.3 タイムライン機能
本アプリケーションには、3.1 タイムスライダーーが組み込んである。機能詳細は同項を参照。

2.2.3.1

日付の変更

30

地図上部に表示されているカレンダーアイコンをクリックすると、下記のカレンダーが表示されるので、こちらから日付を変更できる。

31

2.2.3.2

時間の変更

時計アイコンをクリックすると、時刻がカレントタイムに移動します。

2.2.3.3

タイムスライダーの再生

再生設定アイコンをクリックすると、下記の再生設定メニューが表示される。

再生設定メニュー内の「再生モード」、「再生間隔」/「再生速度」、「コマ送り間隔」をそれぞれ設定し、再生ボタンをクリックすると、タイムラインが再生される。

2.2.3.4

タイムスライダーで日付と時間の変更

地図下部にあるタイムスライダーのつまみをスライドさせることによって、時刻の変更を行うことができる。

32

2.2.4 その他の機能

赤枠部の表示はログインユーザー名に従って変更される。

2.2.4.1

360 度画像

本アプリケーションには、3.5 360 度画像保存が組み込んである。機能詳細は同項を参照。
「360 度画像」ボタンをクリックすると、作成した画面（動画像、静止画像）のスクリーンショットがダウンロードされる。

33

2.2.4.2

ひまわり雲データ「ひまわり雲データ」ボタンをクリックすると、下記のように地図上にひまわり雲データが表示される。

34

2.2.4.3

アニメーション移動ボタン「東京」ボタンをクリックすると、アニメーション移動テンプレートとして、現在位置から東京レインボーブリッジ付近へのアニメーション移動機能が起動する。下記のような表示となる。

35

2.2.4.4

カメラ設定

地図の右部にある「カメラの設定」からカメラ設定を行うことができる。

2.2.4.4.1

カメラズーム「camera zoom」の数値を変更する、もしくは「camera zoom」下のバーのつまみを移動することによって、地図の拡大・縮小を行うことができる。数値が大きいほど地図が拡大され、低いほど拡大される。

36

2.2.4.4.2

カメラ傾斜「camera tilt」の数値を変更する、もしくは「camera tilt」下のバーのつまみを移動することによってことによって、カメラの傾斜を変更することができる。90 で真上を見て、-90 で真下を見る。

37

2.2.4.4.3

カメラ回転「camera pan」の数値を変更する、もしくは「camera pan」下のバーのつまみを移動することによってことによって、カメラを回転することができる。1～180 は時計回りに回転、-1～-180 は反時計回りに回転する。

38

2.2.4.4.4

ViewURL

本アプリケーションには、3.2 ViewURL が組み込んである。機能詳細は同項を参照。
「ViewURL」ボタンをクリックすると、ViewURL 機能が呼び出され、現在の画面の URLが表示される

39

2.3

2 次元及び 2.5 次元 WebGIS アプリケーション

2.3.1 アプリケーションの起動
ブラウザから https://tb-gis-web.jgn-x.jp/mapbox_template/ にアクセスする。
すると下記のような画面が表示される。

40

2.3.2 ログイン
機能詳細：
本システムに事前に登録してあるユーザ情報でログインする。ログインすることで、各レイヤを選択および表示することができる。
本システムにすでにログインしており、有効時間以内であれば、自動ログインされる。

手順：
画面左上の「ログイン」ボタンを押す。

下記のような画面が表示され、ユーザ名またはメールアドレス、およびパスワードを入力し、「続ける」ボタンを押す。

41

下記のようにメニューバーが表示される。

42

2.3.3 基盤地図変更
機能詳細：表示されている基盤地図を選択し変更する。
手順：
変更したい基盤地図のラジオボタンを選択する。
（下記は地理院地図 Vector を選択）

43

2.3.4 レイヤ表示・非表示
機能詳細：
画面地図上に選択したレイヤを表示・非表示する。
手順：
表示したいレイヤ名を選択（ダブルクリック）する

レイヤの透明度を変更するには、ワンクリックしたままスライダーを移動する。

44

非表示にするには、再度ダブルクリックする。

45

2.3.5 前処理（補間・集約）データの表示
機能詳細：
前処理（補間・集約）データを取得、および画面地図上に表示する。また、データをダウンロードすることができ、画面上にアップロードすることで、データを地図上に再表示する。
手順：「移動体データ（ごみ収集車－日進市）」を選択（ダブルクリック）する

該当する期間を指定し、「取得・表示」ボタンを押す。

46

データをダウンロードするには、「結果 DL」ボタンを押し、確認ダイアログで「OK」ボタンを押す。

ダウンロードしたファイルを表示するには、「Geojson アップロード(復元)取得・表示」にファイルをドラッグアンドドロップするか、クリックして該当ファイルを指定する。
下記画像はアップロード後（データ取得時点の地図位置に移動し、ダイアログ選択肢も再表示される）

47

「移動体データ軌跡（同上）」および「アメダス」も同様の手順で、データ取得・表示できる。

移動体データ軌跡

アメダス

48

2.3.6 Geojson 追加表示
機能詳細：
画面上に Geojson 形式のファイルをアップロードして地図上にデータを表示する。
「Geojson 追加」の該当項目欄に Geojson ファイルをドラッグアンドドロップするか、項目欄をクリックして Geojson ファイルを指定する。
下記は MF-JSON 欄に追加した場合。

49

2.3.7 タイムライン機能
本アプリケーションには、3.1 タイムスライダーが組み込んである。機能詳細は同項を参照。
2.3.7.1 日付の変更

地図下部に表示されているカレンダーアイコンをクリックすると、下記のようなカレンダーが表示され、日付を変更できる。

50

2.3.7.2 時刻の変更
時計アイコンをクリックすると、時刻が現在時刻に更新される。

再度、時計アイコンをクリックすると、アイコンが点滅し、現在時刻に更新され続ける。

51

2.3.7.3 タイムスライダーの再生
下記のように、画面下の矢印を押すと再生される。設定変更は次項目を参照。

2.3.7.4 再生設定変更
右端にある再生設定アイコンをクリックすると、下記の再生設定メニューが表示される。

52

再生設定内の「再生モード」、「再生間隔」/「再生速度」、「コマ送り間隔」を設定し、再生ボタンをクリックすると、設定に従ったタイムラインが再生される。再生中に再生間隔を変更すると即時反映される。
初期設定は下記の通り。
再生モード：「コマ送り」
再生間隔：1sec
コマ送り間隔：1f/1min

53

2.3.7.5 タイムスライダーで日付と時間の変更
地図下部にあるタイムスライダーのつまみを移動すると、時刻が変更される。

54

2.3.8 その他の機能
2.3.8.1 画面キャプチャ「画面キャプチャ」ボタンをクリックすると、ディスプレー画面全体やブラウザに表示された画面のスクリーンショット画像がダウンロードされる。

下記のように、「タブ」を選択し、「共有」ボタンを押すとブラウザの画像がダウンロードされる。

55

2.3.8.2

連続画面キャプチャ

本アプリケーションには、3.4 連続画像キャプチャが組み込んである。機能詳細は同項を参照。
「連続画面キャプチャ」ボタンをクリックし、開始後、各再生ボタンをクリックすると、ディスプレー画面全体やブラウザに表示された画面のスクリーンショット画像が連続でダウンロードされる。
（通常再生の場合、大量にダウンロードされる。）

停止する場合は、画面上の「共有を停止」または「連続画面キャプチャ」を再クリック。

56

2.3.8.3

ViewURL

本アプリケーションには、3.2 ViewURL が組み込んである。機能詳細は同項を参照。
「ViewURL」ボタンをクリックすると、表示されている画面の情報を保持した URL が表示される。
保持情報：
地図の位置（経度緯度）、ズームレベル、選択している基盤地図 ID、選択しているレイヤ ID

URL 右側のアイコンを押すと、URL がコピーされる。

57

58

2.3.8.4

地図の拡縮など

アイコン

説明
地図を拡大する
地図を縮小する
地図の方位を変更する
現在位置に移動する（ボタン押下後、用許可した場合のみ）

2.3.9 MapLibre をベースにした WebGIS アプリケーションについて
MapLibre GL JS は、Mapbox GL が v2.0.0 のリリースを機にプロプライエタリライセンスを適用することなったため、新たに派生したオープンソースソフトウェアです。以下の特徴を有しており、本システムでも 2023 年度開発で追加搭載しています。
⚫
⚫
⚫
⚫

オープンソースソフトウェア
WebGL ベースの地図ライブラリ
ベクトルタイルに対応
高度な地図スタイリング（＝デザイン）機能

59

https://tb-gis-web.jgn-x.jp/2023/maplibre_template/ にアクセスするとアプリケーションが起動します。

2.4

人口動態等可視化 Web アプリケーション

2.4.1 アプリケーションの起動
ブラウザから https://tb-gis-web.jgn-x.jp/mapbox_sample/ にアクセスする。
すると下記のような画面が表示される。

2.4.2 ログイン
機能詳細：
本システムに事前に登録してあるユーザ情報でログインする。各レイヤを選択、表示することができる。
本システムにすでにログインしており、有効時間以内であれば、自動ログインされる。
手順：
画面左上の「ログイン」ボタンを押す。
60

下記のような画面が表示され、ユーザ名またはメールアドレス、およびパスワードを入力し、「続ける」ボタンを押す。

61

下記のようにメニューバーが表示される。

62

2.4.3 基盤地図変更
機能詳細：表示されている基盤地図を選択し変更する。
手順：
変更したい基盤地図のラジオボタンを選択する。
（下記は地理院地図 Vector に変更したもの）

2.4.4 レイヤ表示・非表示
機能詳細：
画面地図上に選択したレイヤを表示・非表示する。
手順：
表示したいレイヤ名を選択（ダブルクリック）する。
（下記は、「行政境界」 > 「人口（市区町村・複数年）」を選択）

63

（上記は、立体グラフを見やすくするため、角度を変更している。）

他の機能（タイムライン機能、その他機能（画面キャプチャ、ViewURL））は、「2.2 2 次元及び 2.5 次元 WebGIS アプリケーション」と同様であり、該当項目を参照。

64

3 ライブラリ
3.1 タイムスライダー
3.1.1 概要
タイムスライダーは、操作することにより表示している画面の現在時刻を変える機能である。天候のように時々刻々と変化するデータを、時系列に沿って確認するために使用する。

3.1.2 現在時刻の変更
機能詳細：
現在時刻を変更することで、表示しているデータの時刻を切り替えることができる。
手順：
マウスでつまみを左右にドラッグする。

左右にドラッグあるいは、タイムスライダーの任意の場所をクリックする。

65

移動したい時間をクリック

カレンダーボタンをタップすることで、任意の日付に切り替わる。

カレンダーボタンをクリック切り替えたい日付をクリック

66

3.1.3 自動再生
機能詳細：表示している現在時刻を自動で時々刻々と変化させる。
手順：
再生ボタンをタップする
タップ

再度タップすることで、再生速度を変更できる(5 段階)。
また、逆側の再生ボタンをタップすることで、逆方向への再生を行うことができる。
自動再生を終了したい場合、停止ボタンを押下する。
タップ67

3.1.4 スキップ
機能詳細：
特定の時間だけ早送り、あるいは巻き戻しを行う。
手順：
以下のいずれかの操作を行う。
▶|ボタンタップ：短時間のスキップ→|ボタンタップ：時間軸バー目盛の縮尺で設定されている値だけ時間をスキップ|◀ボタンタップ：逆方向の短時間のスキップ|←ボタンタップ：時間軸バー目盛の縮尺で設定されている値だけ時間を逆方向にスキップ

タップ

68

3.1.5 縮尺の変更
機能詳細：
操作する時間の縮尺を変えることで、自動再生時の時間の進み方を調整する。
手順：
以下のいずれかの操作を行う。
⊕ボタンタップ：縮尺が短くなる。
⊖ボタンタップ：縮尺が長くなる。
つまみを動かす：任意の縮尺に切り替える。
時間軸バーでホイールを操作：縮尺を変更する。

タップ

ホイール操作69

3.1.6 現在時刻への切り替え
機能詳細：表示している現在時刻を、実際の時刻に合わせる。また、リアルタイム更新を行うことができる。
手順：
時計ボタンをタップする。
タップ

再度時計ボタンをタップすると、現在時刻がリアルタイム更新される。リアルタイム更新
中は、時計ボタンが点滅する。
点滅する

70

3.1.7 開始時刻、終了時刻の変更
機能詳細：
時間軸領域に表示している開始時刻と終了時刻を調整する。
手順：
時間軸領域をドラッグする。

ドラッグ

71

3.1.8 タイムレンジの指定
機能詳細：
特定の範囲を設定することで、その区間のみ現在時刻を変更できるようになる。また、その区間を繰り返しで再生できる。
手順：
RangeBar ボタンをタップする。

タップ繰り返しボタンをタップすることで、タイムレンジの範囲を繰り返しで自動再生する。
タップ72

タイムレンジの端をドラッグすることで、開始時刻と終了時刻を変更できる。

ドラッグ

73

3.2 ViewURL
3.2.1 概要
表示している時空間情報及び表示データ情報を URL（URI）で表示（一時記録）できる機能（ViewURL 機能）。さらに生成した URL を用いて、他のユーザがデータ表示を再現できる。

3.2.2 表示データ情報の一時記録
ViewURL 作成ボタンをクリックする。

ViewURL 作成ボタン

生成された URL をコピーする。

作成された URL

74

3.2.3 表示データ情報の復元
ViewURL 機能で作成した URL をアドレスバーへコピーして、WebGIS アプリケーションを表示する。

75

3.3 時空間同期機能
3.3.1 概要
複数の Web アプリケーションの時空間情報の同期機能。StarsController ライブラリを組み込んだ親アプリケーションを起動すると、同期対象のアプリケーションを複数起動し、それらが同期される。

3.3.2 空間同期
同期対象のアプリケーションのいずれかの地図を操作する。

地図の操作

76

3.3.1 時間同期
同期対象のアプリケーションのいずれかのタイムスライダーを操作する。

タイムスライダーの操作

77

3.4 連続画像キャプチャ
3.4.1 概要
データを時間方向に自動再生しながら、タイムラインとの画像を静止画像として複数枚キャプチャする機能。

3.4.2 連続画像キャプチャキャプチャ開始。ブラウザのダイアログ等でキャプチャの対象を選択し、キャプチャ実施の許可を出す。

自動再生しながら、各ステップでキャプチャが取得される。

78

3.5 360 度画像保存
3.5.1 概要
360 度画像保存は、表示している地図の中心から 360 度を囲う画像を作成し保存する機能である。

3.5.2 サブビューの表示/非表示
機能詳細：
360 度画像保存に使用する、保存対象確認のためのサブビューの表示と非表示の切り替えを行う。

サブビュー
手順：

サブビューの表示/非表示ボタンをクリックする。

79

クリック

再度クリックすることで、非表示に切り替わる。

クリック

80

3.5.3 360 度画像保存
機能詳細：表示している地図の中心から 360 度を囲う画像を作成し保存する。
手順：
スフィアマップ作成ボタンをクリックする。

クリック
360 度画像作成完了後、自動的にダウンロードが行われる。

81

3.5.4 解像度変更
機能詳細：作成する 360 度画像の解像度を変更する。
作成される画像は指定した値を S とすると,4S × 2S のサイズとなる。
解像度の最低は 1、最高は 1024 とする。
初期値は 512 が設定されている。
手順：
キューブマップ画像サイズの入力値を変更する。

解像度を入力

入力した解像度は、入力と同時に反映される。

82

3.5.5 次の処理への待ち時間変更
機能詳細：
保存対象の領域の中に取得できない地図画像が存在していた場合、該当箇所の画像作成が完了しなくなることがある。そのようなケースに画像作成を中断し次の処理へと移すための待ち時間を変更する。
極端に短い時間を指定した場合、作成した画像のエンコードが途中で終了するため、画質が荒くなることに注意すること。
初期値は 2 秒が設定されている。
手順：
次の処理への待ち時間の入力値を変更する。

待ち時間を入力

83