vue中使用mapbox-gl遇到的一些问题以及解决办法

在vue中如何正确安装与使用

1、 先安装

npm install mapbox-gl --save

2、在单页中引用

import mapboxgl from 'mapbox-gl'
import 'mapbox-gl/dist/mapbox-gl.css' 

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

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

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

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

2、 在单页中引用

import MapboxLanguage  from '@mapbox/mapbox-gl-language'

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

var language = new MapboxLanguage({ defaultLanguage: "zh" });
this.map.addControl(language);

添加导航控制条

var nav = new mapboxgl.NavigationControl();
this.map.addControl(nav, 'bottom-right');

000.png

隐藏mapbox商标信息

// 隐藏mapbox商标
.mapboxgl-ctrl-logo {
    display: none;
}

image.png

完整代码 && 效果图

<template>
    <div class="mapbox-maps">
        <div id="map"></div>  
    </div>
</template>

<script>
import mapboxgl from 'mapbox-gl'
import 'mapbox-gl/dist/mapbox-gl.css' // 一定要引入样式， 否则有些东西显示不出来(比如导航控制条)
import MapboxLanguage  from '@mapbox/mapbox-gl-language'
export default {
    data: () => ({
        map: null
    }),

    methods: {
        initMap() {
            this.map = new mapboxgl.Map({
                accessToken: '你自己的token',
                container: 'map',
                style: 'mapbox://styles/mapbox/streets-v9',
                center: [116.3972282409668, 39.90960456049752],
                zoom: 18,
                antialias: false,
                attributionControl: false  
            })

            // 设置语言
            var language = new MapboxLanguage({ defaultLanguage: "zh" });
            this.map.addControl(language);

            // 导航控制条
            var nav = new mapboxgl.NavigationControl();
            this.map.addControl(nav, 'bottom-right');

        }
       
    },
    mounted() {
        this.initMap()
    }  
}
</script>

<style lang="scss">
.mapbox-maps {
    width: 100%;
    height: calc(100vh - 50px);
    position: relative;
    #map {
        width: 100%;
        height: 100%;
        position: absolute;
        top: 0;
        left: 0;
        bottom:0;
        right: 0;
        .mapboxgl-canvas {
            outline: none;
        }
        // 隐藏mapbox商标
        .mapboxgl-ctrl-logo {
            display: none;
        }
    }
}
    
</style>

001.png