mapbox加载天地图

import maplibregl from 'maplibre-gl'



const vecUrl = "http://t0.tianditu.com/vec_w/wmts?tk=你申请的天地图key";
const cvaUrl = "http://t0.tianditu.com/cva_w/wmts?tk=你申请的天地图key";
//实例化source对象
var tdtVec = {
  //类型为栅格瓦片
  "type": "raster",
  'tiles': [
    //请求地址
    vecUrl + "&SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=vec&STYLE=default&TILEMATRIXSET=w&TILEMATRIX={z}&TILEROW={y}&TILECOL={x}&FORMAT=tiles"
  ],
  //分辨率
  'tileSize': 256
};
var tdtCva = {
  "type": "raster",
  'tiles': [
    cvaUrl + "&SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=cva&STYLE=default&TILEMATRIXSET=w&TILEMATRIX={z}&TILEROW={y}&TILECOL={x}&FORMAT=tiles"
  ],
  'tileSize': 256
};


var style={
  //设置版本号，一定要设置
  "version": 8,
  //添加来源
  "sources": {
    "tdtVec": tdtVec,
    "tdtCva": tdtCva
  },
  "layers": [
    {
      //图层id，要保证唯一性
      "id": "tdtVec",
      //图层类型
      "type": "raster",
      //数据源
      "source": "tdtVec",
      //图层最小缩放级数
      "minzoom": 0,
      //图层最大缩放级数
      "maxzoom": 17
    },
    {
      "id": "tdtCva",
      "type": "raster",
      "source": "tdtCva",
      "minzoom": 0,
      "maxzoom": 17
    }
  ],
}

const mapconfig = {
  key: '447f9b2515d3bc8641c9156b29535282',
  maxZoom: 20,
  minZoom: 5,
};

export default{
  name: 'Map',
  data(){
    return{
      mapInstance: null,
      map: null,
    }
  },
  computed:{
    ...mapGetters('map-container', {

    }),
  },
  methods:{
    fixBug(){

    },
    createMapInstance(){

      this.map = new maplibregl.Map({
        container: 'map-container', // 替换为你的地图容器的 ID
        center: [109.194811,27.668092], // 设置地图中心点的经纬度
        zoom: 12, // 设置初始缩放级别
        style:style
      });



    }
  },
  watch:{

  },
  mounted(){
    this.createMapInstance();
  },
  beforeDestroy(){
    if (this.mapInstance){
      this.mapInstance.remove();
    }
  }
}