Submit Search
Upload
JavaScript GIS ライブラリ turf.js 入門
•
9 likes
•
8,163 views
T
Takahiro Kamada
Follow
turf.jsの簡単な説明です。 日本語の資料が少ないので作成してみました。
Read less
Read more
Software
Report
Share
Report
Share
1 of 17
Download now
Download to read offline
Recommended
pg_bigmで全文検索するときに気を付けたい5つのポイント(第23回PostgreSQLアンカンファレンス@オンライン 発表資料)
pg_bigmで全文検索するときに気を付けたい5つのポイント(第23回PostgreSQLアンカンファレンス@オンライン 発表資料)
NTT DATA Technology & Innovation
ドメイン駆動設計サンプルコードの徹底解説
ドメイン駆動設計サンプルコードの徹底解説
増田 亨
Leaflet.js超入門
Leaflet.js超入門
Takahiro Kamada
Redis勉強会資料(2015/06 update)
Redis勉強会資料(2015/06 update)
Yuji Otani
大量時空間データの処理 ~ 現状の課題と今後OSSが解決すべきこと。(Open Source Conference 2021 Online/Osaka講演資料)
大量時空間データの処理 ~ 現状の課題と今後OSSが解決すべきこと。(Open Source Conference 2021 Online/Osaka講演資料)
NTT DATA Technology & Innovation
DDDのモデリングとは何なのか、 そしてどうコードに落とすのか
DDDのモデリングとは何なのか、 そしてどうコードに落とすのか
Koichiro Matsuoka
データ収集の基本と「JapanTaxi」アプリにおける実践例
データ収集の基本と「JapanTaxi」アプリにおける実践例
Tetsutaro Watanabe
JVMのGCアルゴリズムとチューニング
JVMのGCアルゴリズムとチューニング
佑哉 廣岡
Recommended
pg_bigmで全文検索するときに気を付けたい5つのポイント(第23回PostgreSQLアンカンファレンス@オンライン 発表資料)
pg_bigmで全文検索するときに気を付けたい5つのポイント(第23回PostgreSQLアンカンファレンス@オンライン 発表資料)
NTT DATA Technology & Innovation
ドメイン駆動設計サンプルコードの徹底解説
ドメイン駆動設計サンプルコードの徹底解説
増田 亨
Leaflet.js超入門
Leaflet.js超入門
Takahiro Kamada
Redis勉強会資料(2015/06 update)
Redis勉強会資料(2015/06 update)
Yuji Otani
大量時空間データの処理 ~ 現状の課題と今後OSSが解決すべきこと。(Open Source Conference 2021 Online/Osaka講演資料)
大量時空間データの処理 ~ 現状の課題と今後OSSが解決すべきこと。(Open Source Conference 2021 Online/Osaka講演資料)
NTT DATA Technology & Innovation
DDDのモデリングとは何なのか、 そしてどうコードに落とすのか
DDDのモデリングとは何なのか、 そしてどうコードに落とすのか
Koichiro Matsuoka
データ収集の基本と「JapanTaxi」アプリにおける実践例
データ収集の基本と「JapanTaxi」アプリにおける実践例
Tetsutaro Watanabe
JVMのGCアルゴリズムとチューニング
JVMのGCアルゴリズムとチューニング
佑哉 廣岡
NginxとLuaを用いた動的なリバースプロキシでデプロイを 100 倍速くした
NginxとLuaを用いた動的なリバースプロキシでデプロイを 100 倍速くした
toshi_pp
爆速クエリエンジン”Presto”を使いたくなる話
爆速クエリエンジン”Presto”を使いたくなる話
Kentaro Yoshida
ドメインオブジェクトの見つけ方・作り方・育て方
ドメインオブジェクトの見つけ方・作り方・育て方
増田 亨
Redisの特徴と活用方法について
Redisの特徴と活用方法について
Yuji Otani
webエンジニアのためのはじめてのredis
webエンジニアのためのはじめてのredis
nasa9084
ドメイン駆動設計 at DDD.rb #5
ドメイン駆動設計 at DDD.rb #5
啓 杉本
SQLチューニング入門 入門編
SQLチューニング入門 入門編
Miki Shimogai
クロスドメインアクセスを理解してWeb APIを楽しく使おう
クロスドメインアクセスを理解してWeb APIを楽しく使おう
kitfactory
自己紹介LT(公開版)
自己紹介LT(公開版)
Ken Muryoi
がっつりMongoDB事例紹介
がっつりMongoDB事例紹介
Tetsutaro Watanabe
pg_bigm(ピージーバイグラム)を用いた全文検索のしくみ
pg_bigm(ピージーバイグラム)を用いた全文検索のしくみ
Masahiko Sawada
初心者向けMongoDBのキホン!
初心者向けMongoDBのキホン!
Tetsutaro Watanabe
あなたも「違いが分かる人」になりましょう! ~ Azure, AzureStack, AzureStack HCI ~
あなたも「違いが分かる人」になりましょう! ~ Azure, AzureStack, AzureStack HCI ~
Masahiko Ebisuda
Cesiumマニアックス― Revenge ―
Cesiumマニアックス― Revenge ―
Ryousuke Wayama
「関心の分離」と「疎結合」 ソフトウェアアーキテクチャのひとかけら
「関心の分離」と「疎結合」 ソフトウェアアーキテクチャのひとかけら
Atsushi Nakamura
PostgreSQLをKubernetes上で活用するためのOperator紹介!(Cloud Native Database Meetup #3 発表資料)
PostgreSQLをKubernetes上で活用するためのOperator紹介!(Cloud Native Database Meetup #3 発表資料)
NTT DATA Technology & Innovation
Geotiff.jsで始めるリアルタイム演算 in foss4g japan 2020 online
Geotiff.jsで始めるリアルタイム演算 in foss4g japan 2020 online
Ryousuke Wayama
Java ORマッパー選定のポイント #jsug
Java ORマッパー選定のポイント #jsug
Masatoshi Tada
Cesiumを動かしてみよう
Cesiumを動かしてみよう
Kazutaka ishizaki
SQL上級者こそ知って欲しい、なぜO/Rマッパーが重要か?
SQL上級者こそ知って欲しい、なぜO/Rマッパーが重要か?
kwatch
Osckyoto2012 osgeojp foss4g
Osckyoto2012 osgeojp foss4g
Takashige Nakagawa
NoSQLデータベースと位置情報
NoSQLデータベースと位置情報
Koji Ichiwaki
More Related Content
What's hot
NginxとLuaを用いた動的なリバースプロキシでデプロイを 100 倍速くした
NginxとLuaを用いた動的なリバースプロキシでデプロイを 100 倍速くした
toshi_pp
爆速クエリエンジン”Presto”を使いたくなる話
爆速クエリエンジン”Presto”を使いたくなる話
Kentaro Yoshida
ドメインオブジェクトの見つけ方・作り方・育て方
ドメインオブジェクトの見つけ方・作り方・育て方
増田 亨
Redisの特徴と活用方法について
Redisの特徴と活用方法について
Yuji Otani
webエンジニアのためのはじめてのredis
webエンジニアのためのはじめてのredis
nasa9084
ドメイン駆動設計 at DDD.rb #5
ドメイン駆動設計 at DDD.rb #5
啓 杉本
SQLチューニング入門 入門編
SQLチューニング入門 入門編
Miki Shimogai
クロスドメインアクセスを理解してWeb APIを楽しく使おう
クロスドメインアクセスを理解してWeb APIを楽しく使おう
kitfactory
自己紹介LT(公開版)
自己紹介LT(公開版)
Ken Muryoi
がっつりMongoDB事例紹介
がっつりMongoDB事例紹介
Tetsutaro Watanabe
pg_bigm(ピージーバイグラム)を用いた全文検索のしくみ
pg_bigm(ピージーバイグラム)を用いた全文検索のしくみ
Masahiko Sawada
初心者向けMongoDBのキホン!
初心者向けMongoDBのキホン!
Tetsutaro Watanabe
あなたも「違いが分かる人」になりましょう! ~ Azure, AzureStack, AzureStack HCI ~
あなたも「違いが分かる人」になりましょう! ~ Azure, AzureStack, AzureStack HCI ~
Masahiko Ebisuda
Cesiumマニアックス― Revenge ―
Cesiumマニアックス― Revenge ―
Ryousuke Wayama
「関心の分離」と「疎結合」 ソフトウェアアーキテクチャのひとかけら
「関心の分離」と「疎結合」 ソフトウェアアーキテクチャのひとかけら
Atsushi Nakamura
PostgreSQLをKubernetes上で活用するためのOperator紹介!(Cloud Native Database Meetup #3 発表資料)
PostgreSQLをKubernetes上で活用するためのOperator紹介!(Cloud Native Database Meetup #3 発表資料)
NTT DATA Technology & Innovation
Geotiff.jsで始めるリアルタイム演算 in foss4g japan 2020 online
Geotiff.jsで始めるリアルタイム演算 in foss4g japan 2020 online
Ryousuke Wayama
Java ORマッパー選定のポイント #jsug
Java ORマッパー選定のポイント #jsug
Masatoshi Tada
Cesiumを動かしてみよう
Cesiumを動かしてみよう
Kazutaka ishizaki
SQL上級者こそ知って欲しい、なぜO/Rマッパーが重要か?
SQL上級者こそ知って欲しい、なぜO/Rマッパーが重要か?
kwatch
What's hot
(20)
NginxとLuaを用いた動的なリバースプロキシでデプロイを 100 倍速くした
NginxとLuaを用いた動的なリバースプロキシでデプロイを 100 倍速くした
爆速クエリエンジン”Presto”を使いたくなる話
爆速クエリエンジン”Presto”を使いたくなる話
ドメインオブジェクトの見つけ方・作り方・育て方
ドメインオブジェクトの見つけ方・作り方・育て方
Redisの特徴と活用方法について
Redisの特徴と活用方法について
webエンジニアのためのはじめてのredis
webエンジニアのためのはじめてのredis
ドメイン駆動設計 at DDD.rb #5
ドメイン駆動設計 at DDD.rb #5
SQLチューニング入門 入門編
SQLチューニング入門 入門編
クロスドメインアクセスを理解してWeb APIを楽しく使おう
クロスドメインアクセスを理解してWeb APIを楽しく使おう
自己紹介LT(公開版)
自己紹介LT(公開版)
がっつりMongoDB事例紹介
がっつりMongoDB事例紹介
pg_bigm(ピージーバイグラム)を用いた全文検索のしくみ
pg_bigm(ピージーバイグラム)を用いた全文検索のしくみ
初心者向けMongoDBのキホン!
初心者向けMongoDBのキホン!
あなたも「違いが分かる人」になりましょう! ~ Azure, AzureStack, AzureStack HCI ~
あなたも「違いが分かる人」になりましょう! ~ Azure, AzureStack, AzureStack HCI ~
Cesiumマニアックス― Revenge ―
Cesiumマニアックス― Revenge ―
「関心の分離」と「疎結合」 ソフトウェアアーキテクチャのひとかけら
「関心の分離」と「疎結合」 ソフトウェアアーキテクチャのひとかけら
PostgreSQLをKubernetes上で活用するためのOperator紹介!(Cloud Native Database Meetup #3 発表資料)
PostgreSQLをKubernetes上で活用するためのOperator紹介!(Cloud Native Database Meetup #3 発表資料)
Geotiff.jsで始めるリアルタイム演算 in foss4g japan 2020 online
Geotiff.jsで始めるリアルタイム演算 in foss4g japan 2020 online
Java ORマッパー選定のポイント #jsug
Java ORマッパー選定のポイント #jsug
Cesiumを動かしてみよう
Cesiumを動かしてみよう
SQL上級者こそ知って欲しい、なぜO/Rマッパーが重要か?
SQL上級者こそ知って欲しい、なぜO/Rマッパーが重要か?
Similar to JavaScript GIS ライブラリ turf.js 入門
Osckyoto2012 osgeojp foss4g
Osckyoto2012 osgeojp foss4g
Takashige Nakagawa
NoSQLデータベースと位置情報
NoSQLデータベースと位置情報
Koji Ichiwaki
StreamGraph
StreamGraph
Altech Takeno
FOSS4Gで地理空間情報もかんたん
FOSS4Gで地理空間情報もかんたん
Kosuke Asahi
FOSS4Gを手軽に体験できるOSGeo Liveの紹介
FOSS4Gを手軽に体験できるOSGeo Liveの紹介
Yoichi Seino
2012 07 14_osm-ws_2
2012 07 14_osm-ws_2
Tom Hayakawa
Foss4 g presen_android
Foss4 g presen_android
masarunarazaki
QuantumGISを使ったPostgreSQL/PostGIS利用方法紹介
QuantumGISを使ったPostgreSQL/PostGIS利用方法紹介
Yoichi Kayama
2012 06 30_osm-ws_1a
2012 06 30_osm-ws_1a
Tom Hayakawa
Map server入門 - FOSS4G 2012 Hokkaido
Map server入門 - FOSS4G 2012 Hokkaido
Hideo Harada
201910 azure seminar
201910 azure seminar
SAKURUG co.
GISについてのお話
GISについてのお話
futureotsuka
Foss4g2012 MapGuide Hands-On
Foss4g2012 MapGuide Hands-On
Osamu Inoue
2013 02 09_osc2013_hamamatsu_osm
2013 02 09_osc2013_hamamatsu_osm
Tom Hayakawa
MongoDBを用いたソーシャルアプリのログ解析 〜解析基盤構築からフロントUIまで、MongoDBを最大限に活用する〜
MongoDBを用いたソーシャルアプリのログ解析 〜解析基盤構築からフロントUIまで、MongoDBを最大限に活用する〜
Takahiro Inoue
QGIS training 2/3
QGIS training 2/3
Yoichi Kayama
20201113_PGconf_Japan_GPU_PostGIS
20201113_PGconf_Japan_GPU_PostGIS
Kohei KaiGai
グラフデータ分析 入門編
グラフデータ分析 入門編
順也 山口
2012 07 27_osm_project10
2012 07 27_osm_project10
Tom Hayakawa
Scim and or graph
Scim and or graph
Naohiro Fujie
Similar to JavaScript GIS ライブラリ turf.js 入門
(20)
Osckyoto2012 osgeojp foss4g
Osckyoto2012 osgeojp foss4g
NoSQLデータベースと位置情報
NoSQLデータベースと位置情報
StreamGraph
StreamGraph
FOSS4Gで地理空間情報もかんたん
FOSS4Gで地理空間情報もかんたん
FOSS4Gを手軽に体験できるOSGeo Liveの紹介
FOSS4Gを手軽に体験できるOSGeo Liveの紹介
2012 07 14_osm-ws_2
2012 07 14_osm-ws_2
Foss4 g presen_android
Foss4 g presen_android
QuantumGISを使ったPostgreSQL/PostGIS利用方法紹介
QuantumGISを使ったPostgreSQL/PostGIS利用方法紹介
2012 06 30_osm-ws_1a
2012 06 30_osm-ws_1a
Map server入門 - FOSS4G 2012 Hokkaido
Map server入門 - FOSS4G 2012 Hokkaido
201910 azure seminar
201910 azure seminar
GISについてのお話
GISについてのお話
Foss4g2012 MapGuide Hands-On
Foss4g2012 MapGuide Hands-On
2013 02 09_osc2013_hamamatsu_osm
2013 02 09_osc2013_hamamatsu_osm
MongoDBを用いたソーシャルアプリのログ解析 〜解析基盤構築からフロントUIまで、MongoDBを最大限に活用する〜
MongoDBを用いたソーシャルアプリのログ解析 〜解析基盤構築からフロントUIまで、MongoDBを最大限に活用する〜
QGIS training 2/3
QGIS training 2/3
20201113_PGconf_Japan_GPU_PostGIS
20201113_PGconf_Japan_GPU_PostGIS
グラフデータ分析 入門編
グラフデータ分析 入門編
2012 07 27_osm_project10
2012 07 27_osm_project10
Scim and or graph
Scim and or graph
JavaScript GIS ライブラリ turf.js 入門
1.
JavaScript GIS ライブラリ turf.js
入門 都筑総研
2.
turf.jsとは • 軽量・高速・オープンなWeb地図用のGISライブラリ • 米国
MapBox社が開発・公開 • クライアント(Webブラウザ)、サーバ(Node.js等) 両方で実行可能 http://turfjs.org/static/docs/ ドキュメントサイト
3.
基本 • 取り扱うGISデータ・フォーマット • GeoJSON形式 •
取り扱う形状 • 点:point • 線:line • 面:polygon
4.
できる事:空間計測・関係 • 重心・中心点の算出 :Centroids
and centers • 集合・統計関数 :Aggregation & stastics functions • バッファ分析:Buffer analysis • TIN(不整三角形網):Triangulated irregular networks • クラスタリング:Data classification • 距離計算:Distance calculations (一部抜粋)
5.
できる事:空間編集処理 • 簡略化:Simplify features •
結合・併合:Union ・Merge • 凹・凸包処理 :Concave & convex hulls • 補間:Interpolation • 矩形・六角形 グリッド出力:Grids・Hexagonal binning • フィルタリング・選択:Filter / select by attribute (一部抜粋)
6.
導入方法 • Webに公開されたデータをリンクする <script src='//api.tiles.mapbox.com/mapbox.js/plugins/turf/ v1.4.0/turf.min.js'></script> そのまま貼り付け、ダウンロードして利用して下さい
7.
事例:2点間の距離 • 新宿駅と代々木駅の直線距離計算してみます 新宿 代々木 © OpenStreetMap
contributors
8.
処理内容 1. GeoJSON形式の地点(新宿・代々木)の作成 2. 距離計算単位の宣言 3.
距離計測関数による距離計算の実行 サンプルコード https://github.com/tkama/turf_sample/blob/gh-pages/turf.distance.html
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.
2.距離計算単位の宣言 //単位を表現する文字列を変数に入力 var units =
"kilometers"; //can be degrees, radians, miles, or kilometers 選択可能な単位 • 度:degrees • ラジアン : radians • マイル : miles • キロメートル : kilometers
11.
3.距離計算の実行 //距離計算 turf.distance( 地点1,
地点2, 計算単位 ); var distance = turf.distance( point1 , point2 , units ); //実行結果 0.635336862243156 計算の結果 2駅間の直線距離は 約635m
12.
事例2:バッファの作成 • 新宿駅を起点に半径500mの範囲(バッファ)を作成 500m
13.
処理内容 1. GeoJSON形式の地点(新宿駅)の作成 2. 距離計算単位の宣言 3.
バッファ作成関数 turf.bufferによる空間演算 サンプルコード https://github.com/tkama/turf_sample/blob/gh-pages/turf.buffer.html
14.
1.GeoJSONの作成 //新宿駅のGeoJSONデータ var point1 =
{ "type": "Feature", "properties": {}, "geometry": { "type": "Point", "coordinates": [139.70058739185333,35.68956144849349] } };
15.
2.距離計算単位の宣言 //単位を表現する文字列を変数に入力 var units =
"meters"; 選択可能な単位 • 度:degrees • フィート : feet • マイル : miles • キロメートル : kilometers • メートル : metrs
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.
表示結果 © OpenStreetMap contributors
Download now