Leaflet

モバイルフレンドリーなインタラクティブマップのための
オープンソースの JavaScript ライブラリ

← チュートリアル

ズームレベル

Leafletは、緯度、経度、および「ズームレベル」を扱います。

ズームレベルが低いほど、地図は大陸全体を表示し、ズームレベルが高いほど、地図は都市の詳細を表示できます。

ズームレベルの仕組みを理解するには、まず測地学の基本的な紹介が必要です。

地球の形

ズームレベルゼロに固定された簡単な地図を見てみましょう。

var map = L.map('map', {
	minZoom: 0,
	maxZoom: 0
});

var cartodbAttribution = '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors, &copy; <a href="https://carto.com/attribution">CARTO</a>';

var positron = L.tileLayer('https://{s}.basemaps.cartocdn.com/light_all/{z}/{x}/{y}.png', {
	attribution: cartodbAttribution
}).addTo(map);

map.setView([0, 0], 0);
このスタンドアロンの例を見てください。

「地球全体」が幅256ピクセル、高さ256ピクセルの1つの画像にすぎないことに注目してください。

念のためですが、地球は正方形ではありません。むしろ、地球は球体に近いもので近似できる不規則な形をしています。

そのため、地球はほぼ丸いと仮定します。それを平らにするために、周りに仮想の円筒を置き、展開し、正方形に見えるように切り取ります。

Usgs map mercator
これは「円筒図法」と呼ばれます。

これは地球の表面を平面に表示する唯一の方法ではありません。何百もの方法があり、それぞれに独自の利点と欠点があります。次の6分間の動画は、このトピックの素晴らしい紹介です。

測地学、地図投影、座標系などは難しく、非常に難しい（そして、このチュートリアルの範囲外です）。地球が正方形であると仮定することは常に正しいとは限りませんが、ほとんどの場合、十分に機能し、物事を単純化し、Leaflet（および他の地図ライブラリ）を高速化できます。

2の累乗

今のところ、世界は正方形だと仮定しましょう。

ズームレベルゼロで世界を表すとき、幅と高さは256ピクセルです。ズームレベル1に進むと、幅と高さが2倍になり、4つの256ピクセル×256ピクセルの画像で表すことができます。

各ズームレベルで、各タイルは4つに分割され、そのサイズ（tileSizeオプションで指定されるエッジの長さ）は2倍になり、面積は4倍になります（つまり、世界の幅と高さは256·2ズームレベルピクセルです）。
ズーム 0ズーム 1ズーム 2

これはずっと続きます。ほとんどのタイルサービスは、カバレッジに応じて、ズームレベル18までのタイルを提供しています。これは、タイルごとに数ブロックの市街地を見るのに十分です。

スケールに関する注意

円筒図法を使用する際の欠点の1つは、スケールが一定ではなく、特に低ズームレベルでは距離やサイズの測定が信頼できないことです。

技術的な用語では、Leafletが使用する円筒図法は、正角（形状を保持）ですが、等距離（距離を保持しない）、および等面積（赤道に近いものは小さく見えるため、面積を保持しない）ではありません。

L.Control.Scaleをマップに追加し、赤道と北緯60°にパンすると、縮尺率が2倍になることがわかります。次の例では、これを自動的に行うためにjavascriptタイムアウトを使用しています。

L.control.scale().addTo(map);

setInterval(function(){
	map.setView([0, 0]);
	setTimeout(function(){
		map.setView([60, 0]);
	}, 2000);
}, 4000);
このスタンドアロンの例を見てください。

L.Control.Scaleは、マップの中心点に適用される縮尺を表示します。ズームレベルが高い場合、縮尺の変化はごくわずかで、目立ちません。

ズームの制御

Leafletマップには、表示されるズームレベルを制御するいくつかの方法がありますが、最も明白なのはsetZoom()です。たとえば、map.setZoom(0);は、mapのズームレベルを0に設定します。

この例では、タイムアウトを使用して、ズームレベル0と1を自動的に切り替えます。

setInterval(function(){
	map.setZoom(0);
	setTimeout(function(){
		map.setZoom(1);
	}, 2000);
}, 4000);
このスタンドアロンの例を見てください。

ズームレベル0と1で表示される画像が、前のセクションで表示される画像と一致していることに注意してください！

ズームを設定するその他の方法は次のとおりです。

分数ズーム

Leaflet 1.0.0で導入された機能は、分数ズームの概念でした。これまでは、マップのズームレベルは整数（0、1、2など）のみでしたが、現在は1.5や1.25のような分数を使用できます。

分数ズームはデフォルトで無効になっています。有効にするには、マップのzoomSnapオプションを使用します。zoomSnapオプションのデフォルト値は1です（つまり、マップのズームレベルは0、1、2などになります）。

zoomSnapの値を0.5に設定すると、マップの有効なズームレベルは0、0.5、1、1.5、2などになります。

値を0.1に設定すると、マップの有効なズームレベルは0、0.1、0.2、0.3、0.4などになります。

次の例では、zoomSnapの値0.25を使用しています。

var map = L.map('map', {
	zoomSnap: 0.25
});
このスタンドアロンの例を見てください。

ご覧のとおり、Leafletはズームレベル0または1のタイルのみをロードし、必要に応じてそれらを拡大縮小します。

Leafletは、ズームレベルを最も近い有効なズームレベルにスナップします。たとえば、zoomSnap: 0.25があり、map.setZoom(0.8)を実行しようとすると、ズームは0.75に戻ります。map.fitBounds(bounds)や、タッチスクリーンでのピンチズームジェスチャの終了時にも同じことが起こります。

zoomSnapはゼロに設定できます。これは、Leafletがズームレベルをスナップしないことを意味します。

zoomSnapに関連するもう1つの重要なマップオプションがあります。それは、zoomDeltaオプションです。これは、ズームボタン（デフォルトのL.Control.Zoomから）またはキーボードの+/-キーを使用するときにズームイン/ズームアウトするズームレベルの数を制御します。

マウスホイールズームの場合、wheelPxPerZoomLevelオプションは、マウスホイールのズームインまたはズームアウトの速度を制御します。

以下はzoomSnapがゼロに設定されている例です。

var map = L.map('map', {
	zoomDelta: 0.25,
	zoomSnap: 0
});

以下を試して、ズームレベルがどのように変化するかを確認してください。

このスタンドアロンの例を見てください。

これで、このチュートリアルは終わりです。マップでズームレベルを試してみてください！