6
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

MapLibreAdvent Calendar 2024

Day 10

MapLibre GL JS v5(pre)で月を球体表示する

Last updated at Posted at 2024-12-09

mug-jp_logo_01.png

はじめに

MapLibreとは

MapLibre Official WebSite
https://maplibre.org

  • Web地図に関するプロダクトをOSSとして開発・メンテナンスしているOrganizationです
  • ブラウザ・モバイル向けの地図ライブラリおよび地図配信に関するツール群があります

MapLibre User Group Japan (MUG-JP) とは

MUG-JP Official Web Site
https://mug-jp.org/

  • MapLibreプロダクトの開発者によるユーザーコミュニティです
  • ナレッジの共有やイベントの開催による普及活動を行なっています

月が綺麗ですね

Screenshot 2024-12-07 at 11.05.37.png

MapLibre GL JS v5のGlobe Projection

MapLibre GL JSがv5でついにGlobe Projection(地球儀ビュー)をサポートします。
現状はpre releaseでインタラクションに若干不具合がありますが、レンダリングは問題なさそうです。

以前はMapbox GL JSで実装していた

Mapbox GL JSはもっと早い段階でGlobe Projectionをサポートしていて、以前はこちらを利用していました。

Mapbox GL JSでもGlobe Projectionで同等のレンダリングが出来るわけですが、自前で変換したりしている月面データは(地球とは色々事情が違うため)けっこう特殊な作りをしているからか、Mapbox GL JSだと一部のレンダリングで不具合が出て、ズームレベルが高い時はmercator projectionに切り替えるようなワークアラウンドをしていました。

一方、MapLibre GL JSはそういったことがなく快適にレンダリング出来ています。素晴らしい!

データの諸元などは以下をご覧ください。

コード

// styleに直接かけそうなものだが、pre.7で試したときはそうではなかった
map.on('load', () => map.setProjection({ type: 'globe' }));

余談:タイルサーバー

月面の画像とDEMは自前のタイルサーバーから配信しています(外部利用不可)。PMTiles + Cloudflare R2 + Workersで運用しており、多少のストレージ代だけで運用出来ています。

以下の記事に沿うと簡単にPMTilesバックエンドなタイルサーバーを構築できます。

6
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
6
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?