如何建立一个室内3d导航项目（二）- mapbox工程的建立

import mapboxgl from 'mapbox-gl';
import 'mapbox-gl/dist/mapbox-gl.css';//非常重要，不引入无法地图无法正常显示，笔者在这踩了坑

let mapInstance = null;
const container = containerHisRef.value as HTMLElement;//获取地图dom
const webKey = "xx";
mapInstance = new mapboxgl.Map({
  container,
  style: {
    version: 8,
    glyphs: "/font/{fontstack}/{range}.pbf",//很重要，mapbox地图的字体库是要手动引入的，不然无法显示文字，不知道为何这么麻烦
    sources: {
      tianditu: {
        type: "raster",
        tiles: [
          `https://t0.tianditu.gov.cn/vec_w/wmts?SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=cva&STYLE=default&TILEMATRIXSET=w&FORMAT=tiles&TILEMATRIX={z}&TILEROW={y}&TILECOL={x}&tk=${webKey}`,//天地图的url也很有讲究，网上的很多教程都过于老旧，显示不正常就自己探索试试，笔者写这篇文章时这个url是没问题的
        ],
        tileSize: 256,
      },
      tianditu_annotation: {
        type: "raster",
        tiles: [
          `https://t0.tianditu.gov.cn/cva_w/wmts?&service=WMTS&version=1.0.0&request=GetTile&layer=cva&style=default&format=tiles&TileMatrixSet=w&TileMatrix={z}&TileRow={y}&TileCol={x}&tk=${webKey}`,
        ],
        tileSize: 256,
      },
    },
    layers: [{
        id: "tianditu",
        type: "raster",
        source: "tianditu",
      },
      {
        id: "tianditu_annotation",
        type: "raster",
        source: "tianditu_annotation",
      },
    ],
  },
  center: [121, 31], //地图默认中心点经纬度
  zoom: 17,
  pitch: 20,
});

mapInstance.on('load', async () => {//如果有异步请求可以加上async

});