Se ha denunciado esta presentación.
Se está descargando tu SlideShare. ×

JavaScript GIS ライブラリ turf.js 入門

Anuncio
Anuncio
Anuncio
Anuncio
Anuncio
Anuncio
Anuncio
Anuncio
Anuncio
Anuncio
Anuncio
Anuncio
Próximo SlideShare
Leaflet.js超入門
Leaflet.js超入門
Cargando en…3
×

Eche un vistazo a continuación

1 de 17 Anuncio
Anuncio

Más Contenido Relacionado

Similares a JavaScript GIS ライブラリ turf.js 入門 (20)

Más reciente (20)

Anuncio

JavaScript GIS ライブラリ turf.js 入門

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

×