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
430
[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
600
[.NET Conf 2020 Taiwan] 以輕前端視角進入 Vue 3.0 的世界
kurotanshi
0
660
[MOPCON 2020] vite: Make web dev fast again
kurotanshi
0
2.3k
[ModernWeb'20] Vue.js :The Bad Parts
kurotanshi
1
90
[MOPCON 2019] Vue.js 3.0 與 Composition API 的變革
kurotanshi
1
1.2k
[JSDC2019] 我有一堆選擇 Vue 開發框架的理由
kurotanshi
1
700
[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
なにもしてないのにNew Relicのデータ転送量が増えていたときに確認したこと
tk3fftk
2
230
「自動テストのプラクティスを効果的に学ぶためのカードゲーム」 ( #sqip2024 )
teyamagu
PRO
2
180
eBPFのこれまでとこれから
yutarohayakawa
10
3.2k
Developer Experienceを向上させる基盤づくりの取り組み事例集
coconala_engineer
0
150
サーバー管理しないサーバーサービスManaged DevOps Pool
kkamegawa
0
130
Classmethod AI Talks(CATs) #1 司会進行スライド(2024.09.19) / classmethod-ai-talks-aka-cats_moderator-slides_vol1_2024-09-19
shinyaa31
0
110
内製化を目指す事業会社が、システム開発会社と共に進める「開発生産性改善」の取り組み事例 #devsumi
yuwji
0
100
実務における脅威モデリングを考えよう
nikinusu
0
630
より快適なエラーログ監視を目指して
leveragestech
4
1.4k
フルカイテン株式会社 採用資料
fullkaiten
0
32k
DevRelの始め方
moongift
PRO
1
390
プログラム検証入門
riru
6
870
Featured
See All Featured
Practical Orchestrator
shlominoach
185
10k
[RailsConf 2023 Opening Keynote] The Magic of Rails
eileencodes
28
8.9k
Designing Experiences People Love
moore
138
23k
How to Create Impact in a Changing Tech Landscape [PerfNow 2023]
tammyeverts
43
2k
Writing Fast Ruby
sferik
623
60k
The Art of Programming - Codeland 2020
erikaheidi
48
13k
Docker and Python
trallard
39
3k
The World Runs on Bad Software
bkeepers
PRO
64
11k
GraphQLとの向き合い方2022年版
quramy
43
13k
Making Projects Easy
brettharned
113
5.8k
Building Your Own Lightsaber
phodgson
101
6k
Agile that works and the tools we love
rasmusluckow
327
20k
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