【2019/06/25 オタクLT】WebGISで遊ぼう(基礎編)

Slide 1

Slide 1 text

Slide 2

Slide 2 text

虎の穴　虎の穴　虎の穴　虎の穴 Copyright © 2019 Toranoana Inc. All Rights Reserved. 自己紹介 { 名前:藤原佳顕担当:Fantia 前職:GIS絡み(デスクトップからWebまで) like:{ 趣味:毎日ゲーセン行ってダライアス外伝ってゲームやってますアニメ:最近屍者の帝国とか見ました }, 今日の内容:ハッカソンイベント用に作った地図アプリの紹介です。 } 2

Slide 3

Slide 3 text

Slide 4

Slide 4 text

虎の穴　虎の穴　虎の穴　虎の穴 Copyright © 2019 Toranoana Inc. All Rights Reserved. GISの基礎 • GIS: Geographic Information System – 要するに地図を扱うシステム全般です • よく出てくる用語 – レイヤ(主題図、背景地図、カスタムレイヤ) • データを一括で扱うため – メッシュタイル • 格子のイメージに分割された地図画像 • 地図を一枚で表示すると画像サイズが巨大すぎるため – 座標系 • 世界測地系、日本測地系、ピクセル座標系、平面直角座標系 • メルカトル図法などの図法によって異なるので変換が必要 4

Slide 5

Slide 5 text

Slide 6

Slide 6 text

Slide 7

Slide 7 text

Slide 8

Slide 8 text

虎の穴　虎の穴　虎の穴　虎の穴 Copyright © 2019 Toranoana Inc. All Rights Reserved. 地図ライブラリを使ってみよう！ • 最終的にできるもの – https://vigilant-mcnulty-2dc2e4.netlify.com/ • Leaflet.jsっていう地図描画ライブラリを使います • netlifyを使ってmasterへのgit pushで同時にデプロイされます。 • (せっかくなんでTypeScriptです) 8 $ npm init $ npm install --save leaflet leaflet-routing-machine typescript $ npm install --save-dev @types/leaflet @types/leaflet-routing-machine ts-loader webpack webpack-cli webpack-dev-server prettier

Slide 9

Slide 9 text

虎の穴　虎の穴　虎の穴　虎の穴 Copyright © 2019 Toranoana Inc. All Rights Reserved. Leafletを使ってみる • 地図描画用のJavaScriptライブラリ(ちなみに地図ライブラリはどれも似通っています ) – メッシュ画像配信サーバーは別途存在する必要がある – 幸いなことにメッシュ画像配信サービスはいくつか存在する • 地理院地図(国土地理院) • OpenStreetMap(誰でも編集できるフリーの地図 ) 9

Slide 10

Slide 10 text

虎の穴　虎の穴　虎の穴　虎の穴 Copyright © 2019 Toranoana Inc. All Rights Reserved. Leafletを使ってみる 10 (function() { // 地図オブジェクト生成 let mymap = new L.Map('mapid').setView(TORA_BUILDINGS, 18); // レイヤ追加(OSM) L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', { attribution: LICENSES['OSM'], maxZoom: 19, }).addTo(mymap); })(); ● Lオブジェクトにぶら下がる形で各操作用のオブジェクトが存在します。 ● 画面の左端を原点として緯度経度と拡大率から必要なメッシュタイル画像を判別します(xyzの指定)

Slide 11

Slide 11 text

虎の穴　虎の穴　虎の穴　虎の穴 Copyright © 2019 Toranoana Inc. All Rights Reserved. マーカーを追加してみよう • マーカーもレイヤの一つです(latlngは点の緯度経度) 11 // 削除などをすることも考えてmarkerオブジェクトを保持 const marker = L.marker(latlng) .addTo(map) .bindPopup(text, {autoClose: false, closeOnClick: false}) .openPopup();

Slide 12

Slide 12 text

虎の穴　虎の穴　虎の穴　虎の穴 Copyright © 2019 Toranoana Inc. All Rights Reserved. 背景地図の(複数)追加 const gsi = L.tileLayer( "https://cyberjapandata.gsi.go.jp/xyz/std/{z}/{x}/{y}.png", { attribution: "地理院タイル" } ); const osm = L.tileLayer("https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png", { attribution: LICENSES["OSM"], maxZoom: 19 } ); //baseMapsオブジェクトのプロパティに3つのタイルを設定 const baseMaps = { OpenStreetMap: osm, 地理院地図: gsi }; //layersコントロールにbaseMapsオブジェクトを設定して地図に追加 //コントロール内にプロパティ名が表示される L.control.layers(baseMaps).addTo(mymap); osm.addTo(mymap); 12