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

Slide 1

Slide 1 text

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

Slide 2

Slide 2 text

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

Slide 3

Slide 3 text

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   

Slide 4

Slide 4 text

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

Slide 5

Slide 5 text

5　本セミナーの目標  ブラウザ上に  　　ベクタータイルを  　　　　　　表示させる 

Slide 6

Slide 6 text

6　本日つくるもの   

Slide 7

Slide 7 text

7　ベクタータイルとは？  ● 機械判読可能なベクター形式のタイルデータ  • タイル？ • ベクター形式…？ • 機械判読…？よくわからん

Slide 8

Slide 8 text

8　 • GISって？WebGISって？  • 具体的にどんなサービスがあるの？  • タイルって？  • ラスターとベクターの違いは？  • ラスタータイルを表示させてみる  • ベクトルデータを扱ってみる  • MapTilerでベクタータイルを触ってみる  • ベクタータイルを編集してみる  • 自分のアプリでベクタータイルを表示させてみる  目次 

Slide 9

Slide 9 text

9　 GISって？ 

Slide 10

Slide 10 text

10　 GISって？  ● 地理情報システム（Geographic Information System）  ● 「地理空間情報」を主に扱うシステムのこと  ● QGIS・ArcGISなどの専用ソフトを利用する  河川土地利用街灯建物道路線路そのほか、市町村界、気温、人口・・・

Slide 11

Slide 11 text

11　地理空間情報って？  ● 地理空間情報とは、地球上に存在する山・川・海・気候・人口・集落・産業・交通などのありとあらゆるデータのこと  • これらの情報は位置情報と詳細情報（属性情報）を持つ   ● GISは地理空間情報の表示・作成・編集・分析などを行うシステム  • ざっくり「地図上に様々な情報を重ねることのできるシステム」のこと − 浸水想定区域 − 人口分布 − 市町村界 − ハザードマップを作成   ● 表示・分析などの手法は様々 

Slide 12

Slide 12 text

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

Slide 13

Slide 13 text

13　データの作成・編集  ● 地図のデジタル化  ● 位置情報の付与  古い地形図から土地利用を復元画像の位置のずれを補正

Slide 14

Slide 14 text

14　データの分析  バッファクリップディゾルブある地点からの緩衝域を作成データをくりぬきたいデータを結合したいこの他にも数々の分析手法が存在 

Slide 15

Slide 15 text

15　 WebGISって？ 

Slide 16

Slide 16 text

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

Slide 17

Slide 17 text

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

Slide 18

Slide 18 text

18　 Google マップ（マイマップ）  ● 気になる場所を地図上にマーキング出来る  ● 所有しているGISデータのインポートが可能  ● ルート検索も可能  札幌駅  43.06,141.35  my map  好きなお店駅背景地図

Slide 19

Slide 19 text

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

Slide 20

Slide 20 text

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

Slide 21

Slide 21 text

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

Slide 22

Slide 22 text

22　タイルとは？ 

Slide 23

Slide 23 text

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

Slide 24

Slide 24 text

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

Slide 25

Slide 25 text

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

Slide 26

Slide 26 text

26　ベクターと  ラスター 

Slide 27

Slide 27 text

27　ラスターとベクターの違い  ● タイルは2種類ある  • ラスターとベクター • 今まで見ていたのはラスター ● ラスターとは？  • ラスターとは、jpeg/pngなどのいわゆる普通の「画像」のこと • 画像なので当然1ピクセルごとに表示したい色の情報が格納されている • 緯度経度などの位置情報も持っていない（持たせる方法はあります） ● ベクターとは？  • 情報を「画像」ではなくテキスト（またはバイナリ）で保持している形式 − shp/csvなど • 情報の中には緯度経度、物の形状など様々

Slide 28

Slide 28 text

28　ラスターとベクターの違い  例）橋を表す場合      • ベクタ形式 • ラスタ形式データをピクセルで表す形状：画像データを点やそれらをつなぐ線で表す形状：点、線、面

Slide 29

Slide 29 text

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

Slide 30

Slide 30 text

30　ベクタータイルって？  ● ベクター形式のデータをタイル分割した地図  • 画像ではない • 地図の内容がテキスト（またはバイナリ）で格納されている • 様々な情報が格納できる • 情報をブラウザで読み取ってレンダリング • ブラウザ側でレンダリングするため、ラスタータイル（すでに出来上がっている画像）とは違い、属性値によって表示させる色や太さなどを変えることが可能国土地理院より：http://maps.gsi.go.jp/development/vt_expt.html

Slide 31

Slide 31 text

31　ラスタータイルとベクタータイルの違い  ラスタータイルベクタータイルデータ量大きい小さい生成時間長い短い解像度低い高い表現力乏しい豊か表示速度早い遅い

Slide 32

Slide 32 text

32　ラスタータイルとベクタータイルの違い  ● ラスタータイルを利用する意味あるの…？  • あります！！！ • 取り扱いが非常に簡単で専門知識がほとんど不要 − ベクターは機械判読できるが、人間には読み取りづらい • 生成された画像を受け取るだけなのでPCスペックによらず軽快に表示可能 • ベクタータイルはファイル自体は軽量だがブラウザ側でレンダリングが必要 ● 特徴を理解して使い分ける必要がある 

Slide 33

Slide 33 text

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

Slide 34

Slide 34 text

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

Slide 35

Slide 35 text

35　地理院タイル  ● 国土地理院が提供しているラスタータイルがある  • https://cyberjapandata.gsi.go.jp/xyz/std/{z}/{x}/{y}.png  • 地理院タイル一覧: https://maps.gsi.go.jp/development/ichiran.html

Slide 36

Slide 36 text

36　実際に読み込んでみる  ● ダウンロードしたmap sampleフォルダの中に index.html/css/jsがあることを確認してください  1 raster tile 

Slide 37

Slide 37 text

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

Slide 38

Slide 38 text

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

Slide 39

Slide 39 text

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

Slide 40

Slide 40 text

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

Slide 41

Slide 41 text

41　なんで表示されるのか 

Slide 42

Slide 42 text

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 

Slide 43

Slide 43 text

43　 index.html  1 raster tile 

Slide 44

Slide 44 text

44　 index.css  1 raster tile 

Slide 45

Slide 45 text

45　 index.js  1 raster tile 

Slide 46

Slide 46 text

46　 index.js  1 raster tile 

Slide 47

Slide 47 text

47　背景地図を  変更する 

Slide 48

Slide 48 text

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 

Slide 49

Slide 49 text

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

Slide 50

Slide 50 text

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

Slide 51

Slide 51 text

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

Slide 52

Slide 52 text

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

Slide 53

Slide 53 text

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

Slide 54

Slide 54 text

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

Slide 55

Slide 55 text

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

Slide 56

Slide 56 text

56　休憩 

Slide 57

Slide 57 text

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

Slide 58

Slide 58 text

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

Slide 59

Slide 59 text

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

Slide 60

Slide 60 text

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

Slide 61

Slide 61 text

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

Slide 62

Slide 62 text

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

Slide 63

Slide 63 text

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

Slide 64

Slide 64 text

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

Slide 65

Slide 65 text

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

Slide 66

Slide 66 text

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

Slide 67

Slide 67 text

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

Slide 68

Slide 68 text

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

Slide 69

Slide 69 text

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

Slide 70

Slide 70 text

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

Slide 71

Slide 71 text

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

Slide 72

Slide 72 text

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

Slide 73

Slide 73 text

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

Slide 74

Slide 74 text

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

Slide 75

Slide 75 text

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

Slide 76

Slide 76 text

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

Slide 77

Slide 77 text

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

Slide 78

Slide 78 text

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

Slide 79

Slide 79 text

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

Slide 80

Slide 80 text

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

Slide 81

Slide 81 text

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

Slide 82

Slide 82 text

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

Slide 83

Slide 83 text

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

Slide 84

Slide 84 text

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

Slide 85

Slide 85 text

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

Slide 86

Slide 86 text

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

Slide 87

Slide 87 text

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

Slide 88

Slide 88 text

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

Slide 89

Slide 89 text

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

Slide 90

Slide 90 text

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

Slide 91

Slide 91 text

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

Slide 92

Slide 92 text

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

Slide 93

Slide 93 text

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