IIIF Georeference Extension JSONからXYZタイルを生成し、MapLibre GL JSで表示するツール。

必要環境

  • Python 3.x
  • GDAL (gdal_translate, gdalwarp, gdal2tiles.py)

GDALのインストール

# macOS (Homebrew)
brew install gdal

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

使用方法

python3 scripts/iiif_georef_to_tiles.py <IIIF_GEOREF_JSON_URL>

例

python3 scripts/iiif_georef_to_tiles.py https://nakamura196.github.io/iiif_geo/canvas.json

オプション

オプションデフォルト説明
--scale0.25画像の縮小率
--zoom14-18タイルのズームレベル範囲
--output-dirdocs出力ディレクトリ
--nametilesタイルフォルダ名
--work-dirwork作業用ディレクトリ
--keep-work-作業用ファイルを削除しない

処理の流れ

IIIF Georeference JSON
        │
        ▼
┌───────────────────────┐
│ 1. JSONを取得         │
│    (URLからfetch)     │
└───────────────────────┘
        │
        ▼
┌───────────────────────┐
│ 2. 画像をダウンロード │
│    (IIIF Image API)   │
└───────────────────────┘
        │
        ▼
┌───────────────────────┐
│ 3. GCPを埋め込み      │
│    (gdal_translate)   │
└───────────────────────┘
        │
        ▼
┌───────────────────────┐
│ 4. 座標変換           │
│    (gdalwarp)         │
└───────────────────────┘
        │
        ▼
┌───────────────────────┐
│ 5. タイル生成         │
│    (gdal2tiles.py)    │
└───────────────────────┘
        │
        ▼
┌───────────────────────┐
│ 6. HTMLビューア生成   │
│    (MapLibre GL JS)   │
└───────────────────────┘

変換結果

元画像地理参照後

出力ファイル

docs/
├── index.html    # MapLibre GL JSビューア
├── source.json   # 元のIIIF Georeference JSON
└── tiles/        # XYZタイル
    ├── 14/
    ├── 15/
    ├── 16/
    ├── 17/
    └── 18/

ローカルで確認

cd docs && python3 -m http.server 8000
# http://localhost:8000/ を開く

IIIF Georeference Extension

IIIF Georeference Extensionは、IIIF画像に地理参照情報を付与するための拡張仕様です。

JSONの構造

{
  "@context": [
    "http://iiif.io/api/extension/georef/1/context.json",
    "http://iiif.io/api/presentation/3/context.json"
  ],
  "type": "Canvas",
  "width": 18415,
  "height": 12911,
  "items": [...],
  "annotations": [
    {
      "type": "AnnotationPage",
      "items": [
        {
          "type": "Annotation",
          "motivation": "georeferencing",
          "body": {
            "type": "FeatureCollection",
            "transformation": {
              "type": "polynomial",
              "options": { "order": 1 }
            },
            "features": [
              {
                "type": "Feature",
                "properties": {
                  "resourceCoords": [6690, 7517]
                },
                "geometry": {
                  "type": "Point",
                  "coordinates": [139.7623182, 35.7151233]
                }
              }
            ]
          }
        }
      ]
    }
  ]
}

サンプルデータの出典

デモで使用している画像は以下から取得しています：

参考