Diese Präsentation wurde erfolgreich gemeldet.
Wir verwenden Ihre LinkedIn Profilangaben und Informationen zu Ihren Aktivitäten, um Anzeigen zu personalisieren und Ihnen relevantere Inhalte anzuzeigen. Sie können Ihre Anzeigeneinstellungen jederzeit ändern.

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

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

  • Loggen Sie sich ein, um Kommentare anzuzeigen.

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

  1. 1. Turf.js 地理資訊的分析與地圖視覺化 Kuro Hsu @ JSDC 2015
  2. 2. Kuro Hsu 前端工程師 @ 永慶房產集團 ❤ HTML / CSS / JavaScript ❤ D3.js / GIS / Visualization http://kuro.tw kurotanshi [at] gmail.com ⾃自我介紹
  3. 3. 地理空間的視覺化 ?
  4. 4. 「利⽤用圖像視覺化
 來呈現有意義的空間資訊」
  5. 5. 地理空間統計與分析 • 空間統計是⽤用來描述地/物的地理特性 • 地物的分佈 • 群聚的位置
  6. 6. 地理空間的資料模型 • 向量資料 • 點: 地點 / 位置 • 線: 路徑 • ⾯面: 邊界 / 範圍 • 網格資料
  7. 7. 空間資訊的視覺化 • 以地點位置為主題 • 點圖 • 航線圖 • 以地區統計為主題 • 等值線圖 • 熱圖
  8. 8. 空間資訊分析 • 地理空間分析的流程 • 擬定問題 • 資料探索 • ⽅方法選擇 • 統計計算 • 解釋結果
  9. 9. source: https://www.youtube.com/watch?t=6&v=TFakcRqGB4M
  10. 10. 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

  11. 11. • 由 MapBox 開發 • 輕量且⾼高速的 Web-GIS JS Library • 可在 Client 及 Server (node) 端執⾏行 • 提供各種 地理空間分析 API • Open Source, MIT-licensed • http://turfjs.org
  12. 12. Install turf.js
  13. 13. 基礎知識
  14. 14. 「給我⼀一個 Box」    //  [座標A(lng,  lat),  座標B(lng,  lat)]
    var  bbox  =  [0,  0,  10,  10];      var  poly  =  turf.bboxPolygon(bbox);

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

  33. 33. DEMO - 找尋附近的 u-bike站點
  34. 34. Interpolation - 補間, 插值
  35. 35. DEMO - 台北市停⾞車場分佈
  36. 36. 台北市降⾬雨淹⽔水模擬圖 http://kurotanshi.github.io/TPEDisasterSummary/rain/rain_tp_map.html
  37. 37. sheethub - 台北市3D建築物 https://github.com/sheethub/tpe3d http://sheethub.github.io/tpe3d/3dtaipei4347-2.html
  38. 38. https://www.mapbox.com/blog/mapbox-courier/
  39. 39. https://www.mapbox.com/blog/heatmaps-and-grids-with-turf/
  40. 40. https://www.mapbox.com/blog/dc-bikeshare-revisited/
  41. 41. 官⽅方 API ⽂文件是你的好朋友
  42. 42. Thanks! Demos: https://github.com/kurotanshi/turfjs-examples #認同請分享#我們在徵人

×