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

Transcript

1. 虎の穴　虎の穴　虎の穴　虎の穴 Copyright © 2019 Toranoana Inc. All Rights Reserved. WebGISで遊ぼう(基礎編) 虎の穴ラボ　藤原 佳顕 1 2019/06/25 【とらのあな主催】オタクが最新技術を追うライトニングトークイベント8回目
2. 虎の穴　虎の穴　虎の穴　虎の穴 Copyright © 2019 Toranoana Inc. All Rights Reserved. 自己紹介 { 名前:藤原 佳顕 担当:Fantia 前職:GIS絡み(デスクトップからWebまで) like:{ 趣味:毎日ゲーセン行ってダライアス外伝ってゲームやってます アニメ:最近屍者の帝国とか見ました }, 今日の内容:ハッカソンイベント用に作った地図アプリの紹介です。 } 2
3. 虎の穴　虎の穴　虎の穴　虎の穴 Copyright © 2019 Toranoana Inc. All Rights Reserved. アジェンダ • 自己紹介 • GISの基礎 • Leafletを使ってみよう • マーカーを表示してみよう • 地図を切り替えてみよう 3
4. 虎の穴　虎の穴　虎の穴　虎の穴 Copyright © 2019 Toranoana Inc. All Rights Reserved. GISの基礎 • GIS: Geographic Information System – 要するに地図を扱うシステム全般です • よく出てくる用語 – レイヤ(主題図、背景地図、カスタムレイヤ) • データを一括で扱うため – メッシュタイル • 格子のイメージに分割された地図画像 • 地図を一枚で表示すると画像サイズが巨大すぎるため – 座標系 • 世界測地系、日本測地系、ピクセル座標系、平面直角座標系 • メルカトル図法などの図法によって異なるので変換が必要 4
5. 虎の穴　虎の穴　虎の穴　虎の穴 Copyright © 2019 Toranoana Inc. All Rights Reserved. GISの基礎 レイヤのイメージ 引用: http://desktop.arcgis.com/ja/arcmap/10.3/guide-books/map-projections/what-are-map-projections.htm 5
6. 虎の穴　虎の穴　虎の穴　虎の穴 Copyright © 2019 Toranoana Inc. All Rights Reserved. GISの基礎 メッシュのイメージ 引用: https://www.pref.aichi.jp/kankyo/sizen-ka/shizen/yasei/rdb/chizu.html 6
7. 虎の穴　虎の穴　虎の穴　虎の穴 Copyright © 2019 Toranoana Inc. All Rights Reserved. GISの基礎 WebGISの基本構成イメージ 7
8. 虎の穴　虎の穴　虎の穴　虎の穴 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
9. 虎の穴　虎の穴　虎の穴　虎の穴 Copyright © 2019 Toranoana Inc. All Rights Reserved. Leafletを使ってみる • 地図描画用のJavaScriptライブラリ(ちなみに地図ライブラリはどれも似通っています ) – メッシュ画像配信サーバーは別途存在する必要がある – 幸いなことにメッシュ画像配信サービスはいくつか存在する • 地理院地図(国土地理院) • OpenStreetMap(誰でも編集できるフリーの地図 ) 9 <html lang="ja"> <head> <link rel="stylesheet" href="https://unpkg.com/leaflet@1.4.0/dist/leaflet.css" integrity="割愛" crossorigin=""/> <link rel="stylesheet" href="app/css/main.css" crossorigin="" /> <script src="https://unpkg.com/leaflet@1.4.0/dist/leaflet.js" integrity="割愛" crossorigin="" ></script> </head> <body> <!-- 地図挿入先のエレメントを用意 --> <div id="mapid" /> <script src="app/js/main.js" crossorigin=""></script> </body> </html>
10. 虎の穴　虎の穴　虎の穴　虎の穴 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の指定)
11. 虎の穴　虎の穴　虎の穴　虎の穴 Copyright © 2019 Toranoana Inc. All Rights Reserved. マーカーを追加してみよう • マーカーもレイヤの一つです(latlngは点の緯度経度) 11 // 削除などをすることも考えてmarkerオブジェクトを保持 const marker = L.marker(latlng) .addTo(map) .bindPopup(text, {autoClose: false, closeOnClick: false}) .openPopup();
12. 虎の穴　虎の穴　虎の穴　虎の穴 Copyright © 2019 Toranoana Inc. All Rights Reserved. 背景地図の(複数)追加 const gsi = L.tileLayer( "https://cyberjapandata.gsi.go.jp/xyz/std/{z}/{x}/{y}.png", { attribution: "<a href='https://maps.gsi.go.jp/development/ichiran.html' target='_blank'>地理院タイル</a>" } ); 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
13. 虎の穴　虎の穴　虎の穴　虎の穴 Copyright © 2019 Toranoana Inc. All Rights Reserved. • Leafletを使って地図が表示できるようになりました • レイヤやメッシュなど地図に関連する基本的なことを話しました • 次回：PostgreSQLのGIS拡張であるPostGISを使って地図画像配 信サーバーを作ってみる(仮) 13 まとめ