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

FOSS4G 2017 Hokkaido ハンズオンデイ 発表資料

Transcript

1. Maptiles by MIERUNE, under CC BY. Data by OpenStreetMap contributors, under ODbL. Leaflet 初級編 MIERUNE Inc. / Yasunori Kirimoto 2017.06.30 FOSS4G 2017 Hokkaido ハンズオン - Web地図サイトを構築してみよう-
2. Maptiles by MIERUNE, under CC BY. Data by OpenStreetMap contributors, under ODbL. 地理空間情報エンジニア Yasunori Kirimoto
3. MIERUNE地図 Maptiles by MIERUNE, under CC BY. Data by OpenStreetMap contributors, under ODbL.
4. KIKI-TORI MAP 国立環境研究所(2017)KIKI-TORI マップ, 国立環境研究所 生物・生態系環境研究センター制作. ​http://www.nies.go.jp/kikitori/contents/map (2017/6/18 閲覧)
5. Contents はじめに ハンズオン その他事例
6. Introduction はじめに
7. 事前準備できてますか？？ http://day-journal.com/blog/day-016
8. HTML CSS JS Web Technology
9. JavaScript Library
10. OpenLayers 3
11. CESIUM
12. D3.js
13. Leaflet
14. Web Service
15. CARTO
16. Mapbox
17. Hands On ハンズオン
18. 完成イメージ 基本構成 背景地図 コントロール オブジェクト GeoJSON プラグイン
19. demo demo
20. 完成イメージ 基本構成 背景地図 コントロール オブジェクト GeoJSON プラグイン
21. index.html stylesheet.css script.js HTML CSS JS
22. フォルダ構成
23. 初期表示状態
24. <!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
25. html, body { height: 100%; padding: 0; margin: 0; } #map { z-index: 0; height: 100%; } CSS
26. 完成イメージ 基本構成 背景地図 コントロール オブジェクト GeoJSON プラグイン
27. OpenStreetMap
29. 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
30. 地理院地図
32. 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
34. 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
35. MIERUNE地図
37. 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
38. 完成イメージ 基本構成 背景地図 コントロール オブジェクト GeoJSON プラグイン
39. レイヤ統合
40. 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
41. 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
42. レイヤ表示ON
43. L.control.layers( Map_BaseLayer, null, {collapsed:false} ).addTo(map); JS
44. スケール
45. L.control.scale({ imperial: false, maxWidth: 300 }).addTo(map); JS
46. ズームバー
47. var map = L.map('map', { center: [lat, lng], zoom: 15, maxZoom: 18, zoomControl: false, layers: [m_mono] }); JS
48. 完成イメージ 基本構成 背景地図 コントロール オブジェクト GeoJSON プラグイン
49. マーカー
50. var Map_Point = L.marker( [35.68089940984, 139.7671222686] ).addTo(map); var comment = '東京駅だよ!!'; Map_Point.bindPopup(comment); JS
51. 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
52. ライン
53. 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
54. ポリゴン
55. 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
56. オーバーレイヤ
57. var Map_AddLayer = { "Point": Map_Point, "Line": Map_Line, "Polygon": Map_Polygon }; L.control.layers( Map_BaseLayer, Map_AddLayer, {collapsed:false} ).addTo(map); JS
58. 完成イメージ 基本構成 背景地図 コントロール オブジェクト GeoJSON プラグイン
59. データ準備
60. 地理空間データ作成 : geojson.io
61. オープンデータ
62. 国土数値情報（都市公園データ）を使用 QGIS : Shp → GeoJSON 変換
63. 表示
64. 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
65. <script src="./vecter/map.geojson"></script> HTML
66. var GeoJsonSample = L.geoJson(sampledata).addTo(map); JS
67. アレンジ
68. <script src="./vecter/point.geojson"></script> HTML
69. 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
70. var Map_AddLayer = { "目標地点": PointAll }; L.control.layers( Map_BaseLayer, Map_AddLayer, {collapsed:false} ).addTo(map); JS
71. <script src="./vecter/line.geojson"></script> HTML
72. 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
73. <script src="./vecter/polygon.geojson"></script> HTML
74. 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
75. var Map_AddLayer = { "目標地点": PointAll, "避難経路": LineAll, "津波区域": PolygonAll }; JS
76. 完成イメージ 基本構成 背景地図 コントロール オブジェクト GeoJSON プラグイン
77. ©OpenStreetMap contributors Leaflet LocateControl
78. <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
79. L.control.locate().addTo(map); JS
80. ©OpenStreetMap contributors Leaflet Label
81. <script src="./plugin/leaflet-label/leaflet.label.js"></script> <link href="./plugin/leaflet-label/leaflet.label.css" rel="stylesheet"/> HTML
82. onEachFeature: function (feature, layer) { var field ="浸水深さ(m): " + feature.properties.MEANmax_; layer.bindLabel(field); } JS
83. Other Cases その他事例
84. その他のプラグイン
85. Leaflet.MultiTileLayer
86. ©OpenStreetMap contributors Leaflet Minimap
87. Leaflet.heat
88. ©OpenStreetMap contributors Leaflet Draw
89. Leaflet-icon-pulse
90. ©OpenStreetMap contributors Leaflet MeasureControl
91. Leaflet Animated Marker
92. ©OpenStreetMap contributors Leaflet Routing Machine
93. ハイブリッドアプリ
94. CORDOVA
95. PhoneGap
96. Monaca
97. 使い方
98. 新規プロジェクトの作成
99. プロジェクト選択
100. ファイルをインポート
101. プレビュー機能・実機検証
102. CARTO,Mapboxと連携
103. みんなの公園マップ - 札幌版 -
104. Leaflet
105. CARTO
106. Mapbox
107. Maptiles by MIERUNE, under CC BY. Data by OpenStreetMap contributors, under ODbL. おつかれさまでした！