1．地形と地質 ①埼玉県の地形と地質2 2014/11/26 図-1.5起伏図(浦和図幅) 図-1.6地質図(浦和図幅) 県庁 県庁 大宮駅 大宮駅 東浦和駅 東浦和駅
はじめてみよう地図を使ったデータビジュアライゼーション入門 ～...
61
ははははははははははははは はははははははははははははははは ～ FOSS4G ははははははははは ははははははは ははは ～ Yasunori Kirimoto 2016.06.18 OSC 2016 Hokkaido
-
Upload
dayjournal -
Category
Technology
-
view
1.102 -
download
1
Transcript of はじめてみよう地図を使ったデータビジュアライゼーション入門 ～...
はじめてみよう地図を使った データビジュアライゼーション入門 ～ FOSS4G とオープンデータで 可視化した地図を公開 ～
Yasunori Kirimoto2016.06.18OSC 2016 Hokkaido
今日の目次
① FOSS4G とは？
② Web で地図を公開してみる
③ OSGeo 財団日本支部とは？
FOSS4G とは？
Free Open Source Software for GeoSpatial
オープンソースの地理情報ソフトウェア (GIS)
そもそも GIS って？
地理空間情報を扱う技術
位置情報 + 属性
国土地理院 基盤地図情報を使用
ディスクトップ
フロントエンド
バックエンド
データベース
Web で地図を公開してみる
Web 地図 (WebGIS) って聞いて何を思い浮かべますか？？
WebGIS をもっとも浸透させたコンテンツ
Google Maps
自由度が高い WebGIS を構築するには？
FOSS4G を使おう！！
SapporoLiveMapsapporolivemap.day-journal.com
みんなの公園マップ - 札幌版 -
sapporoparkmap.day-journal.com
index.html
stylesheet.css
script.js
HTML
CSS
JS
Web サービスもあります！！
構築方法
基本構成
背景地図
マーカー
GeoJSON
基本構成
背景地図
マーカー
GeoJSON
<!DOCTYPE html><html lang="ja"><head> <meta charset="UTF-8"> <title>Leaflet Sample</title>
<script src="./Library/leaflet-0.7.5/leaflet.js”></script> <link href=“./Library/leaflet-0.7.5/leaflet.css" rel="stylesheet" />
<link href="./css/stylesheet.css" rel="stylesheet" /></head>
<body>
<div id="map"></div>
<script src="./js/script.js"></script></body></html>
HTML
ライブラリの参照設定
<!DOCTYPE html><html lang="ja"><head> <meta charset="UTF-8"> <title>Leaflet Sample</title>
<script src="http://cdn.leafletjs.com/leaflet-0.7.5/leaflet.js"></script> <link rel="stylesheet“ href="http://cdn.leafletjs.com/
leaflet-0.7.5/leaflet.css" /> <link href="./css/stylesheet.css" rel="stylesheet" />
</head>
<body>
<div id="map"></div>
<script src="./js/script.js"></script>
</body></html>
HTML
ライブラリの参照設定
html, body { height: 100%; padding: 0; margin: 0; }
#map { z-index: 0; height: 100%; }
CSS
基本構成
背景地図
マーカー
GeoJSON
OpenStreetMap
var map = L.map('map');
L.tileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png', { attribution:'© <a href="http://osm.org/copyright"> OpenStreetMap</a> contributors'}).addTo(map);
map.setView([43.0559815, 141.3857792], 16);
JS
地理院地図
var map = L.map('map');
L.tileLayer(‘http://cyberjapandata.gsi.go.jp/xyz/std/{z}/{x}/{ y}.png', { attribution: "<a href='http://www.gsi.go.jp/kikakuchousei/ kikakuchousei40182.html' target='_blank'> 国土地理院 </a>" }).addTo(map);
map.setView([43.0559815, 141.3857792], 16);
JS
基本構成
背景地図
マーカー
GeoJSON
var Map_Marker = L.marker([43.0559815, 141.3857792]) .addTo(map);
var comment = 'Inter x cross Creative Center';Map_Marker.bindPopup(comment).openPopup();
JS
マーカーの表示
ポップアップの表示
基本構成
背景地図
マーカー
GeoJSON
・データを作成・オープンデータを利用
geojson.io
国土数値情報
GeoJSON 表示
var pointdata = {"type": "FeatureCollection","crs": { "type": "name", "properties": { "name": "urn:ogc:def:crs:OGC:1.3:CRS84" } }, "features": [{ "type": "Feature", "properties": { "P13_003": " 北 6 条エルムの里公園 " }, "geometry": { "type": "Point", "coordinates": [ 141.34308642, 43.0666937 ] } },{ "type": "Feature", "properties": { "P13_003": " 宮部記念緑地 " }, "geometry": { "type": "Point", "coordinates": [ 141.33550164, 43.0666937 ] } },{ "type": "Feature", "properties": { "P13_003": " 偕楽園緑地 " }, "geometry": { "type": "Point", "coordinates": [ 141.34429626, 43.06828667 ] } },{ "type": "Feature", "properties": { "P13_003": " 八軒コスモス公園 " }, "geometry": { "type": "Point", "coordinates": [ 141.32328053000001, 43.08470141 ] } }]};
GeoJSON
<!DOCTYPE html><html lang="ja"><head> <meta charset="UTF-8"> <title>Leaflet Sample</title>
<script src="./Library/leaflet-0.7.5/leaflet.js”></script> <link href=“./Library/leaflet-0.7.5/leaflet.css" rel="stylesheet" />
<script src="./files/sample.geojson"></script> <link href="./css/stylesheet.css" rel="stylesheet" />
</head><body>
<div id="map"></div>
<script src="./js/script.js"></script>
</body></html>
HTML
var ParkIcon = L.icon({ iconUrl: './img/Park.png', iconSize: [50, 50], iconAnchor: [25, 20], popupAnchor: [0, -30]});
var Map_GeoJSON = L.geoJson(pointdata, {
pointToLayer: function (feature, layer) { return L.marker(layer, { icon: ParkIcon }); }, onEachFeature: function (feature, layer) { layer.bindPopup(feature.properties.P13_003); }}).addTo(map);
JS
GeoJSON の表示
アイコンと属性値の反映
マーカーアイコンを設定
国土数値情報（都市公園データ）を使用
OSGeo 財団日本支部とは？
OSGeo 財団2006 年設立オープンなジオを応援する組織多数のプロジェクト
OSGeo 財団日本支部高品質のオープンソース地理空間ソフトウェアの支援と構築のために設立されました。この財団の目的は、コミュニティーが先導して、オープンソースプロジェクトの利用と開発を促進することです。
OSGeo 財団の日本における公式の支部が「 OSGeo 財団日本支部 (OSGeo.JP) 」です。
FOSS4G Tokyo/Osaka- フリー＆オープンソース GIS の祭典 –
2008 年よりスタート空間情報技術の情報交換の場
2016 年は 10 月頃開催！？
FOSS4G Hokkaido2012 年から北海道でも地域カンファレンスを開催しています
2015 の様子
2016 年は
7/8( 金 ) 9:00 ～ハンズオンデイ＠札幌市産業振興センター FOSS4G ツールを実際に操作しながら学べる、ハンズオン ( 体験学習 )
7/9( 土 ) 10:00 ～コアデイ @ ICC Cross x Garden 基調講演、事例発表、懇親会 ( + LT )
