Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
LeafletでWebGIS入門
株式会社 三洋コンサルタント
桐本 靖規
2015.07.03
FOSS4G 2015 Hokkaido
1
今日の目次
① Leafletとは
② 準備
③ 構築
Leafletとは
LeafletとはJavascriptで記述されているオープンソースのライブラリで
ファイル自体が軽量でコード量も少なくWebGISを構築可能です。
Web上で独自の地図サイトが作れます!!
DEMO
準 備
ブラウザ
テキストエディタ
ローカル環境
公 開
ブラウザ
テキストエディタ
ローカル環境
公 開
Internet Explorer
Chrome
Firefox
Safari
Opera
Internet Explorer
Chrome
Firefox
Safari
Opera
ブラウザ
テキストエディタ
ローカル環境
公 開
ブラウザ
テキストエディタ
ローカル環境
公 開
ブラウザ
テキストエディタ
ローカル環境
公 開
Webサーバー
構 築
基本構成
背景地図
コントロール
マーカー
GeoJSON
基本構成
背景地図
コントロール
マーカー
GeoJSON
index.html
stylesheet.css
script.js
HTML
CSS
JS
index.html
stylesheet.css
script.js
HTML
CSS
JS
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>Leaflet Sample</title>
<script src="./Library/leafle...
CDN
(コンテンツデリバリネットワーク)
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>Leaflet Sample</title>
<script src="http://cdnjs.clo...
html, body {
height: 100%;
padding: 0;
margin: 0;
}
#map {
z-index: 0;
height: 100%;
}
CSS
基本構成
背景地図
コントロール
マーカー
GeoJSON
地理院地図
var map = L.map('map');
L.tileLayer('http://cyberjapandata.gsi.go.jp/xyz/std/{z}/{x}/{
y}.png', {
attribution: "<a href='h...
OpenStreetMap
var map = L.map('map');
L.tileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png', {
attribution:'&copy; <a href="http://osm.o...
Google Maps
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>Leaflet Sample</title>
<script src="./Library/leafle...
var map = L.map('map');
var Googlemap = new L.Google('ROADMAP');
map.addLayer(Googlemap);
map.setView([43.0704123, 141.340...
Bing Maps
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>Leaflet Sample</title>
<script src="./Library/leafle...
var map = L.map('map');
var BingMap = new L.BingLayer(“アクセスキーを入力", {
type: 'Road' });
map.addLayer(BingMap);
map.setView([...
背景地図を複数表示
・地理院地図
・OpenStreetMap
・Google Maps
・Bing Maps
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>Leaflet Sample</title>
<script src="./Library/leafle...
var t_std = new L.tileLayer('http://cyberjapandata.gsi.go.jp/
xyz/std/{z}/{x}/{y}.png', {
attribution: "<a href='http://ww...
var g_roadmap = new L.Google('ROADMAP');
var g_satellite = new L.Google('SATELLITE');
var g_hybrid = new L.Google('HYBRID'...
var Map_BaseLayer = {
"BingMap 標準": b_roadmap,
"BingMap オルソ": b_Aerial,
"地理院地図 標準": t_std,
"地理院地図 淡色": t_pale,
"地理院地図 オルソ"...
DEMO
基本構成
背景地図
コントロール
マーカー
GeoJSON
レイヤ選択 表示
var Map_BaseLayer = {
"BingMap 標準": b_roadmap,
"BingMap オルソ": b_Aerial,
"地理院地図 標準": t_std,
"地理院地図 淡色": t_pale,
"地理院地図 オルソ"...
スケール
var Map_BaseLayer = {
"BingMap 標準": b_roadmap,
"BingMap オルソ": b_Aerial,
"地理院地図 標準": t_std,
"地理院地図 淡色": t_pale,
"地理院地図 オルソ"...
ズームバー
var map = L.map('map', {
center: [43.0704123, 141.3406076],
zoom: 17,
zoomControl: false,
layers: [t_pale]
});
var Map_Bas...
DEMO
基本構成
背景地図
コントロール
マーカー
GeoJSON
マーカー 表示
var Map_Marker = L.marker([43.0704123, 141.3406076])
.addTo(map);
var comment = '北海道大学 農学部本館';
Map_Marker.bindPopup(commen...
DEMO
マーカーアイコン 変更
var map = L.map('map', {
center: [43.0704123, 141.3406076],
zoom: 17,
zoomControl: false,
layers: [t_pale]
});
var sampleI...
DEMO
レイヤ 表示
var Map_BaseLayer = {
"BingMap 標準": b_roadmap,
"BingMap オルソ": b_Aerial,
"地理院地図 標準": t_std,
"地理院地図 淡色": t_pale,
"地理院地図 オルソ"...
DEMO
基本構成
背景地図
コントロール
マーカー
GeoJSON
データの準備
geojson.io
GeoJSON : 都市公園データ (点) を使用
国土数値情報(都市公園データ)を使用
QGIS
GeoJSON 表示
var pointdata = {
"type": "FeatureCollection",
"crs": { "type": "name", "properties": { "name":
"urn:ogc:def:crs:OGC:1.3:C...
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>Leaflet Sample</title>
<script src="./Library/leafle...
var ParkIcon = L.icon({
iconUrl: './img/Park.png',
iconSize: [50, 50],
iconAnchor: [25, 20],
popupAnchor: [0, -30]
});
var...
DEMO
まとめ
・準備
・背景地図
・コントロール
・マーカー
・GeoJSON
LeafletでWebGIS入門
LeafletでWebGIS入門
LeafletでWebGIS入門
LeafletでWebGIS入門
LeafletでWebGIS入門
LeafletでWebGIS入門
LeafletでWebGIS入門
LeafletでWebGIS入門
Upcoming SlideShare
Loading in …5
×

LeafletでWebGIS入門

4,672 views

Published on

FOSS4G 2015 Hokkaido 発表資料

Published in: Technology
  • Be the first to comment

LeafletでWebGIS入門

  1. 1. LeafletでWebGIS入門 株式会社 三洋コンサルタント 桐本 靖規 2015.07.03 FOSS4G 2015 Hokkaido 1
  2. 2. 今日の目次 ① Leafletとは ② 準備 ③ 構築
  3. 3. Leafletとは
  4. 4. LeafletとはJavascriptで記述されているオープンソースのライブラリで ファイル自体が軽量でコード量も少なくWebGISを構築可能です。
  5. 5. Web上で独自の地図サイトが作れます!!
  6. 6. DEMO
  7. 7. 準 備
  8. 8. ブラウザ テキストエディタ ローカル環境 公 開
  9. 9. ブラウザ テキストエディタ ローカル環境 公 開
  10. 10. Internet Explorer Chrome Firefox Safari Opera
  11. 11. Internet Explorer Chrome Firefox Safari Opera
  12. 12. ブラウザ テキストエディタ ローカル環境 公 開
  13. 13. ブラウザ テキストエディタ ローカル環境 公 開
  14. 14. ブラウザ テキストエディタ ローカル環境 公 開
  15. 15. Webサーバー
  16. 16. 構 築
  17. 17. 基本構成 背景地図 コントロール マーカー GeoJSON
  18. 18. 基本構成 背景地図 コントロール マーカー GeoJSON
  19. 19. index.html stylesheet.css script.js HTML CSS JS
  20. 20. index.html stylesheet.css script.js HTML CSS JS
  21. 21. <!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 ライブラリの参照設定
  22. 22. CDN (コンテンツデリバリネットワーク)
  23. 23. <!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 ライブラリの参照設定
  24. 24. html, body { height: 100%; padding: 0; margin: 0; } #map { z-index: 0; height: 100%; } CSS
  25. 25. 基本構成 背景地図 コントロール マーカー GeoJSON
  26. 26. 地理院地図
  27. 27. 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
  28. 28. OpenStreetMap
  29. 29. 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
  30. 30. Google Maps
  31. 31. <!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
  32. 32. var map = L.map('map'); var Googlemap = new L.Google('ROADMAP'); map.addLayer(Googlemap); map.setView([43.0704123, 141.3406076], 17); JS
  33. 33. Bing Maps
  34. 34. <!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
  35. 35. var map = L.map('map'); var BingMap = new L.BingLayer(“アクセスキーを入力", { type: 'Road' }); map.addLayer(BingMap); map.setView([43.0704123, 141.3406076], 17); JS
  36. 36. 背景地図を複数表示
  37. 37. ・地理院地図 ・OpenStreetMap ・Google Maps ・Bing Maps
  38. 38. <!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
  39. 39. 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 背景地図の読み込み
  40. 40. 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 画面の中心座標 ( 緯度・経度 ) 背景地図の読み込み
  41. 41. 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 背景レイヤの作成 レイヤーコントロール表示
  42. 42. DEMO
  43. 43. 基本構成 背景地図 コントロール マーカー GeoJSON
  44. 44. レイヤ選択 表示
  45. 45. 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
  46. 46. スケール
  47. 47. 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
  48. 48. ズームバー
  49. 49. 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
  50. 50. DEMO
  51. 51. 基本構成 背景地図 コントロール マーカー GeoJSON
  52. 52. マーカー 表示
  53. 53. 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マーカーの表示 ポップアップの表示
  54. 54. DEMO
  55. 55. マーカーアイコン 変更
  56. 56. 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 アイコンの設定
  57. 57. DEMO
  58. 58. レイヤ 表示
  59. 59. 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 オーバーレイヤ選択画面の表示
  60. 60. DEMO
  61. 61. 基本構成 背景地図 コントロール マーカー GeoJSON
  62. 62. データの準備
  63. 63. geojson.io
  64. 64. GeoJSON : 都市公園データ (点) を使用
  65. 65. 国土数値情報(都市公園データ)を使用 QGIS
  66. 66. GeoJSON 表示
  67. 67. 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
  68. 68. <!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
  69. 69. 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の表示 アイコンと属性値の反映
  70. 70. DEMO
  71. 71. まとめ
  72. 72. ・準備 ・背景地図 ・コントロール ・マーカー ・GeoJSON

×