Se ha denunciado esta presentación.
Se está descargando tu SlideShare. ×

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

Anuncio
Anuncio
Anuncio
Anuncio
Anuncio
Anuncio
Anuncio
Anuncio
Anuncio
Anuncio
Anuncio
Anuncio
Cargando en…3
×

Eche un vistazo a continuación

1 de 70 Anuncio

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

Descargar para leer sin conexión

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

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

Anuncio
Anuncio

Más Contenido Relacionado

A los espectadores también les gustó (19)

Más reciente (20)

Anuncio

[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 #認同請分享#我們在徵人

×