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

虎の穴　虎の穴　虎の穴　虎の穴 Copyright © 2019 Toranoana Inc. All Rights Reserved. WebGISで遊ぼう(基礎編)
虎の穴ラボ　藤原佳顕 1 2019/06/25 【とらのあな主催】オタクが最新技術を追うライトニングトークイベント8回目

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

虎の穴　虎の穴　虎の穴　虎の穴 Copyright © 2019 Toranoana Inc. All Rights Reserved. アジェンダ
• 自己紹介 • GISの基礎 • Leafletを使ってみよう • マーカーを表示してみよう • 地図を切り替えてみよう 3

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

レイヤのイメージ引用: http://desktop.arcgis.com/ja/arcmap/10.3/guide-books/map-projections/what-are-map-projections.htm 5

メッシュのイメージ引用: https://www.pref.aichi.jp/kankyo/sizen-ka/shizen/yasei/rdb/chizu.html 6

WebGISの基本構成イメージ 7

虎の穴　虎の穴　虎の穴　虎の穴 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

虎の穴　虎の穴　虎の穴　虎の穴 Copyright © 2019 Toranoana Inc. All Rights Reserved. Leafletを使ってみる
• 地図描画用のJavaScriptライブラリ(ちなみに地図ライブラリはどれも似通っています ) – メッシュ画像配信サーバーは別途存在する必要がある – 幸いなことにメッシュ画像配信サービスはいくつか存在する • 地理院地図(国土地理院) • OpenStreetMap(誰でも編集できるフリーの地図 ) 9 <html lang="ja"> <head> <link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/leaflet.css" integrity="割愛" crossorigin=""/> <link rel="stylesheet" href="app/css/main.css" crossorigin="" /> <script src="https://unpkg.com/[email protected]/dist/leaflet.js" integrity="割愛" crossorigin="" ></script> </head> <body>  <div id="mapid" /> <script src="app/js/main.js" crossorigin=""></script> </body> </html>

虎の穴　虎の穴　虎の穴　虎の穴 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の指定)

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

虎の穴　虎の穴　虎の穴　虎の穴 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

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

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

虎の穴ラボ株式会社

More Decks by 虎の穴ラボ株式会社

Other Decks in Technology

Featured

Transcript

虎の穴　虎の穴　虎の穴　虎の穴 Copyright © 2019 Toranoana Inc. All Rights Reserved. WebGISで遊ぼう(基礎編)

虎の穴　虎の穴　虎の穴　虎の穴 Copyright © 2019 Toranoana Inc. All Rights Reserved. 自己紹介

虎の穴　虎の穴　虎の穴　虎の穴 Copyright © 2019 Toranoana Inc. All Rights Reserved. アジェンダ

虎の穴　虎の穴　虎の穴　虎の穴 Copyright © 2019 Toranoana Inc. All Rights Reserved. GISの基礎

虎の穴　虎の穴　虎の穴　虎の穴 Copyright © 2019 Toranoana Inc. All Rights Reserved. GISの基礎

虎の穴　虎の穴　虎の穴　虎の穴 Copyright © 2019 Toranoana Inc. All Rights Reserved. GISの基礎

虎の穴　虎の穴　虎の穴　虎の穴 Copyright © 2019 Toranoana Inc. All Rights Reserved. GISの基礎

虎の穴　虎の穴　虎の穴　虎の穴 Copyright © 2019 Toranoana Inc. All Rights Reserved. 地図ライブラリを使ってみよう！

虎の穴　虎の穴　虎の穴　虎の穴 Copyright © 2019 Toranoana Inc. All Rights Reserved. Leafletを使ってみる

虎の穴　虎の穴　虎の穴　虎の穴 Copyright © 2019 Toranoana Inc. All Rights Reserved. Leafletを使ってみる

虎の穴　虎の穴　虎の穴　虎の穴 Copyright © 2019 Toranoana Inc. All Rights Reserved. マーカーを追加してみよう

虎の穴　虎の穴　虎の穴　虎の穴 Copyright © 2019 Toranoana Inc. All Rights Reserved. 背景地図の(複数)追加

虎の穴　虎の穴　虎の穴　虎の穴 Copyright © 2019 Toranoana Inc. All Rights Reserved. •