1. 다운로드는 npm install --save mapbox-gl @mapbox/mapbox-gl-언어 에 따라 다릅니다.
2. mapBox를 도입하고 가져온 콘텐츠를 js 파일로 캡슐화합니다.
api/map 폴더 아래에 새 mapbox.js 파일을 만듭니다.
코드:
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. 필요한 페이지에서 지도를 호출합니다
. 지도에 대한 상자 id="mapbox"를 작성한 다음 지도를 가져오고 import{map,loadMap}한 다음 지도를 로드합니다. loadMap(''mapbox')
코드
<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>
효과
