避難所の数を表示したい

furuhashilab / UNVT_for_Tokyo-to

UNVTPortable の東京都用プリインストールデータ

https://furuhashilab.github.io/UNVT_for_Tokyo-to/

Creative Commons Attribution 4.0 International

0 stars 1 forks source link

避難所の数を表示したい #8

Open ShogoHirasawa opened 2 years ago

ShogoHirasawa commented 2 years ago

現状

理想形

https://maplibre.org/maplibre-gl-js-docs/example/cluster/

consoleのエラー

Uncaught (in promise) Error: Style is not done loading.
    at ie._checkLoaded (style.ts:374:19)
    at ie.addLayer (style.ts:652:14)
    at Map.addLayer (map.ts:1973:20)
    at (index):90:13

なぜエラーがおきているのかの予想

非同期処理がうまく行っていないのかもと予想。非同期処理とは何なのかをまずは理解する必要あり

参考になりそうな資料

https://teratail.com/questions/141224

https://qiita.com/cheez921/items/41b744e4e002b966391a

ShogoHirasawa commented 2 years ago

非同期処理の理解ができていなかった。

非同期処理の構造を理解できていなかったためのエラーだった。コードを書き直したところ以下のような表示になった。

openmaptilesの提供するフォントから選ばなきゃいけないっぽい。以下を参考にすること https://github.com/openmaptiles/fonts

ShogoHirasawa commented 2 years ago

フォント変更

フォントをOpen Sans Regularに変更したら無事にフェッチできた

ShogoHirasawa commented 2 years ago

フォントエラーの詳細

MapLibre GL JS Style Specificationによると、テキストフォントは設定しなければ自動的にOpen Sans Regular,Arial Unicode MS Regularになる仕様になっている。

MapLibre GL JS が用意しているstyle.jsonを使えば問題ないが、今回の場合は独自でstyle.jsonを作っている。今回使用しているstyle.jsonの中身を見るとフォントはopenmaptilesから取ってきていることがわかった。 style.jsonに以下の記述がある。

 "glyphs": "https://fonts.openmaptiles.org/{fontstack}/{range}.pbf",

以下のフォントファミリーからフォントを指定してあげることで、無事解決した。

Arial はMapLibreでは提供していないので注意すること