mapbox 初始化、切换语言

初始化项目

npm install --save mapbox-gl

import mapboxGl from 'mapbox-gl'
mapboxGl.accessToken = 'your accessToken'

const map = new mapboxgl.Map({
    container: '<your HTML element id>',
    zoom: 14,
    style: 'mapbox://styles/mapbox/streets-v11'
});

经过以上步骤就可以看到地图了，前提是要去官网申请accessToken：点击去申请页面。

切换语言

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

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://styles/mapbox/streets-v11

卫星地图：mapbox://styles/mapbox/satellite-streets-v11

 

完成就可以切换语言了，点击查看语言插件文档。

 

记录进步！！！