Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
LeafletでWebGIS入門
Search
Yasunori Kirimoto
July 03, 2015
Technology
0
320
LeafletでWebGIS入門
FOSS4G 2015 Hokkaido 発表資料
Yasunori Kirimoto
July 03, 2015
Tweet
Share
More Decks by Yasunori Kirimoto
See All by Yasunori Kirimoto
MapLibreとAmazon Location Service
dayjournal
1
210
AWS re:Invent 2023 現地での体験
dayjournal
1
580
英語が苦手でも世界にアウトプットしている話
dayjournal
3
1.4k
FOSS4GとAmazon Location Serviceの親和性
dayjournal
0
560
MIERUNEの組織とカルチャー
dayjournal
0
200
AWSにおける地理空間情報活用
dayjournal
0
480
FOSS4Gカルチャーとクラウド
dayjournal
0
480
Introduction to Amazon Location Service
dayjournal
0
450
AWSではじめる位置情報アプリケーション
dayjournal
1
1.1k
Other Decks in Technology
See All in Technology
生成AIと産業向けソフトウェアの自動生成 〜 ハノーバーメッセ2024より〜
kioto
2
430
AWS CLIの起動が重くてつらいので aws-sdk-client-go を書いた / kamakura.go#6
fujiwara3
6
3.3k
パフォーマンス最適化のベストプラクティス
databricksjapan
0
210
OPENLOGI Company Profile
hr01
0
46k
SLOいつ決めましょう?
abnoumaru
3
770
シンプルなHITL機械学習と様々なタスクにおけるHITL機械学習
naohachi89
0
320
開発スピードの維持向上を支える、テスト設計の 漸進的進化への取り組み / Continuous Test Design Development for Speed of Product Development
ropqa
0
180
エムスリーQAチーム紹介資料 / Introduction of M3 QA Team
m3_engineering
1
330
使われないものを作るな!出口から作るデータ分析基盤 / Data Platform Development Starting from the User Needs
amaotone
16
4.7k
動画配信サービスのフロントエンド実装に学ぶ設計原則
yud0uhu
1
130
本番環境で Cloudflareを 使ってみた話
miu_crescent
2
130
Prisma ORMを2年運用して培ったノウハウを共有する
tockn
19
5.1k
Featured
See All Featured
Building an army of robots
kneath
300
41k
[Rails World 2023 - Day 1 Closing Keynote] - The Magic of Rails
eileencodes
9
1.3k
[RailsConf 2023 Opening Keynote] The Magic of Rails
eileencodes
14
8.4k
Build your cross-platform service in a week with App Engine
jlugia
226
17k
CoffeeScript is Beautiful & I Never Want to Write Plain JavaScript Again
sstephenson
155
14k
Atom: Resistance is Futile
akmur
260
25k
Web development in the modern age
philhawksworth
203
10k
[RailsConf 2023] Rails as a piece of cake
palkan
29
4.1k
Templates, Plugins, & Blocks: Oh My! Creating the theme that thinks of everything
marktimemedia
20
1.8k
It's Worth the Effort
3n
180
27k
Sharpening the Axe: The Primacy of Toolmaking
bcantrill
22
1.4k
ReactJS: Keep Simple. Everything can be a component!
pedronauck
660
120k
Transcript
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
ブラウザ テキストエディタ ローカル環境 公 開
None
None
None
ブラウザ テキストエディタ ローカル環境 公 開
None
ブラウザ テキストエディタ ローカル環境 公 開
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/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 ライブラリの参照設定
CDN (コンテンツデリバリネットワーク)
<!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 ライブラリの参照設定
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='http://www.gsi.go.jp/kikakuchousei/
kikakuchousei40182.html' target='_blank'>国土地理院</a>“ }).addTo(map); map.setView([43.0704123, 141.3406076], 17); JS
None
OpenStreetMap
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.0704123, 141.3406076], 17); JS
Google Maps
None
<!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&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
var map = L.map('map'); var Googlemap = new L.Google('ROADMAP'); map.addLayer(Googlemap);
map.setView([43.0704123, 141.3406076], 17); JS
Bing Maps
<!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
None
None
var map = L.map('map'); var BingMap = new L.BingLayer(“アクセスキーを入力", {
type: 'Road' }); map.addLayer(BingMap); map.setView([43.0704123, 141.3406076], 17); JS
背景地図を複数表示
・地理院地図 ・OpenStreetMap ・Google Maps ・Bing Maps
<!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&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
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: '© <a href="http://osm.org/copyright"> OpenStreetMap</a> contributors' }); JS 背景地図の読み込み
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 画面の中心座標 ( 緯度・経度 ) 背景地図の読み込み
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 背景レイヤの作成 レイヤーコントロール表示
DEMO
基本構成 背景地図 コントロール マーカー GeoJSON
レイヤ選択 表示
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
スケール
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
ズームバー
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
DEMO
基本構成 背景地図 コントロール マーカー GeoJSON
マーカー 表示
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 マーカーの表示 ポップアップの表示
DEMO
マーカーアイコン 変更
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 アイコンの設定
DEMO
レイヤ 表示
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 オーバーレイヤ選択画面の表示
DEMO
基本構成 背景地図 コントロール マーカー GeoJSON
データの準備
geojson.io
GeoJSON : 都市公園データ (点) を使用
国土数値情報(都市公園データ)を使用 QGIS
GeoJSON 表示
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
<!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&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
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の表示 アイコンと属性値の反映
DEMO
まとめ
・準備 ・背景地図 ・コントロール ・マーカー ・GeoJSON