地理院地図ベクター（仮称）のスタイルをunvt/charitesで加工しArcGIS Onlineでみてみる（はじめの一歩）

## はじめに
地理院地図をArcGIS Onlineで表示するために、国土地理院情報普及課のGithubレポジトリから参考として提供されている、「Mapbox GL JLを利用してベクトルタイルを表示するサンプル」の標準地図風std.jsonをいじってみました。
今回の取組は第一歩として簡単な実験のみですが、今後、可能ならば続きを書いていきたいと思います。

## 環境
* Windows 10 (Enterprise)
* Docker version 20.10.8
* PowerShell version 5.1.19041.1237

## 手順
### Step 1. スタイルファイルのダウンロード
地理院地図の標準地図風のスタイル（std.json）を以下のサイトから入手します。
https://github.com/gsi-cyberjapan/gsivectortile-mapbox-gl-js

参考ですが、これらのスタイルが参照しているベクトルタイルの構造については、以下の仕様書に書かれています。
https://maps.gsi.go.jp/help/pdf/vector/dataspec.pdf

今回の作業用にレポジトリをつくりました https://github.com/ubukawa/porgy 。レポジトリに地理院地図の標準地図風のスタイルを保存しました(source/std.json)。




### Step 2. unvt/charitesの利用（YAMLファイルへの変換とLive Preview）
ダウンロードしたスタイルを簡単に見るために、UNVTのスタイルツールcharitesを使ってjsonのスタイルファイルをyamlファイルにインポートします。作業用のレポジトリを git clone してからDocker(unvt/nanban)でcharitesを使います。（dockerを使わなくても利用できると思いますが、私は簡単のためにdockerを使いました。）

```
git clone https://github.com/ubukawa/porgy
cd porgy
docker run -it --rm -v ${PWD}:/data -p 8080:8080 unvt/nanban
cd /data
charites convert source/stc.json gsi-std/style.yml
```

![2022-01-29-porgy01.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/679143/56990496-ebbd-ac80-0ab6-42a7a98c2b6e.png)

charitesのconvertというコマンドを使うとjsonファイルからyamlファイル（群）を作ることができます。
![2022-01-29-porgy02.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/679143/19a2c19b-02e4-38a2-b6c9-a51de318f5e1.png)

上記コマンドを実施すると、gsi-stdというフォルダの中に、style.ymlとlayersフォルダができます。layersフォルダのなかには、レイヤごとのYAMLファイルがたくさん入っています。それぞれのYAMLファイルが各レイヤのスタイル情報を持っています。

![2022-01-29-porgy03.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/679143/377c94b0-f4eb-890c-99bb-336f8c46a3b3.png)
![2022-01-29-porgy04.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/679143/52a0bebb-9fd9-f151-0152-245a337d6c7a.png)

Live Previewも見られるように、charitesのserveをしておきます。
![2022-01-29-porgy05.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/679143/205fde43-4eac-1fa6-4a77-c24457567c98.png)
![2022-01-29-porgy06.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/679143/60ef73a3-cc7b-341a-31de-19db15a1b259.png)


### YAMLファイルの観察

#### レイヤの数
まず、レイヤのファイル数を見ると774あります。
一方で、レイヤidを見ると、layer 761から layer 1538まであります。1538から760を引くと778です。
そこで、レイヤidをよく見ると、layer id 772, 790, 807, 824は欠番ですので気をつけましょう。

#### レイヤの様子をYAMLで見る
レイヤを見てみると、結構シンプルな書き方をしているものが多いとわかります。例えば、761番のものなどは、このままjsonファイルに戻してもArcGISオンラインで表示できそうです（1年と少し前に実験した時に、ArcGISオンラインではカラーはインデックスで書かないとおかしな色になるということを経験していたですが現在は大丈夫です。）
![2022-01-29-porgy11.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/679143/99a3f701-9af8-7bd6-ef5a-47adfed1b568.png)

（参考）
std.json、各スタイルレイヤーのmetadetaは地理院地図Vector以外のブラウザでは描画に利用されないと思いますが、日本語のタイトルや参考になる情報がありそうです。例えばmapbox gl jsのスタイルidが761のものは、地理院地図ベクター用のidは577でずれていますね。

他のレイヤにも目を向けます。
レイヤーid 805ですが、これはスタイルの中でcaseを使っています。過去の体験から、caseを使っているとArcGIS Onlineで表示されないと思っています（getが理解されていないのかもしれませんが・・・）。
![2022-01-29-porgy12.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/679143/afd1af1b-c91e-8ab6-0701-b64fb4bd1839.png)

このように、caseが使われているスタイルレイヤは、全774レイヤのうち、以下のものになります。（目視で数えたので抜けがあったらすみません。）
805, 1276, 1281, 1284, 1346, 1361 から 1366, 1376 から 1531, 1534, 1535, 1538
caseの表現は記号というかラベルで多く使われているようです。

### レイヤの加工実験
#### 方針
ArcGIS Onlineで標準地図風std.jsonを見るためには、上記のcaseを使っているレイヤ（170レイヤ）の表現をいじってみることが必要です。
今回は、その前段として、caseを使っていないレイヤだけならArcGISオンラインで表示できるのか実験することにしました。

#### やり方
##### スタイル情報の加工、出力
style.ymlファイルに含むレイヤの一覧があるので、ここでcaseを含む170レイヤをコメントアウト（＃）していきました。ライブプレビューをみるとラベルが減っていくのがみられると思います。

![2022-01-29-porgy13.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/679143/b8e68897-9f79-0e84-ce1c-bd43a2ddbfa9.png)

そのあと、ArcGIS Onlineでタイルとスタイルを読み込むためにスタイルのsourceの書き方を変えました（タイルのURLはこの後にデータをアップロードする実験用サーバーです）。これをするとライブプレビューでタイルが読めなくなるので、別ファイル(style4esri.yml)として保存しました。スタイルレベルでは別のYAMLファイルですが、レイヤ―レベルのYAMLファイルは共有しているというイメージです。

![2022-01-29-porgy14.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/679143/3b880944-6ec0-22d0-027e-122a47f28cc8.png)

そして、charitesのbuildを使うと、スタイルファイルがjsonで出力されます。ラベルをみんなコメントアウトしたので、no-labelというような言葉をいれたパスにスタイルファイルを出力しました。

![2022-01-29-porgy15.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/679143/e9c010e8-45c6-661a-77ae-6fe454f35850.png)

##### サーバーの準備
このスタイルファイルを、以前の記事（[こちら](https://qiita.com/T-ubu/items/1f772fd92ec8dfb0c2b2)）のやり方に沿って、サーバーにアップしました。index.jsonとstyle.jsonが練習用サーバーでみられるようにしました。（以下のリンクにアップしてありますが、予告なくやめることもありますのでご了承ください。）

* https://www.unvt-test.com/esriIF/gsimaps-vector-nolabel/VectorTileServer
* https://www.unvt-test.com/esriIF/gsimaps-vector-nolabel/VectorTileServer/resources/styles

##### ArcGIS Onlineで見てみる
ArcGIS Online、MapコーナーのAddからWeb上のレイヤを追加します。
![2022-01-29-porgy16.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/679143/9e99a90c-539b-b478-4e1a-abd3ceb82b3d.png)

地図が見えました。
![2022-01-29-porgy17.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/679143/078c8fcc-75f2-400d-81dd-a75d054acc3b.png)
注意点というか、気づきの点は以下の通りです。

* 地理院地図はZLが小さいと何も見えませんので、背景にグローバルな地図を敷いて日本の位置を確認しながらズームインしましょう。
* ズームインしても表示されますが、描画が遅かったです。これは、アメリカの自宅から、ヨーロッパでホストされるArcGIS Onlineに接続し、日本のベクトルタイルを読んでいるから、なのかもしれません。あるいはレイヤ数が多いことが影響しているのかもしれません。


## 今日のまとめと今後の課題
### まとめ
今回、地理院地図の標準地図風std.jsonで、caseを使っているレイヤを外せばArcGIS Onlineでも見られるということを確認しました。

### 今後の課題
* caseを使った表現にArcGIS Onlineが対応できていないようなので、ArcGIS Onlineがcaseに対応するのを待つか、caseを使わない表現記述を検討することが必要になりそうです。（前者に関し、ArcGIS Proで作成されるスタイルファイルやそのもとになるベクトルタイルを見ていると、caseを使わないでフィルター用の属性を使っているようなのでcaseへの対応はあまり期待できないかもしれません。）
* 描画が遅いので、もしこれがスタイルレイヤ数が多いことに起因するなら（元ファイルでは774、今回の練習では約500）、レイヤ数を減らす方法を工夫しないといけないかもしれません。

## その他
ArcGIS Onlineが使える方で、興味がある方がいらっしゃいましたら、 https://www.unvt-test.com/esriIF/gsimaps-vector-nolabel/VectorTileServer を読んでみることが可能です。（他の実験の関係で、予告なくやめることもありますのでご了承ください。）
もしも表示速度などについて何かお気づきの点があったらコメントいただけると幸いです。（私の環境では結構遅い。）

## 参考文献・ページ
* 地理院地図標準地図風スタイル（std.json）：　https://gsi-cyberjapan.github.io/gsivectortile-mapbox-gl-js/std.json
* 地理院地図ベクター（仮称）mapbox gl js用のスタイル レポジトリ https://github.com/gsi-cyberjapan/gsivectortile-mapbox-gl-js
* 地理院地図ベクター（仮称）　データ仕様：　https://maps.gsi.go.jp/help/pdf/vector/dataspec.pdf
* 今回の作業用のレポジトリ: https://github.com/ubukawa/porgy
* ArcGIS Onlineで外部ベクトルタイルサーバーを見るためのサーバー準備　https://qiita.com/T-ubu/items/1f772fd92ec8dfb0c2b2