はじめに
この記事について
MapLibre（v2.2.0-pre.2.）での3次元表示（Terrain 3D）を試していたら、私のウェブ地図は動作が重いようで、ウェブブラウザのメモリ消費量がとても増えてしましました。
結局、原因はわからなかったのですが、観察結果についてここにまとめておきます。（他に同じ経験をされた方はいるのだろうか？？）
私の地図の書き方が良くないのかもしれませんし、必ずしも地図ライブラリに原因があるという訳ではないと思います。この記事の趣旨は上手く行かなかった経験をメモしておく、というものです。
経緯
前回の記事で、ALOSの30メートルDEMを使って四国あたりのRGB標高タイルを作りました。
そのRGBタイルに、国土地理院の標準タイルと、日本シームレス地質図WMTS配信サービスを重ねあわせて3D Terrain画像を作っています（MapLibre GL JSをつかった）。
https://ubukawa.github.io/shikoku/map-3.html#8/34.034/134.234/0/52
ところが、このMapLibreの3D 地図はシーンや縮尺を変えて、いろいろな場所でしばらく見ていると、Google クロムの使用メモリがどんどん増えていき、地図の動きが重くなり、場合によっては止まることがありました。Microsoft Edgeでもメモリ使用量が大きくなる。そこで何が問題なのかと、いろいろと比べてみました。
わたしの環境
- Mapbox GL JS ver. 2.6.1
- MapLibre GL JS ver. 2.2.0-pre.2.
- Google Chrome Version 102.0.5005.63 (Official Build) (64-bit)
比較
試行1： optgeo/nagi-viでMapbox GL JS とMapLibre GL JSの比較
準備
hfuさんが作られたoptgeo/nagi-viのテンプレートから自分のレポジトリを作ります。このレポジトリにあるウェブ地図では、国土地理院の標高タイルを使って、国土地理院の航空写真データなどを表示しています。
つくったレポジトリはここ https://github.com/ubukawa/nagi-vi-test
- Mapbox GL JSの方は、module.jsにあるTokenを自分のものに変えておきます。
- optgeo/nagi-viには、MapLibre GL JSでのWeb地図はないので、index-maplibre.html, module-maplibre.js, style-maplibre.jsonを作っておきます。ほとんどmapboxのものと同じ書きぶりで大丈夫です。MapLibre GL JSは Tokenはいりませんが、maxPitchを指定しないとある程度までしか傾けないのでmaxPitchを指定しておきます。また、MapLibreではskyのレイヤを作れないと思いますので、それは入れていません。
比較1
こちらがMapboxでの画面です。右にクロムのメモリ使用量があります。
こちらがMapLibreでの画面です。右にクロムのメモリ使用量があります。
メモリは一度増えた後、だんだん下がって500～700MBで安定するのですが、このシーンだけではどちらも1,000 MBは超えませんでした。
ただし、MapLibreとMapBoxでは、手前のシーンと向こうのシーンの縮尺レベルの切り替わり方、あるいはシーンの切り目が微妙に違うようです。富士山の山頂の雪のあるなしで違いがみえますね。
比較2
上と同じことを別の地域でたしかめました。やはりシーンの切れ目について2つのライブラリで違うがありますが、使用メモリはさほど増えませんでした。nagi-viのスタイルの作り込みが優秀なのでしょうか？？
こちらがMapboxでの画面です。右にクロムのメモリ使用量があります。
こちらがMapLibreでの画面です。右にクロムのメモリ使用量があります。
試行2： optgeo/nagi-viで遠くをぼやけさせる効果を見てみる
nagi-viには、工夫があって、module.jsのなかでeasingというものを使っているようです。見る角度によって、フォーカスしていないところをぼかすような仕組みです。（つまり遠くの方ははっきり見えない）
https://github.com/optgeo/nagi-vi/blob/main/docs/module.js#L52-L101
これが使用メモリの節約に影響を与えているのだろうか？？と考えて、あるものとないものを作って比べてみました。
MapLibreでeasingあり。
MapLibreでeasingなし。
結局、どちらもあまりメモリ使用量は変わりません。これではないみたいです。
試行3： 影の影響か、optgeo/nagi-viで調べる。
どうしてnagi-viはメモリの使用量が大丈夫なのだろうと考えて、こんどは影（hillshade）かもと思いつきました。
MapLibreを使って、影があるものと無いものを比べてみます。
航空写真に影があるのか、影の雰囲気がありますが、Hillshadeがないもの。
上から少しだけ地域がずれていますが、Hillshadeを加えたもの。
しかし、結局、どちらもあまりメモリ使用量は変わりません。これではないみたいです。
試行4： optgeo/nagi-vi以外の地図で比べて見る。
nagi-viのウェブ地図ではMapLibreの地図のメモリが増えると言うことはなかったので、私が作ったレポジトリでも比べてみます。
下のMapLibreの地図 https://ubukawa.github.io/shikoku/map-3.html ではシーンを変えたりして見ていると、メモリ使用量が5,000MBを超えてしまうこともあります。
一方、同じようなコンテンツをMapbox GL JSでみると、どういうことか、メモリ使用量は 1,500MB を下回っていました。
まとめ
結局、どうしてMapLibreでブラウザのメモリ使用量が増大するのかわかりませんでした。
私がつくるウェブ地図だとメモリが増えすぎることがあるのでちょっと困りました。
謝辞
MapLibreの3次元表示の開発に関わられた皆様に心より感謝します。
また、optgeo/nagi-viを開発された@hfuさんに感謝します。
References:
- レポジトリ
- optgeo/nagi-vi(template) https://github.com/optgeo/nagi-vi
- My test repository from nagi-vi https://github.com/ubukawa/nagi-vi-test
- Other 3D terrain map repository https://github.com/ubukawa/shikoku
- （簡単）Dockerを使ってAW3D30 (ALOS World 3D - 30m) からRGB標高タイルをつくる https://qiita.com/T-ubu/items/dc5022e15f2b770429b3
- 日本シームレス地質図WMTS配信サービス https://gbank.gsj.jp/owscontents/contents/seamless200k.html