Upgrade to Pro — share decks privately, control downloads, hide ads and more …

2021-05-20-Vector Tile in QGIS (in Japanese)

2021-05-20-Vector Tile in QGIS (in Japanese)

2021年5月20日 国連オープンGISイニシアチブ ワークショップ説明資料

UBUKAWA Taro

May 18, 2021
Tweet

More Decks by UBUKAWA Taro

Other Decks in Technology

Transcript

  1. 1. 前提条件 練習を開始する前に以下について確認してください: • QGISのバージョンは3.16以降ですか? • それより古いバージョンではこの方法は試せません。 • このスライドで紹介しているものはバージョン 3.16.6

    を使っています。 • 読み込みたいベクトルタイルの場所(URL)を確認してください。 • (任意) 読み込みたいスタイル情報 (style.json)の場所を確認してくだ さい。
  2. 2. Browser Panelでのベクトルタイル接続 QGISでどうやって読み込む? • QGISを立ち上げる。 • Browser Panelの“Vector Tile”を

    右クリックして、“new generic Connection”を選ぶ。 ※日本語版を使っている方は表示 が日本語の可能性があります。
  3. 3.スタイル情報なしでのベクトルタイル読み込み (1) • 接続名を Name に記入する。 • タイルの URLを指定する。 以下のURLでも練習できます。

    https://ubukawa.github.io/vt-test/ne-test/{z}/{x}/{y}.pbf • タイルの最大最小ズームを指定する。 上のURLを使った場合は最大は5です。. • “OK”をクリックする。 ここではスタイルを参照しないで、ベクトルタ イルを読んでみますので、Style URLは空欄のま までよいです。 (スタイル付きはこの次の練習です。)
  4. • Browser Panelで先ほど 登録したベクトルタイルを 選択。 • すると layers panel に表

    示されます。 • スタイル情報なしのベクト ルタイルデータが表示さ れます。 このデータはNaturalEarth (free data)のデータです。練習用であり、地図の境 界は国連やその他の組織の公式見解を示唆するものではありません。 3.スタイル情報なしでのベクトルタイル読み込み (2)
  5. 4.スタイル情報ありでのベクトルタイル読み込み (1) 今回は、スタイル情報ありでファイルを開くので、 “Style URL” を記入します。 • 接続名をNameに記入する。 • タイルの

    URLを指定する。 以下のURLでも練習できます。 https://ubukawa.github.io/vt-test/ne-test/{z}/{x}/{y}.pbf • タイルの最大最小ズームを指定する。 上のURLを使った場合は最大は5です。. • スタイル情報のURLを指定する。 上のURLのタイルであれば以下のスタイルを参照できます。. https://ubukawa.github.io/vt-test/maps/test-simple.json • “OK”をクリックする。
  6. • Browser Panelで先ほど登録した ベクトルタイルを選択。 • すると layers panel に表示されま す。

    • スタイル情報ありのベクトルタイル データが表示されます。 • QGIS は mapbox-gl js ライブラリと 全く同じようには表示しません。 • QGIS 向けのスタイルはシンプルな ものにする必要がある場合がありま す。 (右の例では、ポイントデータがアイ コンを利用しており、また描画情報 がないためスキップされています。) 4.スタイル情報ありでのベクトルタイル読み込み (2) このデータはNaturalEarth (free data)のデータです。練習用であり、地図の境 界は国連やその他の組織の公式見解を示唆するものではありません。
  7. (参考) 前ページの絵をmapbox-gl jsでみると・・・ Differences • Background • Labels of the

    point • Width of the line. • Etc… https://ubukawa.github.io/vt-test/maps/test-simple-mapbox.html
  8. 5.さらに知りたい方へ もしもスタイルを編集したい場合には、style.json を編集してサーバにアップ ロードすることが必要です。 • どうやってスタイルを編集する? • Texit editor •

    Maputnik • HOCON parser (UNVT) • どうやってベクトルタイルを作成する? • Tippecanoe • UNVT/nanban (docker) • どうやってベクトルタイルをホストする? • ウェブサーバによる静的なホスティング • Node js サーバをつかって、mbtilesファイルから pbf ファイルを配信する。. 詳細については、 UNVT Workshopの 資料をご覧下さい! https://unvt.github.io/512/