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

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

Sponsored · Ship Features Fearlessly Turn features on and off without deploys. Used by thousands of Ruby developers. →
Avatar for 虎の穴ラボ株式会社 虎の穴ラボ株式会社
June 25, 2019
Technology
890
0

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

Avatar for 虎の穴ラボ株式会社

虎の穴ラボ株式会社

June 25, 2019

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

See All by 虎の穴ラボ株式会社
Tailwind CSSとAtomic Designで実現する効率的な Web 開発の事例
Avatar for 虎の穴ラボ株式会社 toranoana
1
670
Denoについて、同人誌記事を出しました+update
Avatar for 虎の穴ラボ株式会社 toranoana
0
230
【虎の穴ラボ Tech Talk #2】プロンプトエンジニアリング
Avatar for 虎の穴ラボ株式会社 toranoana
0
160
20241121_[TechTalk#2]虎の穴ラボでのLLMについて取り組み紹介
Avatar for 虎の穴ラボ株式会社 toranoana
0
160
社内チャットへRAG導入した話（Tech Talk #2）
Avatar for 虎の穴ラボ株式会社 toranoana
0
230
Deno Deploy で Web Cache API を 使えるようになったので試した知見
Avatar for 虎の穴ラボ株式会社 toranoana
1
730
【虎の穴ラボ Tech Talk】虎の穴ラボTech Talk説明資料
Avatar for 虎の穴ラボ株式会社 toranoana
0
500
虎の穴ラボ Tech Talk_CDKでFargate環境構築
Avatar for 虎の穴ラボ株式会社 toranoana
1
560
虎の穴ラボスキルアップ支援制度の利用例
Avatar for 虎の穴ラボ株式会社 toranoana
0
11k

Other Decks in Technology

See All in Technology
FPC(フレキシブル)基板にZephyr実装してみた。
Avatar for misoji engineer iotengineer22
0
170
[チョークトーク資料]AWS DevOps Agent を使いこなす / AWS Dev Ops Agent Chalk Talk AWS Summit Japan 2026
Avatar for Masanori Yamaguchi kinunori
4
770
感情と身体を置き去りにしない、エンジニアの生きのこり方 ──いまから、ここから「自分の状態」を扱うという選択
Avatar for saori murooka saorimurooka
0
340
フィジカル版Github Onshapeの紹介
Avatar for shiba_8ro shiba_8ro
0
330
コミットの「なぜ」を読む
Avatar for Itaru Ota ota1022
0
120
Microsoft のサポートとフィードバック総まとめ
Avatar for Murachi Akira murachiakira
PRO
0
110
5分でわかる Amazon Connect_20260608
Avatar for hwangbyeonghun hwangbyeonghun
0
110
Deep Data Security 機能解説
Avatar for oracle4engineer oracle4engineer
PRO
2
170
事業会社における 機械学習・推薦システム技術の活用事例と必要な能力 / ml-recsys-in-layerx-wantedly-2026
Avatar for Yuya Matsumura yuya4
0
160
AIに障害切り分けを全部やってもらった。 。 。 。
Avatar for estie | エスティ estie
0
170
2026-06-24_人とAIの責務分離に基づく開発プロセスの提案.pdf
Avatar for matsui-dmm takahiromatsui
0
190
AWS Security Agent といっしょに脅威モデリングをやってみよう
Avatar for amarelo_n24 amarelo_n24
1
210

Featured

See All Featured
10 Git Anti Patterns You Should be Aware of
Avatar for Lemi Orhan Ergin lemiorhan
PRO
659
62k
Put a Button on it: Removing Barriers to Going Fast.
Avatar for kastner kastner
60
4.3k
Redefining SEO in the New Era of Traffic Generation
Avatar for Szymon Słowik szymonslowik
1
340
Beyond borders and beyond the search box: How to win the global "messy middle" with AI-driven SEO
Avatar for David Carrasco davidcarrasco
3
170
Scaling GitHub
Avatar for Zach Holman holman
464
140k
Designing Dashboards & Data Visualisations in Web Apps
Avatar for Des Traynor destraynor
231
55k
Let's Do A Bunch of Simple Stuff to Make Websites Faster
Avatar for Chris Coyier chriscoyier
508
140k
Connecting the Dots Between Site Speed, User Experience & Your Business [WebExpo 2025]
Avatar for Tammy Everts tammyeverts
11
950
Build The Right Thing And Hit Your Dates
Avatar for Maggie C. maggiecrowley
39
3.2k
The SEO Collaboration Effect
Avatar for Kristina Bergwall kristinabergwall1
1
490
Money Talks: Using Revenue to Get Sh*t Done
Avatar for Nikki Halliwell nikkihalliwell
0
260
The innovator’s Mindset - 
Leading Through an Era of Exponential Change - McGill University 2025
Avatar for Jean-Marc De Jonghe jdejongh
PRO
1
210

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