[JSDC 2015] Turf.js - 地理資訊的分析與地圖視覺化
-
Upload
kuro-hsu -
Category
Technology
-
view
6.431 -
download
8
Transcript of [JSDC 2015] Turf.js - 地理資訊的分析與地圖視覺化
Turf.js地理資訊的分析與地圖視覺化
Kuro Hsu @ JSDC 2015
Kuro Hsu
前端工程師 @ 永慶房產集團
❤ HTML / CSS / JavaScript
❤ D3.js / GIS / Visualization
http://kuro.twkurotanshi [at] gmail.com
⾃自我介紹
地理空間的視覺化 ?
「利⽤用圖像視覺化 來呈現有意義的空間資訊」
地理空間統計與分析
• 空間統計是⽤用來描述地/物的地理特性
• 地物的分佈
• 群聚的位置
地理空間的資料模型
• 向量資料
• 點: 地點 / 位置• 線: 路徑 • ⾯面: 邊界 / 範圍
• 網格資料
空間資訊的視覺化
• 以地點位置為主題
• 點圖
• 航線圖
• 以地區統計為主題• 等值線圖
• 熱圖
空間資訊分析
• 地理空間分析的流程
• 擬定問題
• 資料探索
• ⽅方法選擇
• 統計計算
• 解釋結果
source: https://www.youtube.com/watch?t=6&v=TFakcRqGB4M
• 由 MapBox 開發
• 輕量且⾼高速的 Web-GIS JS Library
• 可在 Client 及 Server (node) 端執⾏行
• 提供各種 地理空間分析 API
• Open Source, MIT-licensed
• http://turfjs.org
Install turf.js
基礎知識
「給我⼀一個 Box」
// [座標A(lng, lat), 座標B(lng, lat)] var bbox = [0, 0, 10, 10]; var poly = turf.bboxPolygon(bbox);
「給我⼀一個 Box」
「給我⼀一個 Box」
「給我⼀一個 Box」
全都是 GeoJSON !
點
線
全都是 GeoJSON !
⾯面
全都是 GeoJSON !
複合型態(太⻑⾧長了下略)
GeoJSON
• Turf.js 以 GeoJSON 作為資料處理媒介
• 僅⽀支援 WGS84 格式座標
• 與多種主流電⼦子地圖平台相容
• 要注意經緯座標順序 (lng, lat)
• http://geojson.org/
Raw Data GeoJSON
Google Map / OpenStreetMap / leaflet …
「給我⼀一個 Box」
Mapbox Google Map Leaflet
將 GeoJson 送到地圖
Helpers
Data - 資料處理
aggregation - 集合與統計
DEMO - 台北市⾏行政區界圖
Measurement - 測量
DEMO - GPS 追蹤與街景
Transformation - 轉換
// turf.intersect var poly = turf.intersect(poly1, poly2);
DEMO - 找尋附近的 u-bike站點
Interpolation - 補間, 插值
DEMO - 台北市停⾞車場分佈
台北市降⾬雨淹⽔水模擬圖http://kurotanshi.github.io/TPEDisasterSummary/rain/rain_tp_map.html
sheethub - 台北市3D建築物 https://github.com/sheethub/tpe3d
http://sheethub.github.io/tpe3d/3dtaipei4347-2.html
https://www.mapbox.com/blog/mapbox-courier/
https://www.mapbox.com/blog/heatmaps-and-grids-with-turf/
https://www.mapbox.com/blog/dc-bikeshare-revisited/
官⽅方 API ⽂文件是你的好朋友
Thanks!
Demos: https://github.com/kurotanshi/turfjs-examples
#認同請分享#我們在徵人