TOPIC7：TerriaJSで活用する

TerriaJSを使うと、簡単なコードを書くだけで、Cesiumに対するユーザーインターフェースを実装できます。このトピックでは、TerriaJSでPLATEAUを活用する方法を説明します。

【目次】

7.1　 TerriaJSとは

7.2　 TerriaMapの開発環境を構築する

　7.2.1　 TerriaMapのソースの入手とビルドおよび起動

　7.2.2　 TerriaMapの確認

7.3　 日本の地図を表示する

　7.3.1　 ベースマップの設定

　7.3.2　 起動時に日本を表示する

7.1 _ TerriaJSとは

TerriaJSは、地理空間データのカタログビューアを作成できるフレームワークです。Cesiumで構成した地図上に、GeoJSON形式やCSV形式など、さまざまな地理空間情報を重ねて視覚化し、簡単に扱えるようになります。

TerriaJSはライブラリですが、すぐに実行できるようにいくつかのコードを加えたTerriaMapも提供されています。TerriaMapを使えば、わずかなコードを書くだけ、もしくはコードをまったく書かずに設定ファイルを変更するだけで、ブラウザで利用できるカスタムなGISを作れます。

TOPIC2で解説したPLATEAU VIEWは、CesiumとTerriaMapを組み合わせて実現されています。このトピックではTerriaMapを使って、PLATEAU VIEWと似たようなWebブラウザで使えるGISを構築する方法を説明します。

7.2 _ TerriaMapの開発環境を構築する

TerriaJSの「Getting Started」（https://docs.terria.io/guide/getting-started/）には、TerriaMapを使って開発する方法の流れが記述されています。このドキュメントに従って、TerriaMapの開発環境を準備します。

TerriaMapで開発するには、Node.js環境（バージョン14.0以降）が必要です。まずは、それぞれのOSに応じてNode.js環境を構築してください。

7.2.1 _ TerriaMapのソースの入手とビルドおよび起動

TerriaMapのソースコードは、GitHubで公開されています。「Getting Started」（https://docs.terria.io/guide/getting-started/）に記載されているように、適当な作業ディレクトリ上で、次の一連のコマンドを入力すると、GitHubからソースコードがダウンロードされ、ビルド、起動します。初回のビルドには、数分かかることもあります。

git clone https://github.com/TerriaJS/TerriaMap.git
cd TerriaMap
export NODE_OPTIONS=--max_old_space_size=4096
npm install -g yarn
yarn install && yarn gulp && yarn start

7.2.2 _ TerriaMapの確認

上記の手順で起動すると、ポート3001でTerriaMapが待ち受けしはじめます。ブラウザで「http://localhost:3001/」を開くと、TerriaMapに接続できます（図 7-1）。
ビルド直後は、薄いグレーの背景地図（ベースマップ）のみが表示されており、地形（Terrain）は無効です。表示される地図の中心地は、オーストラリアです。

docker run -p3001:3001 -it node:14 /bin/bash
git clone https://github.com/TerriaJS/TerriaMap.git
cd TerriaMap
export NODE_OPTIONS=--max_old_space_size=4096
yarn install && yarn gulp && yarn start

7.3 _ 日本の地図を表示する

図 7-1に示したように、ビルドするだけで地図が表示されます。ここに3D都市モデルを表示するようにカスタマイズしていきます。

まずは、ベースマップを表示し、最初に表示される場所を日本に変更していきます。

7.3.1 _ ベースマップの設定

ベースマップを薄いグレーの地図から、もう少し詳細な地図に変更してみます。［Map Settings］ボタンをクリックするとベースマップをいくつか選べます。ここに地理院タイルを追加し、それをデフォルトに構成してみます。

■ データカタログが対応するファイル形式

TerriaJS（およびそれをベースとしたTerriaMap。以下同）は、さまざまな地理空間情報を集約できるデータカタログビューアです。ベースマップもデータカタログビューアで扱うカタログオブジェクトの一種として登録します。

TerriaJSが扱えるカタログの種類は、Catalog Itemsに記載されています。表 7-1に転載します。

■ 地理院タイルのURL

地理院タイルは、次のURLで配信しています。

https://cyberjapandata.gsi.go.jp/xyz/{t}/{z}/{x}/{y}.{ext}

{t}：データID。例えば「std（標準地図）」「pale（淡色地図）」など。地図の種類については、https://maps.gsi.go.jp/development/ichiran.htmlを参照。

{x}：タイル座標のX値

{y}：タイル座標のY値

{z}：ズームレベル

{ext}：拡張子（例えばpngやjpg。データIDによって異なる）

TerriaJSでは、この書式のXYZ方式のタイル画像は、OpenStreetMapCatalogItem（open-street-map）として扱えます。

■ TerriaMapの設定ファイルの構造

TerriaMapの設定ファイルは、wwwroot/config.jsonです。このファイルをテキストファイルで開くと、次の内容であることがわかります。

{
    "initializationUrls": ["simple"],
    "parameters": {
    …パラメータ設定が記載されている…
    },
}

先頭のinitializationUrlsは、読み込む初期設定ファイル名です。simpleと書かれており、この場合、simple.jsonファイルを最初に読み込みます。このファイルはinitフォルダのなかに存在します。

init/simple.jsonファイルには、ベースマップの設定をはじめ、ウィンドウ左側に表示されているデータのエクスプローラ部分に何を表示するかなどの設定が記載されています（エクスプローラ部分については、「7.4　3D都市モデルを表示する」で説明します）。

parametersは、さまざまな起動パラメータを設定する項目です。GoogleやCesium ionのキー、各種説明文、起動時に表示するダイアログボックスなどを設定します。

■ ベースマップを変更する

以上の構造を踏まえて、ベースマップを地理院タイルに変更します。

［1］init/simple.jsonを開く

テキストエディタなどで、wwwroot以下のinit/simple.jsonファイルを開きます。

［2］ベースマップを変更する

ベースマップの設定は、末尾の部分にあります。

【変更前のベースマップの設定】

  "baseMaps": {
    "defaultBaseMapId": "basemap-positron",
    "previewBaseMapId": "basemap-positron"
  }

ここで指定されているbasemap-positronは、TerriaJSに組み込みのベースマップで、OpenStreetMapが提供するPositronマップです。

これを地理院タイルに変更するには、次のように修正して保存します。

【修正後】

  "baseMaps": {
    "items": [
        {
            "item": {
                "type": "open-street-map",
                "id": "chiri-map",
                "name": "地理院タイル",
                "url": "https://cyberjapandata.gsi.go.jp/xyz/std/",
                "fileExtension": "png",
                "attribution": "<a href='https://maps.gsi.go.jp/development/ichiran.html'>地理院タイル</a>"
            },
            "image": "https://cyberjapandata.gsi.go.jp/xyz/std/18/232801/103215.png"
        }
    ],
    "defaultBaseMapId": "chiri-map",
    "previewBaseMapId": "chiri-map"
  }

ベースマップは、itemsの部分に配列として登録します。itemにベースマップの情報を記述し、imageに［Map Settings］ボタンをクリックしたときに表示されるアイコンを設定します。itemに登録すべき属性の意味を、表 7-2に示します。

defaultBaseMapIdは最初に表示するベースマップのID、previewBaseMapIdはデータカタログ（後述）のデータプレビュー画面で表示するベースマップのIDです。ここではどちらも、地理院タイルに設定したidの値を設定しました。

変更したら保存してリロードし、地理院タイルが選択されていることを確認します。［Map Settings］ボタンをクリックすると、地理院タイルが選択肢として追加されています。

デフォルトのオーストラリアを表示しているとわかりませんが、マウスを操作して日本に移動し、拡大してみると、地理院タイルによる、詳細な日本地図が表示されることがわかります。

コラム：PLATEAUのオルソ画像を用いる

PLATEAUは、ズームレベル19（約30cmの解像度）まで対応した高精細なオルソ画像を配信しています。地理院タイルのURLの代わりに、次のように指定すると表示できます。

"name": "PLATEAUオルソ",
"url": "https://gic-plateau.s3.ap-northeast-1.amazonaws.com/2020/ortho/tiles/",

ただし対象地域外は配信されていないため、部分的に抜けた地図になります。

7.3.2 _ 起動時に日本を表示する

起動直後から日本周辺を表示するように変更してみましょう。カメラの位置は、simple.jsonファイルのhomeCamera属性で設定します。

初期状態では、次のように設定されています。

【変更前】

"homeCamera": {
    "north": -8,
    "east": 158,
    "south": -45,
    "west": 109 
},

これを次のように変更してリロードすると、日本周辺が最初に表示されるようになります。

【変更後】

"homeCamera": {
    "north":48,
    "east": 153,
    "south": 26,
    "west": 122
},