vue2 + mapbox 快速搭建 CV可用

效果：

版本：vue2.x、mapbox-gl 3.4.0、@mapbox/mapbox-gl-language 1.0.1

---

实现过程

---

// 老规矩 先装依赖

yarn install mapbox-gl@3.4.0

yarn install @mapbox/mapbox-gl-language

<template>
    <div class="map_box">
        <div ref="map" class="map" id="map"></div>
    </div>
</template>

<script>
import maxboxMap from '@/utils/futureMap/futureMap.js'

export default {
    components: {},
    data() {
        return {
            map: null,
        }
    },
    computed: {},
    methods: {
        handleInitMap() {
            // 后期想传入一些值 比如areaCode 之类的 自动定位至改城市的中心

            let map = new maxboxMap({
                element: 'map'
            })
        },
    },
    watch: {},

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

 引入futureMap.js

// mapboxgl地图
import mapboxgl from 'mapbox-gl'
import 'mapbox-gl/dist/mapbox-gl.css'
// mapboxgl汉化
import MapboxLanguage from '@mapbox/mapbox-gl-language'
const accessToken = '这个得自己注册一个'
class maxboxMap {
    constructor(option) {
        this.map = null
        this.element = option.element
        this.areaCode = option.areaCode
        this.initialize()
    }
    //初始化
    initialize() {
        mapboxgl.accessToken = accessToken
        this.map = new mapboxgl.Map({
            container: 'map',
            style: 'mapbox://styles/mapbox/streets-v12',
            pitch: 0,
            bearing: 0,
            center: [116.405285, 39.904989],
            projection: 'globe', // 为 3D 地球
            antialias: false, //抗锯齿，通过false关闭提升性能
        })
        //设置中文
        this.map.addControl(new MapboxLanguage({ defaultLanguage: 'zh-Hans' }))
        //添加导航控制条
        this.map.addControl(new mapboxgl.NavigationControl(), 'top-left')
        this.map.on('style.load', () => {})

        this.map.on('load', () => {})
    }
}
export default maxboxMap