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
630
[.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
770
[COSCUP 2019] 前端工程師的養成之路與開源工具
kurotanshi
3
410
初探 Vue 3.0 Function API
kurotanshi
4
3k
VueJS Style Guide 導讀
kurotanshi
6
1.8k
Other Decks in Technology
See All in Technology
制約理論(ToC)入門
recruitengineers
PRO
2
260
Claude Code x Androidアプリ 開発
kgmyshin
1
570
退屈なことはDevinにやらせよう〜〜Devin APIを使ったVisual Regression Testの自動追加〜
kawamataryo
1
130
あとはAIに任せて人間は自由に生きる
kentaro
3
1.1k
そのコンポーネント、サーバー?クライアント?App Router開発のモヤモヤを可視化する補助輪
makotot
3
280
[CVPR2025論文読み会] Linguistics-aware Masked Image Modelingfor Self-supervised Scene Text Recognition
s_aiueo32
0
210
OpenAPIから画面生成に挑戦した話
koinunopochi
0
150
Oracle Base Database Service:サービス概要のご紹介
oracle4engineer
PRO
2
20k
LLMエージェント時代に適応した開発フロー
hiragram
1
410
ドキュメントはAIの味方!スタートアップのアジャイルを加速するADR
kawauso
3
340
ZOZOTOWNフロントエンドにおけるディレクトリの分割戦略
zozotech
PRO
16
5.2k
広島銀行におけるAWS活用の取り組みについて
masakimori
0
130
Featured
See All Featured
A better future with KSS
kneath
239
17k
The Cost Of JavaScript in 2023
addyosmani
53
8.8k
Building Flexible Design Systems
yeseniaperezcruz
328
39k
Designing Dashboards & Data Visualisations in Web Apps
destraynor
231
53k
Bootstrapping a Software Product
garrettdimon
PRO
307
110k
[Rails World 2023 - Day 1 Closing Keynote] - The Magic of Rails
eileencodes
36
2.5k
Visualizing Your Data: Incorporating Mongo into Loggly Infrastructure
mongodb
48
9.6k
Writing Fast Ruby
sferik
628
62k
Refactoring Trust on Your Teams (GOTO; Chicago 2020)
rmw
34
3.1k
Unsuck your backbone
ammeep
671
58k
BBQ
matthewcrist
89
9.8k
KATA
mclloyd
32
14k
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