今回の作業で参照している国土地理院による最適化ベクトルタイル試験公開のページは以下です。
最適化ベクトルタイルは、国土地理院コンテンツ利用規約に従って利用できます。記事に沿って作業を行なう場合は、利用規約について確認してください。問題は無いと思いますが、気になるので今回の記事はAPEXアプリケーションのエクスポートは添付しません。
以下より作成したアプリケーションについて説明します。
空のAPEXアプリケーションを作成します。名前は国土地理院最適化ベクトルタイルとします。
アプリケーションが作成されます。
ページ・デザイナでホーム・ページを開き、マップ・リージョンを作成します。
新規のリージョンを作成します。識別の名前はMap、タイプにマップを選択します。
マップには最低でも１つのレイヤーが必要なので、レイヤーに最低限の設定を行います。
レイヤーの新規を選択し、識別の名前をポイントに変更します。レイヤー・タイプとしてポイントを選びます。
ソースのタイプにSQL問合せを選択し、SQL問合せとして以下のSQLを記述します。東京都の緯度経度を返しています。
select 35.652832 as lat, 139.839478 as lon from dual;
列のマッピングのジオメトリ列のデータ型として経度/緯度を選択し、経度列としてLON、緯度列としてLATを選びます。
マップ・リージョンを選択し、属性タブを開きます。
初期位置およびズームのタイプを静的値とし、経度は139.839478、緯度は35.652832、ズーム・レベルを6として、東京の周辺を最初に表示するようにします。
この時点でアプリケーションを実行すると、デフォルトのマップ背景が表示されます。
今回はAPEX 24.1でアプリケーションを作成しているため、組み込まれているMapLibreのバージョンは4.0.1になります。
APEXそのままの状態では、MapLibreにPMTilesのプロトコル・ハンドラが登録されていません。ページ・プロパティに以下の設定を追加し、MapLibreにPMTilesのプロトコル・ハンドラを追加します。
ページ・プロパティのJavaScriptのファイルURLに以下を設定します。PMTilesのプロトコル・ハンドラの実装です。
https://cdn.jsdelivr.net/npm/pmtiles@4.2.1/dist/pmtiles.min.js
ページ・ロード時に実行に以下を記述します。
let protocol = new pmtiles.Protocol();
maplibregl.addProtocol("pmtiles", protocol.tile);以上で、MapLibreにPMTilesのプロトコル・ハンドラが追加されます。
マップ背景を作成します。
共有コンポーネントのマップ背景を開きます。
作成するマップ背景の名前は国土地理院 標準地図とします。タイプにベクター・タイル・レイヤーを選択します。
スタイルシートをマップするURLとして、GitHubに保存されている標準地図のstyle.jsonである、std.jsonを参照します。
https://raw.githubusercontent.com/gsi-cyberjapan/optimal_bvmap/refs/heads/main/style/std.json
以上で、マップ背景の作成をクリックします。
同様の手順で白地図のマップ背景を作成します。
名前は国土地理院 白地図、スタイルシートをマップするURLに以下を設定します。
https://raw.githubusercontent.com/gsi-cyberjapan/optimal_bvmap/refs/heads/main/style/skeleton.json
マップ背景として国土地理院 標準地図と国土地理院 白地図が作成されました。
マップ背景を変更します。最初に国土地理院 標準地図を表示します。
マップ・リージョンの属性を開き、背景に共有コンポーネント、標準に国土地理院 標準地図を選択します。
ページを実行すると、以下のように地図の表示が変わります。
表示が白地図に切り替わります。
このページにstyle.jsonが掲載されていますが、APEXのマップ・リージョンで読み込もうとすると、version、sources、layersといったプロパティがないというエラーが発生します。このstyle.jsonはOracle APEXでは扱えないようです。
MapLibreにPMTilesのプロトコル・ハンドラが組み込めたので、国土地理院が提供している地図に限らず、PMTilesのプロトコルで提供している地図で、style.jsonへの参照URLがあれば、マップ背景にできるでしょう。
今回の記事は以上になります。
Oracle APEXのアプリケーション作成の参考になれば幸いです。
完
