【ITニュース解説】How to Calculate Pixel Width and Height of a Bounding Box at Different Map Zoom Levels

静的地図画像を生成したり、紙に地図を印刷したりする際、地図上の特定の地域が画面や紙の上でどれくらいのピクセル幅と高さになるかを正確に知ることは非常に重要である。例えば、パリのようなある特定の地域を緯度と経度の四隅の座標（バウンディングボックスと呼ぶ）で指定した場合、地図のズームレベルによって、その地域のピクセルサイズは大きく変わる。この課題を解決するため、特定のズームレベルでのピクセルサイズを計算したり、逆に望ましいピクセルサイズから最適なズームレベルを割り出したりする方法が求められる。これは、Geoapify Static Maps APIのようなサービスを使って、指定のサイズの地図を印刷したり、地図上の文字が読みやすいように画像を生成したり、指定した範囲が画像にぴったり収まるようにしたりする場合に役立つ。

現代の多くの地図ライブラリは、Web Mercator投影法という方式（EPSG:3857）を利用している。これは地球の球状の地理座標（緯度と経度）を、コンピュータ画面で扱いやすい平面で正方形の地図に変換するための国際標準の仕組みである。この投影法では、経度はX軸に沿ってまっすぐに変換される。例えば、ズームレベル0では、世界全体が256ピクセル幅のタイル1枚に収まる。しかし緯度の変換は少し複雑で、Mercatorの計算式によって極に近づくほど距離が引き伸ばされる特性がある。そのため、極端な値にならないように、地図はだいたい北緯・南緯85.05113度でクリップされる。

このWeb Mercator投影法では、地図は通常256x256ピクセルのタイル（小分けにされた地図画像）のグリッドで構成されている。ズームレベル0では世界全体が256ピクセル幅のタイル1枚で表現される。ズームレベル1になると、世界は512ピクセル幅になり（2枚のタイルが横に並ぶ）、ズームレベル2では1024ピクセル幅となる。一般的に、世界全体のピクセルサイズは「256 × 2のズームレベル乗」という式で計算できる。つまり、ズームレベルが1上がるごとに、地図の縦横のピクセル数がそれぞれ2倍になるわけである。このような緯度・経度からピクセルへの変換の仕組みが、バウンディングボックスのピクセル幅や高さがズームレベルに依存する理由を説明する。例えば、赤道近くの1度×1度の範囲は、ズームレベルが低いとわずか数ピクセルにしかならないが、ズームレベルが高くなると数千ピクセルにもなることがある。特に高緯度地域では、Web Mercatorの特性によりこの引き伸ばし効果がさらに強調される。

このような背景を理解した上で、具体的な三つのシナリオを考える。一つ目は、特定のズームレベルがすでにわかっている場合に、バウンディングボックスが何ピクセル幅、何ピクセル高さになるかを計算するケースである。これは、緯度と経度の座標をWeb Mercatorの世界ピクセル座標に変換することで実現できる。経度からX座標への変換は比較的単純で、「(経度 + 180) / 360 × 世界のピクセルサイズ」という式で計算される。緯度からY座標への変換は少し複雑で、緯度をラジアンに変換した後、Mercator投影の公式を使って計算される。JavaScriptのコードでは、lonLatToWorldPixelsという関数が、緯度と経度、ズームレベルを入力として、対応する世界ピクセル座標のXとYを返す。この関数を使って、バウンディングボックスの二つの対角の点のピクセル座標を求め、それらの差を取ることで、バウンディングボックスのピクセル幅と高さを計算するbboxSizePx関数が作成できる。例えば、パリのバウンディングボックスをズームレベル5で見ると数ピクセル程度だが、ズームレベル10では数百ピクセルになることがこの計算で確認できる。この計算は、印刷や静的画像の生成において、適切なズームレベルを選択し、目的の領域が小さすぎず、また画像に収まりきらないことがないようにするために不可欠である。

二つ目のシナリオは、画像の高さが固定されている場合に、それに対応する幅を計算するケースである。Web Mercator投影法では、バウンディングボックスのピクセル幅と高さはどちらも「2のズームレベル乗」に比例して拡大・縮小するため、片方の寸法が分かれば、そこからズームレベルを逆算し、もう片方の寸法を導き出すことができる。この計算には、まずズームレベル0でのバウンディングボックスのピクセル幅と高さの差（dx0とdy0）を計算するbboxDeltaAtZoom0関数を使う。次に、目標のピクセル高さ(targetHeightPx)とdy0を使って、ズームレベルを計算するzoomForHeight関数を定義する。この計算されたズームレベルを最初のbboxSizePx関数に渡すことで、対応する幅を求めることができる。例えば、パリのバウンディングボックスを高さ600ピクセルにしたい場合、約10.9のズームレベルが必要で、その時の幅は約526ピクセルになることがわかる。この計算は、紙のサイズが決まっている場合や、縦長の静的地図を作成する場合など、画像の高さが固定されている状況で非常に便利である。

三つ目のシナリオは、画像の幅が固定されている場合に、それに対応する高さを計算するケースである。これも二つ目のシナリオと同様の原理で、固定された幅から最適なズームレベルを計算し、そのズームレベルでの高さを導き出す。まず、bboxDeltaAtZoom0関数でズームレベル0でのバウンディングボックスのピクセル幅の差(dx0)を求める。次に、目標のピクセル幅(targetWidthPx)とdx0を使って、ズームレベルを計算するzoomForWidth関数を定義する。この計算されたズームレベルを、最初のケースで作成したbboxSizePx関数に渡すことで、対応する高さを求めることができる。例えば、パリのバウンディングボックスを幅800ピクセルにしたい場合、約11.5のズームレベルが必要で、その時の高さは約912ピクセルになることがわかる。この計算は、ウェブサイトの固定幅のコンテナに地図を表示する場合や、横長の静的地図を特定の幅に合わせて作成する場合など、画像の幅が固定されている状況で役立つ。

これらの計算を直感的に理解するためには、実際に数値を入力して試せるデモが提供されている。このデモでは、バウンディングボックスの座標を入力し、ズームレベルや目標の幅・高さを変更すると、その場で結果が更新される。これにより、地理座標、ズームレベル、そしてピクセルサイズがどのように相互作用するのかを視覚的に把握できる。

まとめると、Web Mercator投影法におけるバウンディングボックスの扱いは、単に地理座標の問題だけでなく、ピクセルサイズとの関係を理解することが重要である。与えられたズームレベルでのピクセル幅と高さの計算、固定された高さから幅を求める計算、そして固定された幅から高さを求める計算は、地図の印刷や静的画像の生成において特に重要である。これらの計算によって、地図の表示領域が画像に適切に収まるようにしたり、重要な特徴が欠けることなく表示されたり、ラベルやマーカーが読みやすく維持されたりする。実際にデモを試すことで、ズーム、幅、高さの間の関係性をリアルタイムに体験できる。