leafletの使用方法

差分

このページの2つのバージョン間の差分を表示します。

この比較画面へのリンク

両方とも前のリビジョン 前のリビジョン
次のリビジョン		 前のリビジョン
leafletの使用方法 [2021/09/28 03:18] – 133.11.144.10leafletの使用方法 [Unknown date] (現在) – 削除 - 外部編集 (Unknown date) 127.0.0.1
行 1: 行 1:
-===== LocalでLeafletを使用 ===== 
- 
-[[https://leafletjs.com/download.html]] からソースコードをダウンロードし、解凍後、publicディレクトリ以下に配置。またマップデータもpublicディレクトリ以下に配置。 
- 
-HTML上で 
- 
-    link(rel='stylesheet', href='leaflet/leaflet.css') 
-    script(src='leaflet/leaflet.js') 
- 
-を指定してあげれば、使用可能。(相対パスで指定しないとテスト環境で動作しないので注意) 
- 
-===== Leafletの基本の使い方 ===== 
-以下のサイトを参照した。 
- 
-基本の使い方[[https://qiita.com/mitch0807/items/7ed4eaf6253a9b879ae7]] 
- 
-タイルレイヤ―の説明[[https://business.mapfan.com/blog/detail/1571]] 
- 
-使用例[[https://ktgis.net/service/leafletlearn/index.html#step1]] 
- 
-公式ドキュメント[[https://leafletjs.com/reference-1.6.0.html#map-example]] 
- 
-==== 地図を表示するための枠の表示 ==== 
- 
-    var map = L.map('div要素のID', optionのオブジェクト); 
-     
-{{:pasted:20210617-110830.png}} 
- 
-例 
- 
-    var map = L.map('map', { 
-        center: [51.505, -0.09], 
-        zoom: 13 
-    }); 
- 
-====== Leafletで4隅の緯度経度を取得 ====== 
- 
-==== 4隅の緯度経度の取得 ==== 
- 
-''getbound()メソッド'' で取得可能。 
- 
-    var bounds = mymap.getBounds(); 
-    var north = bounds._northEast.lat; 
-    var south = bounds._southWest.lat; 
-    var east = bounds._northEast.lng; 
-    var west = bounds._southWest.lng; 
- 
-==== 地図移動・拡大・縮小のイベントを取得 ==== 
- 
-''move''イベントを''on''メソッドで取得すればよい。 
- 
-    mymap.on("move", e => { 
-        イベント発生時に実行したい関数 
-    }); 
- 
-==== マップの移動・拡大・縮小時に4隅の緯度経度を取得 ==== 
-こちらを参照[[https://leafletjs.com/reference-1.6.0.html#map-example]] 
- 
-    mymap.on("move", e => { 
-            // console.log("moved"); 
-            var bounds = mymap.getBounds(); 
-            var north = bounds._northEast.lat; 
-            var south = bounds._southWest.lat; 
-            var east = bounds._northEast.lng; 
-            var west = bounds._southWest.lng; 
-     
-            markerList.forEach(marker => { 
-                if (south<marker.pos[0] && marker.pos[0]<north){ 
-                    if (west<marker.pos[1] && marker.pos[1]<east){ 
-                        console.log(marker.name); 
-                    } 
-                } 
-            }) 
-    }); 
  
  • leafletの使用方法.1632799092.txt.gz
  • 最終更新: 2021/09/28 03:18
  • by 133.11.144.10