Link
Embed
Share
Beginning
This slide
Copy link URL
Copy link URL
Copy iframe embed code
Copy iframe embed code
Copy javascript embed code
Copy javascript embed code
Share
Tweet
Share
Tweet
Slide 1
Slide 1 text
Turf.js 地理資訊的分析與視覺化 Kuro Hsu @ COSCUP 2015
Slide 2
Slide 2 text
Kuro Hsu 前端工程師 @ 永慶房產集團 ❤ HTML / CSS / JavaScript ❤ D3.js / GIS / Visualization http://kuro.tw kurotanshi [at] gmail.com ⾃自我介紹
Slide 3
Slide 3 text
地理空間的視覺化 ?
Slide 4
Slide 4 text
「利⽤用圖像視覺化 來呈現有意義的空間資訊」
Slide 5
Slide 5 text
地理空間統計與分析 • 空間統計是⽤用來描述地物的地理特性 • 地物的分佈 • 群聚的位置
Slide 6
Slide 6 text
地理空間的資料模型 • 向量資料 • 點: 地點 / 位置 • 線: 路徑 • ⾯面: 邊界 / 範圍 • 網格資料
Slide 7
Slide 7 text
空間資訊的視覺化 • 以地點位置為主題 • 點圖 • 航線圖 • 以地區統計為主題 • 等值線圖 • 等⾼高線圖 • 熱圖
Slide 8
Slide 8 text
空間資訊分析 • 地理空間分析的流程 • 擬定問題 • 資料探索 • ⽅方法選擇 • 統計計算 • 解釋結果
Slide 9
Slide 9 text
No content
Slide 10
Slide 10 text
• 由 MapBox 開發 • 輕量且⾼高速的 Web-GIS JS Library • 可在 Client 端及 Server (node.js) 端執⾏行 • 提供各種地理空間分析 API • Open Source, MIT-licensed • http://turfjs.org
Slide 11
Slide 11 text
Install turf.js # npm $ npm install turf # cdn //api.tiles.mapbox.com/mapbox.js/plugins/turf/v2.0.0/ turf.min.js
Slide 12
Slide 12 text
「給我⼀一個 Box」 // [座標A(lng, lat), 座標B(lng, lat)] var bbox = [0, 0, 10, 10]; var poly = turf.bboxPolygon(bbox);
Slide 13
Slide 13 text
「給我⼀一個 Box」
Slide 14
Slide 14 text
全都是 GeoJSON ! 點 線
Slide 15
Slide 15 text
全都是 GeoJSON ! ⾯面
Slide 16
Slide 16 text
全都是 GeoJSON ! 複合型態 (太⻑⾧長了下略)
Slide 17
Slide 17 text
GeoJSON • Turf.js 以 GeoJSON 作為資料處理媒介 • 僅⽀支援 WGS84 格式座標 • 與多種主流電⼦子地圖平台相容 • 要注意經緯座標順序 (lng, lat) • http://geojson.org/
Slide 18
Slide 18 text
Raw Data GeoJSON Google Map / OpenStreetMap / leaflet …
Slide 19
Slide 19 text
「給我⼀一個 Box」 Mapbox Google Map Leaflet
Slide 20
Slide 20 text
將 GeoJson 送到地圖
Slide 21
Slide 21 text
Data - 資料處理
Slide 22
Slide 22 text
No content
Slide 23
Slide 23 text
No content
Slide 24
Slide 24 text
No content
Slide 25
Slide 25 text
aggregation - 集合與統計
Slide 26
Slide 26 text
No content
Slide 27
Slide 27 text
No content
Slide 28
Slide 28 text
No content
Slide 29
Slide 29 text
No content
Slide 30
Slide 30 text
No content
Slide 31
Slide 31 text
DEMO - 台北市⾏行政區界圖
Slide 32
Slide 32 text
Measurement - 測量
Slide 33
Slide 33 text
No content
Slide 34
Slide 34 text
No content
Slide 35
Slide 35 text
No content
Slide 36
Slide 36 text
No content
Slide 37
Slide 37 text
No content
Slide 38
Slide 38 text
No content
Slide 39
Slide 39 text
DEMO - GPS 追蹤與街景
Slide 40
Slide 40 text
Transformation - 轉換
Slide 41
Slide 41 text
No content
Slide 42
Slide 42 text
⾼高雄氣爆範圍⽰示意
Slide 43
Slide 43 text
// turf.intersect var poly = turf.intersect(poly1, poly2);
Slide 44
Slide 44 text
No content
Slide 45
Slide 45 text
DEMO - 找尋附近的 u-bike站點
Slide 46
Slide 46 text
Interpolation - 補間, 插值
Slide 47
Slide 47 text
No content
Slide 48
Slide 48 text
No content
Slide 49
Slide 49 text
No content
Slide 50
Slide 50 text
DEMO - 台北市停⾞車場分佈
Slide 51
Slide 51 text
https://www.mapbox.com/blog/mapbox-courier/
Slide 52
Slide 52 text
https://www.mapbox.com/blog/chicago-crime-with-turf/
Slide 53
Slide 53 text
https://www.mapbox.com/blog/heatmaps-and-grids-with-turf/
Slide 54
Slide 54 text
官⽅方 API ⽂文件是你的好朋友
Slide 55
Slide 55 text
Thanks! Demos: https://github.com/kurotanshi/turfjs-examples