0
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?

MartinがComposite Sourcesで結合したgzipタイルを単一のgzip memberで返すようになったことについて

0
Posted at

はじめに

Martin2.0から、Composite Sourcesで複数のgzip圧縮タイルを連結する時に単一のgzip memberに変換して返却するようになりました。

これにより、複数のgzip memberに対応していないクライアントでも正常に処理できるようになりました。

この対応が実施される前は、MapLibre GL JSやQGISでも最初のgzip memberのレイヤしか表示できませんでした。

詳しくは以下の記事をご覧ください。

この記事では、本事象が解消されているのかを実際に確認してみたいと思います。

テストデータの準備

国土数値情報の湖沼データと行政区域データでテストします。

それぞれダウンロードして、MVTに変換します。

# 湖沼データをUTF-8、EPSG:4326に変換してGeoJSONで出力
ogr2ogr \
  -f GeoJSON \
  lakes.geojson \
  W09-05-g_Lake.shp \
  -s_srs EPSG:4612 \
  -t_srs EPSG:4326 \
  -oo ENCODING=CP932

# MVTに変換
tippecanoe \
  -o tiles/lakes.mbtiles \
  -l lakes \
  -Z4 \
  -z14 \
  -pf \
  -pk \
  lakes.geojson

# 行政区域をEPSG:4326に変換
ogr2ogr \
  -f GeoJSON \
  admin.geojson \
  N03-20260101.shp \
  -s_srs EPSG:6668 \
  -t_srs EPSG:4326

# MVTに変換
tippecanoe \
  -o tiles/admin.mbtiles \
  -l admin \
  -Z4 \
  -z14 \
  -pf \
  -pk \
  admin.geojson

Martinを起動

tilesディレクトリ配下に格納したMBTilesをMartinで配信します。

バージョンは最新の2.0.0-beta.3を使います。

docker run --rm \
  -p 3000:3000 \
  -v "$(pwd)/tiles:/tiles" \
  ghcr.io/maplibre/martin:2.0.0-beta.3 \
  /tiles

Composite Sourcesには以下のようにソースIDをカンマ区切りで連結したURLでアクセスできます。

http://localhost:3000/lakes,admin/{z}/{x}/{y}

MapLibre GL JSで表示

例えば、以下のようにMapオブジェクトを定義します。

const map = new Map({
  container: 'map',
  hash: true,
  style: {
    version: 8,
    sources: {
      composite: {
        type: 'vector',
        tiles: ['http://localhost:3000/lakes,admin/{z}/{x}/{y}'],
        minzoom: 4,
        maxzoom: 14,
        attribution: "<a href=\"https://nlftp.mlit.go.jp/ksj/gml/datalist/KsjTmplt-N03-2026.html\" target=\"_blank\">国土数値情報-行政区域データ</a> | <a href=\"https://nlftp.mlit.go.jp/ksj/gml/datalist/KsjTmplt-W09-2005.html\" target=\"_blank\">国土数値情報-湖沼データ</a>"
      }
    },
    layers: [
      {
        id: 'admin-fill',
        type: 'fill',
        source: 'composite',
        'source-layer': 'admin',
        paint: {
          'fill-color': '#eeeeee',
          'fill-opacity': 0.15
        }
      },
      {
        id: 'admin-boundary',
        type: 'line',
        source: 'composite',
        'source-layer': 'admin',
        paint: {
          'line-color': '#666666',
          'line-width': [
            'interpolate',
            ['linear'],
            ['zoom'],
            4, 0.4,
            8, 0.8,
            12, 1.2,
            16, 2
          ]
        }
      },
      {
        id: 'lakes-fill',
        type: 'fill',
        source: 'composite',
        'source-layer': 'lakes',
        paint: {
          'fill-color': '#9ecae1',
          'fill-opacity': 1.0
        }
      }
    ]
  },
  center: [139.767125, 35.681236],
  zoom: 10
});

ブラウザで表示すると下図のようになります。

MapLibre GL JS

行政区域データと湖沼データの両方が問題なく表示されていることを確認できました。

まとめ

Martin2.0からgzip圧縮したタイルのデータソースでもComposite Sourcesで互換性の高いタイルを供給できるようになりました。

タイル配信する際に、Composite Sourcesは効率性・保守性・性能などの面で非常に強力なツールになりえるため、地味な修正ではありますが、インパクトは大きいのではないかと思います。

0
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
0
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?