Upgrade to Pro — share decks privately, control downloads, hide ads and more …

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

Avatar for 虎の穴ラボ株式会社 虎の穴ラボ株式会社
June 25, 2019
Technology
910
0

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

Avatar for 虎の穴ラボ株式会社

虎の穴ラボ株式会社

June 25, 2019

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

See All by 虎の穴ラボ株式会社
関西Ruby登壇資料
Avatar for 虎の穴ラボ株式会社 toranoana
0
25
Tailwind CSSとAtomic Designで実現する効率的な Web 開発の事例
Avatar for 虎の穴ラボ株式会社 toranoana
1
700
Denoについて、同人誌記事を出しました+update
Avatar for 虎の穴ラボ株式会社 toranoana
0
240
【虎の穴ラボ Tech Talk #2】プロンプトエンジニアリング
Avatar for 虎の穴ラボ株式会社 toranoana
0
160
20241121_[TechTalk#2]虎の穴ラボでのLLMについて取り組み紹介
Avatar for 虎の穴ラボ株式会社 toranoana
0
180
社内チャットへRAG導入した話（Tech Talk #2）
Avatar for 虎の穴ラボ株式会社 toranoana
0
250
Deno Deploy で Web Cache API を 使えるようになったので試した知見
Avatar for 虎の穴ラボ株式会社 toranoana
1
760
【虎の穴ラボ Tech Talk】虎の穴ラボTech Talk説明資料
Avatar for 虎の穴ラボ株式会社 toranoana
0
520
虎の穴ラボ Tech Talk_CDKでFargate環境構築
Avatar for 虎の穴ラボ株式会社 toranoana
1
690

Other Decks in Technology

See All in Technology
承認ゲートは何を守っているのか? AIエージェントの自律購入を実測した結果
Avatar for Yuuki Yamashita yama3133
1
100
AI駆動開発をチームに根付かせる - 「1行も書かない」チームがHarnessを育てた1年 -
Avatar for Ken'ichirou Kimura kenichirokimura
6
3.5k
どんな手を使っても絶対間に合わせるスケジューラ
Avatar for asari asari194617
0
1.5k
LLMアプリ、 雰囲気で運用してませんか？ 〜LLMOpsの現在地〜
Avatar for Takaaki Yayoi taka_aki
1
610
Guerilla InnerSource in enterprises, during the AI hype
Avatar for Oleg Nenashev onenashev
PRO
0
130
EUDIWの枠組みを出発点に民間エコシステムの在り方を考える（OAuth/OIDC Numa (Immersion) Workshop 2026）
Avatar for OpenID Foundation Japan oidfj
PRO
0
390
Introduction to Sansan Meishi Maker Development Engineer
Avatar for Sansan, Inc. sansan33
PRO
0
470
Cloudflare製品を活用した AIガバナンス実践入門 / AI governance with Cloudflare Service
Avatar for 株式会社DELTA delta_tech
1
140
マイナンバーカード本人確認の実装比較（OAuth/OIDC Numa (Immersion) Workshop 2026） / 20260825 numa-12
Avatar for OpenID Foundation Japan oidfj
PRO
0
390
サイボウズ 開発本部採用ピッチ / Cybozu Engineer Recruit
Avatar for Cybozu cybozuinsideout
PRO
12
86k
markdown-poster Introduction
Avatar for kazamori kazamori
0
440
Claude Teamプランの コスト最適化を考える
Avatar for ふくだ（fukuda ryu） rfdnxbro
2
850

Featured

See All Featured
技術選定の審美眼（2025年版） / Understanding the Spiral of Technologies 2025 edition
Avatar for Takuto WADA twada
PRO
120
120k
Making Projects Easy
Avatar for Brett Harned brettharned
120
6.7k
It's Worth the Effort
Avatar for 3n 3n
188
29k
A brief & incomplete history of 
UX Design for the World Wide Web: 1989–2019
Avatar for Jason CranfordTeague jct
2
490
RailsConf & Balkan Ruby 2019: The Past, Present, and Future of Rails at GitHub
Avatar for Eileen M. Uchitelle eileencodes
141
35k
Navigating Algorithm Shifts & AI Overviews - #SMXNext
Avatar for Aleyda Solis aleyda
1
1.6k
CoffeeScript is Beautiful & I Never Want to Write Plain JavaScript Again
Avatar for Sam Stephenson sstephenson
162
16k
Collaborative Software Design: How to facilitate domain modelling decisions
Avatar for Kenny Baas-Schwegler baasie
1
300
Code Reviewing Like a Champion
Avatar for maltzj maltzj
528
40k
Bioeconomy Workshop: Dr. Julius Ecuru, Opportunities for a Bioeconomy in West Africa
Avatar for AKADEMIYA2063 akademiya2063
PRO
1
310
StorybookのUI Testing Handbookを読んだ
Avatar for Shingo Yamazaki zakiyama
31
6.9k
Abbi's Birthday
Avatar for Violet Bock coloredviolet
3
9.6k

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/[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>

  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 まとめ