Mapbox GL JS 支持中文标注

青旅半醒 2023-02-21 09:27 19阅读 0赞

mapbox官方提供了对应的[语言插件][Link 1]。

#### 方法 ####

*  安装  
    `npm install --save mapbox-gl @mapbox/mapbox-gl-language`
 *  使用
    
    `import MapboxLanguage from '@mapbox/mapbox-gl-language'`
    
    `map.addControl(new MapboxLanguage({defaultLanguage: 'zh'}));`

#### 问题 ####

1.  插件没有生效，请注意的使用说明：  
    ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2RhaG9uZ2RhaG9uZw_size_16_color_FFFFFF_t_70]  
    也就是说，如果你没有对插件进行配置的话，**默认只支持官方提供的这几个样式**

官网 Styles已经过时， 请使用下面的style替代（已经提交了 pull requests，暂时还未合并）：

*  `mapbox://styles/mapbox/streets-v10`
 *  `mapbox://styles/mapbox/outdoors-v10`
 *  `mapbox://styles/mapbox/dark-v9`
 *  `mapbox://styles/mapbox/light-v9`
 *  `mapbox://styles/mapbox/satellite-streets-v9`
 *  `mapbox://styles/mapbox/traffic-day-v2`
 *  `mapbox://styles/mapbox/traffic-night-v2`

如果你是使用了自定义的样式或样式版本与上述不同时，请自行配置该插件。

1.  切换样式后，中文又不见了。  
    重新添加！  
    `const mapboxLanguage = new MapboxLanguage({ defaultLanguage: 'zh' })`

componentDidUpdate() { 
        	this.map.setStyle(this.props.style)
        	this.map.addControl(mapboxLanguage);
        }

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2RhaG9uZ2RhaG9uZw_size_16_color_FFFFFF_t_70 1]

[Link 1]: https://github.com/mapbox/mapbox-gl-language/
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2RhaG9uZ2RhaG9uZw_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/2020063009472832.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2RhaG9uZ2RhaG9uZw==,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2RhaG9uZ2RhaG9uZw_size_16_color_FFFFFF_t_70 1]: https://img-blog.csdnimg.cn/20200630101655543.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2RhaG9uZ2RhaG9uZw==,size_16,color_FFFFFF,t_70