🌏丸い地球を効率的に平たくする 〜🗺️地図の幾何学とWeb地図技術〜

2025年1月15日、VRChatの技術イベント「Web技術集会」での発表スライドです。

「なぜ世界地図の南極はこんなに大きいのか？」という素朴な疑問から始まり、
16世紀の航海用地図「メルカトル図法」が
現代のWeb地図技術の基盤となっていった興味深い歴史を紐解きます。

Google Mapsの開発時に「地図をタイル状に分割して効率的に配信する」というアイデアが生まれた技術的背景と、その設計思想について解説しています。
400年以上前の古典的な幾何学の問題が、現代のWeb地図技術にどのように活かされているのかを、
具体的な実装例を交えながら紹介します。

WebエンジニアやGISエンジニアをはじめとした技術者の方々に、
新しい視点と実践的な知見を提供できるプレゼンテーションを目指しています。

Transcript

1. 🌏丸い地球を効率的に 平たくする 🗺️地図の幾何学とWEB地図技術
2. 自己紹介 さめ(meg-ssk) 🧑‍💻 フリーランスのソフトウ ェアエンジニア 得意分野: 📸 コンピュータビジョ ン (画像認識/点群処理) 🌍 空間情報処理 (GIS/ リモートセンシング) ☁️ クラウドインフラ設 計/IaC (AWS, GCP) GitHub YouTube Speaker Deck
3. 世界地図 世界地図を見て思ったことはありませんか？ 南極デカすぎ！
4. 地球儀で見る南極 地球儀で見ると意外と普通の大きさ なぜなのか？
5. メルカトル図法 地球儀を平面に投影する方法の一つ 東西南北の方角(角度)を維持する投影法 赤道から離れるほど面積の歪みが大きくなる
6. モルワイデ図法 面積を保存する投影法 東西南北の方角は保存されない
7. ランベルト正積方位図法 面積と中心点からの方位を保存する投影法 地球全体を平面に投影するのには不向き
8. なぜ多くの地図投影法がある のか？ それぞれに長所と短所があるから メルカトル図法: 方角が正しい、面積は歪む モルワイデ図法: 面積が正しい、角度は歪む ランベルト正積方位図法: 中心点からの方位 と面積が正しい、全世界地図には不向き 🤔面積も方角も長さも正しい「万能な地図」はな いかな？
9. ガウス「そんなものはない」 ガウスの驚異の定理 地球儀のすべての情報を 正しく平面の地図に投影 することは不可能 みかんの皮を剥いて平ら に広げることはできない 数学的補足: 球面と平面 のガウス曲率は異なるか ら
10. なぜメルカトル図法が広く使わ れるのか？ 方角(角度)が正確 数学的に言うと等角写像 大航海時代、羅針盤を頼りに航海する船乗り たちにとって方角が最も重要だった 16世紀の航海者たちが使った地図投影法を、21世 紀にとある企業が注目した...
11. 2005年、Googleがメルカトル図法を使った Google Mapsをリリース Web地図技術を開発したWhere 2 Technologies社を買収 世界中の地図を手軽に見ることができるよう になった 🤔なぜGoogleはWeb地図にメルカトル図法を選ん だのか？
12. WEBメルカトル図法の特徴 Google Mapsで採用されたWebメルカトル図 法はWeb地図に最適化された地図投影法 世界地図を正方形とすることで地図を正方形 のタイル状に分割可能 タイルを分割して表示することで、効率的 に地図を描画できる 1つのタイルは256x256ピクセル 必要な範囲のタイルだけを取得して表示 全世界の詳細な地図を取得する必要がない Webで効率的に地図を表示するための技術！
13. ズームレベルとタイル分割 地図をズームレベル(z)によって分割 22z個のタイルに分割 (以下はz=1の例)
14. ズームレベルを増やすと...？ z = 2 の場合、22*2 = 16個のタイルに分割 z = 24 (最大値) の場合、22*24 = 約281兆個の タイルに分割
15. タイル座標の計算方法 θ: 経度 (longitude) φ: 緯度 (latitude) z: ズームレベル x, y: タイル座標 ⌊.⌋: フロア関数 𝑥 = ⌊ × ⌋ (θ + 180) 360 2𝑧 𝑦 = ⌊((1 − ) × )⌋ log(tan 𝜑 + sec 𝜑) 𝜋 2𝑧
16. 計算例: 東京タワーのタイルを 求める 東京タワーの座標は 北緯: 35.658581 (degree) 東経: 139.745433 (degree) z=17として先述の式に入れて計算すると 𝑥 = 116415 𝑦 = 51623
17. 実例: OpenStreetMapのタイル の形式 z=17, x=116415, y=51623 を入れる 東京タワーが含まれるタイルを取得！ https://tile.openstreetmap.org/{z}/{x}/{y}.png
18. よくある処理フロー 1. ユーザが地図を操作 2. 表示範囲のタイル座標を計算 3. タイルを取得して表示 今注目している範囲の256x256ピクセルのタイル を複数取得して表示するだけで、Web地図が実現 できる！ ズームレベルと関心領域に応じて、必要な解像度 の地図を必要な範囲だけ取得して表示 Web地図の基本的な仕組み
19. 実例: WEB地図はツギハギだらけ
20. なぜツギハギがあるのか？ Bing Satelliteのズームレベルを最大にするとタイル の境界が目立つ 複数枚の人工衛星画像をツギハギして、1枚の大き な地図のように見せている 異なる日に撮影された画像を合成しているため、 ツギハギが発生 雲の少ない画像同士を選んで繋げている Web地図の裏側
21. まとめ 地球儀の情報をすべて正確に平面の地図に投 影することは不可能 Web地図技術はWebメルカトル図法を採用し ている 等角写像であることから正方形に分割でき ることが都合がよかった ズームレベルとタイル分割によって、Web地 図を効率的に表示 必要なものを必要なときに必要な分だけ取 得する Web開発の基本原則を体現
22. おまけ: 3D TILES 3Dモデルのタイル分割技術 LOD (Level of Detail) によって必要な3Dデータのみ を取得して表示 3D地図の標準技術として注目されている