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
510
[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
140
[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
AWSが好きすぎて、41歳でエンジニアになり、AAIを経由してAWSパートナー企業に入った話
yama3133
1
140
だいたい分かった気になる 『SREの知識地図』 / introduction-to-sre-knowledge-map-book
katsuhisa91
PRO
3
1.5k
OTEPsで知るOpenTelemetryの未来 / Observability Conference Tokyo 2025
arthur1
0
310
スタートアップの現場で実践しているテストマネジメント #jasst_kyushu
makky_tyuyan
0
140
プロダクト開発と社内データ活用での、BI×AIの現在地 / Data_Findy
sansan_randd
1
590
JSConf JPのwebsiteをGatsbyからNext.jsに移行した話 - Next.jsの多言語静的サイトと課題
leko
2
190
re:Invent 2025の見どころと便利アイテムをご紹介 / Highlights and Useful Items for re:Invent 2025
yuj1osm
0
280
GPUをつかってベクトル検索を扱う手法のお話し~NVIDIA cuVSとCAGRA~
fshuhe
0
140
書籍『実践 Apache Iceberg』の歩き方
ishikawa_satoru
0
190
Behind Postgres 18: The People, the Code, & the Invisible Work | Claire Giordano | PGConfEU 2025
clairegiordano
0
150
RemoteFunctionを使ったコロケーション
mkazutaka
1
130
CNCFの視点で捉えるPlatform Engineering - 最新動向と展望 / Platform Engineering from the CNCF Perspective
hhiroshell
0
140
Featured
See All Featured
10 Git Anti Patterns You Should be Aware of
lemiorhan
PRO
658
61k
The Cost Of JavaScript in 2023
addyosmani
55
9.1k
The Pragmatic Product Professional
lauravandoore
36
7k
Imperfection Machines: The Place of Print at Facebook
scottboms
269
13k
Making the Leap to Tech Lead
cromwellryan
135
9.6k
"I'm Feeling Lucky" - Building Great Search Experiences for Today's Users (#IAC19)
danielanewman
230
22k
Leading Effective Engineering Teams in the AI Era
addyosmani
7
650
Java REST API Framework Comparison - PWX 2021
mraible
34
8.9k
Speed Design
sergeychernyshev
32
1.2k
How Fast Is Fast Enough? [PerfNow 2025]
tammyeverts
2
96
GitHub's CSS Performance
jonrohan
1032
470k
Embracing the Ebb and Flow
colly
88
4.9k
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