Vue uses mapbox map

1. Download depends on
npm install --save mapbox-gl @mapbox/mapbox-gl-language

2. Introduce mapBox and encapsulate the imported content as a js file
Create a new mapbox.js file under the api/map folder

Code:

import mapboxgl from 'mapbox-gl'
import 'mapbox-gl/dist/mapbox-gl.css'
import MapboxLanguage from '@mapbox/mapbox-gl-language'
export var map;
mapboxgl.accessToken = '你的key' //去mapbox管⽹申请
export function loadMap(box) {
    
    
	map = new mapboxgl.Map({
    
    
	container: box, //id
	//style: 'mapbox://styles/mapbox/streets-v11', // mapbox官方的底图和样式文件
	style:'mapbox://styles/lingling1108/cljhvd6t8000u01pjacro6f1w',//这里是我自己的样式。
	preserveDrawingBuffer: true,//允许地图导出为图片,
	center: [-74.5, 40], 
	zoom: 9 
	});
	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'
	}));
}

3. The required page calls the map
Write a box id="mapbox" to hold the map, then import the map, import{map,loadMap}, then load the map, loadMap(''mapbox')
code

<template>
	<div class="app-container">
		<div class="myMap">
			<div id="mapbox"></div>
		</div>
	</div>
</template>

<style>
</style>

<script lang="ts">
	import {
    
    
		map,
		loadMap
	} from '@/api/map/mapbox'
	export default {
    
    
		name: "olMap",
		components: {
    
    
			
		},
		data() {
    
    
			return {
    
    
			};
		},
		mounted() {
    
    
			this.initMapbox();
		},
		methods: {
    
    
			initMapbox() {
    
    
				loadMap('mapbox')
				map.setCenter([119.881717, 32.318822]); //修改地图中心点
				map.setZoom(10); //设置缩放级别
			},
		}	
	}
</script>

<style lang="scss" scoped>
	#mapbox {
    
    
		height: 100vh;
		min-height: 1080px;
		min-width: 1920px;
	}
</style>

Effect