PLATEAU-3DTiles配信チュートリアルの3.1. Cesium.jsでの利用方法に記載されている実装をOracle APEXのアプリケーションに組み込み、建物データ(3D Tiles)をCesium.jsで表示してみます。
建物データの表示はチュートリアルをそのまま実装します。Oracle APEXを使って3D Tiles一覧のURLを置き換える機能を追加します。
アプリケーション作成ウィザードを起動し、空のアプリケーションを作成します。名前はPLATEAU 3DTilesとします。Cesium.jsによる建物データの表示は、デフォルトで作成されるホーム・ページに実装します。
アプリケーションの作成をクリックします。
アプリケーションが作成されたら、ページ・デザイナでホーム・ページを開きます。
Cesium.jsでの利用方法に記載されているサンプルコードを、ホーム・ページにそのまま埋め込みます。
ページ・プロパティのJavaScriptのファイルURLに以下を記載します。CesiumJSのバージョンは新しいものを使用します。
https://cesium.com/downloads/cesiumjs/releases/1.103/Build/Cesium/Cesium.js
ページ・ロード時に実行に、<script>...</script>の間に記述されているJavaScriptのコードを転記します。
CSSのファイルURLに以下を記載します。
https://cesium.com/downloads/cesiumjs/releases/1.103/Build/Cesium/Widgets/widgets.css
CSSのインラインに、<style>...</style>の間に記述されている#cesiumContainerのスタイル定義を転記します。
Cesium.jsを組み込むリージョンを作成します。
識別のタイトルは3D Tiles、タイプに静的コンテンツを選択します。ソースのHTMLコードとして以下を記述します。
<div id="cesiumContainer"></div>
外観の
テンプレートとして
Standardを選択します。不要な装飾を減らすために、
テンプレート・オプションの
Remove Body Paddingに
チェックを入れ、
Headerは
Hidden、
Styleに
Remove UI Decorationを選択します。
Body Heightは、テンプレート・オプションとして選択できる最大の
640pxを選択します。
今回の用途ではブレッドクラムは不要なので、削除します。
この時点でアプリケーションを実行すると、以下の画面が表示されます。
サンプルコードでは表示が千代田区に固定されています。
以下より別の地域も表示できるように、アプリケーションに機能を追加します。
3D Tiles一覧のURLを保存する表PLATEAU_3DTILESを作成します。
クイックSQLの以下のモデルを使用します。
# prefix: plateau
3dtiles
citycode vc6 /nn
type vc8 /nn
url vc200 /nn
lat num
lon num
has_coordinate vc1 /check Y,N
表の作成には、SQLワークショップのユーティリティのクイックSQLを使用します。
3DTiles一覧は、以下のJSONファイルとして提供されています。
https://raw.githubusercontent.com/Project-PLATEAU/plateau-streaming-tutorial/main/3dtiles_url.json
このファイルを読み込んで、表PLATEAU_3DTILESに保存します。
SQLコマンドで以下のコマンドを実行します。
3dtiles_url.jsonは、CITYCODE、TYPE、URLの属性を含むオブジェクトの配列です。それぞれのオブジェクトを表PLATEAU_3DTILESの一行として保存しています。
3DTileのデータに座標値が含まれているか確認し、含まれている場合は中心の座標を列LATとLONに保存します。実際には空間の中心が市街地の中心とは限らないため、3DTilesを選択したときに、市街地の端が中心となって表示される場合はあります。
以下のSQLを実行します。SQLコマンドから大量のデータを一度に処理しようとすると、ブラウザがタイムアウトするため、件数を絞っています。繰り返し実行することで、すべてのデータを処理できます。
未処理件数が０になれば、表示する建物データを切り替えるためのデータの準備は完了です。
表示する建物データの選択に使用するLOVを作成します。
共有コンポーネントのLOVを開きます。
作成済みのLOVの一覧が表示されます。作成をクリックします。
LOVの作成は最初からを選択します。
次へ進みます。
名前はPLATEAU_3DTILESとします。タイプはDynamicです。
次へ進みます。
データ・ソースの表/ビューの名前として、PLATEAU_3DTILES(表)を選択します。
次へ進みます。
列マッピングの
戻り列、
表示列ともに、
URLを選択します。
作成をクリックします。
LOVとしてPLATEAU_3DTILESが作成されます。このLOVに、追加値として列LATおよびLONを指定できるようにします。
PLATEAU_3DTILESをクリックして編集画面を開きます。
最初にソースのWHERE句に以下を記述します。座標値が設定されているURLだけを選択対象にします。
has_coordinate = 'Y'
座標を求めているのはtypeがbldgである建物データに限っています。typeには他にfld、tunami、takashioがあります。これらの座標値を3DTileのデータより求める方法が分からなかったので、座標値は設定されていません。3DTileには地方公共団体コードが含まれているため、そのコードを元に列LATおよびLONに座標値を設定できると思います。
列の選択をクリックし、追加表示列としてURLに加えてLATおよびLONを追加します。列URLは戻り値として設定されているため、デフォルトで非表示、検索対象外になってます。
列名URLのヘッダーにURLを設定し、表示可能、検索可能を共にONに変更します。
以上で変更の適用をクリックします。
ホーム・ページに建物データを選択するページ・アイテムを作成します。
識別の名前はP1_3DTILES、タイプとしてポップアップLOVを選択します。ラベルは3D Tilesとします。
設定の追加出力として以下を設定します。ページ・アイテムP1_LATおよびP1_LONは、この後に作成します。
LAT:P1_LAT,LON:P1_LON
検証の必須の値はON、LOVのタイプとして共有コンポーネントを選択し、LOVに先ほど作成したPLATEAU_3DTILESを指定します。追加値の表示、NULL値の表示ともにOFFとします。
追加値を保持するページ・アイテムP1_LATおよびP1_LONを作成します。
タイプは非表示、設定の保護された値はOFFにします。ポップアップLOVによる追加値の設定は、動的アクションによるページ・アイテムの値の変更と同じ処理であるため、保護を外す必要があります。
建物データを変更したときにページを再描画するため、ページの送信を行います。この処理は動的アクションで実装します。
ページ・アイテムP1_3DTILESに動的アクションを作成します。名前は建物データの変更とします。タイミングはデフォルトでイベントが変更、選択タイプはアイテム、アイテムはP1_3DTILESとなります。
TRUEアクションとしてページの送信を指定します。
作成したページ・アイテムを使って建物データを表示するように、ページ・ロード時に実行するJavaScriptを変更します。
サンプルコードにはPLATEAUオルソを読み込む処理が含まれていますが、現在はこのURLからの提供は止まっている、または、認証が必要になっているようなのでコードからは削除しています。また、Cesium Ionのデフォルト・アクセス・トークンとアセットIDはコードに含めず、置換文字列G_TOKENおよびG_ASSET_IDによる指定に変更しています。
アプリケーション定義に置換文字列としてG_TOKENおよびG_ASSET_IDを設定します。
サンプルコードに記載されているデフォルト・アクセス・トークンの値およびアセットIDは、今のところ有効ですが、サンプルの確認以上の作業を行う場合は、Cesium ionにアカウントを登録し取得したアクセス・トークンとアセットIDに置き換えるべきだと思います。
登録するアセットが5GB未満までは無料で利用できるようです。詳細は
Cesium Ionのページを参照してください。フリー・トライアルについても紹介されています。
以上でアプリケーションは完成です。実行すると記事の先頭のGIF動画のように動作します。
Cesium.jsをAPEXアプリケーションに組み込むことはできましたが、何か実用的なアプリにするにはCesium.js自体についてよく調べて必要がありそうです。
今回作成したアプリケーションのエクスポートを以下に置きました。アクセス・トークンおよびアセットIDの設定は含んでいません。
https://github.com/ujnak/apexapps/blob/master/exports/plateau-3dtiles.zip
Oracle APEXのアプリケーション作成の参考になれば幸いです。
完
