[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

#認同請分享#我們在徵人