vue中使用mapbox-gl

1. 安装

pnpm i mapbox-gl -S

2. 在单页面中使用

// mapboxgl地图
import mapboxgl from 'mapbox-gl';
import 'mapbox-gl/dist/mapbox-gl.css';

注意1: 无需在main.js做全局引入；
注意2: 一定要引入样式，否则有些东西显示不出来，比如说放大缩小的导航控制条；

mapbox-gl在vue中怎样实现中文显示

1、 安装@mapbox/mapbox-gl-language

pnpm i @mapbox/mapbox-gl-language -S

2、 在单页中引用

// mapboxgl汉化
import MapboxLanguage from '@mapbox/mapbox-gl-language';

3、 在初始化地图方法中设置语言

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

隐藏mapbox商标信息

.mapboxgl-ctrl-bottom-left,
.mapboxgl-ctrl-bottom-right {
    display: none;
}

完整代码 && 效果图

<template>
      <div ref="basicMapbox" style="position: relative" class="w100 h100"></div>
</template>

<script setup>
// mapboxgl地图
import mapboxgl from 'mapbox-gl';
import 'mapbox-gl/dist/mapbox-gl.css';
// mapboxgl汉化
import MapboxLanguage from '@mapbox/mapbox-gl-language';

let map; // 地图

// 初始化生命周期
onMounted(() => {
    init();
});
onBeforeUnmount(() => {
    map = null;
});

const basicMapbox = ref(null),
    start = {
        center: [80, 80],
        zoom: 1,
        pitch: 0,
        bearing: 0,
    },
    end = {
        center: [118.726533, 32.012005],
        zoom: 16.5,
        bearing: 20, //目标方位角
        pitch: 75,
    };
function init() {
    mapboxgl.accessToken = 'pk.eyJ1IjoicGxheS1pc2FhYyIsImEiOiJjazU0cDkzbWowamd2M2dtemd4bW9mbzRhIn0.cxD4Fw3ZPB_taMkyUSFENA';
    map = new mapboxgl.Map({
        container: basicMapbox.value,
        style: 'mapbox://styles/mapbox-map-design/ckhqrf2tz0dt119ny6azh975y',
        ...start,
        projection: 'globe', // 为 3D 地球
        antialias: false, //抗锯齿，通过false关闭提升性能
    });
    map.addControl(new MapboxLanguage({ defaultLanguage: 'zh-Hans' }));
    // ### 添加导航控制条
    map.addControl(new mapboxgl.NavigationControl(), 'top-left');
    map.on('style.load', function () {
        map.setFog({});
        map.flyTo({
            ...end,
            duration: 12000,
            essential: true,
        });
    });
}

</script>

<style>
.mapboxgl-ctrl-bottom-left,
.mapboxgl-ctrl-bottom-right {
    display: none;
}
.mapboxgl-ctrl-icon {
    box-sizing: border-box;
}
</style>