地図ビューポートとは？センター座標、ズームレベル、表示タイル範囲を解説

地図ライブラリと通信するコードを書いたことがあれば、ビューポートに触れるコードを書いたはずです。ビューポートは地図のランタイム状態です。どこにセンタリングされているか、どれだけズームインされているか、どちらを向いているか、オプションでどれだけチルトされているか。すべてのパン、ズーム、回転、クリックはそれに依存しています。

このガイドでは、ビューポートとは実際に何か、それを記述する4つのコア値、タイルとバウンディングボックスとの相互作用、そしてビューポート状態を保存、復元、共有する本番パターンを解説します。

4つのコア値

モダンなウェブ地図のビューポートは最大4つの値で記述されます。

• センター（{ lat, lng }）: 画面中央の地理座標。
• ズーム（数値、しばしば浮動小数点数）: 地図がどれだけズームインされているか。大きい数値は狭いエリアをより詳細に表示します。
• ベアリング（度数、デフォルト0）: 「北が上」からの地図の回転。90は東が上を意味します。
• ピッチ（度数、0〜約85）: 3Dのチルト。0はフラットな俯瞰、60は強いパースペクティブビュー。

すべてのモダンな地図ライブラリ（MapLibre GL、Mapbox GL、OpenLayers、Leaflet、MapAtlas Dynamic Maps）はこれらを読み書き可能な状態として公開しています。Leafletのような2D専用ライブラリはベアリングやピッチを公開しない場合があります。

ズームレベルの詳細

4つの中で最もよく尋ねられるのがズームレベルです。世界をタイルピラミッドにマッピングする整数（または小数）です。

• ズーム0：1枚の256x256タイルに世界全体
• ズーム1：世界が4タイルに分割
• ズーム2：16タイル
• ...
• ズーム14：約2億6800万タイル、近隣スケール
• ズーム18：建物スケール
• ズーム22+：通常、新しいタイルデータではなくベクタースタイルのアップスケーリングでレンダリング

赤道での目安：ズームレベルが1増えるごとに画面上の可視幅が半分になります。ズーム14では通常、画面に数ブロックが表示されます。ズーム10では都市圏エリア。ズーム6では国。実際の解像度は画面サイズと投影（Web Mercatorは極に向かって南北を歪める）によって異なります。

ほとんどの本番コードはズームを浮動小数点数（例：14.5）として保存します。スムーズなズームアニメーションが整数ズーム間を補間するためです。タイルフェッチはライブラリの規則に応じて切り捨てまたは切り上げた整数レベルで行われます。

ビューポートとバウンディングボックス

ビューポートはカメラの状態です。バウンディングボックスは現在可視の地理的矩形です。サーバーに「このビュー内に何を表示すべきか？」と尋ねる必要があるたびに、ビューポートからbboxを計算します。

コードで表すと：

const bbox = map.getBounds(); // returns { _sw: {lat, lng}, _ne: {lat, lng} }
const params = new URLSearchParams({
  bbox: `${bbox._sw.lng},${bbox._sw.lat},${bbox._ne.lng},${bbox._ne.lat}`,
});
const features = await fetch(`/api/places?${params}`).then(r => r.json());

このパターン（ビューポートからbboxを計算し、サーバーに送り、返されたフィーチャーをレンダリング）は、すべてのビューポートベース検索体験の心臓部です。不動産、リスティング、店舗ロケーター、フリートトラッキング、ライドシェアなどです。

ビューポートがタイル読み込みを駆動する仕組み

ビューポートが変わると、地図ライブラリは現在のズームレベルで新しい可視エリアをカバーするタイルを特定し、不足しているタイルをサーバー（またはメモリキャッシュ）からフェッチし、それらをレンダリングします。すでにキャッシュされているタイルは再利用され、ビューポート外のタイルはユーザーが戻ってきた場合に備えて保持されます。

スムーズなパンとズームが途切れなく感じられるのは、ライブラリが非同期でこの作業を行っているからです。持っているものを描画し、必要なものをフェッチし、新しいタイルが届くにつれてキャンバスを更新します。ベクタータイルパイプラインはGPU上でジオメトリをピクセルにレンダリングする追加の作業を行います。そのため、モダンなウェブ地図は任意のズームと回転でシャープさを保てるのです。

ビューポート状態の保存と共有

URLにビューポートを保存することが、共有可能な地図リンクの標準パターンです。ほとんどのプロダクトは#map=14.5/52.5200/13.4050（ズーム、緯度、経度）のようなURLハッシュを使います。ページ読み込み時にハッシュをパースしてビューポートを適用します。ビューポート変更時には数百ミリ秒デバウンスしてハッシュを更新することで、ブラウザの戻るボタンが機能します。

タブやセッションをまたいだブラウザ内部状態には、同じ形状のlocalStorageキーが機能します。サーバーレンダリングされたページでは、SEOフレンドリーなURLのためにビューポートがクエリパラメータとして現れることが多いです（?zoom=14&lat=52.52&lng=13.405）。

検索とオートコンプリートへのビューポートバイアス

ジオコーディングAPIはビューポート（またはそのbbox）をバイアスパラメータとして受け入れます。MapAtlasはハードフィルタ用にboundary.rect.*を、ソフトバイアス用にfocus.point.*を公開しています。バイアスなしでは、「Springfield」のオートコンプリートはグローバルで最も人気のあるSpringfieldを返します。ビューポートバイアスがあれば、マサチューセッツの地図内でタイプするユーザーにはマサチューセッツの結果が先に表示されます。

このバイアスをすべてのキーストロークで適用しましょう。コストは1つのパラメータであり、得られるものは大幅に関連性の高いサジェストです。

初期ビューポート：どこから始めるか

すべての地図アプリが最初に決めなければならないのは、どこから始めるかです。一般的なパターン：

• ユーザーのロケールにデフォルト: ドイツのユーザーはベルリン上空のビューポートで開始、フランスのユーザーはパリで開始。
• ユーザーの前回ビューポートにデフォルト: セッションをまたいでビューポートを持続。
• データにデフォルト: 地図が検索結果を表示する場合、初期レンダリング時にそれらの結果のbboxをフィットさせる。
• ユーザーのIPジオロケーションにデフォルト: 低精度、許可不要、良いフォールバック。
• ブラウザジオロケーションはユーザーが明示的にオプトインしたときだけ: UI同意なしに最初のロードで使用しない。

適切な初期ビューポートを選ぶことは、知覚される品質に大きな影響を与える小さな細部です。

MapAtlasのビューポート状態の公開方法

MapAtlas ダイナミックマップコンポーネントは、開発者グレードのすべてのウェブ地図が提供するgetCenter、getZoom、getBearing、getPitch、setView APIと同じものを公開しており、EUホスティングとGeocodingとSearchエンドポイント間で一貫したビューポートバイアスパラメータが追加されています。ビューポートがタイルと投影とどう相互作用するかの詳細については、ベクタータイルとは何かとWeb Mercatorとは何かを参照してください。