【MapLibre】複数のテキストを記載する
上の図のように、マップ内に複数のテキストを配置する場合（タイル自体に文字があってすいません…）、一旦 GeoJSON で定義してあげて、map.addSource で ソースとして追加し、addLayer で追加したソースを参照するのが良いかなと思います。
ちなみに MapLibre では、Web フォントを表示するための機能として、Glyphs 指定が出来るようになっています。日本語の場合は下記のサーバーにフォントの用意があり、利用が可能です。（逆に書いておかないとエラーになります。）
glyphs: 'https://maps.gsi.go.jp/xyz/noto-jp/{fontstack}/{range}.pbf' 上の図のズームレベルを変えると分かるかと思いますが、文字が重なりそうになると自動的に優先度の低い文字が消えるようになっています。この優先度は、GeoJSON で定義する順番で決まっているみたいです（いわゆる z-index のような指定は出来ないみたいです）。OpenLayers みたいに、ズームレベルを検知するイベントをつけなくてもいいところはかなり便利ですね。
全体のソースコードは以下のようになります。
<!DOCTYPE html>
<html>
<head>
<title>htmlMap</title>
<meta http-equiv='content-type' charset='utf-8'>
<meta name='viewport' content='width=device-width'>
</head>
<body>
<!-- 埋め込みマップのdivタグ。マップサイズはwidth（幅）とheight（高さ）で決まる -->
<div id='mapcontainer' style='width:100%; height:300px; z-index:0; border:1px solid #333;'></div>
<!-- 以下OpenLayersのJavaScriptとCSS -->
<link rel='stylesheet' href='https://unpkg.com/maplibre-gl@3.4.0/dist/maplibre-gl.css' />
<script src='https://unpkg.com/maplibre-gl@3.4.0/dist/maplibre-gl.js'></script>
<script>
function init_map() {
const places = {
'type': 'FeatureCollection',
'features': [{
'type': 'Feature',
'properties': {
'description': "札幌",
},
'geometry': {
'type': 'Point',
'coordinates': [141.3507794, 43.0686498]
}},{
'type': 'Feature',
'properties': {
'description': "函館",
},
'geometry': {
'type': 'Point',
'coordinates': [140.7257372, 41.7742072]
}},{
'type': 'Feature',
'properties': {
'description': "苫小牧",
},
'geometry': {
'type': 'Point',
'coordinates': [141.5968821, 42.6400714]
}}
]};
const map = new maplibregl.Map({
container: 'mapcontainer',
style: {
version: 8,
glyphs: 'https://maps.gsi.go.jp/xyz/noto-jp/{fontstack}/{range}.pbf',
sources: {
rtile: {
type: 'raster',
tiles: [
'https://cyberjapandata.gsi.go.jp/xyz/pale/{z}/{x}/{y}.png',
],
tileSize: 256,
attribution: '<a href="https://maps.gsi.go.jp/development/ichiran.html">国土地理院</a>',
},
},
layers: [{
id: 'raster-tiles',
type: 'raster',
source: 'rtile',
minzoom: 0,
maxzoom: 18,
}]
},
center: [142.14, 43.65],
zoom: 5,
pitch: 0
});
map.on('load', () => {
map.addSource('places', {
'type': 'geojson',
'data': places
});
map.addLayer({
'id': 'labels',
'type': 'symbol',
'source': 'places',
'layout': {
'text-field': ['get', 'description'],
'text-justify': 'auto',
}
});
});
}
//ダウンロード時に初期化する
window.addEventListener('DOMContentLoaded', init_map());
</script>
</body>
</html>