TOPIC 7｜TerriaJSで活用する[2/2]｜TerriaJSで3D都市モデルを活用する
TerriaJSを使うと、簡単なコードを書くだけで、Cesiumに対するユーザーインターフェースを実装できます。TerriaJSでPLATEAUの3D都市モデルを表示するほか、地形の設定、その他のカスタマイズや事例について説明します。
【目次】
7.4 3D都市モデルを表示する
7.4.1 基本的な考え方
7.4.2 3D都市モデルをデータカタログに登録する
7.5 地形を表示する
7.5.1 PLATEAU-Terrain
7.5.2 地形を適用する
7.6 その他のカスタマイズ
7.7 事例
7.4 _ 3D都市モデルを表示する
次に、3D都市モデルを表示できるようにしてみましょう。
7.4.1 _ 基本的な考え方
3D都市モデルを地図上に重ねて表示するには、データカタログに登録しておき、画面から選択します。
TerriaMapの左側には検索ボックスと［＋Explore map data］、［Upload］というボタンがあります。［＋Explore map data］ボタンをクリックすると、図 7-6のようにデータカタログが表示されます。ここから何らかのデータを選択すると、それが地図上に表示されます。
デフォルトでは、サンプルのデータカタログが登録されています。ここに3D都市モデルを追加して、ユーザーがカタログから選択して表示できるように、修正していきます。
これはPLATEAU VIEWにおける操作に似ており、実際、PLATEAU VIEWはこの仕組みを使って作られています（図 7-7）。
7.4.2 _ 3D都市モデルをデータカタログに登録する
データカタログは、simple.jsonファイルのcatalog属性に記述します。デフォルトでは、次のように記述されています。
"catalog": [
{
"id": "ZIdekvc10z",
"type": "wms-group",
"name": "Test",
"url": "https://programs.communications.gov.au/geoserver/ows",
"members": [
{
"type": "wms",
"localId": "mybroadband%3AMyBroadband_ADSL_Availability",
"legends": [
{
"items": [
{
"title": "A - Best",
"color": "#6B0038"
},
{
"title": "B",
"color": "#F41911"
},
{
"title": "C",
"color": "#F67F00"
},
{
"title": "D",
"color": "#D78B6D"
},
{
"title": "E - Worst",
"color": "#ECD2BE"
},
{
"title": "No data",
"color": "rgba(0,0,0,0)",
"outlineColor": "black",
"addSpacingAbove": true
}
]
}
]
}
]
},
…略…
],グループを作って階層化することもできるため、少し複雑に見えますが、シンプルに書式を示すと以下のような構造になります。
"catalog": [
// 1つめのデータ
{
"id" : "識別するID",
"type": "データの種類（）",
"name" : "データの表示名（データカタログに表示される名称）",
"url": "データを配信しているURL"
},
// 2つめのデータ
{
"id": "識別するID",
"type": "データの種類（表 7-1を参照）",
"name": "データの表示名（データカタログに表示される名称）",
"url": "データを配信しているURL"
},
…
],■ PLATEAUの3DTiles形式データの配信
【Cesiumで活用する】「6.2.2 建築物モデルを追加する」で説明したように、PLATEAUは、3D Tiles形式のデータを配信しています。これをデータカタログとして登録すれば、3D都市モデルを表示できるようになります。
3DTiles形式を配信しているURLは、PLATEAU-3DTiles配信チュートリアルに記述されています。例えば、新宿区の「テクスチャ付き（低解像度）」と港区「テクスチャ付き（低解像度）」のURLは、次のとおりです。
【新宿区のテクスチャ付き（低解像度）】
https://plateau.geospatial.jp/main/data/3d-tiles/bldg/13100_tokyo/13104_shinjuku-ku/low_resolution/tileset.json
【港区のテクスチャ付き（低解像度）】
https://plateau.geospatial.jp/main/data/3d-tiles/bldg/13100_tokyo/13103_minato-ku/low_resolution/tileset.json
これら2つの3D都市モデルをデータカタログから選択できるようにするには、simple.jsonのcatalog属性を、次のように変更します。
"catalog": [
{
"id": "plateau-shinjuku",
"type": "3d-tiles",
"name": "新宿区テクスチャ付き（低解像度）",
"url": " https://plateau.geospatial.jp/main/data/3d-tiles/bldg/13100_tokyo/13104_shinjuku-ku/low_resolution/tileset.json"
},
{
"id": "plateau-minato",
"type": "3d-tiles",
"name": "港区テクスチャ付き（低解像度）",
"url": "https://plateau.geospatial.jp/main/data/3d-tiles/bldg/13100_tokyo/13103_minato-ku/low_resolution/tileset.json"
},
],このように修正して保存したら、ブラウザをリロードします。［＋Explore map data］をクリックすると、図 7-8のように、データカタログとして登録したものが表示されます。
［Data Catalogue］の画面でデータ名の［＋］ボタンをクリックすると、地図上に追加されます。新宿区テクスチャ付き（低解像度）を追加すると、画面左のワークベンチ側に登録されます（図7-9）。ここで［IDEAL ZOOM］ボタンをクリックすると、データが存在する領域にズームし、図 7-10のように、3D都市モデルが表示されます。
コラム：カタログファイルジェネレーターを使う
simple.jsonのcatalog属性には、3D都市モデル以外にも、さまざまな経緯度で指定された場所と、それに関連付ける値で構成される地理空間情報を登録でき、それらをユーザーが選び、重ね合わせるように表示できます。時系列を伴うデータを登録すれば、アニメーションすることも可能です。
こうしたデータは、catalog属性にひとつずつ登録すればよいのですが、数が多いと、その作業は煩雑になります。こうした手間を軽減するため、PLATEAUはカタログファイルジェネレーターを提供しています。
【PLATEAUカタログファイルジェネレーター】
https://github.com/Project-PLATEAU/plateau-catalog-generator
カタログファイルジェネレーターは、カタログとして登録したいデータをCSV形式で用意すると、それをTerriaJS用のカタログ形式に変換してくれます。
データセットに含まれるデータのうち、どれを表示するのかを選べたり、凡例を付けたりといった高度なユーザーインターフェースの作成にも対応しています。
7.5 _ 地形を表示する
［Map Settings］から［3D Terrain］を選択すると、地形を表示することができます。しかしこの段階では、地形データを設定していないので、地表は真っ暗です（図 7-11）。
7.5.1 _ PLATEAU-Terrain
地形データの種類やフォーマットには、さまざまなものがありますが、PLATEAUでは、quantized-mesh形式のデータを「PLATEAU-Terrain」として配信しています。これを使うと、TerriaJSで地形を表示できます。
【PLATEAU-Terrain配信チュートリアル】
https://github.com/Project-PLATEAU/plateau-streaming-tutorial/blob/main/terrain/plateau-terrain-streaming.md
7.5.2 _ 地形を適用する
PLATEAU-Terrainで配信されている地形を適用するには、2つの方法があります。
■ デフォルトの地形データとして常に利用する
ひとつめの方法は、デフォルトの地形データとして、常に利用する方法です。この場合、wwwroot/config.jsonのparametersのなかに次のように記述します。parametersの内部なら、どこに記述してもかまいません。
【メモ】
記述すべきトークンの値やアセットIDは、PLATEAU-Terrain配信チュートリアル（https://github.com/Project-PLATEAU/plateau-streaming-tutorial/blob/main/terrain/plateau-terrain-streaming.md）に記述されています。
{
"initializationUrls": ["simple"],
"parameters": {
"cesiumIonAccessToken": "eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJqdGkiOiI5N2UyMjcwOS00MDY1LTQxYjEtYjZjMy00YTU0ZTg5MmViYWQiLCJpZCI6ODAzMDYsImlhdCI6MTY0Mjc0ODI2MX0.dkwAL1CcljUV7NA7fDbhXXnmyZQU_c-G5zRx8PtEcxE",
"cesiumTerrainAssetId": 770371,
"useCesiumIonTerrain": true,
…略…
},
}
config.jsonを上記のように修正して保存し、ブラウザをリロードすると、［3D Terrain］を選んだときに、地形が表示されるようになります。
上空からの平面図では地面に起伏が付いているのがわかりにくいですが、［Ctrl］キーを押しながらマウスをドラッグすると俯瞰の角度が変わるので、少し斜めにして、山があるあたり（例えば日本アルプスなど）の近くを見てみると、起伏が表現されているのがわかるはずです。
■ データカタログとして登録する方法
もうひとつの方法は、常に地形を表示するのではなく、データカタログとして登録しておき、追加したときだけ、地形を表示する方法です。例えば、simple.jsonを次の斜体のように修正します。
…略…
"catalog": [
{
"id": "plateau-shinjuku",
"type": "3d-tiles",
"name": "新宿区テクスチャ付き（低解像度）",
"url": " https://plateau.geospatial.jp/main/data/3d-tiles/bldg/13100_tokyo/13104_shinjuku-ku/low_resolution/tileset.json"
},
{
"id": "plateau-minato",
"type": "3d-tiles",
"name": "港区テクスチャ付き（低解像度）",
"url": " https://plateau.geospatial.jp/main/data/3d-tiles/bldg/13100_tokyo/13103_minato-ku/low_resolution/tileset.json"
},
{
"name":"地形データ",
"type":"cesium-terrain",
"ionAssetId": 770371,
"ionAccessToken":"eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJqdGkiOiI5N2UyMjcwOS00MDY1LTQxYjEtYjZjMy00YTU0ZTg5MmViYWQiLCJpZCI6ODAzMDYsImlhdCI6MTY0Mjc0ODI2MX0.dkwAL1CcljUV7NA7fDbhXXnmyZQU_c-G5zRx8PtEcxE",
}
],
…略…修正して保存したらリロードし、［Explore map data］をクリックしてデータカタログを表示すると、［地形データ］が表示されます。［＋］をクリックしてデータを追加したときだけ、地形が表示されるようになります。
7.6 _ その他のカスタマイズ
TerriaMapは、さらにさまざまなカスタマイズを行うことができます。公式ドキュメントの下記情報を参照してください。
21 アプリケーション名や機能のON/OFFなどの基本設定
https://docs.terria.io/guide/customizing/client-side-config/
22 初期表示やカタログメニューの設定
https://docs.terria.io/guide/customizing/initialization-files/
23 見た目のカスタマイズ
https://docs.terria.io/guide/customizing/skinning/
コラム：TerriaMapを日本語化する
TerriaMapは英語表示です。日本語表示するには、翻訳ファイルを用意します。その方法は、「TerriaJS translation guide」（https://docs.terria.io/guide/customizing/translation-guide/）に記述されています。
翻訳ファイルは、自分で用意しなくても、PLATEAU VIEWのものを使うことができます。次のようにすると、TerriaMapを日本語化できます。
［1］PLATEAU VIEWの日本語翻訳ファイルを取得する
GitHubから、PLATEAU VIEWの日本語翻訳ファイルja/languageOverrides.jsonをダウンロードします。
［2］ローカルにコピーする
自分でインストールしたTerriaMapのwwwroot/languagesフォルダにjaフォルダを新規作成し、手順［1］でダウンロードしたファイルをコピーします。
［3］config.jsonを変更する
wwwroot/config.jsonを開き、languageConfigurationの部分を変更します。
【変更前】
// see `languageOverrides.json` in languages/en
"languageConfiguration": {
"enabled": false,
"debug": false,
"languages": {
"en": "English",
"fr": "Français"
},
"fallbackLanguage": "en"
},
【変更後】
// see `languageOverrides.json` in languages/en
"languageConfiguration": {
"enabled": true
"debug": false,
"languages": {
"ja": "Japanese",
"en": "English",
"fr": "Français"
},
"fallbackLanguage": "ja"
},変更したら保存してリロードします。図 7-14のように言語を選択するメニューが表示され、［Japanese］を選択すれば、日本語として表示されます。
7.7 _ 事例
TerriaJSを使った例としては、以下のようなものがあります。
■ エリアマネジメント・ダッシュボードの構築
| 【企業名】 | アジア航測株式会社、復建調査設計株式会社 |
| 【分野】 | まちづくり |
| 【対象地域】 | 広島県広島市 |
| 【PLATEAU利用データ】 | 建築物（LOD1、LOD2、LOD3）、道路（LOD1、LOD2） |
| 【他のデータとの掛け合わせ】 | エリアマネジメント団体の活動情報、災害リスク関連データ（洪水浸水想定、土砂災害危険区域など）、航空写真画像データ、一時避難場所・退避場所等データ |
| 【利用ソフトウェア】 | CesiumJS、TerriaJS |
| 【活用概要】 | 3D都市モデルをベースに地域のイベント情報、バリアフリー情報、災害リスク情報、避難施設情報、来訪者ログなどのさまざまな地域情報をダッシュボードとして統合・管理することで、 エリアマネジメント活動状況の可視化・情報共有や効果分析・評価、帰宅困難者避難計画の策定支援や防災訓練支援、イベント開催時の来場者動線検討やイベント情報の配信等に活用可能な地域情報プラットフォームを開発。 |
| 【URL】 | https://www.mlit.go.jp/plateau/use-case/uc22-028/ |
■ 開発許可申請管理システムの構築（開発許可のDX）
| 【企業名】 | アジア航測株式会社 |
| 【分野】 | まちづくり |
| 【対象地域】 | 長野県茅野市 |
| 【PLATEAU利用データ】 | 建築物（LOD1）、道路（LOD1）、 都市計画決定情報（LOD1）、地形（LOD1）、災害リスク（LOD1） |
| 【他のデータとの掛け合わせ】 | 規制情報データ、都市計画基礎調査データ、災害リスクデータ、地番筆界データ |
| 【利用ソフトウェア】 | CesiumJS、TerriaJS |
| 【活用概要】 | 土地利用、都市計画、各種規制などの情報を3D都市モデルに統合し、対象エリアにおける開発行為の適地診断・申請システムを開発する。 これにより、事業者の情報収集と行政側の審査の双方の事務の効率化を図る。 さらに、複雑かつ多岐にわたる都市に関する各種規制を可視化することで、行政機関による総合的な観点からの立地誘導施策推進等に貢献することを目指す。 |
| 【URL】 | https://www.mlit.go.jp/plateau/use-case/uc22-012/ |
【文】
大澤文孝
【監修】
高田知典（Symmetry Dimensions Inc.）
![TOPIC 19｜TerriaJSでバリアフリールート検索ウェブアプリを開発する[3/3]｜バリアフリールート情報を探索する](/plateau/uploads/2023/11/03SP.png)
![TOPIC19｜TerriaJSでバリアフリールート検索ウェブアプリを開発する[2/3]｜バリアフリールート情報を追加する](/plateau/uploads/2023/11/02SP.png)
![TOPIC19｜TerriaJSでバリアフリールート検索ウェブアプリを開発する[1/3]｜PLATEAU VIEW1.1を動かす](/plateau/uploads/2023/11/01SP.png)