「地理院地図Vector」(仮称)をArcGIS で表示してみました-第3弾

はじめに

2020年11月18日に「地理院地図Vector」(仮称) をArcGIS で表示してみました-第2弾として、一部、APIで非対応のものを除外した標準地図、淡色地図、白地図の３つのスタイルファイルを用意し、BasemapGallery からそれらを使うサンプルアプリケーションを紹介しました。

その後、ArcGIS API for JavaScript バージョン 4.18 （2021年1月21日に国内サポートを開始）から、Expression式などAPIで非対応だったものが実装され、より地理院地図Vectorに近い地図描画が可能になりました。

この対応により、ArcGIS API for JavaScript でも、Style Specification に準拠した地理院地図Vector風のスタイルファイルをそのまま使って、簡単に「地理院地図Vector」（仮称）を利用することが可能です。

スタイルファイルの準備

公開されているスタイルファイルをそのままでも利用可能ですが、せっかく日本全域のベクトルタイルが使えるので、スタイルファイルの縮尺制限の記述を削除（"maxzoom": 16, "minzoom": 4, を削除）したスタイルファイルを用意しました。

※ 取り消し線のところを各スタイルファイルから削除
/{z}/{x}/{y}.pbf"], "maxzoom": 16, "minzoom": 4, "attribution":

・地理院地図Vectorの標準地図をベースにした縮尺制限を削除したスタイル（std_edit2.json）

・地理院地図Vectorの淡色地図をベースにした縮尺制限を削除したスタイル（pale_edit2.json）

・地理院地図Vectorの白地図をベースにした縮尺制限を削除したスタイル（blank_edit2.json）

サンプルアプリケーション

１) BasemapGalleryで地理院地図Vector風の地図を使うアプリ（ArcGIS API for JavaScript 4.18 対応版）

前回の記事のサンプルアプリケーションから変更するのは、APIバージョンを4.18に変更することと、VectorTileLayer のURLを上記の新しいスタイルファイルへを変更するだけです。

// API のバージョンを変更
<link rel="stylesheet" href="https://js.arcgis.com/4.16/esri/themes/dark/main.css" />
<script src="https://js.arcgis.com/4.16/"></script>
        ↓↓↓
<link rel="stylesheet" href="https://js.arcgis.com/4.18/esri/themes/dark/main.css" />
<script src="https://js.arcgis.com/4.18/"></script>

// 新しいスタイルファイルへURL を変更
const stdVMap = new Basemap({
                    baseLayers:[new VectorTileLayer({
                      url: "https://kataya.github.io/gsivectortile-mapbox-gl-js/std_edit.json",
        ↓↓↓
const stdVMap = new Basemap({
                    baseLayers:[new VectorTileLayer({
                      url: "https://kataya.github.io/gsivectortile-mapbox-gl-js/std_edit2.json",

変更を加えたサンプルアプリケーションは、こちらから動作を確認できます。

以前のバージョンでは表示できていなかった、ラベル等も表示されるようになっていることが確認できると思います。

Sample App 1（JS API 4.16）

Sample App 1（JS API 4.18）

2) Swipe ウィジェットでベクトルタイルの重なり具合を確認するアプリ

現在、地理院では、地理院地図と地理院地図Vectorとして両方の地図をメンテナンスして頂いていますが、地理院地図の更新の方が先に行われているようです（2020年4月1日から、群馬県八ッ場ダムが運用開始になったときに、地理院地図Vectorがまだ更新されていないことが、Twitterで話題になっていました）。

その更新時期を一つのアプリケーションで確認できるよう、Swipe ウィジェットを使ったサンプルアプリケーションを作成してみました。

画面左側に表示しているのが地理院地図Vector風の標準地図で、画面右側のBasemapGallery で切り替えした地図と確認ができます。

右の地図を「地理院タイル - 淡色地図」に切り替え、現在の築地市場の跡地を見てみると、地理院地図Vector風の地図ではまだ市場の建物がまだみえるので、地図更新がまだされていないのが確認できると思います。

Sample App 2 (Swipe）

このサンプルアプリケーションでは、地理院タイルの航空写真も表示できるようになっています。山岳地域では等高線があると、空中写真だけではわかりずらい地形の状況を確認することができ、ベクトルタイルで提供されているメリットの一つを実感できると思います（鹿児島県の桜島：昭和火口付近を表示）。

Sample App 2 (ベクトルタイルと航空写真の重ね合わせ）

おまけで、画面左下のボタンに再生と停止ボタンをつけています。再生ボタンを押すと徐々に標準地図が現れる不思議な体験をしてみてください。

Sample App 2 (おまけ機能)

まとめ

今回の記事ではArcGIS API for JavaScript のバージョン 4.18 を利用して、BasemapGallery ウィジェットから、地理院地図、地理院地図Vector風の地図を切り替えして利用できるサンプルアプリケーションをアップデートしてみました。

また、Swipe ウィジェットを使って、地理院の標準地図のベクトルタイルの重なり具合を確認するアプリケーションを作成してみました。

編集したスタイルファイルや、完成版サンプルアプリケーションのコードは、いつものようにGitHub上で公開しておきますのでご参照ください。

「地理院地図Vector」(仮称)をArcGIS で表示してみました-第3弾