LeafletでWebGIS入門

FOSS4G 2015 Hokkaido 発表資料

1. LeafletでWebGIS入門 株式会社 三洋コンサルタント 桐本 靖規 2015.07.03 FOSS4G 2015 Hokkaido 1
2. 今日の目次 ① Leafletとは ② 準備 ③ 構築
3. Leafletとは
4. LeafletとはJavascriptで記述されているオープンソースのライブラリで ファイル自体が軽量でコード量も少なくWebGISを構築可能です。
5. Web上で独自の地図サイトが作れます!!
6. DEMO
7. 準 備
8. ブラウザ テキストエディタ ローカル環境 公 開
9. ブラウザ テキストエディタ ローカル環境 公 開
10. Internet Explorer Chrome Firefox Safari Opera
11. Internet Explorer Chrome Firefox Safari Opera
12. ブラウザ テキストエディタ ローカル環境 公 開
16. ブラウザ テキストエディタ ローカル環境 公 開
18. ブラウザ テキストエディタ ローカル環境 公 開
19. Webサーバー
20. 構 築
21. 基本構成 背景地図 コントロール マーカー GeoJSON
22. 基本構成 背景地図 コントロール マーカー GeoJSON
23. index.html stylesheet.css script.js HTML CSS JS
24. index.html stylesheet.css script.js HTML CSS JS
25. <!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <title>Leaflet Sample</title> <script src="./Library/leaflet-0.7.3/leaflet.js"></script> <link href="./Library/leaflet-0.7.3/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 ライブラリの参照設定
26. CDN （コンテンツデリバリネットワーク）
27. <!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <title>Leaflet Sample</title> <script src="http://cdnjs.cloudflare.com/ajax/libs/ leaflet/0.7.3/leaflet.js"></script> <link rel="stylesheet“ href="http://cdnjs.cloudflare.com/ ajax/libs/leaflet/0.7.3/leaflet.css" /> <link href="./css/stylesheet.css" rel="stylesheet" /> </head> <body> <div id="map"></div> <script src="./js/script.js"></script> </body> </html> HTML ライブラリの参照設定
28. html, body { height: 100%; padding: 0; margin: 0; } #map { z-index: 0; height: 100%; } CSS
29. 基本構成 背景地図 コントロール マーカー GeoJSON
30. 地理院地図
31. 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.0704123, 141.3406076], 17); JS
33. OpenStreetMap
34. 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.0704123, 141.3406076], 17); JS
35. Google Maps
37. <!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <title>Leaflet Sample</title> <script src="./Library/leaflet-0.7.3/leaflet.js"></script> <link href="./Library/leaflet-0.7.3/leaflet.css" rel="stylesheet" /> <script src="http://maps.google.com/maps/api/js?sensor= false&amp;region=JP"></script> <script src="./plugin/leaflet-plugins-master/layer/tile/ Google.js"></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 map = L.map('map'); var Googlemap = new L.Google('ROADMAP'); map.addLayer(Googlemap); map.setView([43.0704123, 141.3406076], 17); JS
39. Bing Maps
40. <!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <title>Leaflet Sample</title> <script src="./Library/leaflet-0.7.3/leaflet.js"></script> <link href="./Library/leaflet-0.7.3/leaflet.css" rel="stylesheet" /> <script src="./plugin/leaflet-plugins-master/layer/tile/ Bing.js"></script> <link href="./css/stylesheet.css" rel="stylesheet" /> </head> <body> <div id="map"></div> <script src="./js/script.js"></script> </body> </html> HTML
43. var map = L.map('map'); var BingMap = new L.BingLayer(“アクセスキーを入力", { type: 'Road' }); map.addLayer(BingMap); map.setView([43.0704123, 141.3406076], 17); JS
44. 背景地図を複数表示
45. ・地理院地図 ・OpenStreetMap ・Google Maps ・Bing Maps
46. <!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <title>Leaflet Sample</title> <script src="./Library/leaflet-0.7.3/leaflet.js"></script> <link href="./Library/leaflet-0.7.3/leaflet.css" rel="stylesheet" /> <script src="http://maps.google.com/maps/api/js?sensor= false&amp;region=JP"></script> <script src="./plugin/leaflet-plugins-master/layer/tile/ Google.js"></script> <script src="./plugin/leaflet-plugins-master/layer/tile/ Bing.js"></script> <link href="./css/stylesheet.css" rel="stylesheet" /> </head> <body> <div id="map"></div> <script src="./js/script.js"></script> </body> </html> HTML
47. var t_std = new 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>" }); var t_pale = new L.tileLayer('http://cyberjapandata.gsi.go.jp/ xyz/pale/{z}/{x}/{y}.png', { attribution: "<a href='http://www.gsi.go.jp/kikakuchousei/ kikakuchousei40182.html‘ target=’_blank‘>国土地理院</a>" }); var t_ort = new L.tileLayer('http://cyberjapandata.gsi.go.jp/ xyz/ort/{z}/{x}/{y}.jpg', { attribution: "<a href='http://www.gsi.go.jp/kikakuchousei/ kikakuchousei40182.html‘ target=’_blank‘>国土地理院</a>" }); var o_std = new L.tileLayer('http://{s}.tile.openstreetmap.org/ {z}/{x}/{y}.png', { attribution: '&copy; <a href="http://osm.org/copyright"> OpenStreetMap</a> contributors' }); JS 背景地図の読み込み
48. var g_roadmap = new L.Google('ROADMAP'); var g_satellite = new L.Google('SATELLITE'); var g_hybrid = new L.Google('HYBRID'); var b_roadmap = new L.BingLayer("アクセスキーを入力", { type: 'Road' }); var b_Aerial = new L.BingLayer("アクセスキーを入力", { type: 'Aerial' }); var map = L.map('map', { center: [43.0704123, 141.3406076], zoom: 17, layers: [t_pale] }); JS 画面の中心座標 ( 緯度・経度 ) 背景地図の読み込み
49. var Map_BaseLayer = { "BingMap 標準": b_roadmap, "BingMap オルソ": b_Aerial, "地理院地図 標準": t_std, "地理院地図 淡色": t_pale, "地理院地図 オルソ": t_ort, "OpenStreetMap 標準": o_std, "GoogleMap 標準": g_roadmap, "GoogleMap オルソ": g_satellite, "GoogleMap ハイブリッド": g_hybrid }; L.control.layers(Map_BaseLayer, null, null).addTo(map); JS 背景レイヤの作成 レイヤーコントロール表示
50. DEMO
51. 基本構成 背景地図 コントロール マーカー GeoJSON
52. レイヤ選択 表示
53. var Map_BaseLayer = { "BingMap 標準": b_roadmap, "BingMap オルソ": b_Aerial, "地理院地図 標準": t_std, "地理院地図 淡色": t_pale, "地理院地図 オルソ": t_ort, "OpenStreetMap 標準": o_std, "GoogleMap 標準": g_roadmap, "GoogleMap オルソ": g_satellite, "GoogleMap ハイブリッド": g_hybrid }; L.control.layers(Map_BaseLayer, null, { collapsed: false }).addTo(map); JS
54. スケール
55. var Map_BaseLayer = { "BingMap 標準": b_roadmap, "BingMap オルソ": b_Aerial, "地理院地図 標準": t_std, "地理院地図 淡色": t_pale, "地理院地図 オルソ": t_ort, "OpenStreetMap 標準": o_std, "GoogleMap 標準": g_roadmap, "GoogleMap オルソ": g_satellite, "GoogleMap ハイブリッド": g_hybrid }; L.control.scale({ imperial: false, maxWidth:300 }).addTo(map); L.control.layers(Map_BaseLayer, null, { collapsed: false }).addTo(map); JS
56. ズームバー
57. var map = L.map('map', { center: [43.0704123, 141.3406076], zoom: 17, zoomControl: false, layers: [t_pale] }); var Map_BaseLayer = { "BingMap 標準": b_roadmap, "BingMap オルソ": b_Aerial, "地理院地図 標準": t_std, "地理院地図 淡色": t_pale, "地理院地図 オルソ": t_ort, "OpenStreetMap 標準": o_std, "GoogleMap 標準": g_roadmap, "GoogleMap オルソ": g_satellite, "GoogleMap ハイブリッド": g_hybrid }; JS
58. DEMO
59. 基本構成 背景地図 コントロール マーカー GeoJSON
60. マーカー 表示
61. var Map_Marker = L.marker([43.0704123, 141.3406076]) .addTo(map); var comment = '北海道大学 農学部本館'; Map_Marker.bindPopup(comment).openPopup(); var Map_BaseLayer = { "BingMap 標準": b_roadmap, "BingMap オルソ": b_Aerial, "地理院地図 標準": t_std, "地理院地図 淡色": t_pale, "地理院地図 オルソ": t_ort, "OpenStreetMap 標準": o_std, "GoogleMap 標準": g_roadmap, "GoogleMap オルソ": g_satellite, "GoogleMap ハイブリッド": g_hybrid }; JS マーカーの表示 ポップアップの表示
62. DEMO
63. マーカーアイコン 変更
64. var map = L.map('map', { center: [43.0704123, 141.3406076], zoom: 17, zoomControl: false, layers: [t_pale] }); var sampleIcon = L.icon({ iconUrl: './img/sample.png', iconSize: [50, 50], iconAnchor: [10, 40], popupAnchor: [5, -50] }); var Map_Marker = L.marker([43.0704123, 141.3406076], { icon: sampleIcon }).addTo(map); var comment = '北海道大学 農学部本館'; Map_Marker.bindPopup(comment).openPopup(); JS アイコンの設定
65. DEMO
66. レイヤ 表示
67. var Map_BaseLayer = { "BingMap 標準": b_roadmap, "BingMap オルソ": b_Aerial, "地理院地図 標準": t_std, "地理院地図 淡色": t_pale, "地理院地図 オルソ": t_ort, "OpenStreetMap 標準": o_std, "GoogleMap 標準": g_roadmap, "GoogleMap オルソ": g_satellite, "GoogleMap ハイブリッド": g_hybrid }; var Map_OverLayer = { "会場": Map_Marker }; L.control.scale({ imperial: false, maxWidth: 300 }).addTo(map); L.control.layers(Map_BaseLayer, Map_OverLayer, { collapsed: false }).addTo(map); JS オーバーレイヤ選択画面の表示
68. DEMO
69. 基本構成 背景地図 コントロール マーカー GeoJSON
70. データの準備
71. geojson.io
72. GeoJSON ： 都市公園データ (点) を使用
73. 国土数値情報（都市公園データ）を使用 QGIS
74. GeoJSON 表示
75. 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
76. <!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <title>Leaflet Sample</title> <script src="./Library/leaflet-0.7.3/leaflet.js"></script> <link href="./Library/leaflet-0.7.3/leaflet.css" rel="stylesheet" /> <script src="http://maps.google.com/maps/api/js?sensor=false&amp;region=JP"></script> <script src="./plugin/leaflet-plugins-master/layer/tile/Google.js"></script> <script src="./plugin/leaflet-plugins-master/layer/tile/Bing.js"></script> <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
77. 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); var Map_OverLayer = { "会場": Map_Marker, "GeoJSON": Map_GeoJSON }; JS GeoJSONの表示 アイコンと属性値の反映
78. DEMO
79. まとめ
80. ・準備 ・背景地図 ・コントロール ・マーカー ・GeoJSON