javascript gis ライブラリ turf.js 入門
TRANSCRIPT
JavaScript GIS ライブラリ turf.js 入門
都筑総研
turf.jsとは• 軽量・高速・オープンなWeb地図用のGISライブラリ
• 米国 MapBox社が開発・公開
• クライアント（Webブラウザ）、サーバ（Node.js等）両方で実行可能
http://turfjs.org/static/docs/ドキュメントサイト
基本• 取り扱うGISデータ・フォーマット
• GeoJSON形式
• 取り扱う形状 • 点：point
• 線：line
• 面：polygon
できる事：空間計測・関係• 重心・中心点の算出 ：Centroids and centers
• 集合・統計関数 ：Aggregation & stastics functions
• バッファ分析：Buffer analysis
• TIN（不整三角形網）：Triangulated irregular networks
• クラスタリング：Data classification
• 距離計算：Distance calculations
（一部抜粋）
できる事：空間編集処理• 簡略化：Simplify features
• 結合・併合：Union ・Merge
• 凹・凸包処理 ：Concave & convex hulls
• 補間：Interpolation
• 矩形・六角形 グリッド出力：Grids・Hexagonal binning
• フィルタリング・選択：Filter / select by attribute
（一部抜粋）
導入方法• Webに公開されたデータをリンクする
<script src='//api.tiles.mapbox.com/mapbox.js/plugins/turf/v1.4.0/turf.min.js'></script>
そのまま貼り付け、ダウンロードして利用して下さい
事例：２点間の距離• 新宿駅と代々木駅の直線距離計算してみます
新宿
代々木
© OpenStreetMap contributors
処理内容1. GeoJSON形式の地点（新宿・代々木）の作成
2. 距離計算単位の宣言
3. 距離計測関数による距離計算の実行
サンプルコード https://github.com/tkama/turf_sample/blob/gh-pages/turf.distance.html
１．GeoJSONの作成//新宿駅のGeoJSONデータ var point1 = { "type": "Feature", "properties": {}, "geometry": { "type": "Point", "coordinates": [139.70058739185333,35.68956144849349] } }; //代々木駅のGeoJSONデータ var point2 = { "type": "Feature", "properties": {}, "geometry": { "type": "Point", "coordinates": [139.7020572423935,35.683975674120234] } };
２．距離計算単位の宣言//単位を表現する文字列を変数に入力 var units = "kilometers"; //can be degrees, radians, miles, or kilometers
選択可能な単位 • 度：degrees • ラジアン : radians • マイル : miles • キロメートル : kilometers
３．距離計算の実行//距離計算 turf.distance( 地点１, 地点２, 計算単位 ); var distance = turf.distance( point1 , point2 , units );
//実行結果 0.635336862243156
計算の結果 ２駅間の直線距離は 約６３５m
事例２：バッファの作成• 新宿駅を起点に半径５００mの範囲（バッファ）を作成
500m
処理内容1. GeoJSON形式の地点（新宿駅）の作成
2. 距離計算単位の宣言
3. バッファ作成関数 turf.bufferによる空間演算
サンプルコード https://github.com/tkama/turf_sample/blob/gh-pages/turf.buffer.html
１．GeoJSONの作成//新宿駅のGeoJSONデータ var point1 = { "type": "Feature", "properties": {}, "geometry": { "type": "Point", "coordinates": [139.70058739185333,35.68956144849349] } };
２．距離計算単位の宣言//単位を表現する文字列を変数に入力 var units = "meters";
選択可能な単位 • 度：degrees • フィート : feet • マイル : miles • キロメートル : kilometers • メートル : metrs
３．バッファの作成//単位を表現する文字列を変数に入力 var buffered = turf.buffer( point1 , 500 , units );
//地図に追加L.geoJson(buffered).addTo(map);
turf.buffer関数 • 第１引数：地物型 / 複合地物型（点、線、面、複合型） • 第２引数 : 数値型 半径 • 第３引数 : 文字列型 単位（'miles', 'feet', 'kilometers', 'meters', or 'degrees'）
• 戻り値：地物型 / 複合地物型（面）
表示結果
© OpenStreetMap contributors