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
500
[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
640
[.NET Conf 2020 Taiwan] 以輕前端視角進入 Vue 3.0 的世界
kurotanshi
0
750
[MOPCON 2020] vite: Make web dev fast again
kurotanshi
0
2.4k
[ModernWeb'20] Vue.js :The Bad Parts
kurotanshi
1
130
[MOPCON 2019] Vue.js 3.0 與 Composition API 的變革
kurotanshi
1
1.3k
[JSDC2019] 我有一堆選擇 Vue 開發框架的理由
kurotanshi
1
780
[COSCUP 2019] 前端工程師的養成之路與開源工具
kurotanshi
3
420
初探 Vue 3.0 Function API
kurotanshi
4
3k
VueJS Style Guide 導讀
kurotanshi
6
1.8k
Other Decks in Technology
See All in Technology
「AI駆動PO」を考えてみる - 作る速さから価値のスループットへ:検査・適応で未来を開発 / AI-driven product owner. scrummat2025
yosuke_nagai
4
590
関係性が駆動するアジャイル──GPTに人格を与えたら、対話を通してふりかえりを習慣化できた話
mhlyc
0
130
自動テストのコストと向き合ってみた
qa
0
130
Azure Well-Architected Framework入門
tomokusaba
1
300
Trust as Infrastructure
bcantrill
0
340
LLMアプリケーション開発におけるセキュリティリスクと対策 / LLM Application Security
flatt_security
7
1.9k
Azure SynapseからAzure Databricksへ 移行してわかった新時代のコスト問題!?
databricksjapan
0
140
ACA でMAGI システムを社内で展開しようとした話
mappie_kochi
1
260
extension 現場で使えるXcodeショートカット一覧
ktombow
0
210
GC25 Recap+: Advancing Go Garbage Collection with Green Tea
logica0419
1
400
Escaping_the_Kraken_-_October_2025.pdf
mdalmijn
0
130
非エンジニアのあなたもできる&もうやってる!コンテキストエンジニアリング
findy_eventslides
3
910
Featured
See All Featured
Optimising Largest Contentful Paint
csswizardry
37
3.4k
Responsive Adventures: Dirty Tricks From The Dark Corners of Front-End
smashingmag
252
21k
Principles of Awesome APIs and How to Build Them.
keavy
127
17k
BBQ
matthewcrist
89
9.8k
Navigating Team Friction
lara
189
15k
Fantastic passwords and where to find them - at NoRuKo
philnash
52
3.4k
The Cult of Friendly URLs
andyhume
79
6.6k
Automating Front-end Workflow
addyosmani
1371
200k
Being A Developer After 40
akosma
91
590k
Embracing the Ebb and Flow
colly
88
4.8k
Testing 201, or: Great Expectations
jmmastey
45
7.7k
Producing Creativity
orderedlist
PRO
347
40k
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