Próximos SlideShares
Leaflet.js超入門
- 1. LEAFLET.JS 超入門 都筑総研
- 2. LEAFLET.JSとは • モバイルフレンドリーなインタラクティブマップを実現する、 先進的でオープンなJavaScriptのライブラリ • 簡素 ＆ 高速 ＆ 使いやすい
- 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. 地図オブジェクトの構築 var map = L.map(‘map’).setView([ 36.0 , 140.0 ], 13 ); mapというIDが付与されたタグに対して、 中心座標 （世界測地系） 緯度 36.0 ， 経度 140.0 拡大率13として初期化します。
- 5. タイルレイヤの設定 L.tileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png', { attribution: '© <a href="http://osm.org/copyright">OpenStreetMap</a> contributors' }).addTo(map); タイル地図サーバのURL http://{s}.tile.osm.org/{z}/{x}/{y}.png 地図右下のコピーライト '© <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
- 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: '© <a href="http://osm.org/copyright">OpenStreetMap</a> contributors' }).addTo(map); </script> </html>
- 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: '© <a href="http://osm.org/copyright">OpenStreetMap</a> contributors' }).addTo(map); </script> </html> ライブラリの 読み込み このタグに地図 が入ります BODYタグの後で、地図を初期化す ることで、タグにアクセス可能
- 8. 完成！
- 9. クリックイベントの取得 • イベントオブジェクト e から緯度経度を取得可能です • 緯度経度は世界測地系（WGS84，EPSG：4326） map.on( 'click', function(e) { alert( ‘Clicked Point : ' + e.latlng.lng+' ‘+e.latlng.lat ); } );
- 10. マーカーの配置 • L .marker([ 緯度 , 経度]).addTo(map) で地図に配置 • 座標系は世界測地系 （WGS84，EPSG：4326） var marker = L.marker([36.00, 134.00]).addTo(map);
- 11. 地図の中心位置の変更 • panTo関数に緯度経度を指定します • 座標系は世界測地系 （WGS84，EPSG：4326） map.panTo(new L.LatLng(36.00, 134.00]));
- 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. 応用編 • クリックした場所を中心に移動し、マーカーを表示する var marker ; map.on( 'click', function(e) { if( marker != null ){ map.removeLayer( marker ); } marker = L.marker( e.latlng ).addTo( map ); map.panTo( e.latlng ); } ); 表示中のピンを削除 マーカー追加 地図中心の変更
Seja o primeiro a comentar