はじめに
神ゲー攻略でエンジニアをやっている yoko です。神ゲー攻略ではゲームの攻略で使える便利なツールを日々開発しています。特に最近は以下のようなマップサービスの開発を進めています。
- 日本版： https://kamigame.jp/map/
- 英語版： https://gamevlg.com/
今回はこのマップサービスを開発する中で溜まった知見を紹介できればと思います。
Part1 はマップライブラリ紹介編です。
前提
一般公開されている GeoJSON などを使って地図を作るのではなく、自分でゼロからマップを作るという前提で進めます。
マップライブラリについて
代表的なマップライブラリのトレンドは以下です。
leaflet と mapbox-gl が人気であることがわかります。
今回はこの2つと mapbox-gl の OSS 版である maplibre-gl について見ていきます。
Leaflet
HTML をベースにマップを構築するライブラリで、学習コストが低くシンプルに始めることができます。
メリット
- HTML/CSS でマップを構築できるので基本的な Web の知識があれば学習コストは小さい
- マップに必要な機能は網羅されている
デメリット
- マーカーも HTML で描画するのでマーカーの数が多いとブラウザが重くなる
- HTML で作ったマーカーを Canvas で描画するのが難しい
- leaflet-markers-canvas というライブラリはあるが、マーカーの画質が悪くなる
- GeoJSON を作ってから Canvas に描画するのはありかも？
- タッチパッドでのズームがスムーズに行われない（飛び飛びにズームする）
Mapbox
有料のマップライブラリ。Mapbox 中心となって仕様を定めたベクトルタイルを使って WebGL で描画します。
元々は OSS でしたが、version 1.x から non-OSS となったため後述する MapLibre GL JS がフォークされて生まれました。
メリット
- 描画パフォーマンスが良い
- WebGL & ベクトルタイル
- Search API など MapLibre にはない機能を提供している
- mapbox-studioというマップ編集ツールがある
- ドキュメントがわかりやすい
- 特に描画パフォーマンスの改善はかなり参考になる
デメリット
- 学習コストが高い
- 従量課金 （無料枠はある）なので予算的に使えない可能性がある
MapLibre GL JS
前述の通り、Mapbox version 1.x をフォークした OSS。Mapbox と同じく WebGL で描画されるしベクトルタイルも使える。
メリット
- 描画パフォーマンスが良い
- 基本的に必要な機能は網羅されている
デメリット
- 学習コストが高い
- マップスタイルの仕様: https://maplibre.org/maplibre-style-spec/
- パフォーマンスの考慮
- Mapbox に比べて足りない機能がある
ライブラリの選定
データが少なく描画パフォーマンスを気にしなくていい → Leaflet
大量のデータを扱う → MapLibre
MapLibre で満足できない → Mapbox
がいいんじゃないかなーと思います