多言語のベクトルタイル地図を作る場合の文字フォント（PBF）についての考察

はじめに

自分でスタイルを作ったベクトルタイル地図をArcGIS Online, MapLibre GL JS, Mapbox GL JS (ver. 1.X) で見ていたときに、日本語などのフォントについて表示されない場合があることに気がつきました。

多言語（2つというよりはもっと多く）の地図を作るにあたり、少し混乱したので、ここにメモを書いておきます。

観察したこと　

現象の確認

簡単のためにMaputnikで見ていますが、ある多言語のsymbolレイヤを以下の図の様に表示しました。レイヤの設定ではNoto Sans Italicのフォントを使っています。このとき日本語のフォントも表示されています。（アルファベットは斜体になっていますが、日本語文字は斜体ではありません。）

しかし、上記のようなスタイルレイヤをArcGIS Onlineで読むと、日本語文字のフォントについては表示されませんでした。そこでいろいろと見てみました。

Maputnikでのフォントの表示

Maputnikでいろいろと試してみましたが、他のフォント（下図はRoboto-Thin）でも日本語文字が表示されます。しかし、やはりArcGISでは日本語は表示されません。実際に、どのフォントが参照されているのだろうと、glyphsとして参照されているテキストフォント（pbf形式）を見てみましたが、下図にもあるようにRoboto-Thinの中の日本語フォント相当部分のファイル12288-12543.pbfと65280-65535.pbfにアクセスしていることがわかります。

私が使っていたRoboto-Thinは日本語フォントをもたないはずなので、上記でアクセスしている2つのpbfファイルをみてみました。両者のファイルサイズは微小ですし、テキストエディタで開いてみてもほとんど何も並んでいません（下図の通り。なおpbfファイルは本来はテキストエディタで開くものではありませんが、どのくらい中身がありそうか見るのに使ってみました）。フォントの内容は空ではないかと思います。

この観察から、Maputnik（mapboxやmaplibreも同様）では、日本語フォントをもたないフォントを使ったときも、どこかのフォントをつかって日本語が表示されることがわかりました。 ラベル表示にあたり、読み込んだファイル（空フォント）を使っているわけではないようですので、デフォルトのフォント（mapboxやmaplibreだとtex-fontオブジェクトのデフォルトはOpen Sans Regularなど → 私のところのOpen Sans Regularに日本語はありません）、あるいはシステムのフォントなどを使っているのかもしれません。どうも自動でやってくれているわけです。（なお、ArcGIS Onlineではこのような機能がないので表示されないのでしょう。ArcGIS Online用のスタイルでは、いくつかのフォントをarrayとして指定しておけば良いようです。）

Maputnikでは、日本語テキストは表示されましたが、アラビア語テキストは表示されなかったので、デフォルトかシステムのフォントかわかりませんが、対応していないケースもあるようです。(ここで読んでいる1536-1791.pbfがアラビア語のフォントに相当するようです。)

多言語化に向けた対応策（案）

以上の様な状況で、例えば、アルファベット、日本語、韓国語、中国語、アラビア語等を含むフォントをどうやってつくればよいでしょうか。

• 案1：　"text-font" を arrayで複数指定する。

  • 実験したところ、ArcGISではOKでした、MapLibre GL JSやMapbox GL JSでは上手くいきませんでした。Style Specificationではarrayで指定しても大丈夫となっているのですが、実際にarrayで指定すると上手くいかない（下図のとおり、下図はMaputnikでの例）。
    
    スタイル仕様には以下のとおり、array of stringsと書いてあるので、どうにか方法はあると思うのですが、私のテストでは上手くいきませんでした。
    　　

• 案2：　フォントを適切に選ぶ、あるいは加工する。

  • CJKのフォントを使うことで日本語、韓国語、中国語に対応
    • ある程度もとのフォントに依存するので限界がある可能性。
  • 例えばNoto Sans Arabicから1536-1791.pbfをコピーしてきて、Noto Sans CJKの同じファイルを差し替えてみたらどうだろうか？？
    • フォント間（言語の間で）で使っているrangeに重複があると思うので、上手くいかないものもあるかもしれない。
    • しかし、例えばArabicは1536-1791.pbfで、今のところ重複がないようなのでそのままいけるかもしれない。
    • それぞれの言語がどのrangeを使っているかについては、インターネットで調べたり、あるいはウェブ地図でデータを閲覧するときに通信状況を開発者モードで確認して、参照しているpbfファイルを特定すればある程度把握できると考えられる。

まとめ

上記の様に、いくつかのマップライブラリでのテキストフォント表示について観察しました。
text-fontをarrayで定義したものが読めないと、多言語の地図は作成が難しいかもしれません。fontのrangeごとに複数フォントをミックスしてみるというアイディアも浮かんだので今後実験してみたいです。

参考ページ

• Maputnik　https://maputnik.github.io/editor
• MapLibre Style Specification　https://maplibre.org/maplibre-gl-js-docs/style-spec/
• Mapbox Style Specification　https://docs.mapbox.com/mapbox-gl-js/style-spec/
• ウェブ地図用のテキストフォント（pbf）を作る　https://qiita.com/T-ubu/items/f2a2084778e456bc8057