はじめに
ベクトルタイルスタイルでURLを複数指定してみた結果が面白かったのでメモします。
動機
Smart Maps Advent Calendar 2022 の @yuiseki さんの記事（こちら ）でニューヨーク州とニュージャージー州のベクトルタイル地図を作ったのですが、一つに合わせてみたいなと思い、もしかしてソースを併記したらできるだろうかと思ったものです。結果は失敗でしたが、面白かったのでメモします。
スタイル仕様での記載
ちなみに、MapLibre（やMapbox）のスタイル仕様では、以下のようにtilesのURLが併記されているものがあります。"An array of one or more tile source URLs, as in the TileJSON spec."と書いてあって、複数書いたときにどうふるまうのか、これまでに試したことがありませんでした。
https://maplibre.org/maplibre-gl-js-docs/style-spec/sources/
実験
２つのベクトルタイル地図の準備
@yuiseki さんの記事（こちら ）の方法に従って、north-america/us/new-york と north-america/us/new-jersey それぞれのベクトルタイル地図を作ります。north-america/us-northeastだと、ソースが1.3GBになるので動かないだろうと思ったので複数の地図を作りました。この方法だと本当にすぐにベクトルタイルができますね。素晴らしい。
New York 州のベクトルタイル地図を作ります。
New Jersey 州のベクトルタイル地図を作ります。
ソースの加工（もう一つのタイルURLの追加）
どちらの地図でもいいのですが、レポジトリの gh-pages ブランチの tiles.json を開きます。私はNew Jersey 州 側のレポジトリで実験しました。
tiles.jsonにはソースの情報があるので、これを編集します。
下の方でソースタイルのURLが一つ指定されているここを、
こうして一行追加して、隣のニューヨークのタイルも指定します。
コミットボタンを押します。そして成果が反映されるのを待ちます。
結果の確認
結果を確認します。お、思っていたのと違う結果が出ました。どちらの州のデータもありますが、一部分しか出ていません。
詳細をチェックするためにタイル境界を表示させてみます。（index.html に map.showTileBoundaries = true; を追加 ）
なるほど。
どうやら、どちらかのURLからタイルを読んでくるということのようですね。複数のURLに同時にタイルがあるときに双方から読むというようなことはしないようです。どっちが優先されるのかはよくわかりません。データサイズでもないような感じがします。
下の例ではゴマ塩のような感じになっているので、単純に双方のURLを読みに行かせているだけかもしれませんね。
まとめ
同じスタイルを使っているので、複数のベクトルタイル地図をまとめるときにソースURLで対応しようとしましたが失敗しました。このことから、以下のように考えます。
- 二つの地図を重ねるのであれば、URLの追加ではなくて、スタイルのソースのなかにもう一つベクトルタイプのソースを指定してあげる必要がある。（スタイルレイヤも同じセットを足す（参照ソース名を適切に合わせる。））
- ソースがタイルの区切りでぴったりになっていれば（どのタイル区画でも複数のソースが交じり合わなければ）、複数のURLを並べるだけで複数の場所からのタイルが読める可能性があるのではないか。 → と思いましたが、以下の例の例えば12/1205/1536のように、一方で404が返ってきているときに他方のタイルを読みにいくということはしていないようなので、ダメでしょう。上のごま塩状のタイルの例でもそう思います。
