mapbox设置中文的几种方式

1 通过一个js库来实现

第一种，通过一个js插件，将文字转换中文。

html页面引入js库
<script src='https://api.mapbox.com/mapbox-gl-js/plugins/mapbox-gl-language/v1.0.0/mapbox-gl-language.js'></script>

const map = new mapboxgl.Map({
  container: 'map',
  // You can add layers to the predetermined slots within the Standard style basemap.
  style: 'mapbox://styles/mapbox/streets-v11', // mapbox官方给出了几种底图可以选择
  center: [104.6826114635814, 28.82097174542686],
  zoom: 17 // 地图缩放级别
})

// 设置语言中文
map.addControl(
  new MapboxLanguage({
    defaultLanguage: "zh-Hans"
  })
)
    

对比上面两张图片发现，会有部分英文转换为了中文，有些还是英文或拼音。

2 setLayoutProperty方式

官方支持了修改图层上文字的方式

  map.setLayoutProperty('country-label', 'text-field', [
    'get',
    `name_zh-Hans`
  ])

mapbox的底图也是多个图层组合拼成的，在mapbox studio这个图层编辑网站就可以清楚看到，以style: 'mapbox://styles/mapbox/streets-v11'为例。

以这种底图为基准创建style，在左边就可以看到底图包含的所有图层，这些图层构成了上面的底图，图上的那些城市，街道标注也是一类图层。找到想改的图层，修改语言即可。

官网：docs.mapbox.com/mapbox-gl-j…

3 以mapbox的底图为基准制作自己的底图

第三种比较好的方式就是以mapbox的底图为基准制作自己的底图。 比如我们创建好底图后，可以修改图层的文字的语言

然后发布这个style，初始化时换成自己的style就行

const map = new mapboxgl.Map({
  container: 'map',
  // You can add layers to the predetermined slots within the Standard style basemap.
  style: 'mapbox://styles/mapbox/streets-v11', // 可以换成自己的style
  center: [104.6826114635814, 28.82097174542686],
  zoom: 17 // 地图缩放级别
})

另外在这个网站也可以自己增加图层，编辑图层数据等。针对方式一方式提到的有些文字还是英文或拼音，也可以自己在这里编辑。