O slideshow foi denunciado.
Utilizamos seu perfil e dados de atividades no LinkedIn para personalizar e exibir anúncios mais relevantes. Altere suas preferências de anúncios quando desejar.
LEAFLET.JS
超入門
都筑総研
LEAFLET.JSとは
• モバイルフレンドリーなインタラクティブマップを実現する、
先進的でオープンなJavaScriptのライブラリ
• 簡素 & 高速 & 使いやすい
ライブラリの導入
<link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet-0.7.3/leaflet.css" />
<script src="http://cdn.leafletjs...
地図オブジェクトの構築
var map = L.map(‘map’).setView([ 36.0 , 140.0 ], 13 );
mapというIDが付与されたタグに対して、
 中心座標 (世界測地系) 緯度 36.0 , 経度 140.0
...
タイルレイヤの設定
L.tileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png', {
attribution: '&copy; <a href="http://osm.org/copyright"...
<html>
<head>
<title>leaflet.js test</title>
<link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet-0.7.3/leaflet.css" ...
<html>
<head>
<title>leaflet.js test</title>
<link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet-0.7.3/leaflet.css" ...
完成!
クリックイベントの取得
• イベントオブジェクト e から緯度経度を取得可能です
• 緯度経度は世界測地系(WGS84,EPSG:4326)
map.on( 'click', function(e) {
alert( ‘Clicked Poin...
マーカーの配置
• L .marker([ 緯度 , 経度]).addTo(map) で地図に配置
• 座標系は世界測地系 (WGS84,EPSG:4326)
var marker = L.marker([36.00, 134.00]).add...
地図の中心位置の変更
• panTo関数に緯度経度を指定します
• 座標系は世界測地系 (WGS84,EPSG:4326)
map.panTo(new L.LatLng(36.00, 134.00]));
応用編
• クリックした場所を中心に移動し、マーカーを表示する
イベントオブジェクトから、
座標オブイェクト(e.latlng)
を用いています。
var marker ;
map.on( 'click', function(e) {
if( ...
応用編
• クリックした場所を中心に移動し、マーカーを表示する
var marker ;
map.on( 'click', function(e) {
if( marker != null ){
map.removeLayer( marker ...
Próximos SlideShares
Carregando em…5
×

Leaflet.js超入門

12.711 visualizações

Publicada em

leaflet.jsの簡単な解説です

1.Webサイトへの設置方法
2.クリックイベントの取得
3.マーカーの設置
4.地図の中心位置の移動

Webサイトに地図を配置した時に、よく使いそうな事について書いております。

Publicada em: Software
  • Seja o primeiro a comentar

Leaflet.js超入門

  1. 1. LEAFLET.JS 超入門 都筑総研
  2. 2. LEAFLET.JSとは • モバイルフレンドリーなインタラクティブマップを実現する、 先進的でオープンなJavaScriptのライブラリ • 簡素 & 高速 & 使いやすい
  3. 3. ライブラリの導入 <link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet-0.7.3/leaflet.css" /> <script src="http://cdn.leafletjs.com/leaflet-0.7.3/leaflet.js"></script> スタイルシートの設置 JavaScript設置 上記の2行のHEADタグに記述すれば、導入完了です
  4. 4. 地図オブジェクトの構築 var map = L.map(‘map’).setView([ 36.0 , 140.0 ], 13 ); mapというIDが付与されたタグに対して、  中心座標 (世界測地系) 緯度 36.0 , 経度 140.0  拡大率13として初期化します。
  5. 5. タイルレイヤの設定 L.tileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png', { attribution: '&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors' }).addTo(map); タイル地図サーバのURL http://{s}.tile.osm.org/{z}/{x}/{y}.png 地図右下のコピーライト '&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
  6. 6. <html> <head> <title>leaflet.js test</title> <link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet-0.7.3/leaflet.css" /> <script src="http://cdn.leafletjs.com/leaflet-0.7.3/leaflet.js"></script> <style type="text/css"> body { padding: 0px; margin: 0px;} </style> </head> <body> <div id="map" style="height:100%;"></div> </body> <script type="text/javascript"> //mapタグへ地図の設置、中心座標と拡大率の設定 var map = L.map("map").setView([ 36 , 140 ], 13); // オープンストリートマップのタイルレイヤの追加 L.tileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png', { attribution: '&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors' }).addTo(map); </script> </html>
  7. 7. <html> <head> <title>leaflet.js test</title> <link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet-0.7.3/leaflet.css" /> <script src="http://cdn.leafletjs.com/leaflet-0.7.3/leaflet.js"></script> <style type="text/css"> body { padding: 0px; margin: 0px;} </style> </head> <body> <div id="map" style="height:100%;"></div> </body> <script type="text/javascript"> //mapタグへ地図の設置、中心座標と拡大率の設定 var map = L.map("map").setView([ 36 , 140 ], 13); // オープンストリートマップのタイルレイヤの追加 L.tileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png', { attribution: '&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors' }).addTo(map); </script> </html> ライブラリの 読み込み このタグに地図 が入ります BODYタグの後で、地図を初期化す ることで、タグにアクセス可能
  8. 8. 完成!
  9. 9. クリックイベントの取得 • イベントオブジェクト e から緯度経度を取得可能です • 緯度経度は世界測地系(WGS84,EPSG:4326) map.on( 'click', function(e) { alert( ‘Clicked Point : ' + e.latlng.lng+' ‘+e.latlng.lat ); } );
  10. 10. マーカーの配置 • L .marker([ 緯度 , 経度]).addTo(map) で地図に配置 • 座標系は世界測地系 (WGS84,EPSG:4326) var marker = L.marker([36.00, 134.00]).addTo(map);
  11. 11. 地図の中心位置の変更 • panTo関数に緯度経度を指定します • 座標系は世界測地系 (WGS84,EPSG:4326) map.panTo(new L.LatLng(36.00, 134.00]));
  12. 12. 応用編 • クリックした場所を中心に移動し、マーカーを表示する イベントオブジェクトから、 座標オブイェクト(e.latlng) を用いています。 var marker ; map.on( 'click', function(e) { if( marker != null ){ map.removeLayer( marker ); } marker = L.marker( e.latlng ).addTo( map ); map.panTo( e.latlng ); } );
  13. 13. 応用編 • クリックした場所を中心に移動し、マーカーを表示する var marker ; map.on( 'click', function(e) { if( marker != null ){ map.removeLayer( marker ); } marker = L.marker( e.latlng ).addTo( map ); map.panTo( e.latlng ); } ); 表示中のピンを削除 マーカー追加 地図中心の変更

×