Leaflet初級編 - Web地図サイトを構築してみよう-

FOSS4G 2016 TOKYO ハンズオンデイ 発表資料

Transcript

1. Leaflet 初級編 MIERUNE, LLC. / Yasunori Kirimoto 2016.11.04 FOSS4G 2016 TOKYO ハンズオン - Web地図サイトを構築してみよう-
2. MIERUNE, LLC. Yasunori Kirimoto
4. Contents はじめに ハンズオン その他事例
5. Introduction はじめに
6. 事前準備できてますか？？ http://bit.ly/leaflet161104
7. HTML CSS JS Web Technology
8. JavaScript Library
9. OpenLayers 3
10. CESIUM
11. D3.js
12. Leaflet
13. Web Service
14. CARTO
15. Mapbox
16. Hands On ハンズオン
17. 完成イメージ 基本構成 背景地図 コントロール オブジェクト GeoJSON プラグイン
18. demo demo
19. 完成イメージ 基本構成 背景地図 コントロール オブジェクト GeoJSON プラグイン
20. index.html stylesheet.css script.js HTML CSS JS
21. フォルダ構成
22. <!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <title>Leaflet Sample</title> <!-- Leafletライブラリ読み込み --> <script src="./library/leaflet-0.7.3/leaflet.js"></script> <link href="./library/leaflet-0.7.3/leaflet.css" rel="stylesheet" /> <!-- CSS読み込み --> <link href="./css/stylesheet.css" rel="stylesheet" /> </head> <body> <!-- Map読み込み --> <div id="map"></div> <!-- JS読み込み --> <script src="./js/script.js"></script> </body> </html> HTML
23. html, body { height: 100%; padding: 0; margin: 0; } #map { z-index: 0; height: 100%; } CSS
24. 完成イメージ 基本構成 背景地図 コントロール オブジェクト GeoJSON プラグイン
25. OpenStreetMap
27. var map = L.map('map'); L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', { attribution: '&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors' }).addTo(map); map.setView([35.680899409847584, 139.76712226867676], 16); JS
28. 地理院地図
30. L.tileLayer('https://cyberjapandata.gsi.go.jp/xyz/pale/{z}/{x}/{y}.png', { attribution: "<a href='http://www.gsi.go.jp/kikakuchousei/kikakuchousei40182.html' target='_blank'>国土地理院</a>" }).addTo(map); JS
32. L.tileLayer('https://cyberjapandata.gsi.go.jp/xyz/ort/{z}/{x}/{y}.jpg', { attribution: "<a href='http://www.gsi.go.jp/kikakuchousei/kikakuchousei40182.html' target='_blank'>国土地理院</a>" }).addTo(map); JS
33. MIERUNE地図
35. L.tileLayer('https://tile.mierune.co.jp/mierune_mono/{z}/{x}/{y}.png', { attribution: "Maptiles by <a href='http://mierune.co.jp/' target='_blank'>MIERUNE</a>, under CC BY. Data by <a href='http://osm.org/copyright' target='_blank'>OpenStreetMap</a> contributors, under ODbL." }).addTo(map); JS
36. 完成イメージ 基本構成 背景地図 コントロール オブジェクト GeoJSON プラグイン
37. レイヤ統合
38. var t_pale = new L.tileLayer('https://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('https://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('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', { attribution: '&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors' }); var m_mono = new L.tileLayer('https://tile.mierune.co.jp/mierune_mono/{z}/{x}/{y}.png', { attribution: "Maptiles by <a href='http://mierune.co.jp/' target='_blank'>MIERUNE</a>, under CC BY. Data by <a href='http://osm.org/copyright' target='_blank'>OpenStreetMap</a> contributors, under ODbL." }); JS
39. var lat = 35.680899409847584; var lng = 139.76712226867676; var map = L.map('map', { center: [lat, lng], zoom: 15, maxZoom: 18, zoomControl: true, layers: [m_mono] }); var Map_BaseLayer = { "地理院地図 淡色": t_pale, "地理院地図 オルソ": t_ort, "OpenStreetMap 標準": o_std, "MIERUNE地図 MONO": m_mono }; L.control.layers( Map_BaseLayer, null ).addTo(map); JS
40. レイヤ表示ON
41. L.control.layers( Map_BaseLayer, null, {collapsed:false} ).addTo(map); JS
42. スケール
43. L.control.scale({ imperial: false, maxWidth: 300 }).addTo(map); JS
44. ズームバー
45. var map = L.map('map', { center: [lat, lng], zoom: 15, maxZoom: 18, zoomControl: false, layers: [m_mono] }); JS
46. 完成イメージ 基本構成 背景地図 コントロール オブジェクト GeoJSON プラグイン
47. マーカー
48. var Map_Point = L.marker( [35.68089940984, 139.7671222686] ).addTo(map); var comment = '東京駅だよ!!'; Map_Point.bindPopup(comment); JS
49. var IconPin01 = L.icon({ iconUrl: "./img/pin01.png", iconSize: [25, 25], iconAnchor: [0, 25], popupAnchor: [0, -35] }); var Map_Point = L.marker( [35.68089940984, 139.7671222686], { icon: IconPin01 } ).addTo(map); JS
50. ライン
51. var Map_Line = L.polyline([ [35.67500798914924,139.75952625274658], [35.67845922918971,139.76094245910645], [35.689369743530044,139.76420402526855] ],{ "color": "#2DE9C4", "weight": 5, "opacity": 0.6 }).addTo(map); JS
52. ポリゴン
53. var Map_Polygon = L.polygon([ [35.675949251235025,139.76617813110352], [35.67410157813001,139.77188587188718], [35.67455478492641,139.77227210998535], [35.683757812281115,139.77862358093262], [35.68431553740134,139.77343082427979], [35.68469897115985,139.77094173431396], [35.679923346539084,139.76871013641357], [35.675949251235025,139.76617813110352] ],{ "color": "#E92D63", "weight": 3, "opacity": 0.8, "fillColor": "#562DE9", "fillOpacity": 0.4 }).addTo(map); JS
54. オーバーレイヤ
55. var Map_AddLayer = { "Point": Map_Point, "Line": Map_Line, "Polygon": Map_Polygon }; L.control.layers( Map_BaseLayer, Map_AddLayer, {collapsed:false} ).addTo(map); JS
56. 完成イメージ 基本構成 背景地図 コントロール オブジェクト GeoJSON プラグイン
57. データ準備
58. 地理空間データ作成 : geojson.io
59. オープンデータ
60. 国土数値情報（都市公園データ）を使用 QGIS : Shp → GeoJSON 変換
61. 表示
62. var sampledata = { "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
63. <script src="./vecter/map.geojson"></script> HTML
64. var GeoJsonSample = L.geoJson(sampledata).addTo(map); JS
65. アレンジ
66. <script src="./vecter/point.geojson"></script> HTML
67. var lat = 42.333174; var lng = 141.004646; var IconPin02 = L.icon({ iconUrl: "./img/pin02.png", iconSize: [25, 25], iconAnchor: [15, 20], popupAnchor: [-5, -30] }); var PointAll = L.layerGroup().addTo(map); var PointGeojson = L.geoJson(pointdata, { onEachFeature: function (feature, layer) { var field ="目標地点: " + feature.properties.OBJECTID; layer.bindPopup(field); }, pointToLayer: function (feature, layer) { if (feature.properties.OBJECTID > 25) { return L.marker(layer, { icon: IconPin01 }); }else if (feature.properties.OBJECTID <= 25) { return L.marker(layer, { icon: IconPin02 }); } } }).addTo(PointAll); JS
68. var Map_AddLayer = { "目標地点": PointAll }; L.control.layers( Map_BaseLayer, Map_AddLayer, {collapsed:false} ).addTo(map); JS
69. <script src="./vecter/line.geojson"></script> HTML
70. var LineAll = L.layerGroup().addTo(map); var line_geojson = L.geoJson(linedata, { style: { "color": "#58BE89", "weight": 3, "opacity": 0.7, "dashArray":[10, 5] }, onEachFeature: function (feature, layer) { var field ="距離(m): " + feature.properties.Shape_len; layer.bindPopup(field); }, clickable: true }).addTo(LineAll); var Map_AddLayer = { "目標地点": PointAll, "避難経路": LineAll }; JS
71. <script src="./vecter/polygon.geojson"></script> HTML
72. var PolygonAll = L.layerGroup().addTo(map); var PolygonGeojson = L.geoJson(polygondata, { style: function(feature) { if (feature.properties.MEANmax_ < 2) { return { "color": "#90D6E5", "weight": 0.5, "fill": true, "fillColor":"#90D6E5", "fillOpacity":0.4 }; }else if (feature.properties.MEANmax_ >= 2 && feature.properties.MEANmax_ < 4) { return { "color": "#2A5CAA", "weight": 0.5, "fill": true, "fillColor":"#2A5CAA", "fillOpacity":0.4 }; }else if (feature.properties.MEANmax_ >= 4 && feature.properties.MEANmax_ < 6) { return { "color": "#F4EE4F", "weight": 0.5, "fill": true, "fillColor":"#F4EE4F", "fillOpacity":0.6 }; }else if (feature.properties.MEANmax_ >= 6 && feature.properties.MEANmax_ < 8) { JS
73. var Map_AddLayer = { "目標地点": PointAll, "避難経路": LineAll, "津波区域": PolygonAll }; JS
74. 完成イメージ 基本構成 背景地図 コントロール オブジェクト GeoJSON プラグイン
75. ©OpenStreetMap contributors Leaflet LocateControl
76. <script src="./plugin/leaflet-locatecontrol/L.Control.Locate.min.js"></script> <link href="./plugin/leaflet-locatecontrol/L.Control.Locate.min.css" rel="stylesheet"/> <link href="//maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css" rel="stylesheet" > HTML
77. L.control.locate().addTo(map); JS
78. ©OpenStreetMap contributors Leaflet Label
79. <script src="./plugin/leaflet-label/leaflet.label.js"></script> <link href="./plugin/leaflet-label/leaflet.label.css" rel="stylesheet"/> HTML
80. onEachFeature: function (feature, layer) { var field ="浸水深さ(m): " + feature.properties.MEANmax_; layer.bindLabel(field); } JS
81. Other Cases その他事例
82. その他のプラグイン
83. ©OpenStreetMap contributors Leaflet Draw
84. ©OpenStreetMap contributors Leaflet MeasureControl
85. ©OpenStreetMap contributors Leaflet Minimap
86. ©OpenStreetMap contributors Leaflet Routing Machine
87. ハイブリッドアプリ
88. CORDOVA
89. PhoneGap
90. React Native
91. Monaca
92. 使い方
93. 新規プロジェクトの作成
94. プロジェクト選択
95. ファイルをインポート
96. プレビュー機能・実機検証
97. QMetaTiles プラグイン
98. CARTO,Mapboxと連携
99. みんなの公園マップ - 札幌版 -
100. Leaflet
101. CARTO
102. Mapbox
103. おつかれさまでした！