地図にスケール表示を追加するためには下記のコードを追記します。デフォルトの場合、地図画面右下にmi/ft表記とm/km表記の２種が表示されます。
L.control.scale().addTo(_map);使い方
１．mi/ftを非表示にする
L.control.scale({ imperial: false }).addTo(_map);２．m/kmを非表示にする
L.control.scale({ metric: false }).addTo(_map);３．スケール表記の幅を設定
L.control.scale({ maxWidth: 100 }).addTo(_map);４．スケール表記位置を設定
L.control.scale({position: 'bottomright'}).addTo(_map);- ‘topleft’ 地図の左上
- ‘topright’ 地図の右上
- ‘bottomleft’ 地図の左下
- ‘bottomright’ 地図の右下
組み合わせ
上記設定を組み合わせて設定すると、
L.control.scale({imperial: false, maxWidth: 100, position: 'bottomright'}).addTo(_map);全体コード
<html lang="ja">
<head>
<title>Leafletのスケール表示</title>
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.9.4/dist/leaflet.css">
<script src="https://unpkg.com/leaflet@1.9.4/dist/leaflet.js"></script>
</head>
<body>
<div id="map" style="width:100%;height:100%"></div>
<script>
//表示位置を設定
var _map = L.map('map');
//初期表示時に中心座標とズームレベルを設定
_map.setView([35.6895, 139.69172], 10);
//初期表示時の表示地図を設定
L.tileLayer('https://cyberjapandata.gsi.go.jp/xyz/std/{z}/{x}/{y}.png', {
attribution: "<a href='https://maps.gsi.go.jp/development/ichiran.html' target='_blank'>国土地理院</a>"
}).addTo(_map);
//スケールコントロールを設置
L.control.scale({imperial: false, maxWidth: 100, position: 'bottomright'}).addTo(_map);
</script>
</body>
</html>
コメント