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