设置mapboxgl官方图层标签语言为中文

在Mapbox GL JS中，可通过使用Mapbox提供的带有本地化支持的样式或者通过加载带有中文标签的自定义样式来实现中文语言的图层配置。

https://docs.mapbox.com/mapbox-gl-js/example/language-switch/

以下是实现中文语言显示的两种方法：

方法1：使用Mapbox提供的本地化样式

Mapbox提供了一些带有本地化支持的样式，可以直接使用这些样式来显示中文标签。例如，mapbox://styles/mapbox/streets-v11 支持多种语言显示，包括中文。

mapboxgl.accessToken = 'your-access-token';

const map = new mapboxgl.Map({
  container: 'map', // container id
  style: 'mapbox://styles/mapbox/streets-v11', // Mapbox提供的带本地化支持的样式
  center: [104.195397, 35.86166], // 初始地图中心点 (中国)
  zoom: 3 // 初始缩放级别
});

// 设置语言为中文
map.on('style.load', () => {
  map.setLayoutProperty('country-label', 'text-field', ['get', 'name_zh']);
  map.setLayoutProperty('state-label', 'text-field', ['get', 'name_zh']);
  map.setLayoutProperty('settlement-label', 'text-field', ['get', 'name_zh']);
});

方法2：使用自定义样式

如果有自己的带有中文标签的样式文件，可以直接使用自定义样式来配置地图。

mapboxgl.accessToken = 'your-access-token';

const map = new mapboxgl.Map({
  container: 'map', // container id
  style: 'url-to-your-custom-style', // 自定义样式的URL
  center: [104.195397, 35.86166], // 初始地图中心点 (中国)
  zoom: 3 // 初始缩放级别
});

方法3：通过覆盖标签字段

如果希望覆盖现有的标签字段以显示中文，可以在加载样式后动态修改标签字段。

mapboxgl.accessToken = 'your-access-token';

const map = new mapboxgl.Map({
  container: 'map', // container id
  style: 'mapbox://styles/mapbox/streets-v11', // 使用Mapbox的基础样式
  center: [104.195397, 35.86166], // 初始地图中心点 (中国)
  zoom: 3 // 初始缩放级别
});

map.on('style.load', () => {
  const layers = map.getStyle().layers;

  layers.forEach((layer) => {
    if (layer.type === 'symbol' && layer.layout && layer.layout['text-field']) {
      map.setLayoutProperty(layer.id, 'text-field', [
        'coalesce',
        ['get', 'name_zh'], // 中文标签字段
        ['get', 'name']     // 默认标签字段
      ]);
    }
  });
});