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

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

概要

IIIF Georeference JSON
        │
        ▼
┌───────────────────────┐
│ iiif-georef-tiles     │
│ (XYZタイル生成)       │
└───────────────────────┘
        │
        ▼
┌───────────────────────┐
│ mb-util               │
│ (mbtiles変換)         │
└───────────────────────┘
        │
        ▼
┌───────────────────────┐
│ TileServer GL         │
│ (タイル配信)          │
└───────────────────────┘
        │
        ▼
┌───────────────────────┐
│ MapLibre GL JS        │
│ (地図表示)            │
└───────────────────────┘

必要環境

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

GDALのインストール

# macOS (Homebrew)
brew install gdal

# Ubuntu/Debian
sudo apt install gdal-bin python3-gdal

mb-utilのインストール

pip3 install mbutil

1. プロジェクト構成

wtms/
├── docker-compose.yml
├── data/                 # mbtilesファイル
├── styles/               # カスタムスタイル（オプション）
├── frontend/             # MapLibreビューア
└── docs/

2. Docker Compose設定

docker-compose.yml:

services:
  tileserver:
    image: maptiler/tileserver-gl:latest
    container_name: wtms-tileserver
    ports:
      - "8888:8080"
    volumes:
      - ./data:/data
      - ./styles:/styles
    restart: unless-stopped

  frontend:
    image: nginx:alpine
    container_name: wtms-frontend
    ports:
      - "8889:80"
    volumes:
      - ./frontend:/usr/share/nginx/html:ro
    restart: unless-stopped

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

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

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

# リポジトリをクローン
git clone https://github.com/nakamura196/iiif-georef-tiles.git
cd iiif-georef-tiles

# XYZタイル生成（Canvas形式またはManifest形式のURLを指定）
python3 scripts/iiif_georef_to_tiles.py IIIF_GEOREF_URL> --output-dir ../tiles_output

例：東京大学鳥瞰図

python3 scripts/iiif_georef_to_tiles.py https://nakamura196.github.io/iiif_geo/canvas.json --output-dir ../tiles_output

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座標が反転し、南半球に表示されてしまいます。

python3 -c "from mbutil import disk_to_mbtiles; disk_to_mbtiles('tiles_output/tiles', 'data/tokyo_utokyo.mbtiles', image_format='png', scheme='xyz')"

メタデータの追加

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

sqlite3 data/tokyo_utokyo.mbtiles  'EOF'
INSERT INTO metadata (name, value) VALUES ('name', '東京帝國大學鳥瞰圖');
INSERT INTO metadata (name, value) VALUES ('format', 'png');
EOF

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

5. TileServer GLを起動

docker compose up -d

確認

  • 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で表示します。

const TILESERVER_URL = 'http://localhost:8888';

// OSMベースマップ
const map = new maplibregl.Map({
    container: 'map',
    style: {
        version: 8,
        sources: {
            'osm': {
                type: 'raster',
                tiles: ['https://tile.openstreetmap.org/{z}/{x}/{y}.png'],
                tileSize: 256
            }
        },
        layers: [{
            id: 'osm-layer',
            type: 'raster',
            source: 'osm'
        }]
    },
    center: [139.768, 35.711],
    zoom: 16
});

// TileServerからオーバーレイを追加
map.on('load', () => {
    map.addSource('overlay', {
        type: 'raster',
        url: `${TILESERVER_URL}/data/tokyo_utokyo.json`
    });

    map.addLayer({
        id: 'overlay-layer',
        type: 'raster',
        source: 'overlay',
        paint: {
            'raster-opacity': 0.8
        }
    });
});

不透明度の調整

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

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

基本コマンド

# 起動
docker compose up -d

# 停止
docker compose down

# ログ確認
docker compose logs -f tileserver

# 再起動（mbtilesファイル追加後）
docker compose restart tileserver

エンドポイント

URL説明
http://localhost:8888/TileServer GLトップページ
http://localhost:8888/data.jsonデータソース一覧
http://localhost:8888/data/{name}.jsonTileJSON
http://localhost:8888/data/{name}/{z}/{x}/{y}.pngタイル取得
http://localhost:8889/MapLibreビューア

参考リンク