More Related Content
What's hot
What's hot (20)
Viewers also liked
Similar to WebGISをはじめてみる
Similar to WebGISをはじめてみる (20)
Recently uploaded
Recently uploaded (14)
WebGISをはじめてみる
- 3. 今日の目次 ① WebGISとは ② 構築方法 ③ まとめ
- 4. WebGISとは
- 5. そもそもGISって？
- 6. 地理空間情報を扱う技術
- 7. 位置情報 + 属性 国土地理院 基盤地図情報を使用
- 8. じゃあWebGISって？
- 12. Free Open Source Software for GeoSpatial オープンソースの地理情報ソフトウェア(GIS)
- 15. 構築方法
- 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
- 23. OpenStreetMap
- 24. 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
- 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
- 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 マーカーの表示 ポップアップの表示
- 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の表示 アイコンと属性値の反映 マーカーアイコンを設定
- 40. まとめ