IIIF画像をWeb Tile Map Serviceで配信する

IIIF Georeference Extension JSONからXYZタイルを生成し、TileServer GLで配信、MapLibre GL JSで表示するまでの手順をまとめます。

OSM上に東京大学鳥瞰図をオーバーレイ表示

概要

必要環境

• Docker / Docker Compose
• Python 3.x
• GDAL (gdal_translate, gdalwarp, gdal2tiles.py)
• Pillow (pip3 install pillow)
• mb-util

GDALのインストール

mb-utilのインストール

1. プロジェクト構成

2. Docker Compose設定

docker-compose.yml:

3. IIIF画像からXYZタイルを生成

iiif-georef-tilesを使用します。

Canvas形式とManifest形式の両方に対応しています。

例：東京大学鳥瞰図

Canvas形式とManifest形式の両方を入力として受け付けます。Manifest形式の場合は自動的に最初のCanvasを抽出します。

処理の流れ：

1. IIIF Georeference JSONを取得（Manifest形式の場合は自動でCanvasを抽出）
2. IIIF Image APIから画像をダウンロード（full/maxでサーバー最大サイズを取得）
3. 全GCPを埋め込み（gdal_translate）
4. 座標変換（gdalwarp、多項式次数はJSONから取得）
5. XYZタイル生成（gdal2tiles.py）

4. XYZタイルをmbtilesに変換

TileServer GLで配信するため、XYZタイルをmbtiles形式に変換します。

重要 : --scheme=xyz オプションを指定してください。指定しないとY座標が反転し、南半球に表示されてしまいます。

メタデータの追加

mb-utilで生成したmbtilesにはメタデータがないため、手動で追加します：

注意 : scheme=xyzなどのメタデータは追加しないでください。mbutilは内部的にTMS形式でY座標を保存しており、TileServer GLはデフォルトでTMS形式として認識します。scheme=xyzを追加すると座標変換がスキップされ、タイルが正しく表示されなくなります。

5. TileServer GLを起動

確認

• TileServer GL: http://localhost:8888/
• TileJSON: http://localhost:8888/data/tokyo_utokyo.json
• データ一覧: http://localhost:8888/data.json

TileServer GLのトップページ

データ詳細ページ（TileJSON情報）

6. MapLibre GL JSで表示

TileServer GLからタイルを取得してMapLibreで表示します。

0

不透明度の調整

スライダーで不透明度を調整することで、ベースマップとの比較が容易になります。

不透明度100%	不透明度50%

基本コマンド

1

エンドポイント

参考リンク

• TileServer GL
• iiif-georef-tiles
• IIIF Georeference Extension
• MapLibre GL JS
• mb-util
• MBTiles Specification