MapTiler公式QGISプラグインでベクトルタイルを素敵に表示しよう

<a href='https://www.maptiler.com/news/2020/06/say-hello-to-the-new-qgis-plugin/' ><img src='https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/73197/fadb7f4c-841d-af76-c323-0ca447687884.png'>https://www.maptiler.com/news/2020/06/say-hello-to-the-new-qgis-plugin/</a>

## はじめに

6月下旬にリリース予定のQGIS3.14には、ベクトルタイルのネイティブ対応という目玉機能があります。実際には開発者向けビルドの3.13は既に公開されていて、その機能を試す事が出来ます。この開発は英国の[Lutra Consulting社](https://www.lutraconsulting.co.uk/)により行われ、QGISオフィシャルスポンサーである弊社も[クラウドファンディングという形で支援しました。](https://mierune.co.jp/hp/archives/741)

さて、このQGIS3.14のリリースにあわせ、弊社のビジネスパートナーであるスイスの[MapTiler](https://www.maptiler.com/)と協力し、同社が展開する地図配信サービス[MapTiler Cloud](https://www.maptiler.com/cloud/)をQGIS上で利用するためのプラグインを開発しました。本記事ではプラグインの概要と、その機能・使い方を紹介します。

#### 6/23追記
https://www.qgis.org/ja/site/forusers/download.html
QGIS3.14 Piがリリースされました、ぜひベクトルタイル機能とあわせて本プラグインをご利用ください！

## プラグイン紹介

https://github.com/maptiler/qgis-maptiler-plugin
このプラグインはオープンソースで開発され、機能追加・不具合報告・修正などが活発に行われています。プラグインのコア部分の開発は弊社が行い、主要機能であるベクトルタイルのスタイリング周りを両社で協力し実装しており、現在も随時改良しています。

https://plugins.qgis.org/plugins/qgis-maptiler-plugin/
既にQGISプラグインリポジトリに登載されているため、お使いのQGISでシームレスにダウンロード可能です（ベクトルタイル機能実装前のバージョンでは一部機能が制限されます）。

### 概要

- QGIS3.x系のプラグインです（ver3.14未満では一部機能に制限があります）
    - 3.4以降での動作を確認しています
- MapTiler Cloudで提供されているスタイルや、任意のstyle.jsonなどを地図表示出来ます
- ネイティブでは未対応の、<b>ベクトルタイルのスタイリングに対応</b>しています
- 地名などのキーワードで位置を検索するジオコーディング機能を利用出来ます

### スクリーンショット
※地図はすべてベクトルタイルをスタイリングしたものです

#### JP MIERUNE Streets + Geocoding API

<img width="1030" alt="スクリーンショット 2020-06-12 14.45.34.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/73197/97ec93ec-5c4c-554f-986f-7f684551fb63.png">

#### JP MIERUNE Gray

<img width="759" alt="スクリーンショット 2020-06-12 16.46.27.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/73197/b72d083d-273e-6077-f66c-38b294a4d033.png">

#### JP MIERUNE Dark

<img width="756" alt="スクリーンショット 2020-06-15 9.14.58.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/73197/e8b955cc-78d9-305a-fe8e-8b161dffd339.png">

#### Toner

<img width="716" alt="スクリーンショット 2020-06-15 10.17.48.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/73197/01383b85-e21a-f0eb-7c17-852a167d096d.png">


#### Satellite

<img width="758" alt="スクリーンショット 2020-06-12 16.39.43.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/73197/43ee8292-f1c4-7fc2-a65e-ea8250f67e96.png">


## 導入
### インストール
1.QGISプラグインリポジトリからダウンロード・インストールします。

<img width="283" alt="スクリーンショット 2020-06-12 15.57.52.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/73197/3dc49cc5-abca-7162-db48-d0cd29212128.png">

<img width="875" alt="スクリーンショット 2020-06-12 15.57.44.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/73197/77f37a38-be65-717c-98df-795c53e7c44f.png">
 
2.<b>QGISアプリケーションを再起動</b>してインストールを完了します。完了すると、ブラウザにMapTilerアイコンが追加されます。

<img width="263" alt="スクリーンショット 2020-06-12 16.05.10.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/73197/0f8fb785-9dcc-73f5-d5c3-376f4bf9ef48.png">

### APIキーの登録

MapTiler Cloudの地図表示およびGeoCoding APIの利用には、MapTilerアカウントを取得して入手できるAPIキーが必要です。登録し入手したキーは、以下のように登録します。

<img width="293" alt="スクリーンショット 2020-06-12 15.59.36.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/73197/35aafbd1-408d-f99b-e16b-ca455cb1463e.png">

<img width="335" alt="スクリーンショット 2020-06-12 16.10.27.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/73197/69ef8a0e-6470-e70e-8723-9054684872fb.png">

※この画面でベクトルタイルを優先して使用する設定を変更出来ます

## 機能紹介・使い方

### 地図表示

#### MapTiler Cloud公式スタイル
デフォルトでツリーに用意されているスタイルのほか、MapTilerが公式で提供しているスタイルをすべて表示する事が出来ます。ここではJP MIERUNE Streetsを表示してみましょう。

1.ツリーにスタイルを追加

<img width="306" alt="スクリーンショット 2020-06-12 16.06.20.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/73197/f0cc147b-1dab-8738-1070-91c6586e2af1.png">

<img width="500" alt="スクリーンショット 2020-06-12 16.08.35.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/73197/baf15902-a715-d495-a572-a034a4cbe15e.png">

2.プロジェクトにレイヤーを追加
※QGIS3.14未満では「Add as Raster」のみが有効です。

<img width="297" alt="スクリーンショット 2020-06-12 16.09.06.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/73197/3a0ff38b-f6f3-7461-3417-fb86b7712c66.png">

<img width="1029" alt="スクリーンショット 2020-06-12 16.16.02.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/73197/037a6afc-48b7-ae54-c95a-11f584f5e7dd.png">

<img width="1028" alt="スクリーンショット 2020-06-12 16.25.41.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/73197/a303552f-792e-23c3-ff79-f62dae5b9982.png">

#### 任意のstyle.jsonかtiles.json
MapTiler Cloudのスタイルだけではなく、任意のstyle.jsonやtiles.jsonの読み込みにも対応しています。今回は私が作った[地理院ベクトルタイルのroadとOSMラスターを重ねたstyle.json](https://raw.githubusercontent.com/Kanahiro/experiment-gsi-bvmap/master/dist/style.json)を表示してみます。

<img width="306" alt="スクリーンショット 2020-06-12 16.06.20.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/73197/f0cc147b-1dab-8738-1070-91c6586e2af1.png">

<img width="500" alt="スクリーンショット 2020-06-12 16.19.25.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/73197/44a1e946-7103-4171-f070-fe110e1e08cc.png">

<img width="1027" alt="スクリーンショット 2020-06-12 16.19.57.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/73197/3e87032c-3b68-7b40-1b73-2e5b74019571.png">
出典：国土地理院、 ©️OpenStreetMap contributors


### Geocoding API

MapTiler Geocoding APIを利用して、キーワードから位置を検索する事が出来ます。
プラグインをインストールしたら「MapTiler Geocoding API」と書かれたツールバーがQGISに追加されているはずです。もしなければ画像のとおり再表示します。

<img width="743" alt="スクリーンショット 2020-06-12 16.29.24.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/73197/d62fa583-0545-383b-f5a1-083c996c1bc3.png">
※「パネル」メニューでMapTilerをクリックしてチェックする

#### ジオコーディングを実行

<img width="308" alt="スクリーンショット 2020-06-12 16.33.05.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/73197/e898c844-53dd-6eb6-3326-684bd581a9da.png">
ツールバーにキーワードを入力してエンターキーを押下すると検索します。結果が一覧表示されるので、位置を知りたいアイテムをクリックすると、そのアイテムの領域へ地図が自動で移動します。

<img width="1033" alt="スクリーンショット 2020-06-12 16.33.13.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/73197/7317e2dd-c696-2320-879a-d3cfa812076b.png">

## 終わりに
まだまだ課題はありますが、QGISでジオコーディングができ、ベクトルタイルをスタイル表示できるこのプラグインは、手前味噌ながらとても便利だと思いますので是非使ってみてください（その際はMapTilerのアカウント登録も一緒に！）。

個人的な話ですが、[弊社](https://mierune.co.jp/)を弊社と呼ぶようになったのはこの春からの話で、最初にアサインされたプロジェクトがこのプラグイン開発でした。業務のなかでオープンソースの開発に関われた事は間違いなく幸運であり、ひとりのコミッターとしても大きな経験になったと感じています。

開発のなかでも実感しましたが、MapboxのStyleをQGIS上で表現する事は容易ではなく、たとえばラスター画像と見比べてみるとまだまだ改善の余地があります。またOSやバージョンなどの条件による未知の不具合があるかもしれません。繰り返しですが、本プラグインはオープンソースです、なのでどなたでもソースコードを入手でき、修正や改善をコミットする事が出来ます。オープンソースにおいては、開発のみならずイシュー報告も重要な貢献であり、歓迎します（現在、開発はissueベースで進行しているので、不具合報告などは[リポジトリ](https://github.com/maptiler/qgis-maptiler-plugin)のissueまでお願いします）。