地理院地図vectorのstyleを使ってMaplibre上にテキストシンボルを設定する

https://github.com/gsi-cyberjapan/gsivectortile-mapbox-gl-js
より
https://gsi-cyberjapan.github.io/gsivectortile-mapbox-gl-js/pale.html
このstyleのついたjsonがpale。
これを使う。

map.on('load', () => {
ののち
map.addSource('geojson-source', {
type: 'geojson',
data: {geojsonファイル},
});
こんな感じでgeojsonを追加。

map.addLayer({
id: 'geojson-layer',
type: 'symbol',
source: 'geojson-source',
layout: {
'text-field': ['get', {キー}],
'text-font': ['NotoSansCJKjp-Regular'],
"text-variable-anchor": ["top", "bottom", "left", "right"],
"text-radial-offset": 0.5
},
paint: {
'text-color': '#000000',
},
});

こんな感じでpointをsymbolとして描画。
text-fontは ['NotoSansCJKjp-Regular']を指定しないとアルファベットと数字を描画してくれない。
解決するのに半日かかった。

{
'type': 'Feature',
'properties': {
'description': e.vehicle_label,
},
'geometry': {
'type': 'Point',
'coordinates': e.coordinates
}
}

properties.{任意のキー}を上のtext-field: ['get', {任意のキー}]に指定。

半日って書いたけど実はもっとかかってる。
こういう地図では、protocol buffersで提供されたグリフを使うことで軽量化をするらしい。
しかし、日本語などは標準だとcssで指定されたフォントを使うらしく、この辺が多分原因。
フォントを正しく指定するとstyleファイルで指定されたグリフのリンクから文字をとって来れるのだと思う。
でも初心者だからよくわからない。