Diese Präsentation wurde erfolgreich gemeldet.
Wir verwenden Ihre LinkedIn Profilangaben und Informationen zu Ihren Aktivitäten, um Anzeigen zu personalisieren und Ihnen relevantere Inhalte anzuzeigen. Sie können Ihre Anzeigeneinstellungen jederzeit ändern.
JavaScript GIS ライブラリ
turf.js 入門
都筑総研
turf.jsとは
• 軽量・高速・オープンなWeb地図用のGISライブラリ
• 米国 MapBox社が開発・公開
• クライアント(Webブラウザ)、サーバ(Node.js等)
両方で実行可能
http://turfjs.org/static...
基本
• 取り扱うGISデータ・フォーマット
• GeoJSON形式
• 取り扱う形状
• 点:point
• 線:line
• 面:polygon
できる事:空間計測・関係
• 重心・中心点の算出 :Centroids and centers
• 集合・統計関数 :Aggregation & stastics functions
• バッファ分析:Buffer analysis
• TIN...
できる事:空間編集処理
• 簡略化:Simplify features
• 結合・併合:Union ・Merge
• 凹・凸包処理 :Concave & convex hulls
• 補間:Interpolation
• 矩形・六角形 グリッド...
導入方法
• Webに公開されたデータをリンクする
<script src='//api.tiles.mapbox.com/mapbox.js/plugins/turf/
v1.4.0/turf.min.js'></script>
そのまま貼り...
事例:2点間の距離
• 新宿駅と代々木駅の直線距離計算してみます
新宿
代々木
© OpenStreetMap contributors
処理内容
1. GeoJSON形式の地点(新宿・代々木)の作成
2. 距離計算単位の宣言
3. 距離計測関数による距離計算の実行
サンプルコード
https://github.com/tkama/turf_sample/blob/gh-page...
1.GeoJSONの作成
//新宿駅のGeoJSONデータ
var point1 = {
"type": "Feature",
"properties": {},
"geometry": {
"type": "Point",
"coordina...
2.距離計算単位の宣言
//単位を表現する文字列を変数に入力
var units = "kilometers"; //can be degrees, radians, miles, or kilometers
選択可能な単位
• 度:degre...
3.距離計算の実行
//距離計算 turf.distance( 地点1, 地点2, 計算単位 );
var distance = turf.distance( point1 , point2 , units );
//実行結果 0.635336...
事例2:バッファの作成
• 新宿駅を起点に半径500mの範囲(バッファ)を作成
500m
処理内容
1. GeoJSON形式の地点(新宿駅)の作成
2. 距離計算単位の宣言
3. バッファ作成関数 turf.bufferによる空間演算
サンプルコード
https://github.com/tkama/turf_sample/blob...
1.GeoJSONの作成
//新宿駅のGeoJSONデータ
var point1 = {
"type": "Feature",
"properties": {},
"geometry": {
"type": "Point",
"coordina...
2.距離計算単位の宣言
//単位を表現する文字列を変数に入力
var units = "meters";
選択可能な単位
• 度:degrees
• フィート : feet
• マイル : miles
• キロメートル : kilometers...
3.バッファの作成
//単位を表現する文字列を変数に入力
var buffered = turf.buffer( point1 , 500 , units );
//地図に追加

L.geoJson(buffered).addTo(map);
...
表示結果
© OpenStreetMap contributors
Nächste SlideShare
Wird geladen in …5
×

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

5.224 Aufrufe

Veröffentlicht am

turf.jsの簡単な説明です。
日本語の資料が少ないので作成してみました。

Veröffentlicht in: Software
  • If we are speaking about saving time and money this site ⇒ www.HelpWriting.net ⇐ is going to be the best option!! I personally used lots of times and remain highly satisfied.
       Antworten 
    Sind Sie sicher, dass Sie …  Ja  Nein
    Ihre Nachricht erscheint hier
  • Hello! I have searched hard to find a reliable and best research paper writing service and finally i got a good option for my needs as ⇒ www.WritePaper.info ⇐
       Antworten 
    Sind Sie sicher, dass Sie …  Ja  Nein
    Ihre Nachricht erscheint hier
  • Dating for everyone is here: ♥♥♥ http://bit.ly/2F7hN3u ♥♥♥
       Antworten 
    Sind Sie sicher, dass Sie …  Ja  Nein
    Ihre Nachricht erscheint hier
  • Sex in your area is here: ❶❶❶ http://bit.ly/2F7hN3u ❶❶❶
       Antworten 
    Sind Sie sicher, dass Sie …  Ja  Nein
    Ihre Nachricht erscheint hier

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

×