LoginSignup
1
1

More than 5 years have passed since last update.

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

Last updated at Posted at 2018-06-23

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

Tileserver GL

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

解決方法1

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

"symbol-avoid-edges": true

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

解決方法2

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

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

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

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

まとめ

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


  1. Mapion・日本一の地図システムの作り方 p.69 タイル生成スクリプト 

1
1
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
1
1