LoginSignup
9
7

More than 1 year has passed since last update.

@T-ubu

地形分類のベクトルタイル（治水地形分類図）を表示してみる

Last updated at Posted at 2022-02-03

はじめに

最近、荒川3D河川管内図（下流域）に国土地理院の治水地形分類図が追加されたというニュースを見ました。

まずはラスタタイルの読み込みのようですが、この記事に刺激をうけて、治水地形分類図のベクトルタイルをちょっと表示してみようと、木曜日の朝の時間などをつかって、治水地形分類図のベクトルタイル関係の取組みをおこないました（作業時間 2:30AM～7:00AM＋お昼休み）。

地形分類のベクトルタイルを調べる

国土地理院の「治水地形分類図」ページ

国土地理院の治水地形分類図のホームページでは画像の閲覧は可能ですが、ベクトルタイルで提供されているかどうかは見つけられませんでした。
一方で、治水地形分類図を含む「地形分類」については、国土地理院研究基本計画に基づき、ベクトルタイル提供実験という位置付けで公開されているということを見つけました。（次に進む。）

国土地理院のベクトルタイル「地形分類」

国土地理院のベクトルタイル「地形分類」のページをみると、「地形分類（自然地形）」と「地形分類（人工地形）」の2種類のベクトルタイルがベクトルタイル提供実験として提供されていることがわかります。平成28年（2016年）3月から実験的な提供が開始されているようですが、令和2年にも提供範囲を少し拡大しているようです。

ページ中のリンクから、それぞれのソースを確認してみました。関東のあたりを眺めてみましたが、「地形分類（自然地形）」では都心部でも治水地形分類を多く利用しているようです（下図の水色の所）。治水地形分類図100%のタイルではないですが、地形分類のベクトルタイルは使えそうです。
2022-02-03.png
提供実験のレポジトリ gsi-cyberjapan/experimental_landformclassification へのリンクもありました。（次に進む）

地形分類のベクトルタイルレポジトリ（国土地理院） - GeoJSONタイル

GitHubのレポジトリgsi-cyberjapan/experimental_landformclassification に地形分類ベクトルタイルの説明があります。ここで注意が必要なのは、この提供実験で使われているベクトルタイル形式はpbfではなくてgeojsonタイルとのことです。

私自身は、geojsonタイルでの作業経験があまりないので、この形式のタイルをMapLibre、Mapbox GL JS、 ArcGIS API for JavaScript等ですぐに使うのは難しいです（私の実力では）。しかし、このレポジトリにはデータのズームレベルについて大事なことも書いてあります。

  • ズームレベル： ズームレベル14～16のデータが実データ。（2～13は参考用）
  • 利用にあたって： 国土地理院コンテンツ利用規約に従って使える。本提供実験の期間は、2014年8月1日から本提供実験終了まで。（注：提供実験ですから、気づきの点があれば要望を出せるようです。）

optgeo バイナリー（pbf）形式の地形分類ベクトルタイル （optgeoが変換したPBF形式の地形分類ベクトルタイル）

GeoJSONタイルで困ったなぁ、と思いそうなところでしたが、地形分類のPBFベクトルタイルについては、実は @hfu さんが鋭意進めておられる optgeoの取組みで以下の二つのレポジトリがあります。地形分類関係のベクトルタイルの作業で参考になります。いずれのレポジトリも国土地理院の地形分類ベクトルタイル（人口地形ではなく自然地形の方のデータ）からPBFタイルを作っています。そしてライセンスはCC0となっています。

失敗をおそれず、私の理解の範囲でこれを説明すると、
国土地理院から公開されている地形分類（自然地形）GeoJSONベクトルタイルを読み込んで、tippecanoeを使って（json toolも含む）PBF形式のベクトルタイルに変換するスクリプトがRubyで書いてあります。データもあります。

目録（例：https://maps.gsi.go.jp/xyz/experimental_landformclassification1/mokuroku.csv.gz ）を使ってファイルのリストを知るなど、秘蔵の技（？）を駆使した変換ですね。素晴らしい。細かいことも見てみると、Filterを使って、地物のコードごとに最小ズームレベルを調整したり、layer nameを与えたりしています。（ソースのGeoJSONタイルにはlayer nameがなかったのですが、ここで与えていますね）。（もっというと、unite-oneのウェブ地図htmlには音声読み上げの機能があるのでここも参考になります。）

unite-oneの方はcodeごとに地形分類（日本語）を与えたりしています。地形分類（自然地形）のもともとのcodeを維持して使いたい場合はoneを、そうでない場合はunite-oneを使うと良さそうです。

oneもunite-oneも、pbfベクトルタイルのレベルをZL10-12で作ってあるのは、元のGeoJSONタイルに比べると小さい気もしますが、これによりレポジトリの容量を節約できると思いますし、12のタイルをオーバーズーミングして使えるのでZL14まではいけると思います。紙の治水地形分類図は2.5万分1の縮尺なのでZL14くらいかカバーできれば十分なのかなと個人的には思います。

注意：　"国土地理院ベクトルタイル提供実験"という出典の明記は必要です。

ここらへんまで確認できたら自分の作業に移ります。

自分の作業

ここまでで、地形分類（自然地形）のタイルURLとスタイルURLを確認しました。今回の目標は、このタイルURLとスタイルを使って、ArcGISでも読めるレイヤを作ってみようと思います。同時に、せっかくなのでMapLibreでも読んでみようかなと思います。（Mapbox GL JSでもArcGIS API for JavaScriptでもいいのですが、MapLibreの経験があまりないのでこちらを練習します。）

GitHubレポジトリ作成

今回の作業用にレポジトリを作りました。 https://github.com/ubukawa/chikei-test
docs以下はGitHubページでホストしましたので、作ったファイルがホストされます。

MapLibreのダウンロード

MapLibreの最新バージョンを確認します。2022年2月3日現在、現在MapLibreは2.1.1が最新ですね（https://github.com/maplibre/maplibre-gl-js/blob/main/CHANGELOG.md ）。
unpkのページからMapLibreのライブラリーをダウンロードします。（私はWindows ユーザーなのでPowershellのcurl.exeでやります。docsのフォルダに入れておきます。）

curl.exe -O https://unpkg.com/maplibre-gl@2.1.1/dist/maplibre-gl.css
curl.exe -O https://unpkg.com/maplibre-gl@2.1.1/dist/maplibre-gl.js

MapLibre GL JS のライセンスも同じところに入れておきます。
https://github.com/maplibre/maplibre-gl-js/blob/main/LICENSE.txt

これでMapLibre関係は https://ubukawa.github.io/chikei-test/maplibre-gl.js 等でアクセスできるようになりました。

スタイルファイルの準備（MapLibre用）

unite-one、又はoneのスタイルをそのまま参照すればいいのですが、今回は最終的にはArcGIS用に加工しないといけないので、スタイルをダウンロードして自分のレポジトリに入れておきます。日本語の文字化けが怖いので、oneのスタイルを使いたいと思います。style-one.jsonという名前にして、docs/styleの中に入れておきます。Centerの位置を関東の方に調節し、またglyphsはとりあえず削除しておきます。
作業したファイル：　https://ubukawa.github.io/chikei-test/style/style-one.json

HTMLファイルの準備

MapLibreで見るようにHTMLファイルを作ります。以前の記事（こちらのステップ3）と同様にして作成しました。実際のコードはこちらです。下のような地図が見られればOKです。MapLibreではMapbox同様にオーバーズーミングが効いているのでそースタイルがZL12までですが、地図はもう少し大きいズームレベルでも見られます。（オレンジ色の段丘以外のものが出てくるのがZL12）

2022-02-03-02.png
URL： https://ubukawa.github.io/chikei-test/map.html

多数レイヤからなるスタイルファイルの準備（他のソフト用）

一部のソフトでは、matchやgetがあると地図が読めないことがあるので、matchとgetを使わないスタイルを作ります。
できたものはこちら。もともとはmatchを使って1レイヤだったスタイルが、matchを使わないので30レイヤになりました。しかし、一部のソフトにはこの書き方をすることが必要です。

作業手順は、いつもの通りunvt/charitesをdocker上でスタートして、スタイルをYAMLファイルにインポートします。その後、ライブプレビューを確認しながら、スタイルレイヤをそれぞれの色に分けていきました（30レイヤ）。最初はstyleレイヤがone.ymlというもの一つだけだったんですが、これを分けて、one-1.ymlからone-30.ymlを作りました。最後にcharitesのbuildでjsonファイルを出力します。

2022-02-03-03.png

途中、落とし穴がありました。Filterを使っているとき、一部の区画のデータが表示されません。試したところ、データのいくつかでcodeが数字ではなくてテキストとなっている様子です。（どうやら治水地形分類図の範囲？）

2022-02-03-04.png

matchの表現は使わないので、to-numberも使えず綺麗な解決方法がありません。とりあえず数字をテキストとしてもリストに入れます。かっこ悪いですが、とりあえずそうしておきます。（テキストとして前後にスペースがないのでまだ幸いでした。）
2022-02-03-05.png

こうして、レポジトリの中に、2種類のスタイルを作成しました。スタイルは違っても、地図の見た目は同じはずです。

レイヤ数 高度な表現 　スタイルURL 地図URL
1 あり style/style-one.json map.html
30 なし style/style-30.json map-30.html

ArcGIS Onlineで消費

30レイヤのスタイルをベースに、ArcGIS Onlineで見るための準備をします。
今日は時間もないので、以下の方針でやります。

  • GitHubページで静的ホスティングする中に、VectorTileServer/index.json と VectorTileServer/resources/styles/root.jsonの二つを準備する。
  • tilemapはなし。（今後、jsonファイルを作るかもしれません）

書き方は、以前の記事を参考にしてやりました。実際のものは以下にあるので見てもらえればと思います。

そして、いつもの通りArcGIS OnlineのMapから、index.jsonのあるサーバーを指定してあげるとレイヤを見ることが出来ます。
2022-02-03-06.png

だんだんズームしていくと、段丘から表示されます。（ベクトルタイルをpbfで作るときの設定による。最初からほしい場合はPBFファイルを作り直せばよいです。）
2022-02-03-07.png

オーバーズーミングのためのtilemapを準備していないので表示がZL12までになっています。今後、ちょっとタイルマップを準備する場合はZL15くらいまで見られるようにすれば十分かなと思いました。
2022-02-03-08.png

(2/3追記　タイルマップ付きのものをテストサーバーにつくりました https://www.unvt-test.com/esriIF/gsimaps-landform1/VectorTileServer )

まとめ

治水地形分類図を含む地形分類（自然地形）のベクトルタイルをMapLibreやArcGIS Onlineで表示してみました。GeoJSONタイルだと表示しにくいですが、optgeoの作業成果を活用させてもらうことで地形分類のベクトルタイルを簡単に表示することができました。

今後の作業としてあり得るもの

  • ArcGIS環境でオーバーズーミングを効かせるために、tilemapを準備することが考えられると思います。(2/3追記　タイルマップ付きのものをテストサーバーにつくりました https://www.unvt-test.com/esriIF/gsimaps-landform1/VectorTileServer )
  • 地理院地図での機能にあるように、地形分類についてonクリックでポップアップなどの説明を出すこともできると思います。（ベクトルタイルはcodeか分類名しかないので、codeごとの説明は与えてあげないといけない。この機能は、MapLibreとかMapBoxとかArcGIS API for JavaScriptで実装できると思います。GISソフトだと私の実力では難しい。）
  • また、unite-oneにあるように、音声読み上げをつけても面白いかもしれません。（ベクトルタイルはcodeか分類名しかないので、codeごとの説明は与えてあげないといけない。この機能は、MapLibreとかMapBoxとかArcGIS API for JavaScriptで実装できると思います。GISソフトだと私の実力では難しい）
  • 簡単なスタイルも準備したので、QGISでもベクトルタイルの表示を試してもいいと思います。（QGISでmatchが入ったスタイルを使えるか確認もしたい。）

提供実験へのフィードバックというか、出ているデータについて感じたこと

  • GeoJSONタイルだけでなく、最初からPBFタイルで提供してもらえると、より多くの人がつかえるのではないか。
  • codeの値が数値になっているものと、テキストになっているものがあるかもしれないので、できたらチェックしてほしい。
  • 提供実験のGitHubレポジトリにArcGIS Online用のインターフェースを載せてしまえばArcGISの利用者が簡単に使えるのではないか？

謝辞など

荒川3D河川管内図（下流域）は、日々の業務での地理空間情報の活用ということでとても素晴らしいと思います。
optgeoの取組みに感謝します。貴重な技術的な貢献だと思います。
国土地理院の地形分類ベクトルタイル提供実験に感謝します。技術的な実験を行うことができる貴重な機会を得ることができました。
ありがとうございます。

参考ページ

9
7
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
Sign upLogin
9
7