[jsdc 2015] turf.js - 地理資訊的分析與地圖視覺化
TRANSCRIPT
![Page 1: [JSDC 2015] Turf.js - 地理資訊的分析與地圖視覺化](https://reader038.vdocuments.site/reader038/viewer/2022102601/586fda3a1a28ab18428b5c7b/html5/thumbnails/1.jpg)
Turf.js地理資訊的分析與地圖視覺化
Kuro Hsu @ JSDC 2015
![Page 2: [JSDC 2015] Turf.js - 地理資訊的分析與地圖視覺化](https://reader038.vdocuments.site/reader038/viewer/2022102601/586fda3a1a28ab18428b5c7b/html5/thumbnails/2.jpg)
Kuro Hsu
前端工程師 @ 永慶房產集團
❤ HTML / CSS / JavaScript
❤ D3.js / GIS / Visualization
http://kuro.twkurotanshi [at] gmail.com
⾃自我介紹
![Page 3: [JSDC 2015] Turf.js - 地理資訊的分析與地圖視覺化](https://reader038.vdocuments.site/reader038/viewer/2022102601/586fda3a1a28ab18428b5c7b/html5/thumbnails/3.jpg)
地理空間的視覺化 ?
![Page 4: [JSDC 2015] Turf.js - 地理資訊的分析與地圖視覺化](https://reader038.vdocuments.site/reader038/viewer/2022102601/586fda3a1a28ab18428b5c7b/html5/thumbnails/4.jpg)
「利⽤用圖像視覺化 來呈現有意義的空間資訊」
![Page 5: [JSDC 2015] Turf.js - 地理資訊的分析與地圖視覺化](https://reader038.vdocuments.site/reader038/viewer/2022102601/586fda3a1a28ab18428b5c7b/html5/thumbnails/5.jpg)
地理空間統計與分析
• 空間統計是⽤用來描述地/物的地理特性
• 地物的分佈
• 群聚的位置
![Page 6: [JSDC 2015] Turf.js - 地理資訊的分析與地圖視覺化](https://reader038.vdocuments.site/reader038/viewer/2022102601/586fda3a1a28ab18428b5c7b/html5/thumbnails/6.jpg)
地理空間的資料模型
• 向量資料
• 點: 地點 / 位置• 線: 路徑 • ⾯面: 邊界 / 範圍
• 網格資料
![Page 7: [JSDC 2015] Turf.js - 地理資訊的分析與地圖視覺化](https://reader038.vdocuments.site/reader038/viewer/2022102601/586fda3a1a28ab18428b5c7b/html5/thumbnails/7.jpg)
空間資訊的視覺化
• 以地點位置為主題
• 點圖
• 航線圖
• 以地區統計為主題• 等值線圖
• 熱圖
![Page 8: [JSDC 2015] Turf.js - 地理資訊的分析與地圖視覺化](https://reader038.vdocuments.site/reader038/viewer/2022102601/586fda3a1a28ab18428b5c7b/html5/thumbnails/8.jpg)
空間資訊分析
• 地理空間分析的流程
• 擬定問題
• 資料探索
• ⽅方法選擇
• 統計計算
• 解釋結果
![Page 9: [JSDC 2015] Turf.js - 地理資訊的分析與地圖視覺化](https://reader038.vdocuments.site/reader038/viewer/2022102601/586fda3a1a28ab18428b5c7b/html5/thumbnails/9.jpg)
source: https://www.youtube.com/watch?t=6&v=TFakcRqGB4M
![Page 10: [JSDC 2015] Turf.js - 地理資訊的分析與地圖視覺化](https://reader038.vdocuments.site/reader038/viewer/2022102601/586fda3a1a28ab18428b5c7b/html5/thumbnails/10.jpg)
![Page 11: [JSDC 2015] Turf.js - 地理資訊的分析與地圖視覺化](https://reader038.vdocuments.site/reader038/viewer/2022102601/586fda3a1a28ab18428b5c7b/html5/thumbnails/11.jpg)
![Page 12: [JSDC 2015] Turf.js - 地理資訊的分析與地圖視覺化](https://reader038.vdocuments.site/reader038/viewer/2022102601/586fda3a1a28ab18428b5c7b/html5/thumbnails/12.jpg)
![Page 13: [JSDC 2015] Turf.js - 地理資訊的分析與地圖視覺化](https://reader038.vdocuments.site/reader038/viewer/2022102601/586fda3a1a28ab18428b5c7b/html5/thumbnails/13.jpg)
• 由 MapBox 開發
• 輕量且⾼高速的 Web-GIS JS Library
• 可在 Client 及 Server (node) 端執⾏行
• 提供各種 地理空間分析 API
• Open Source, MIT-licensed
• http://turfjs.org
![Page 14: [JSDC 2015] Turf.js - 地理資訊的分析與地圖視覺化](https://reader038.vdocuments.site/reader038/viewer/2022102601/586fda3a1a28ab18428b5c7b/html5/thumbnails/14.jpg)
Install turf.js
![Page 15: [JSDC 2015] Turf.js - 地理資訊的分析與地圖視覺化](https://reader038.vdocuments.site/reader038/viewer/2022102601/586fda3a1a28ab18428b5c7b/html5/thumbnails/15.jpg)
基礎知識
![Page 16: [JSDC 2015] Turf.js - 地理資訊的分析與地圖視覺化](https://reader038.vdocuments.site/reader038/viewer/2022102601/586fda3a1a28ab18428b5c7b/html5/thumbnails/16.jpg)
![Page 17: [JSDC 2015] Turf.js - 地理資訊的分析與地圖視覺化](https://reader038.vdocuments.site/reader038/viewer/2022102601/586fda3a1a28ab18428b5c7b/html5/thumbnails/17.jpg)
「給我⼀一個 Box」
// [座標A(lng, lat), 座標B(lng, lat)] var bbox = [0, 0, 10, 10]; var poly = turf.bboxPolygon(bbox);
![Page 18: [JSDC 2015] Turf.js - 地理資訊的分析與地圖視覺化](https://reader038.vdocuments.site/reader038/viewer/2022102601/586fda3a1a28ab18428b5c7b/html5/thumbnails/18.jpg)
「給我⼀一個 Box」
![Page 19: [JSDC 2015] Turf.js - 地理資訊的分析與地圖視覺化](https://reader038.vdocuments.site/reader038/viewer/2022102601/586fda3a1a28ab18428b5c7b/html5/thumbnails/19.jpg)
「給我⼀一個 Box」
![Page 20: [JSDC 2015] Turf.js - 地理資訊的分析與地圖視覺化](https://reader038.vdocuments.site/reader038/viewer/2022102601/586fda3a1a28ab18428b5c7b/html5/thumbnails/20.jpg)
「給我⼀一個 Box」
![Page 21: [JSDC 2015] Turf.js - 地理資訊的分析與地圖視覺化](https://reader038.vdocuments.site/reader038/viewer/2022102601/586fda3a1a28ab18428b5c7b/html5/thumbnails/21.jpg)
全都是 GeoJSON !
點
線
![Page 22: [JSDC 2015] Turf.js - 地理資訊的分析與地圖視覺化](https://reader038.vdocuments.site/reader038/viewer/2022102601/586fda3a1a28ab18428b5c7b/html5/thumbnails/22.jpg)
全都是 GeoJSON !
⾯面
![Page 23: [JSDC 2015] Turf.js - 地理資訊的分析與地圖視覺化](https://reader038.vdocuments.site/reader038/viewer/2022102601/586fda3a1a28ab18428b5c7b/html5/thumbnails/23.jpg)
全都是 GeoJSON !
複合型態(太⻑⾧長了下略)
![Page 24: [JSDC 2015] Turf.js - 地理資訊的分析與地圖視覺化](https://reader038.vdocuments.site/reader038/viewer/2022102601/586fda3a1a28ab18428b5c7b/html5/thumbnails/24.jpg)
GeoJSON
• Turf.js 以 GeoJSON 作為資料處理媒介
• 僅⽀支援 WGS84 格式座標
• 與多種主流電⼦子地圖平台相容
• 要注意經緯座標順序 (lng, lat)
• http://geojson.org/
![Page 25: [JSDC 2015] Turf.js - 地理資訊的分析與地圖視覺化](https://reader038.vdocuments.site/reader038/viewer/2022102601/586fda3a1a28ab18428b5c7b/html5/thumbnails/25.jpg)
Raw Data GeoJSON
Google Map / OpenStreetMap / leaflet …
![Page 26: [JSDC 2015] Turf.js - 地理資訊的分析與地圖視覺化](https://reader038.vdocuments.site/reader038/viewer/2022102601/586fda3a1a28ab18428b5c7b/html5/thumbnails/26.jpg)
「給我⼀一個 Box」
Mapbox Google Map Leaflet
![Page 27: [JSDC 2015] Turf.js - 地理資訊的分析與地圖視覺化](https://reader038.vdocuments.site/reader038/viewer/2022102601/586fda3a1a28ab18428b5c7b/html5/thumbnails/27.jpg)
將 GeoJson 送到地圖
![Page 28: [JSDC 2015] Turf.js - 地理資訊的分析與地圖視覺化](https://reader038.vdocuments.site/reader038/viewer/2022102601/586fda3a1a28ab18428b5c7b/html5/thumbnails/28.jpg)
![Page 29: [JSDC 2015] Turf.js - 地理資訊的分析與地圖視覺化](https://reader038.vdocuments.site/reader038/viewer/2022102601/586fda3a1a28ab18428b5c7b/html5/thumbnails/29.jpg)
Helpers
![Page 30: [JSDC 2015] Turf.js - 地理資訊的分析與地圖視覺化](https://reader038.vdocuments.site/reader038/viewer/2022102601/586fda3a1a28ab18428b5c7b/html5/thumbnails/30.jpg)
![Page 31: [JSDC 2015] Turf.js - 地理資訊的分析與地圖視覺化](https://reader038.vdocuments.site/reader038/viewer/2022102601/586fda3a1a28ab18428b5c7b/html5/thumbnails/31.jpg)
![Page 32: [JSDC 2015] Turf.js - 地理資訊的分析與地圖視覺化](https://reader038.vdocuments.site/reader038/viewer/2022102601/586fda3a1a28ab18428b5c7b/html5/thumbnails/32.jpg)
Data - 資料處理
![Page 33: [JSDC 2015] Turf.js - 地理資訊的分析與地圖視覺化](https://reader038.vdocuments.site/reader038/viewer/2022102601/586fda3a1a28ab18428b5c7b/html5/thumbnails/33.jpg)
![Page 34: [JSDC 2015] Turf.js - 地理資訊的分析與地圖視覺化](https://reader038.vdocuments.site/reader038/viewer/2022102601/586fda3a1a28ab18428b5c7b/html5/thumbnails/34.jpg)
![Page 35: [JSDC 2015] Turf.js - 地理資訊的分析與地圖視覺化](https://reader038.vdocuments.site/reader038/viewer/2022102601/586fda3a1a28ab18428b5c7b/html5/thumbnails/35.jpg)
![Page 36: [JSDC 2015] Turf.js - 地理資訊的分析與地圖視覺化](https://reader038.vdocuments.site/reader038/viewer/2022102601/586fda3a1a28ab18428b5c7b/html5/thumbnails/36.jpg)
aggregation - 集合與統計
![Page 37: [JSDC 2015] Turf.js - 地理資訊的分析與地圖視覺化](https://reader038.vdocuments.site/reader038/viewer/2022102601/586fda3a1a28ab18428b5c7b/html5/thumbnails/37.jpg)
![Page 38: [JSDC 2015] Turf.js - 地理資訊的分析與地圖視覺化](https://reader038.vdocuments.site/reader038/viewer/2022102601/586fda3a1a28ab18428b5c7b/html5/thumbnails/38.jpg)
![Page 39: [JSDC 2015] Turf.js - 地理資訊的分析與地圖視覺化](https://reader038.vdocuments.site/reader038/viewer/2022102601/586fda3a1a28ab18428b5c7b/html5/thumbnails/39.jpg)
![Page 40: [JSDC 2015] Turf.js - 地理資訊的分析與地圖視覺化](https://reader038.vdocuments.site/reader038/viewer/2022102601/586fda3a1a28ab18428b5c7b/html5/thumbnails/40.jpg)
![Page 41: [JSDC 2015] Turf.js - 地理資訊的分析與地圖視覺化](https://reader038.vdocuments.site/reader038/viewer/2022102601/586fda3a1a28ab18428b5c7b/html5/thumbnails/41.jpg)
![Page 42: [JSDC 2015] Turf.js - 地理資訊的分析與地圖視覺化](https://reader038.vdocuments.site/reader038/viewer/2022102601/586fda3a1a28ab18428b5c7b/html5/thumbnails/42.jpg)
DEMO - 台北市⾏行政區界圖
![Page 43: [JSDC 2015] Turf.js - 地理資訊的分析與地圖視覺化](https://reader038.vdocuments.site/reader038/viewer/2022102601/586fda3a1a28ab18428b5c7b/html5/thumbnails/43.jpg)
Measurement - 測量
![Page 44: [JSDC 2015] Turf.js - 地理資訊的分析與地圖視覺化](https://reader038.vdocuments.site/reader038/viewer/2022102601/586fda3a1a28ab18428b5c7b/html5/thumbnails/44.jpg)
![Page 45: [JSDC 2015] Turf.js - 地理資訊的分析與地圖視覺化](https://reader038.vdocuments.site/reader038/viewer/2022102601/586fda3a1a28ab18428b5c7b/html5/thumbnails/45.jpg)
![Page 46: [JSDC 2015] Turf.js - 地理資訊的分析與地圖視覺化](https://reader038.vdocuments.site/reader038/viewer/2022102601/586fda3a1a28ab18428b5c7b/html5/thumbnails/46.jpg)
![Page 47: [JSDC 2015] Turf.js - 地理資訊的分析與地圖視覺化](https://reader038.vdocuments.site/reader038/viewer/2022102601/586fda3a1a28ab18428b5c7b/html5/thumbnails/47.jpg)
![Page 48: [JSDC 2015] Turf.js - 地理資訊的分析與地圖視覺化](https://reader038.vdocuments.site/reader038/viewer/2022102601/586fda3a1a28ab18428b5c7b/html5/thumbnails/48.jpg)
![Page 49: [JSDC 2015] Turf.js - 地理資訊的分析與地圖視覺化](https://reader038.vdocuments.site/reader038/viewer/2022102601/586fda3a1a28ab18428b5c7b/html5/thumbnails/49.jpg)
![Page 50: [JSDC 2015] Turf.js - 地理資訊的分析與地圖視覺化](https://reader038.vdocuments.site/reader038/viewer/2022102601/586fda3a1a28ab18428b5c7b/html5/thumbnails/50.jpg)
DEMO - GPS 追蹤與街景
![Page 51: [JSDC 2015] Turf.js - 地理資訊的分析與地圖視覺化](https://reader038.vdocuments.site/reader038/viewer/2022102601/586fda3a1a28ab18428b5c7b/html5/thumbnails/51.jpg)
Transformation - 轉換
![Page 52: [JSDC 2015] Turf.js - 地理資訊的分析與地圖視覺化](https://reader038.vdocuments.site/reader038/viewer/2022102601/586fda3a1a28ab18428b5c7b/html5/thumbnails/52.jpg)
![Page 53: [JSDC 2015] Turf.js - 地理資訊的分析與地圖視覺化](https://reader038.vdocuments.site/reader038/viewer/2022102601/586fda3a1a28ab18428b5c7b/html5/thumbnails/53.jpg)
![Page 54: [JSDC 2015] Turf.js - 地理資訊的分析與地圖視覺化](https://reader038.vdocuments.site/reader038/viewer/2022102601/586fda3a1a28ab18428b5c7b/html5/thumbnails/54.jpg)
![Page 55: [JSDC 2015] Turf.js - 地理資訊的分析與地圖視覺化](https://reader038.vdocuments.site/reader038/viewer/2022102601/586fda3a1a28ab18428b5c7b/html5/thumbnails/55.jpg)
// turf.intersect var poly = turf.intersect(poly1, poly2);
![Page 56: [JSDC 2015] Turf.js - 地理資訊的分析與地圖視覺化](https://reader038.vdocuments.site/reader038/viewer/2022102601/586fda3a1a28ab18428b5c7b/html5/thumbnails/56.jpg)
![Page 57: [JSDC 2015] Turf.js - 地理資訊的分析與地圖視覺化](https://reader038.vdocuments.site/reader038/viewer/2022102601/586fda3a1a28ab18428b5c7b/html5/thumbnails/57.jpg)
DEMO - 找尋附近的 u-bike站點
![Page 58: [JSDC 2015] Turf.js - 地理資訊的分析與地圖視覺化](https://reader038.vdocuments.site/reader038/viewer/2022102601/586fda3a1a28ab18428b5c7b/html5/thumbnails/58.jpg)
Interpolation - 補間, 插值
![Page 59: [JSDC 2015] Turf.js - 地理資訊的分析與地圖視覺化](https://reader038.vdocuments.site/reader038/viewer/2022102601/586fda3a1a28ab18428b5c7b/html5/thumbnails/59.jpg)
![Page 60: [JSDC 2015] Turf.js - 地理資訊的分析與地圖視覺化](https://reader038.vdocuments.site/reader038/viewer/2022102601/586fda3a1a28ab18428b5c7b/html5/thumbnails/60.jpg)
![Page 61: [JSDC 2015] Turf.js - 地理資訊的分析與地圖視覺化](https://reader038.vdocuments.site/reader038/viewer/2022102601/586fda3a1a28ab18428b5c7b/html5/thumbnails/61.jpg)
![Page 62: [JSDC 2015] Turf.js - 地理資訊的分析與地圖視覺化](https://reader038.vdocuments.site/reader038/viewer/2022102601/586fda3a1a28ab18428b5c7b/html5/thumbnails/62.jpg)
![Page 63: [JSDC 2015] Turf.js - 地理資訊的分析與地圖視覺化](https://reader038.vdocuments.site/reader038/viewer/2022102601/586fda3a1a28ab18428b5c7b/html5/thumbnails/63.jpg)
DEMO - 台北市停⾞車場分佈
![Page 64: [JSDC 2015] Turf.js - 地理資訊的分析與地圖視覺化](https://reader038.vdocuments.site/reader038/viewer/2022102601/586fda3a1a28ab18428b5c7b/html5/thumbnails/64.jpg)
台北市降⾬雨淹⽔水模擬圖http://kurotanshi.github.io/TPEDisasterSummary/rain/rain_tp_map.html
![Page 65: [JSDC 2015] Turf.js - 地理資訊的分析與地圖視覺化](https://reader038.vdocuments.site/reader038/viewer/2022102601/586fda3a1a28ab18428b5c7b/html5/thumbnails/65.jpg)
sheethub - 台北市3D建築物 https://github.com/sheethub/tpe3d
http://sheethub.github.io/tpe3d/3dtaipei4347-2.html
![Page 67: [JSDC 2015] Turf.js - 地理資訊的分析與地圖視覺化](https://reader038.vdocuments.site/reader038/viewer/2022102601/586fda3a1a28ab18428b5c7b/html5/thumbnails/67.jpg)
https://www.mapbox.com/blog/heatmaps-and-grids-with-turf/
![Page 68: [JSDC 2015] Turf.js - 地理資訊的分析與地圖視覺化](https://reader038.vdocuments.site/reader038/viewer/2022102601/586fda3a1a28ab18428b5c7b/html5/thumbnails/68.jpg)
https://www.mapbox.com/blog/dc-bikeshare-revisited/
![Page 69: [JSDC 2015] Turf.js - 地理資訊的分析與地圖視覺化](https://reader038.vdocuments.site/reader038/viewer/2022102601/586fda3a1a28ab18428b5c7b/html5/thumbnails/69.jpg)
官⽅方 API ⽂文件是你的好朋友
![Page 70: [JSDC 2015] Turf.js - 地理資訊的分析與地圖視覺化](https://reader038.vdocuments.site/reader038/viewer/2022102601/586fda3a1a28ab18428b5c7b/html5/thumbnails/70.jpg)
Thanks!
Demos: https://github.com/kurotanshi/turfjs-examples
#認同請分享#我們在徵人