WebGISをはじめてみる

OSGeo.JP × HTML5fun 発表資料

Transcript

1. WebGISをはじめてみる Yasunori Kirimoto 2015.10.31 OSGeo.JP × HTML5fun
3. 今日の目次 ①WebGISとは ②構築方法 ③ まとめ
4. WebGISとは
5. そもそもGISって？
6. 地理空間情報を扱う技術
7. 位置情報 + 属性 国土地理院 基盤地図情報を使用
8. じゃあWebGISって？
9. WebGISをもっとも浸透させたコンテンツ Google Maps
10. 自由度が高いWebGISを構築するには？
11. そこで、 FOSS4G を使おう!!
12. Free Open Source Software for GeoSpatial オープンソースの地理情報ソフトウェア(GIS)
13. SapporoLiveMap http://sapporolivemap.day-journal.com/
15. 構築方法
16. 基本構成 背景地図 マーカー GeoJSON
17. 基本構成 背景地図 マーカー GeoJSON
18. index.html stylesheet.css script.js HTML CSS JS
19. <!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 ライブラリの参照設定
20. <!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 ライブラリの参照設定
21. html, body { height: 100%; padding: 0; margin: 0; } #map { z-index: 0; height: 100%; } CSS
22. 基本構成 背景地図 マーカー GeoJSON
23. OpenStreetMap
24. var map = L.map('map'); L.tileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png', { attribution:'&copy; <a href="http://osm.org/copyright"> OpenStreetMap</a> contributors'}).addTo(map); map.setView([43.0559815, 141.3857792], 16); JS
25. 地理院地図
26. 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
28. 基本構成 背景地図 マーカー GeoJSON
29. var Map_Marker = L.marker([43.0559815, 141.3857792]) .addTo(map); var comment = 'Inter x cross Creative Center'; Map_Marker.bindPopup(comment).openPopup(); JS マーカーの表示 ポップアップの表示
31. 基本構成 背景地図 マーカー GeoJSON
32. ・データを作成 ・オープンデータを利用
33. geojson.io
34. 国土数値情報
35. GeoJSON 表示
36. 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
37. <!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
38. 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の表示 アイコンと属性値の反映 マーカーアイコンを設定
39. 国土数値情報（都市公園データ）を使用
40. まとめ
41. ・背景地図 ・マーカー ・GeoJSON ・全体概要