More than 5 years have passed since last update.

OpenMapTilesでラスタータイルを生成する

Last updated at 2018-06-23Posted at 2018-06-23

OpenMapTilesを使って地図タイルを生成するときに、要件によってはベクタータイルではなく、ラスタータイルの方が向いている場合もあります。
今回は、必要な分のラスタータイルをすべて生成して保存することを考えます。

Tileserver GL

ラスタータイルを生成するときに、まず考えられるのがTileserver GLを使う方法です。(Serve Raster and Vector Tiles with Tileserver GL)
でも、タイルの境界でのラベルがうまく描画されない問題 klokantech/tileserver-gl#35 があります。

解決方法の1つ目は、ラベルのレイヤーに

"symbol-avoid-edges": true

を設定することです。(Mapbox Style Specification)
この場合は、タイルの境界をまたぐラベルがすべて描画されません。都市名のような大きなラベルも消えてしまうため良くないです。

境界付近のラベルも正しく描画されたタイルを生成するには、マージンを取って描画し切り抜く必要があります。¹

この方法を、Tileserver GLを使わずに、Puppeteerを使って実装しました。
https://github.com/tattii/puppet-tiler

Mapbox GL JSでマージンを取って描画した地図から、256px四方のタイル画像をスクリーンショットして生成します。1枚を生成するのに約50msです。
Retina用に512px四方のタイル画像を生成することもできます。

また、TileReduceを使って並列処理するように実装しています。

ベクタータイルからラスタータイルを生成する、puppet-tiler を作成したという紹介でした。