mapbox设置地图语言为中文，支持JavaScript和Vue

Gisleung

已于 2023-02-03 21:16:23 修改

阅读量8.2k

点赞数 5

分类专栏： Mapbox 文章标签： javascript

于 2022-03-17 12:58:35 首次发布

本文链接：https://blog.csdn.net/qq_27816785/article/details/123547437

版权

Mapbox 专栏收录该内容

1 篇文章

订阅专栏

文章目录

Mapbox官方语言插件

官方语言插件地址：mapbox-gl-language，在项目中通过使用该插件，即可以支持多种地图语言的设置。

1 😁 原生JS实现

仓库中给出的简体中文demo zh-Hans.html 即是js实现，如下：

<!DOCTYPE html>
<html>
<head>
    <meta charset='utf-8' />
    <title>Mapbox GL Language</title>
    <meta name='viewport' content='initial-scale=1,maximum-scale=1,user-scalable=no' />
    <script src='https://api.tiles.mapbox.com/mapbox-gl-js/v2.4.0/mapbox-gl.js'></script>
    <link href='https://api.tiles.mapbox.com/mapbox-gl-js/v2.4.0/mapbox-gl.css' rel='stylesheet' />
    <script src='../index.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>
mapboxgl.accessToken = 'pk.eyJ1IjoibHVrYXNtYXJ0aW5lbGxpIiwiYSI6ImNpem85dmhwazAyajIyd284dGxhN2VxYnYifQ.HQCmyhEXZUTz3S98FMrVAQ';
var map = new mapboxgl.Map({
    container: 'map',
    style: 'mapbox://styles/mapbox/streets-v11',
    center: [-98, 38.88],
    minZoom: 2,
    zoom: 3
});
mapboxgl.setRTLTextPlugin('https://api.mapbox.com/mapbox-gl-js/plugins/mapbox-gl-rtl-text/v0.2.3/mapbox-gl-rtl-text.js');
map.addControl(new MapboxLanguage({
  defaultLanguage: 'zh-Hans'
}));
</script>

</body>
</html>

一定要注意版本号，尽量保持与官方示例一致！（网上其他教程大多没注意这一点）

2 😁 使用vue实现

（博主用的这种方式）

首先安装所需的依赖项

npm install --save mapbox-gl @mapbox/mapbox-gl-language

地图初始化之前，导入依赖

import mapboxgl from 'mapbox-gl';
import MapboxLanguage from '@mapbox/mapbox-gl-language';
// 注意版本号，与官方最新示例保持一致
mapboxgl.setRTLTextPlugin('https://api.mapbox.com/mapbox-gl-js/plugins/mapbox-gl-rtl-text/v0.2.3/mapbox-gl-rtl-text.js');

地图初始化之后，设置地图语言

map.addControl(new MapboxLanguage({
    defaultLanguage: 'zh-Hans'
}));

至此已经完成了地图语言的设置。更详细的说明，可查看官方仓库mapbox-gl-language，如果你访问不到官方仓库，请留下邮箱

3 结果展示

Alt

----完----

其它：

仅改变某一图层的标注语言

官方对于地图语言的说明：Change your map’s label language
官方demo示例：Change a map’s language