[JSDC 2015] Turf.js - 地理資訊的分析與地圖視覺化

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
" O?

3. ^????S ?

4. ???o?N??S

??????{˾?

5. ^??SRW
•??So??^/?^!
•^?R&
•???]

6. ^??{vcO
•??{v
•}: ^} / ?]
•?: b?
•?: ?? / ?
•?{v

7. ??{???S
•W^}?]&??
•}?
•???
•W^?S&??
•????
•t?

8. ??{?RW
•^??RW8
•c?\?
•{ve
•???H
•S?
•???

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

10. &Ñ

u

0ã

Ie

?

8z

sQ
3Ô



Ie

]R

‚Ì
cÞ

PG

"A

"ò

'


&œ

5_

'


4ò

5k

5!

9ê

?

8z
cÞ

8

* 

c„

[Â

!g

s3

13. •? MapBox gc
•??<?M Web-GIS JS Library
•; Client ? Server (node) 8??
•N?h? ^??RW API
•Open Source, MIT-licensed
•http://turfjs.org

14. Install turf.js

15. ???9

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 !
?OP

(??*?)

24. GeoJSON
•Turf.js W GeoJSON ?&{vd O
•P6? WGS84 ??
• ??8?T^??D
•i???? (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 - {v

36. aggregation - ??S

42. DEMO - D$????

43. Measurement - ?

50. DEMO - GPS ??Ib

51. Transformation - ??

55. !!//!turf.intersect

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


57. DEMO - ?ڐ? u-bike?}

58. Interpolation - ??, ??

63. DEMO - D$??@R&

64. D$0???cc?
http://kurotanshi.github.io/TPEDisasterSummary/rain/rain_tp_map.html

65. sheethub - D$3D?d?
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 ?k7?

70. Thanks!
Demos: https://github.com/kurotanshi/turfjs-examples
©±.¢A¯D[