Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
[COSCUP 2015] Turf.js 地理資訊的視覺化分析
Search
Kuro Hsu
August 16, 2015
Technology
0
410
[COSCUP 2015] Turf.js 地理資訊的視覺化分析
Turf.js 地理資訊的視覺化分析
Kuro Hsu @ COSCUP 2015
2015/08/16
Kuro Hsu
August 16, 2015
Tweet
Share
More Decks by Kuro Hsu
See All by Kuro Hsu
Laravel x Vite
kurotanshi
0
590
[.NET Conf 2020 Taiwan] 以輕前端視角進入 Vue 3.0 的世界
kurotanshi
0
650
[MOPCON 2020] vite: Make web dev fast again
kurotanshi
0
2.3k
[ModernWeb'20] Vue.js :The Bad Parts
kurotanshi
1
85
[MOPCON 2019] Vue.js 3.0 與 Composition API 的變革
kurotanshi
1
1.2k
[JSDC2019] 我有一堆選擇 Vue 開發框架的理由
kurotanshi
1
690
[COSCUP 2019] 前端工程師的養成之路與開源工具
kurotanshi
3
380
初探 Vue 3.0 Function API
kurotanshi
4
2.9k
VueJS Style Guide 導讀
kurotanshi
6
1.7k
Other Decks in Technology
See All in Technology
楽しくGoを学び合う、LayerXの勉強会文化 / LayerX's study culture of having fun and learning Go together
ar_tama
2
350
[NIKKEI Tech Talk] KDDI/KAG Scrum & Community for Engineering Training
curanosuke
2
220
Classmethod流のPlatform Engineering / classmethod-platform-engineering-devio2024
tomoki10
0
480
AutomatedLabを使って内部ペンテストを勉強しよう! -やられ社内ネットワークの自動構築-
n_etupirka
1
610
AWSでRAGを作る法方
sonoda_mj
1
140
目標設定は好きですか? アジャイルとともに目標と向き合い続ける方法 / Do you like target Management?
kakehashi
10
3k
スレットハンティングについて知っておきたいこと
hacket
0
130
簡単に始めるSnowflakeの機械学習
nayuts
1
190
初中級者用如何使用backlog -VALE TUDOEDITION-
in0u
0
140
データベース研修 分析向けSQL入門【MIXI 24新卒技術研修】
mixi_engineers
PRO
0
110
エンジニア向け会社紹介資料
caddi_eng
14
230k
Flutter研修【MIXI 24新卒技術研修】
mixi_engineers
PRO
0
160
Featured
See All Featured
Six Lessons from altMBA
skipperchong
24
3.2k
We Have a Design System, Now What?
morganepeng
46
7k
Design and Strategy: How to Deal with People Who Don’t "Get" Design
morganepeng
121
18k
StorybookのUI Testing Handbookを読んだ
zakiyama
15
4.9k
The World Runs on Bad Software
bkeepers
PRO
63
11k
Reflections from 52 weeks, 52 projects
jeffersonlam
346
19k
Git: the NoSQL Database
bkeepers
PRO
423
64k
Robots, Beer and Maslow
schacon
PRO
157
8.1k
Raft: Consensus for Rubyists
vanstee
134
6.5k
What's new in Ruby 2.0
geeforr
338
31k
[Rails World 2023 - Day 1 Closing Keynote] - The Magic of Rails
eileencodes
17
1.5k
Optimising Largest Contentful Paint
csswizardry
18
2.6k
Transcript
Turf.js 地理資訊的分析與視覺化 Kuro Hsu @ COSCUP 2015
Kuro Hsu 前端工程師 @ 永慶房產集團 ❤ HTML / CSS /
JavaScript ❤ D3.js / GIS / Visualization http://kuro.tw kurotanshi [at] gmail.com ⾃自我介紹
地理空間的視覺化 ?
「利⽤用圖像視覺化 來呈現有意義的空間資訊」
地理空間統計與分析 • 空間統計是⽤用來描述地物的地理特性 • 地物的分佈 • 群聚的位置
地理空間的資料模型 • 向量資料 • 點: 地點 / 位置 • 線:
路徑 • ⾯面: 邊界 / 範圍 • 網格資料
空間資訊的視覺化 • 以地點位置為主題 • 點圖 • 航線圖 • 以地區統計為主題 •
等值線圖 • 等⾼高線圖 • 熱圖
空間資訊分析 • 地理空間分析的流程 • 擬定問題 • 資料探索 • ⽅方法選擇 •
統計計算 • 解釋結果
None
• 由 MapBox 開發 • 輕量且⾼高速的 Web-GIS JS Library •
可在 Client 端及 Server (node.js) 端執⾏行 • 提供各種地理空間分析 API • Open Source, MIT-licensed • http://turfjs.org
Install turf.js # npm $ npm install
turf # cdn //api.tiles.mapbox.com/mapbox.js/plugins/turf/v2.0.0/ turf.min.js
「給我⼀一個 Box」 // [座標A(lng, lat), 座標B(lng, lat)] var
bbox = [0, 0, 10, 10]; var poly = turf.bboxPolygon(bbox);
「給我⼀一個 Box」
全都是 GeoJSON ! 點 線
全都是 GeoJSON ! ⾯面
全都是 GeoJSON ! 複合型態 (太⻑⾧長了下略)
GeoJSON • Turf.js 以 GeoJSON 作為資料處理媒介 • 僅⽀支援 WGS84 格式座標
• 與多種主流電⼦子地圖平台相容 • 要注意經緯座標順序 (lng, lat) • http://geojson.org/
Raw Data GeoJSON Google Map / OpenStreetMap / leaflet …
「給我⼀一個 Box」 Mapbox Google Map Leaflet
將 GeoJson 送到地圖
Data - 資料處理
None
None
None
aggregation - 集合與統計
None
None
None
None
None
DEMO - 台北市⾏行政區界圖
Measurement - 測量
None
None
None
None
None
None
DEMO - GPS 追蹤與街景
Transformation - 轉換
None
⾼高雄氣爆範圍⽰示意
// turf.intersect var poly = turf.intersect(poly1, poly2);
None
DEMO - 找尋附近的 u-bike站點
Interpolation - 補間, 插值
None
None
None
DEMO - 台北市停⾞車場分佈
https://www.mapbox.com/blog/mapbox-courier/
https://www.mapbox.com/blog/chicago-crime-with-turf/
https://www.mapbox.com/blog/heatmaps-and-grids-with-turf/
官⽅方 API ⽂文件是你的好朋友
Thanks! Demos: https://github.com/kurotanshi/turfjs-examples