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

これは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（最新版にアップデートをお願いします）

Transcript

1. 1　 FOSS4G 2020 Japan Online 
 ～ブラウザ上にベクタータイル
 を表示させてみよう！～
 
 西尾悟（株式会社MIERUNE）

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

3. 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
 

4. 4　 自己紹介
 西尾　悟 （株式会社MIERUNE) 北海道小樽市出身 土木を専攻し、札幌の建設コンサルタントに入社 4年間ほど勤めたのちにMIERUNEに転職 　　・WebGISエンジニアとして地図アプリケーションを開発 Twitter: https://twitter.com/nokonoko_1203 Qiita: https://qiita.com/nokonoko_1203
5. 5　 本セミナーの目標
 ブラウザ上に
 　　ベクタータイルを
 　　　　　　表示させる

6. 6　 本日つくるもの
 

7. 7　 ベクタータイルとは？
 • 機械判読可能なベクター形式のタイルデータ
 • タイル？ • ベクター形式…？ • 機械判読…？ よくわからん
8. 8　 • GISって？WebGISって？
 • 具体的にどんなサービスがあるの？
 • タイルって？
 • ラスターとベクターの違いは？
 • ラスタータイルを表示させてみる
 • ベクトルデータを扱ってみる
 • MapTilerでベクタータイルを触ってみる
 • ベクタータイルを編集してみる
 • 自分のアプリでベクタータイルを表示させてみる
 目次

9. 9　 GISって？

10. 10　 GISって？
 • 地理情報システム（Geographic Information System）
 • 「地理空間情報」を主に扱うシステムのこと
 • QGIS・ArcGISなどの専用ソフトを利用する
 河川 土地利用 街灯 建物 道路 線路 そのほか、市町村界、気温、人口・・・
11. 11　 地理空間情報って？
 • 地理空間情報とは、地球上に存在する山・川・海・気候・人口・集落・ 産業・交通などのありとあらゆるデータのこと
 • これらの情報は位置情報と詳細情報（属性情報）を持つ 
 • GISは地理空間情報の表示・作成・編集・分析などを行うシステム
 • ざっくり「地図上に様々な情報を重ねることのできるシステム」のこと − 浸水想定区域 − 人口分布 − 市町村界 − ハザードマップを作成 
 • 表示・分析などの手法は様々

12. 12　 データの表示
 • 形式の異なるデータの重ね合わせ
 • 属性に基づく凡例の変更
 地形 河川
 人口統計値に
 基づく表示 土壌分類に
 基づく表示
 危険な地域を見つける データを直感的に理解できるように可視化

13. 13　 データの作成・編集
 • 地図のデジタル化
 • 位置情報の付与
 古い地形図から土地利用を復元 画像の位置のずれを補正
14. 14　 データの分析
 バッファ クリップ ディゾルブ ある地点からの 緩衝域を作成 データをくりぬき たい データを結合し たい この他にも数々の分析手法が存在

15. 15　 WebGISって？

16. 16　 WebGISって？
 • Webで利用することのできるGIS
 

17. 17　 地理院地図
 • 国土地理院提供のWebGIS
 • 住所など検索可能で、中心座標や高度などを表示できる

18. 18　 Google マップ（マイマップ）
 • 気になる場所を地図上にマーキング出来る
 • 所有しているGISデータのインポートが可能
 • ルート検索も可能
 札幌駅
 43.06,141.35
 my map
 好きなお店 駅 背景地図
19. 19　 WebGISって？
 • 何故GISソフトだけでなくWebを利用する必要があるの か
 
 • 専用のソフトをインストールする必要がない →誰でも、低スペックPCで利用可能 • スマートフォン・タブレットなどのモバイル端末でも利用可 →効果的に現地調査などを行うことができる • Webを利用することで、個人間でファイルのやり取りする必要がな く、リアルタイムでデータの追加確認などが可能 →情報の伝達がスムーズに行える 複雑な処理は専用のGISソフトに任せて、データの表示に徹することが多い

20. 20　 WebGISって？
 
 現場で調査
 所内で作成・分析
 企業
 一般人
 スマホで利用
 家庭で利用

21. 21　 GISソフトはハードルが高い
 • 扱えるデータがソフトによって異なる
 
 • 処理・可視化の方法がすべて異なる
 
 • それなりのスキルを持っていないと表示すら困難
 
 • ソフトが高額
 
 →WebGISならブラウザ1つで誰でもどこでも表示可 能！！！
 (ただ、データを扱う技術者の負担は増えてます…)
22. 22　 タイルとは？

23. 23　 タイルとは？
 • WebGISで背景地図を表示させるために必須の概念
 • Googleが生み出したタイル状に区切られた形式の地図
 • メルカトル図法で投影された地図の緯度85度付近を切り取って正方 形になったもの
 • 6/56/24はズームレベル/x座標/y座標を表す

24. 24　 タイルとは？
 • ズームレベル？
 • タイルの詳細度を表す（一般的には0~22レベルくらいまで利用される） • ズームレベル０→全世界を1枚の画像で表現 • ズームレベル1→4枚の画像で表現 • ズームレベル2→16枚の画像で表現 • XY座標？
 • 西経180度・北緯約85度を(0, 0)として何枚目のタイル画像なのか、を示す 

25. 25　 タイルとは？
 • 何故タイルを利用するのか
 • Web上で高速配信するため • 以前は1枚物の地図データを配信して表示範囲を切り取っていた • パフォーマンスに難ありなので、事前にタイル状に細かく区切った画像を生成しておき、 リクエストに応じて生成済み画像を返すだけにした • https://hogehoge/6/56/24.png のようにリクエストする 
 軽量 大容量
26. 26　 ベクターと
 ラスター

27. 27　 ラスターとベクターの違い
 • タイルは2種類ある
 • ラスターとベクター • 今まで見ていたのはラスター • ラスターとは？
 • ラスターとは、jpeg/pngなどのいわゆる普通の「画像」のこと • 画像なので当然1ピクセルごとに表示したい色の情報が格納されている • 緯度経度などの位置情報も持っていない（持たせる方法はあります） • ベクターとは？
 • 情報を「画像」ではなくテキスト（またはバイナリ）で保持している形式 − shp/csvなど • 情報の中には緯度経度、物の形状など様々
28. 28　 ラスターとベクターの違い
 例）橋を表す場合
 
 
 • ベクタ形式 • ラスタ形式 データをピクセルで表す 形状：画像 データを点やそれらをつなぐ線で表す 形状：点、線、面
29. 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
30. 30　 ベクタータイルって？
 • ベクター形式のデータをタイル分割した地図
 • 画像ではない • 地図の内容がテキスト（またはバイナリ）で格納されている • 様々な情報が格納できる • 情報をブラウザで読み取ってレンダリング • ブラウザ側でレンダリングするため、ラスタータイル（すでに出来上がっている画像）とは 違い、属性値によって表示させる色や太さなどを変えることが可能 国土地理院より：http://maps.gsi.go.jp/development/vt_expt.html
31. 31　 ラスタータイルとベクタータイルの違い
 ラスタータイル ベクタータイル データ量 大きい 小さい 生成時間 長い 短い 解像度 低い 高い 表現力 乏しい 豊か 表示速度 早い 遅い
32. 32　 ラスタータイルとベクタータイルの違い
 • ラスタータイルを利用する意味あるの…？
 • あります！！！ • 取り扱いが非常に簡単で専門知識がほとんど不要 − ベクターは機械判読できるが、人間には読み取りづらい • 生成された画像を受け取るだけなのでPCスペックによらず軽快に 表示可能 • ベクタータイルはファイル自体は軽量だがブラウザ側でレンダリン グが必要 • 特徴を理解して使い分ける必要がある

33. 33　 ラスタータイルとベクタータイルの違い
 
 
 
 
 • https://maptiler.jp/maps/#streets/ja/vector/1.64/140.3/41.8
 

34. 34　 ラスタータイルを
 表示させる

35. 35　 地理院タイル
 • 国土地理院が提供しているラスタータイルがある
 • https://cyberjapandata.gsi.go.jp/xyz/std/{z}/{x}/{y}.png
 • 地理院タイル一覧: https://maps.gsi.go.jp/development/ichiran.html
36. 36　 実際に読み込んでみる
 • ダウンロードしたmap sampleフォルダの中に index.html/css/jsがあることを確認してください
 1 raster tile

37. 37　 実際に読み込んでみる
 • index.htmlを右クリック→このアプリケーションで開く →Google Chromeをクリック
 • ダブルクリック・D&Dでも開きます 1 raster tile

38. 38　 実際に読み込んでみる
 1 raster tile

39. 39　 実際に読み込んでみる
 1 raster tile
 • VSCodeを開いてindex.jsを編集

40. 40　 実際に読み込んでみる
 • Chromeが立ち上がり、地図が表示される
 
 1 raster tile

41. 41　 なんで表示されるの か

42. 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

43. 43　 index.html
 1 raster tile

44. 44　 index.css
 1 raster tile

45. 45　 index.js
 1 raster tile

46. 46　 index.js
 1 raster tile

47. 47　 背景地図を
 変更する

48. 48　 表示するラスターを変更してみよう
 • 地理院タイル一覧
 • https://maps.gsi.go.jp/development/ichiran.html • 白地図 − https://cyberjapandata.gsi.go.jp/xyz/blank/{z}/{x}/{y}.png • 航空写真 − https://cyberjapandata.gsi.go.jp/xyz/seamlessphoto/{z}/{x}/{y}.jpg
 
 2 change background map

49. 49　 表示するラスターを変更してみよう
 2 change background map

50. 50　 表示されない…？
 
 
 
 2 change background map
 • 白地図が表示されない • 画面を引いたり移動したりすると出てくるはず
 
 

51. 51　 航空写真を読み込む
 • 航空写真を読み込む
 
 2 change background map

52. 52　 画像が消える…？
 
 
 
 2 change background map

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

54. 54　 ズームしてみる
 • maxzoomを23に設定
 
 2 change background map

55. 55　 画像が消えない！
 
 
 
 2 change background map

56. 56　 休憩

57. 57　 ベクトルデータを
 表示させる

58. 58　 ベクトルデータってどんなデータ？
 • 画像以外のデータ
 • テキストなどで地物の情報を格納している
 
 • 主なフォーマット
 • csv・GeoJSON・shpなど様々
 
 
 
 ベクタータイルの前にベクトルデータを表示させよう！

59. 59　 ベクトルデータを表示させてみる
 • ひとまず背景地図を標準地図に戻す
 • 標準地図: https://cyberjapandata.gsi.go.jp/xyz/std/{z}/{x}/{y}.png 
 
 3 read vector data

60. 60　 ベクトルデータを表示させてみる
 • GeoJSONの読み込み
 • assets/sampleGeojson.jsの中身をコピーしてindex.jsに貼り付ける
 
 
 
 3 read vector data

61. 61　 ベクトルデータを表示させてみる
 • GeoJSONの表示
 • assets/mapOnSample.jsの中身をコピーしてindex.jsに貼り付ける
 
 
 
 3 read vector data

62. 62　 ベクトルデータを表示させてみる
 • GeoJSONの表示
 
 
 3 read vector data

63. 63　 ベクトルデータを表示させてみる
 • 表示方法を変えてみよう
 • circle-color: 色
 • circle-radius: 大きさ
 • circle-opacity: 透過度
 • など… • 詳しい情報は https://docs.mapbox.com/mapbox-gl-js/style-spec/layers/
 
 
 3 read vector data

64. 64　 Geojson.ioを使ってみる
 • Geojson.ioとは
 • https://geojson.io/
 • 地図を見ながら好きな場所にポイントなどを立てれる
 • 立てた場所のGeoJSONが表示される
 
 
 4 add marker

65. 65　 GeoJSONでマーカーを立てる
 • 生成されたGeoJSONをコピー
 
 
 4 add marker

66. 66　 GeoJSONでマーカーを立てる
 • index.jsに貼り付け
 
 4 add marker

67. 67　 GeoJSONでマーカーを立てる
 • マーカーを追加する関数を作成
 • 注意点
 • Coordinatesは配列が入る
 • 日本語的になじみ深いのは「緯度経度」という呼び方
 • 配列に入る値は[経度, 緯度]が多い（[x, y]なので）
 
 4 add marker

68. 68　 GeoJSONでマーカーを立てる
 • GeoJSONを読み込む
 • 読み込んだGeoJSONを1つづつ読み込み、緯度経度を取得
 • 作成した関数を利用して地図上にマーカーを追加
 
 4 add marker

69. 69　 GeoJSONでマーカーを立てる
 4 add marker

70. 70　 ベクタータイルを
 表示させる

71. 71　 MapTilerとは？
 • https://www.maptiler.jp/
 
 
 
 5 vector tile

72. 72　 MapTilerとは？
 • スイス発の地図API配信サービス
 • GoogleMaps API, Mapboxのようなサービス
 • 全世界のベクター、ラスタータイル地図を提供
 • 各国の公的機関などの詳細なデータも一部整備
 • （当然、日本は整備済みです）
 • 空中写真を提供
 • ユーザ独自のデータもアップロードして利用可能
 • GeoJSON、mbtilesなど
 • Webでも、QGISのようなGISでも利用可能
 • 利用料は安価
 • 請求書払いも対応してます
 
 5 vector tile

73. 73　 MapTilerを使ってみる
 • 登録
 • https://www.maptiler.jp/
 
 
 
 
 5 vector tile

74. 74　 MapTilerを使ってみる
 • メイン画面
 
 
 
 5 vector tile

75. 75　 まずはラスターを読み込んでみる
 5 vector tile

76. 76　 まずはラスターを読み込んでみる
 5 vector tile

77. 77　 まずはラスターを読み込んでみる
 5 vector tile

78. 78　 まずはラスターを読み込んでみる
 5 vector tile

79. 79　 ベクタータイルを読み込んでみる
 • ラスターとは読み込み方が異なる
 • ラスターにも色々読み込ませ方があります
 • style.jsonを適用する必要がある
 • 公式のドキュメント: https://docs.mapbox.com/mapbox-gl-js/style-spec/
 • 各地物の表現方法を記述したJSON
 • 赤い円を表示させた時のような記述
 
 5 vector tile

80. 80　 ベクタータイルを読み込んでみる
 5 vector tile

81. 81　 ベクタータイルを読み込んでみる
 5 vector tile

82. 82　 ベクタータイルを読み込んでみる
 5 vector tile

83. 83　 ベクタータイルを編集してみる
 6 edit vector tile

84. 84　 3種類の編集方法
 • 初心者向け
 • Customize − 簡単かつシンプルに色や言語をカスタマイズ
 • 上級者向け
 • Editor − 配色や透明度、文字の大きさなどを細かく指定可能
 • Upload style − 所有しているstyle.jsonをアップロード可能
 
 今回はCustomizeを選択
 6 edit vector tile

85. 85　 ベクタータイルのスタイルを編集
 6 edit vector tile

86. 86　 ベクタータイルのスタイルを編集
 • Basic→Presetsの一番下のスタイルを選択
 • LANGAGEタブを選択し、Japaneseを選択
 6 edit vector tile

87. 87　 ベクタータイルのスタイルを編集
 • Colorタブから自由に地図の色を変更できる
 • SAVEでスタイルを保存
 
 6 edit vector tile

88. 88　 ベクタータイルのスタイルを編集
 • タイトルなどは分かりやすいように自由に設定
 6 edit vector tile

89. 89　 ベクタータイルのスタイルを編集
 • 利用するにはPublishを選択
 6 edit vector tile

90. 90　 ベクタータイルのスタイルを編集
 • 利用可能な状態になるのでURLをコピー
 6 edit vector tile

91. 91　 ベクタータイルのスタイルを編集
 • URLを差し替え
 6 edit vector tile

92. 92　 ベクタータイルのスタイルを編集
 6 edit vector tile

93. 93　 宣伝
 ・MIERUNEでは、
 ・QGISコンサルタント・プラグイン開発・講習会
 ・インストール不要・オフライン環境でも使用可能なQGIS
 ・WebGISの受託開発
 ・MapTilerの日本代理店
 
 
 
 
 
 
 
 
 
 
 
 ご相談はMIERUNEのHPへ
 https://mierune.co.jp