Contenu connexe
Similaire à 【IISAテクニカルカンファレンス2014】 オープンデータ×オープンソース ~WEB上でのインタラクティブ可視化手法について~ (20)
【IISAテクニカルカンファレンス2014】 オープンデータ×オープンソース ~WEB上でのインタラクティブ可視化手法について~
- 2. 自己紹介
名前 中洞 友希 (なかほら ゆき)
出身 岩手県宮古市
会社 株式会社ノーザンシステムサービス
入社2年目
WEB上でのデータの可視化とGISについて日々研究中。
この分野でトップに上り詰めることを目標に頑張ってます!
- 7. 7
行政の透明性・信頼性の向上
経済の活性化・行政の効率化
2.オープンデータの概要 (3/4)
目的は?
地理空間情報 , 防災情報 , 統計情報, 交通情報,観光情報など
XML , CSV , JSON, RDF など、コンピュータが判読しやすい形式
どんなデータがあるの?
どんなデータの形式?
- 8. 8
2.オープンデータの概要 (4/4)
使用したオープンデータ
小地域shpデータ (国勢調査)
500mメッシュデータ (国勢調査)
世帯数・高齢化率データ (国勢調査)
男女5歳階級別人口shpデータ (国勢調査)
保険料データ (介護事業状況報告)
将来推計人口データ (社人研)
道路データ (国土数値情報)
介護事業所データ (介護サービス情報公表システム)
- 10. 3.オープンソースGISの概要(2/2)
使用したライブラリ
OpenLayers
WEBブラウザで地図データを表示するJavaScriptライブラリ。
(http://openlayers.org/)
PostGIS
PostgreSQLで地理空間情報を扱う為の拡張のライブラリ。
(http://postgis.net/)
Mapnik
デスクトップ及びサーバー用の地図描画ツールキット。
(http://mapnik.org/)
GDAL
ラスターデータフォーマット用ライブラリ。
(http://www.gdal.org/)
- 13. 地図データ : 小地域shpデータ
グラフデータ : 世帯数・高齢化率・保険料・
将来推計人口データ
amCharts (JavaScript)
OpenLayers (JavaScript)
使用したオープンデータ / ライブラリ
オープンデータ
オープンソース
GIS
その他
ライブラリ
- 14. 2014/11/25
OpenLayersで地図を表示する
{ "type": "FeatureCollection",
"features": [
{"type": "Feature",
"geometry": {
"type": "Polygon",
"coordinates": [
[ [100.0, 0.0], [101.0, 0.0], [101.0, 1.0],[100.0, 1.0] ]
},
"properties": {
"prop":"value0"
}
},
{"type": "Feature",
"geometry": {
"type": "Polygon",
"coordinates": [
[ [101.0, 0.0], [101.0, 0.0], [101.0, 1.0],[100.0, 1.0],]
]
},
"properties": {
"prop": "value1"
}
}
]
}
GeoJSON
OpenLayers
[ベクターレイヤー]
PostGIS
- 16. amChartsでグラフを描画する (3/3)
Y
軸
X軸
グラフの基本情報
プロットするデータ
カーソルの動作
グラフ凡例
var chart = AmCharts.makeChart("chartdiv", {
"type": "serial",
"theme": "none",
"dataProvider": protData,
"valueAxes": [{
"axisAlpha": 0,
"position": "left",
"title": "Visitors from country"
}],
"startDuration": 1,
"graphs": [{
"balloonText": "<b>[[category]]: [[value]]</b>",
"colorField": "color",
"fillAlphas": 0.9,
"lineAlpha": 0.2,
"type": "column",
"valueField": "visits"
}],
"chartCursor": {
"categoryBalloonEnabled": false,
"cursorAlpha": 0,
"zoomable": false
},
"categoryField": "country",
"categoryAxis": {
"gridPosition": "start"
},
"legend":
{"position":"bottom",
"labelText":"Visitors from country"
}
});
JavaScript
- 20. 開発中に直面した問題(1/3)
{ "type": "FeatureCollection",
"features": [
{"type": "Feature",
"geometry": {
"type": "Polygon",
"coordinates": [
[ [100.0, 0.0], [101.0, 0.0], [101.0, 1.0],[100.0, 1.0] ]
},
"properties": {
"prop":"value0"
}
},
{"type": "Feature",
"geometry": {
"type": "Polygon",
"coordinates": [
[ [101.0, 0.0], [101.0, 0.0], [101.0, 1.0],[100.0, 1.0],]
]
},
"properties": {
"prop": "value1"
}
}
]
}
GeoJSON
OpenLayers
[ベクターレイヤー]
PostGIS
前例の通りGeoJSONで
地図を表示する方法で 開発を行っていた…
- 24. 地物を選択する
① OpenLayersで矩形描画
② PostGISで矩形範囲に含まれる 地物を取得
③ Mapnikで地物の画像を生成
④ OpenLayersで画像を表示
[ イメージレイヤー ]
緯度: 141.38
経度: 43.14
緯度: 141.38
経度: 43.10
緯度: 141.47
経度: 43.14
緯度: 141.47
経度: 43.10
temp.png
- 27. 小地域shpデータ
道路データ
介護事業所データ
男女5歳階級別人口shpデータ
500mメッシュ
OpenLayers (JavaScript)
PostGIS (データベース)
Mapnik (サーバ用ツールキット)
使用したオープンデータ / ライブラリ
オープンデータ
オープンソース
GIS
- 30. 事業所 事業所の最短ノード
2014/11/25
事業所からの到達圏域を計算する(3/4)
①事業所ノードの最適化
経路検索では、事業所に1番近いノードをスタート地点として検索を行う。
検索するノード数が多いと比例して計算量も増える。
⇒事業所のノードが密集している地域は1か所にまとめて、
検索するノード数を減らす。
- 32. GDALでヒートマップを作成する
①事業所のノードデータを
補完し、 tif画像を作成
②都道府県の形に切り取る
③カラーテーブルファイ
ルで色付け
-999 0 0 0 0
-1 0 0 0 0
5.77664 0 193 0 255
11.43873 145 224 145 255
17.10082 255 242 138 255
22.76291 253 141 141 255
28.425 221 60 79 255
カラーテーブルファイル
gdal_grid
gdalwarp
gdaldem