SlideShare a Scribd company logo
1 of 17
Download to read offline
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>
そのまま貼り付け、ダウンロードして利用して下さい
事例:2点間の距離
• 新宿駅と代々木駅の直線距離計算してみます
新宿
代々木
© OpenStreetMap contributors
処理内容
1. GeoJSON形式の地点(新宿・代々木)の作成
2. 距離計算単位の宣言
3. 距離計測関数による距離計算の実行
サンプルコード
https://github.com/tkama/turf_sample/blob/gh-pages/turf.distance.html
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]
}
};
2.距離計算単位の宣言
//単位を表現する文字列を変数に入力
var units = "kilometers"; //can be degrees, radians, miles, or kilometers
選択可能な単位
• 度:degrees
• ラジアン : radians
• マイル : miles
• キロメートル : kilometers
3.距離計算の実行
//距離計算 turf.distance( 地点1, 地点2, 計算単位 );
var distance = turf.distance( point1 , point2 , units );
//実行結果 0.635336862243156
計算の結果 2駅間の直線距離は 約635m
事例2:バッファの作成
• 新宿駅を起点に半径500mの範囲(バッファ)を作成
500m
処理内容
1. GeoJSON形式の地点(新宿駅)の作成
2. 距離計算単位の宣言
3. バッファ作成関数 turf.bufferによる空間演算
サンプルコード
https://github.com/tkama/turf_sample/blob/gh-pages/turf.buffer.html
1.GeoJSONの作成
//新宿駅のGeoJSONデータ
var point1 = {
"type": "Feature",
"properties": {},
"geometry": {
"type": "Point",
"coordinates": [139.70058739185333,35.68956144849349]
}
};
2.距離計算単位の宣言
//単位を表現する文字列を変数に入力
var units = "meters";
選択可能な単位
• 度:degrees
• フィート : feet
• マイル : miles
• キロメートル : kilometers
• メートル : metrs
3.バッファの作成
//単位を表現する文字列を変数に入力
var buffered = turf.buffer( point1 , 500 , units );
//地図に追加

L.geoJson(buffered).addTo(map);
turf.buffer関数
• 第1引数:地物型 / 複合地物型(点、線、面、複合型)
• 第2引数 : 数値型 半径
• 第3引数 : 文字列型 単位('miles', 'feet', 'kilometers', 'meters', or 'degrees')
• 戻り値:地物型 / 複合地物型(面)
表示結果
© OpenStreetMap contributors

More Related Content

What's hot

SQLアンチパターン 幻の第26章「とりあえず削除フラグ」
SQLアンチパターン 幻の第26章「とりあえず削除フラグ」SQLアンチパターン 幻の第26章「とりあえず削除フラグ」
SQLアンチパターン 幻の第26章「とりあえず削除フラグ」Takuto Wada
 
オントロジーとは?
オントロジーとは?オントロジーとは?
オントロジーとは?Kouji Kozaki
 
PostgreSQLをKubernetes上で活用するためのOperator紹介!(Cloud Native Database Meetup #3 発表資料)
PostgreSQLをKubernetes上で活用するためのOperator紹介!(Cloud Native Database Meetup #3 発表資料)PostgreSQLをKubernetes上で活用するためのOperator紹介!(Cloud Native Database Meetup #3 発表資料)
PostgreSQLをKubernetes上で活用するためのOperator紹介!(Cloud Native Database Meetup #3 発表資料)NTT DATA Technology & Innovation
 
Azure Database for PostgreSQL 入門 (PostgreSQL Conference Japan 2021)
Azure Database for PostgreSQL 入門 (PostgreSQL Conference Japan 2021)Azure Database for PostgreSQL 入門 (PostgreSQL Conference Japan 2021)
Azure Database for PostgreSQL 入門 (PostgreSQL Conference Japan 2021)Keisuke Takahashi
 
Cesiumを動かしてみよう
Cesiumを動かしてみようCesiumを動かしてみよう
Cesiumを動かしてみようKazutaka ishizaki
 
脱RESTful API設計の提案
脱RESTful API設計の提案脱RESTful API設計の提案
脱RESTful API設計の提案樽八 仲川
 
「関心の分離」と「疎結合」 ソフトウェアアーキテクチャのひとかけら
「関心の分離」と「疎結合」   ソフトウェアアーキテクチャのひとかけら「関心の分離」と「疎結合」   ソフトウェアアーキテクチャのひとかけら
「関心の分離」と「疎結合」 ソフトウェアアーキテクチャのひとかけらAtsushi Nakamura
 
ドメイン駆動設計の正しい歩き方
ドメイン駆動設計の正しい歩き方ドメイン駆動設計の正しい歩き方
ドメイン駆動設計の正しい歩き方増田 亨
 
DDD x CQRS 更新系と参照系で異なるORMを併用して上手くいった話
DDD x CQRS   更新系と参照系で異なるORMを併用して上手くいった話DDD x CQRS   更新系と参照系で異なるORMを併用して上手くいった話
DDD x CQRS 更新系と参照系で異なるORMを併用して上手くいった話Koichiro Matsuoka
 
ソーシャルゲームのためのデータベース設計
ソーシャルゲームのためのデータベース設計ソーシャルゲームのためのデータベース設計
ソーシャルゲームのためのデータベース設計Yoshinori Matsunobu
 
単なるキャッシュじゃないよ!?infinispanの紹介
単なるキャッシュじゃないよ!?infinispanの紹介単なるキャッシュじゃないよ!?infinispanの紹介
単なるキャッシュじゃないよ!?infinispanの紹介AdvancedTechNight
 
ナレッジグラフとオントロジー
ナレッジグラフとオントロジーナレッジグラフとオントロジー
ナレッジグラフとオントロジーUniversity of Tsukuba
 
GeoPackageを使ってみた(おざき様)
GeoPackageを使ってみた(おざき様)GeoPackageを使ってみた(おざき様)
GeoPackageを使ってみた(おざき様)OSgeo Japan
 
よく聞くけど、「SharePoint リストの 5,000 件問題」ってなんなの?
よく聞くけど、「SharePoint リストの 5,000 件問題」ってなんなの?よく聞くけど、「SharePoint リストの 5,000 件問題」ってなんなの?
よく聞くけど、「SharePoint リストの 5,000 件問題」ってなんなの?Hirofumi Ota
 
オープンソースで構築するWebメタバース ~Mozilla Hubsで学ぶUX開発から運用コスト最小化まで #CEDEC2022
オープンソースで構築するWebメタバース ~Mozilla Hubsで学ぶUX開発から運用コスト最小化まで #CEDEC2022オープンソースで構築するWebメタバース ~Mozilla Hubsで学ぶUX開発から運用コスト最小化まで #CEDEC2022
オープンソースで構築するWebメタバース ~Mozilla Hubsで学ぶUX開発から運用コスト最小化まで #CEDEC2022GREE VR Studio Lab
 
組織にテストを書く文化を根付かせる戦略と戦術
組織にテストを書く文化を根付かせる戦略と戦術組織にテストを書く文化を根付かせる戦略と戦術
組織にテストを書く文化を根付かせる戦略と戦術Takuto Wada
 
Dockerからcontainerdへの移行
Dockerからcontainerdへの移行Dockerからcontainerdへの移行
Dockerからcontainerdへの移行Akihiro Suda
 
O/Rマッパーによるトラブルを未然に防ぐ
O/Rマッパーによるトラブルを未然に防ぐO/Rマッパーによるトラブルを未然に防ぐ
O/Rマッパーによるトラブルを未然に防ぐkwatch
 
TensorFlow Lite Delegateとは?
TensorFlow Lite Delegateとは?TensorFlow Lite Delegateとは?
TensorFlow Lite Delegateとは?Mr. Vengineer
 

What's hot (20)

SQLアンチパターン 幻の第26章「とりあえず削除フラグ」
SQLアンチパターン 幻の第26章「とりあえず削除フラグ」SQLアンチパターン 幻の第26章「とりあえず削除フラグ」
SQLアンチパターン 幻の第26章「とりあえず削除フラグ」
 
オントロジーとは?
オントロジーとは?オントロジーとは?
オントロジーとは?
 
PostgreSQLをKubernetes上で活用するためのOperator紹介!(Cloud Native Database Meetup #3 発表資料)
PostgreSQLをKubernetes上で活用するためのOperator紹介!(Cloud Native Database Meetup #3 発表資料)PostgreSQLをKubernetes上で活用するためのOperator紹介!(Cloud Native Database Meetup #3 発表資料)
PostgreSQLをKubernetes上で活用するためのOperator紹介!(Cloud Native Database Meetup #3 発表資料)
 
Azure Database for PostgreSQL 入門 (PostgreSQL Conference Japan 2021)
Azure Database for PostgreSQL 入門 (PostgreSQL Conference Japan 2021)Azure Database for PostgreSQL 入門 (PostgreSQL Conference Japan 2021)
Azure Database for PostgreSQL 入門 (PostgreSQL Conference Japan 2021)
 
Cesiumを動かしてみよう
Cesiumを動かしてみようCesiumを動かしてみよう
Cesiumを動かしてみよう
 
脱RESTful API設計の提案
脱RESTful API設計の提案脱RESTful API設計の提案
脱RESTful API設計の提案
 
「関心の分離」と「疎結合」 ソフトウェアアーキテクチャのひとかけら
「関心の分離」と「疎結合」   ソフトウェアアーキテクチャのひとかけら「関心の分離」と「疎結合」   ソフトウェアアーキテクチャのひとかけら
「関心の分離」と「疎結合」 ソフトウェアアーキテクチャのひとかけら
 
ドメイン駆動設計の正しい歩き方
ドメイン駆動設計の正しい歩き方ドメイン駆動設計の正しい歩き方
ドメイン駆動設計の正しい歩き方
 
DDD x CQRS 更新系と参照系で異なるORMを併用して上手くいった話
DDD x CQRS   更新系と参照系で異なるORMを併用して上手くいった話DDD x CQRS   更新系と参照系で異なるORMを併用して上手くいった話
DDD x CQRS 更新系と参照系で異なるORMを併用して上手くいった話
 
ソーシャルゲームのためのデータベース設計
ソーシャルゲームのためのデータベース設計ソーシャルゲームのためのデータベース設計
ソーシャルゲームのためのデータベース設計
 
単なるキャッシュじゃないよ!?infinispanの紹介
単なるキャッシュじゃないよ!?infinispanの紹介単なるキャッシュじゃないよ!?infinispanの紹介
単なるキャッシュじゃないよ!?infinispanの紹介
 
ナレッジグラフとオントロジー
ナレッジグラフとオントロジーナレッジグラフとオントロジー
ナレッジグラフとオントロジー
 
GeoPackageを使ってみた(おざき様)
GeoPackageを使ってみた(おざき様)GeoPackageを使ってみた(おざき様)
GeoPackageを使ってみた(おざき様)
 
よく聞くけど、「SharePoint リストの 5,000 件問題」ってなんなの?
よく聞くけど、「SharePoint リストの 5,000 件問題」ってなんなの?よく聞くけど、「SharePoint リストの 5,000 件問題」ってなんなの?
よく聞くけど、「SharePoint リストの 5,000 件問題」ってなんなの?
 
オープンソースで構築するWebメタバース ~Mozilla Hubsで学ぶUX開発から運用コスト最小化まで #CEDEC2022
オープンソースで構築するWebメタバース ~Mozilla Hubsで学ぶUX開発から運用コスト最小化まで #CEDEC2022オープンソースで構築するWebメタバース ~Mozilla Hubsで学ぶUX開発から運用コスト最小化まで #CEDEC2022
オープンソースで構築するWebメタバース ~Mozilla Hubsで学ぶUX開発から運用コスト最小化まで #CEDEC2022
 
組織にテストを書く文化を根付かせる戦略と戦術
組織にテストを書く文化を根付かせる戦略と戦術組織にテストを書く文化を根付かせる戦略と戦術
組織にテストを書く文化を根付かせる戦略と戦術
 
ヤフー社内でやってるMySQLチューニングセミナー大公開
ヤフー社内でやってるMySQLチューニングセミナー大公開ヤフー社内でやってるMySQLチューニングセミナー大公開
ヤフー社内でやってるMySQLチューニングセミナー大公開
 
Dockerからcontainerdへの移行
Dockerからcontainerdへの移行Dockerからcontainerdへの移行
Dockerからcontainerdへの移行
 
O/Rマッパーによるトラブルを未然に防ぐ
O/Rマッパーによるトラブルを未然に防ぐO/Rマッパーによるトラブルを未然に防ぐ
O/Rマッパーによるトラブルを未然に防ぐ
 
TensorFlow Lite Delegateとは?
TensorFlow Lite Delegateとは?TensorFlow Lite Delegateとは?
TensorFlow Lite Delegateとは?
 

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

NoSQLデータベースと位置情報
NoSQLデータベースと位置情報NoSQLデータベースと位置情報
NoSQLデータベースと位置情報Koji Ichiwaki
 
FOSS4Gで地理空間情報もかんたん
FOSS4Gで地理空間情報もかんたんFOSS4Gで地理空間情報もかんたん
FOSS4Gで地理空間情報もかんたんKosuke Asahi
 
FOSS4Gを手軽に体験できるOSGeo Liveの紹介
FOSS4Gを手軽に体験できるOSGeo Liveの紹介FOSS4Gを手軽に体験できるOSGeo Liveの紹介
FOSS4Gを手軽に体験できるOSGeo Liveの紹介Yoichi Seino
 
2012 07 14_osm-ws_2
2012 07 14_osm-ws_22012 07 14_osm-ws_2
2012 07 14_osm-ws_2Tom Hayakawa
 
Foss4 g presen_android
Foss4 g presen_androidFoss4 g presen_android
Foss4 g presen_androidmasarunarazaki
 
QuantumGISを使ったPostgreSQL/PostGIS利用方法紹介
QuantumGISを使ったPostgreSQL/PostGIS利用方法紹介QuantumGISを使ったPostgreSQL/PostGIS利用方法紹介
QuantumGISを使ったPostgreSQL/PostGIS利用方法紹介Yoichi Kayama
 
2012 06 30_osm-ws_1a
2012 06 30_osm-ws_1a2012 06 30_osm-ws_1a
2012 06 30_osm-ws_1aTom Hayakawa
 
Map server入門 - FOSS4G 2012 Hokkaido
Map server入門 - FOSS4G 2012 HokkaidoMap server入門 - FOSS4G 2012 Hokkaido
Map server入門 - FOSS4G 2012 HokkaidoHideo Harada
 
201910 azure seminar
201910 azure seminar201910 azure seminar
201910 azure seminarSAKURUG co.
 
GISについてのお話
GISについてのお話GISについてのお話
GISについてのお話futureotsuka
 
Foss4g2012 MapGuide Hands-On
Foss4g2012 MapGuide Hands-OnFoss4g2012 MapGuide Hands-On
Foss4g2012 MapGuide Hands-OnOsamu Inoue
 
2013 02 09_osc2013_hamamatsu_osm
2013 02 09_osc2013_hamamatsu_osm2013 02 09_osc2013_hamamatsu_osm
2013 02 09_osc2013_hamamatsu_osmTom Hayakawa
 
MongoDBを用いたソーシャルアプリのログ解析 〜解析基盤構築からフロントUIまで、MongoDBを最大限に活用する〜
MongoDBを用いたソーシャルアプリのログ解析 〜解析基盤構築からフロントUIまで、MongoDBを最大限に活用する〜MongoDBを用いたソーシャルアプリのログ解析 〜解析基盤構築からフロントUIまで、MongoDBを最大限に活用する〜
MongoDBを用いたソーシャルアプリのログ解析 〜解析基盤構築からフロントUIまで、MongoDBを最大限に活用する〜Takahiro Inoue
 
20201113_PGconf_Japan_GPU_PostGIS
20201113_PGconf_Japan_GPU_PostGIS20201113_PGconf_Japan_GPU_PostGIS
20201113_PGconf_Japan_GPU_PostGISKohei KaiGai
 
グラフデータ分析 入門編
グラフデータ分析 入門編グラフデータ分析 入門編
グラフデータ分析 入門編順也 山口
 
大量時空間データの処理 ~ 現状の課題と今後OSSが解決すべきこと。(Open Source Conference 2021 Online/Osaka講演資料)
大量時空間データの処理 ~ 現状の課題と今後OSSが解決すべきこと。(Open Source Conference 2021 Online/Osaka講演資料)大量時空間データの処理 ~ 現状の課題と今後OSSが解決すべきこと。(Open Source Conference 2021 Online/Osaka講演資料)
大量時空間データの処理 ~ 現状の課題と今後OSSが解決すべきこと。(Open Source Conference 2021 Online/Osaka講演資料)NTT DATA Technology & Innovation
 
2012 07 27_osm_project10
2012 07 27_osm_project102012 07 27_osm_project10
2012 07 27_osm_project10Tom Hayakawa
 

Similar to JavaScript GIS ライブラリ turf.js 入門 (20)

Osckyoto2012 osgeojp foss4g
Osckyoto2012 osgeojp foss4gOsckyoto2012 osgeojp foss4g
Osckyoto2012 osgeojp foss4g
 
NoSQLデータベースと位置情報
NoSQLデータベースと位置情報NoSQLデータベースと位置情報
NoSQLデータベースと位置情報
 
StreamGraph
StreamGraphStreamGraph
StreamGraph
 
FOSS4Gで地理空間情報もかんたん
FOSS4Gで地理空間情報もかんたんFOSS4Gで地理空間情報もかんたん
FOSS4Gで地理空間情報もかんたん
 
FOSS4Gを手軽に体験できるOSGeo Liveの紹介
FOSS4Gを手軽に体験できるOSGeo Liveの紹介FOSS4Gを手軽に体験できるOSGeo Liveの紹介
FOSS4Gを手軽に体験できるOSGeo Liveの紹介
 
2012 07 14_osm-ws_2
2012 07 14_osm-ws_22012 07 14_osm-ws_2
2012 07 14_osm-ws_2
 
Foss4 g presen_android
Foss4 g presen_androidFoss4 g presen_android
Foss4 g presen_android
 
QuantumGISを使ったPostgreSQL/PostGIS利用方法紹介
QuantumGISを使ったPostgreSQL/PostGIS利用方法紹介QuantumGISを使ったPostgreSQL/PostGIS利用方法紹介
QuantumGISを使ったPostgreSQL/PostGIS利用方法紹介
 
2012 06 30_osm-ws_1a
2012 06 30_osm-ws_1a2012 06 30_osm-ws_1a
2012 06 30_osm-ws_1a
 
Map server入門 - FOSS4G 2012 Hokkaido
Map server入門 - FOSS4G 2012 HokkaidoMap server入門 - FOSS4G 2012 Hokkaido
Map server入門 - FOSS4G 2012 Hokkaido
 
201910 azure seminar
201910 azure seminar201910 azure seminar
201910 azure seminar
 
GISについてのお話
GISについてのお話GISについてのお話
GISについてのお話
 
Foss4g2012 MapGuide Hands-On
Foss4g2012 MapGuide Hands-OnFoss4g2012 MapGuide Hands-On
Foss4g2012 MapGuide Hands-On
 
2013 02 09_osc2013_hamamatsu_osm
2013 02 09_osc2013_hamamatsu_osm2013 02 09_osc2013_hamamatsu_osm
2013 02 09_osc2013_hamamatsu_osm
 
MongoDBを用いたソーシャルアプリのログ解析 〜解析基盤構築からフロントUIまで、MongoDBを最大限に活用する〜
MongoDBを用いたソーシャルアプリのログ解析 〜解析基盤構築からフロントUIまで、MongoDBを最大限に活用する〜MongoDBを用いたソーシャルアプリのログ解析 〜解析基盤構築からフロントUIまで、MongoDBを最大限に活用する〜
MongoDBを用いたソーシャルアプリのログ解析 〜解析基盤構築からフロントUIまで、MongoDBを最大限に活用する〜
 
QGIS training 2/3
QGIS training 2/3QGIS training 2/3
QGIS training 2/3
 
20201113_PGconf_Japan_GPU_PostGIS
20201113_PGconf_Japan_GPU_PostGIS20201113_PGconf_Japan_GPU_PostGIS
20201113_PGconf_Japan_GPU_PostGIS
 
グラフデータ分析 入門編
グラフデータ分析 入門編グラフデータ分析 入門編
グラフデータ分析 入門編
 
大量時空間データの処理 ~ 現状の課題と今後OSSが解決すべきこと。(Open Source Conference 2021 Online/Osaka講演資料)
大量時空間データの処理 ~ 現状の課題と今後OSSが解決すべきこと。(Open Source Conference 2021 Online/Osaka講演資料)大量時空間データの処理 ~ 現状の課題と今後OSSが解決すべきこと。(Open Source Conference 2021 Online/Osaka講演資料)
大量時空間データの処理 ~ 現状の課題と今後OSSが解決すべきこと。(Open Source Conference 2021 Online/Osaka講演資料)
 
2012 07 27_osm_project10
2012 07 27_osm_project102012 07 27_osm_project10
2012 07 27_osm_project10
 

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