mapbox 标注使用不同字体和字号。举例子说明。

Mapbox GL JS 提供了丰富的自定义选项，可以让你在地图上使用不同字体和字号显示标注。要改变标注的文字样式，你可以通过设置 `text` 字体、大小和其他属性来实现。以下是一个简单的例子：

// 加载地图并获取地图实例
var map = new mapboxgl.Map({
  container: 'map', // 容器ID
  style: 'mapbox://styles/mapbox/streets-v11', // 风格层
  center: [-74.5, 40], // 中心坐标
  zoom: 12
});

// 定义一个自定义标注样式
var customAnnotationStyle = {
  "text-font": ["Open Sans", "Arial", "Helvetica Neue", "sans-serif"], // 设置字体列表，优先级从高到低
  "text-size": 16, // 字体大小，单位是像素
  "text-halo-width": 2, // 文字边框宽度
  "text-halo-color": "#fff" // 文字边框颜色
};

// 添加标注，并应用自定义样式
map.on('load', function() {
  map.addLayer({
    id: 'custom-marker',
    type: 'symbol',
    layout: {
      'icon-image': 'pin-red', // 使用内置图标
      'text-field': ['[name]', { 'font-family': customAnnotationStyle.text-font, 'font-size': customAnnotationStyle.text-size }], // 标注文字
    },
    source: {
      type: 'geojson',
      data: {
        type: 'FeatureCollection',
        features: [
          // 这里添加你的标注数据，包含字段如'name'
        ]
      }
    }
  });
});

在这个例子中，我们设置了标注文字首先尝试使用 `Open Sans` 字体，如果设备上没有这个字体，会依次尝试其他字体。`text-size` 属性指定了默认的字体大小。如果标注的数据中包含 `name` 字段，那么它将作为文本内容，并按照自定义样式显示。