Turf.js 是一個快速，輕量且開源的 JavaScript GIS 引擎，透過 Turf.js 我們可以很輕易的計算並分析地理資訊，並且可以套用至任何支援 GeoJson 資料格式的地圖。 此場議程將為各位介紹如何透過 Turf.js 分析資訊，並快速產生可互動的資料地圖與視覺化。

1. Turf.js
地理資訊的分析與地圖視覺化
Kuro Hsu @ JSDC 2015

2. Kuro Hsu
前端工程師 @ 永慶房產集團
❤ HTML / CSS / JavaScript
❤ D3.js / GIS / Visualization
http://kuro.tw
kurotanshi [at] gmail.com
⾃自我介紹

3. 地理空間的視覺化 ?

4. 「利⽤用圖像視覺化
來呈現有意義的空間資訊」

5. 地理空間統計與分析
• 空間統計是⽤用來描述地/物的地理特性
• 地物的分佈
• 群聚的位置

6. 地理空間的資料模型
• 向量資料
• 點: 地點 / 位置
• 線: 路徑
• ⾯面: 邊界 / 範圍
• 網格資料

7. 空間資訊的視覺化
• 以地點位置為主題
• 點圖
• 航線圖
• 以地區統計為主題
• 等值線圖
• 熱圖

8. 空間資訊分析
• 地理空間分析的流程
• 擬定問題
• 資料探索
• ⽅方法選擇
• 統計計算
• 解釋結果

9. source: https://www.youtube.com/watch?t=6&v=TFakcRqGB4M

13. • 由 MapBox 開發
• 輕量且⾼高速的 Web-GIS JS Library
• 可在 Client 及 Server (node) 端執⾏行
• 提供各種 地理空間分析 API
• Open Source, MIT-licensed
• http://turfjs.org

14. Install turf.js

15. 基礎知識

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

18. 「給我⼀一個 Box」

19. 「給我⼀一個 Box」

20. 「給我⼀一個 Box」

21. 全都是 GeoJSON !
點
線

22. 全都是 GeoJSON !
⾯面

23. 全都是 GeoJSON !
複合型態
(太⻑⾧長了下略)

24. GeoJSON
• Turf.js 以 GeoJSON 作為資料處理媒介
• 僅⽀支援 WGS84 格式座標
• 與多種主流電⼦子地圖平台相容
• 要注意經緯座標順序 (lng, lat)
• http://geojson.org/

25. Raw Data GeoJSON
Google Map / OpenStreetMap / leaflet …

26. 「給我⼀一個 Box」
Mapbox Google Map Leaflet

27. 將 GeoJson 送到地圖

29. Helpers

32. Data - 資料處理

36. aggregation - 集合與統計

42. DEMO - 台北市⾏行政區界圖

43. Measurement - 測量

50. DEMO - GPS 追蹤與街景

51. Transformation - 轉換

55.
//
turf.intersect
var
poly
=
turf.intersect(poly1,
poly2);

57. DEMO - 找尋附近的 u-bike站點

58. Interpolation - 補間, 插值

63. DEMO - 台北市停⾞車場分佈

64. 台北市降⾬雨淹⽔水模擬圖
http://kurotanshi.github.io/TPEDisasterSummary/rain/rain_tp_map.html

65. sheethub - 台北市3D建築物
https://github.com/sheethub/tpe3d
http://sheethub.github.io/tpe3d/3dtaipei4347-2.html

66. https://www.mapbox.com/blog/mapbox-courier/

67. https://www.mapbox.com/blog/heatmaps-and-grids-with-turf/

68. https://www.mapbox.com/blog/dc-bikeshare-revisited/

69. 官⽅方 API ⽂文件是你的好朋友

70. Thanks!
Demos: https://github.com/kurotanshi/turfjs-examples
#認同請分享#我們在徵人