[COSCUP 2015] Turf.js 地理資訊的視覺化分析

Turf.js 地理資訊的視覺化分析
Kuro Hsu @ COSCUP 2015
2015/08/16

Transcript

1. Turf.js 地理資訊的分析與視覺化 Kuro Hsu @ COSCUP 2015
2. Kuro Hsu 前端工程師 @ 永慶房產集團 ❤ HTML / CSS / JavaScript ❤ D3.js / GIS / Visualization http://kuro.tw kurotanshi [at] gmail.com ⾃自我介紹
3. 地理空間的視覺化 ?
4. 「利⽤用圖像視覺化
 來呈現有意義的空間資訊」
5. 地理空間統計與分析 • 空間統計是⽤用來描述地物的地理特性 • 地物的分佈 • 群聚的位置
6. 地理空間的資料模型 • 向量資料 • 點: 地點 / 位置 • 線: 路徑 • ⾯面: 邊界 / 範圍 • 網格資料
7. 空間資訊的視覺化 • 以地點位置為主題 • 點圖 • 航線圖 • 以地區統計為主題 • 等值線圖 • 等⾼高線圖 • 熱圖
8. 空間資訊分析 • 地理空間分析的流程 • 擬定問題 • 資料探索 • ⽅方法選擇 • 統計計算 • 解釋結果
10. • 由 MapBox 開發 • 輕量且⾼高速的 Web-GIS JS Library • 可在 Client 端及 Server (node.js) 端執⾏行 • 提供各種地理空間分析 API • Open Source, MIT-licensed • http://turfjs.org
11. Install turf.js 
    #  npm
    $  npm  install  turf  
    #  cdn
    //api.tiles.mapbox.com/mapbox.js/plugins/turf/v2.0.0/ turf.min.js  

12. 「給我⼀一個 Box」    //  [座標A(lng,  lat),  座標B(lng,  lat)]
    var  bbox  =  [0,  0,  10,  10];      var  poly  =  turf.bboxPolygon(bbox);

13. 「給我⼀一個 Box」
14. 全都是 GeoJSON ! 點 線
15. 全都是 GeoJSON ! ⾯面
16. 全都是 GeoJSON ! 複合型態
 (太⻑⾧長了下略)
17. GeoJSON • Turf.js 以 GeoJSON 作為資料處理媒介 • 僅⽀支援 WGS84 格式座標 • 與多種主流電⼦子地圖平台相容 • 要注意經緯座標順序 (lng, lat) • http://geojson.org/
18. Raw Data GeoJSON Google Map / OpenStreetMap / leaflet …
19. 「給我⼀一個 Box」 Mapbox Google Map Leaflet
20. 將 GeoJson 送到地圖
21. Data - 資料處理
25. aggregation - 集合與統計
31. DEMO - 台北市⾏行政區界圖
32. Measurement - 測量
39. DEMO - GPS 追蹤與街景
40. Transformation - 轉換
42. ⾼高雄氣爆範圍⽰示意
43.    //  turf.intersect
    var  poly  =  turf.intersect(poly1,  poly2);

45. DEMO - 找尋附近的 u-bike站點
46. Interpolation - 補間, 插值
50. DEMO - 台北市停⾞車場分佈
51. https://www.mapbox.com/blog/mapbox-courier/
52. https://www.mapbox.com/blog/chicago-crime-with-turf/
53. https://www.mapbox.com/blog/heatmaps-and-grids-with-turf/
54. 官⽅方 API ⽂文件是你的好朋友
55. Thanks! Demos: https://github.com/kurotanshi/turfjs-examples