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

ブラウザ上にベクタータイルを表示させてみよう!

nokonoko1203
November 07, 2020

 ブラウザ上にベクタータイルを表示させてみよう!

これは2020/11/07にFOSS4G Japan 2020 Online チュートリアルデイで行った講義の資料です。

https://www.osgeo.jp/events/foss4g-2020/foss4g-2020-japan-online/foss4g-japan-2020-online-tutorial-day

# 概要

- WebGISやベクタータイルなどの前提知識を学んでいきます
- わかりやすい利用事例や今後WebGISを活用していく上での参考知識などを学びます
- 実際に手を動かしてベクタータイルをブラウザに表示させます

## 対象者

WebGISについて知りたい方

## 想定(要求)レベル

実際にコードを編集するため、HTML及びJavaScriptについての基礎知識が必要となります

## 事前準備

事前準備として以下のものをご用意ください。

## インストール

- ブラウザ(Chrome)
- Visual Studio Code
- アカウント
- Maptiler.jp

## 資料

Github: https://github.com/nokonoko1203/FOSS4G_2020_Japan_Online_Tutorial

## OS
Windows及びMac(最新版にアップデートをお願いします)

nokonoko1203

November 07, 2020
Tweet

More Decks by nokonoko1203

Other Decks in Programming

Transcript

  1. 2  はじめに
 
 • 本日の講習概要
 • 座学(30分程度)
 • GISとは?WebGISとは? •

    ベクタータイルって? • ラスターとベクターの違いは?
 • 実践 • ラスタータイルを表示させる • ベクターデータを編集する • ブラウザでベクタータイルを表示させる
 • 事前準備
 • ブラウザ(Chrome)とVisual Studio Codeのインストールをお願いします • MapTilerへの登録をお願いします
 • 対象者
 • WebでGISをやるってどういうこと?という疑問を持った方にはおすすめだと思 います! • 既に業務等でMapbox GL JSなどを利用したアプリケーションを作成されてい る方には向いていないかもしれません 
 

  2. 3  はじめに
 
 • 本講習を進めるにあたって
 • Zoom • スライド中は講師の共有画面をご覧ください。
 •

    エディターの操作時間は各自エディターで操作を行ってください。
 • 質問等あればZoomのチャット書いてください。
 • 時間の都合などの関係で全ては拾いきれないことをご了承ください。
 
 • データについて
 • GitHub: https://github.com/nokonoko1203/FOSS4G_2020_Japan_Online_Tutori al
 
 • Googleドライブ: https://drive.google.com/drive/u/2/folders/1MFHeOXsY6aGVScqvK WdvRtYbePzvlJ8m
 

  3. 8  • GISって?WebGISって?
 • 具体的にどんなサービスがあるの?
 • タイルって?
 • ラスターとベクターの違いは?
 •

    ラスタータイルを表示させてみる
 • ベクトルデータを扱ってみる
 • MapTilerでベクタータイルを触ってみる
 • ベクタータイルを編集してみる
 • 自分のアプリでベクタータイルを表示させてみる
 目次

  4. 12  データの表示
 • 形式の異なるデータの重ね合わせ
 • 属性に基づく凡例の変更
 地形 河川
 人口統計値に
 基づく表示

    土壌分類に
 基づく表示
 危険な地域を見つける データを直感的に理解できるように可視化

  5. 19  WebGISって?
 • 何故GISソフトだけでなくWebを利用する必要があるの か
 
 • 専用のソフトをインストールする必要がない →誰でも、低スペックPCで利用可能 •

    スマートフォン・タブレットなどのモバイル端末でも利用可 →効果的に現地調査などを行うことができる • Webを利用することで、個人間でファイルのやり取りする必要がな く、リアルタイムでデータの追加確認などが可能 →情報の伝達がスムーズに行える 複雑な処理は専用のGISソフトに任せて、データの表示に徹することが多い

  6. 21  GISソフトはハードルが高い
 • 扱えるデータがソフトによって異なる
 
 • 処理・可視化の方法がすべて異なる
 
 • それなりのスキルを持っていないと表示すら困難


    
 • ソフトが高額
 
 →WebGISならブラウザ1つで誰でもどこでも表示可 能!!!
 (ただ、データを扱う技術者の負担は増えてます…)
  7. 27  ラスターとベクターの違い
 • タイルは2種類ある
 • ラスターとベクター • 今まで見ていたのはラスター • ラスターとは?


    • ラスターとは、jpeg/pngなどのいわゆる普通の「画像」のこと • 画像なので当然1ピクセルごとに表示したい色の情報が格納されている • 緯度経度などの位置情報も持っていない(持たせる方法はあります) • ベクターとは?
 • 情報を「画像」ではなくテキスト(またはバイナリ)で保持している形式 − shp/csvなど • 情報の中には緯度経度、物の形状など様々
  8. 29  ラスターとベクターの違い
 例)水田を表す場合
 
 
 • ベクタ形式 • ラスタ形式 ひとつのセルにひとつの属性(数字)しか持てない

    ひとつのデータに複数の属性を持てる 2 2 2 2 2 2 2 2 2 2 2 2 2 2 1 1 1 2 2 1 1 1 1 2 2 1 1 1 1 1 2 1 1 1 1 1 ID 属性1 属性2 1 水田 17a 2 森林 19a 1は水田、2は森林 2 1
  9. 30  ベクタータイルって?
 • ベクター形式のデータをタイル分割した地図
 • 画像ではない • 地図の内容がテキスト(またはバイナリ)で格納されている • 様々な情報が格納できる

    • 情報をブラウザで読み取ってレンダリング • ブラウザ側でレンダリングするため、ラスタータイル(すでに出来上がっている画像)とは 違い、属性値によって表示させる色や太さなどを変えることが可能 国土地理院より:http://maps.gsi.go.jp/development/vt_expt.html
  10. 32  ラスタータイルとベクタータイルの違い
 • ラスタータイルを利用する意味あるの…?
 • あります!!! • 取り扱いが非常に簡単で専門知識がほとんど不要 − ベクターは機械判読できるが、人間には読み取りづらい

    • 生成された画像を受け取るだけなのでPCスペックによらず軽快に 表示可能 • ベクタータイルはファイル自体は軽量だがブラウザ側でレンダリン グが必要 • 特徴を理解して使い分ける必要がある

  11. 42  Mapbox GL JS
 • Mapbox社が開発するオープンソースの地図描画ライブラリ • WebGLを利用して高速にベクタータイルを表示する − WebGL:

    ブラウザで3次元表示させるための仕様 • 概要: https://docs.mapbox.com/jp/mapbox-gl-js/overview/ • サンプル集: https://docs.mapbox.com/jp/mapbox-gl-js/example/ 
 1 raster tile

  12. 50  表示されない…?
 
 
 
 2 change background map
 •

    白地図が表示されない • 画面を引いたり移動したりすると出てくるはず
 
 

  13. 53  画像が消える…?
 • ズームしていくと表示が消えたり、ぼやけたり
 • 元データ(ラスタータイル)のズームレベルと設定している 「maxzoom」の影響 • 元データ −

    タイル画像は事前に画像を生成しておく必要がある − 作成者が生成していなければ画像は読み込まれない − 航空写真は場合はズームレベルが2~18までしか存在しない − 画像がなければ存在する画像をひきのばして表示するのでぼやける • maxzoom − 画像を表示するズームレベルを指定 − 今回は18で設定していたのでズームレベル18を超えると非表示になってし まった − 最大23レベルまで設定できる
 
 
 2 change background map

  14. 63  ベクトルデータを表示させてみる
 • 表示方法を変えてみよう
 • circle-color: 色
 • circle-radius: 大きさ


    • circle-opacity: 透過度
 • など… • 詳しい情報は https://docs.mapbox.com/mapbox-gl-js/style-spec/layers/
 
 
 3 read vector data

  15. 72  MapTilerとは?
 • スイス発の地図API配信サービス
 • GoogleMaps API, Mapboxのようなサービス
 • 全世界のベクター、ラスタータイル地図を提供


    • 各国の公的機関などの詳細なデータも一部整備
 • (当然、日本は整備済みです)
 • 空中写真を提供
 • ユーザ独自のデータもアップロードして利用可能
 • GeoJSON、mbtilesなど
 • Webでも、QGISのようなGISでも利用可能
 • 利用料は安価
 • 請求書払いも対応してます
 
 5 vector tile

  16. 79  ベクタータイルを読み込んでみる
 • ラスターとは読み込み方が異なる
 • ラスターにも色々読み込ませ方があります
 • style.jsonを適用する必要がある
 • 公式のドキュメント:

    https://docs.mapbox.com/mapbox-gl-js/style-spec/
 • 各地物の表現方法を記述したJSON
 • 赤い円を表示させた時のような記述
 
 5 vector tile

  17. 84  3種類の編集方法
 • 初心者向け
 • Customize − 簡単かつシンプルに色や言語をカスタマイズ
 • 上級者向け


    • Editor − 配色や透明度、文字の大きさなどを細かく指定可能
 • Upload style − 所有しているstyle.jsonをアップロード可能
 
 今回はCustomizeを選択
 6 edit vector tile