全てのドキュメントMapbox GL JSローカルで生成された表意文字を使用

ローカルで生成された表意文字を使用

中国語/日本語/韓国語 (CJK) の表意文字とあらかじめ構成されたハングル音は大量のフォントデータをダウンロードする必要があり、マップの読み込み時間が大幅に遅くなる可能性があります。localIdeographFontFamily設定でサーバーから取得するフォントデータの代わりにローカルで使用可能なフォントを利用して、マップの読み込み時間を短縮できます。本設定では、「CJK Unified Ideographs」および「Hangul Syllables」のユニコード範囲内でグリフ(字形)をローカルで生成し、上書きするための CSS の「font-Family」を定義します。これらの範囲でマップスタイルのフォント設定は、ローカルで使用可能なフォントを優先します。マップのタイルで定義されたフォントスタック内のキーワード (ライト/レギュラー/ミディアム/太字) は、CSSの「font-weight」に変換されます。 この設定は、デフォルトで「sans-serif」フォントが有効になっています。この設定をオーバーライドする場合、選択したフォントが全ユーザーのデバイスで使用できない場合があることに注意してください。「sans-serif」など、広く利用可能なフォールバックフォントを少なくとも1つ指定してください。Mapbox Studioでは、この値がデフォルトでオフに設定されていることに注意してください。

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>ローカルで生成された表意文字を使用</title>
<meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no">
<link href="https://api.mapbox.com/mapbox-gl-js/v2.6.1/mapbox-gl.css" rel="stylesheet">
<script src="https://api.mapbox.com/mapbox-gl-js/v2.6.1/mapbox-gl.js"></script>
<style>
body { margin: 0; padding: 0; }
#map { position: absolute; top: 0; bottom: 0; width: 100%; }
</style>
</head>
<body>
<div id="map"></div>
<script>
// TO MAKE THE MAP APPEAR YOU MUST
// ADD YOUR ACCESS TOKEN FROM
// https://account.mapbox.com
mapboxgl.accessToken = 'YOUR_MAPBOX_ACCESS_TOKEN';
const map = new mapboxgl.Map({
container: 'map',
style: 'mapbox://styles/mapbox/streets-v11',
center: [120.3049, 31.4751],
zoom: 12,
localIdeographFontFamily: "'Noto Sans', 'Noto Sans CJK SC', sans-serif"
});
</script>
</body>
</html>