Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

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

7,579 views

Published on

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

Published in: Technology
  • Dating direct: ❤❤❤ http://bit.ly/2u6xbL5 ❤❤❤
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • Dating for everyone is here: ❶❶❶ http://bit.ly/2u6xbL5 ❶❶❶
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • DOWNLOAD THAT BOOKS INTO AVAILABLE FORMAT (2019 Update) ......................................................................................................................... ......................................................................................................................... Download Full PDF EBOOK here { https://urlzs.com/UABbn } ......................................................................................................................... Download Full EPUB Ebook here { https://urlzs.com/UABbn } ......................................................................................................................... Download Full doc Ebook here { https://urlzs.com/UABbn } ......................................................................................................................... Download PDF EBOOK here { https://urlzs.com/UABbn } ......................................................................................................................... Download EPUB Ebook here { https://urlzs.com/UABbn } ......................................................................................................................... Download doc Ebook here { https://urlzs.com/UABbn } ......................................................................................................................... ......................................................................................................................... ................................................................................................................................... eBook is an electronic version of a traditional print book that can be read by using a personal computer or by using an eBook reader. (An eBook reader can be a software application for use on a computer such as Microsoft's free Reader application, or a book-sized computer that is used solely as a reading device such as Nuvomedia's Rocket eBook.) Users can purchase an eBook on diskette or CD, but the most popular method of getting an eBook is to purchase a downloadable file of the eBook (or other reading material) from a Web site (such as Barnes and Noble) to be read from the user's computer or reading device. Generally, an eBook can be downloaded in five minutes or less ......................................................................................................................... .............. Browse by Genre Available eBooks .............................................................................................................................. Art, Biography, Business, Chick Lit, Children's, Christian, Classics, Comics, Contemporary, Cookbooks, Manga, Memoir, Music, Mystery, Non Fiction, Paranormal, Philosophy, Poetry, Psychology, Religion, Romance, Science, Science Fiction, Self Help, Suspense, Spirituality, Sports, Thriller, Travel, Young Adult, Crime, Ebooks, Fantasy, Fiction, Graphic Novels, Historical Fiction, History, Horror, Humor And Comedy, ......................................................................................................................... ......................................................................................................................... .....BEST SELLER FOR EBOOK RECOMMEND............................................................. ......................................................................................................................... Blowout: Corrupted Democracy, Rogue State Russia, and the Richest, Most Destructive Industry on Earth,-- The Ride of a Lifetime: Lessons Learned from 15 Years as CEO of the Walt Disney Company,-- Call Sign Chaos: Learning to Lead,-- StrengthsFinder 2.0,-- Stillness Is the Key,-- She Said: Breaking the Sexual Harassment Story That Helped Ignite a Movement,-- Atomic Habits: An Easy & Proven Way to Build Good Habits & Break Bad Ones,-- Everything Is Figureoutable,-- What It Takes: Lessons in the Pursuit of Excellence,-- Rich Dad Poor Dad: What the Rich Teach Their Kids About Money That the Poor and Middle Class Do Not!,-- The Total Money Makeover: Classic Edition: A Proven Plan for Financial Fitness,-- Shut Up and Listen!: Hard Business Truths that Will Help You Succeed, ......................................................................................................................... .........................................................................................................................
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here

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

×