1.添加mapbox-gl 2.添加地图组件 3. 修改从vue引入插件提示错误的问题 4. 安装了mapbox-gl插件和@types/node插件

.vscode/settings.json

@@ -0,0 +1,7 @@
+{
+    "i18n-ally.localesPaths": [
+        "src/locales",
+        "src/locales/lang",
+        "public/resource/tinymce/langs"
+    ]
+}

package.json

@@ -92,11 +92,12 @@
     "element-plus": "^2.6.0",
     "exceljs": "^4.4.0",
     "highlight.js": "^11.9.0",
+    "js-md5": "^0.8.3",
     "kml-geojson": "^1.2.2",
     "localforage": "^1.10.0",
-    "js-md5": "^0.8.3",
     "lodash": "^4.17.21",
     "lodash-es": "^4.17.21",
+    "mapbox-gl": "^3.3.0",
     "mars3d": "^3.7.0",
     "mars3d-cesium": "^1.113.0",
     "min-dash": "^4.2.1",
@@ -138,6 +139,7 @@
     "@types/crypto-js": "^4.2.1",
     "@types/lodash-es": "^4.17.12",
     "@types/mockjs": "^1.0.10",
+    "@types/node": "^20.10.6",
     "@types/nprogress": "^0.2.3",
     "@types/qrcode": "^1.5.5",
     "@types/qs": "^6.9.11",

src/components/MapboxMaps/index.vue

@@ -0,0 +1,63 @@
+<template>
+  <div id="mapContainer" class="map-container"></div>
+</template>
+
+<script lang="ts" setup>
+  import { onMounted, onUnmounted, defineProps } from 'vue';
+  import mapboxgl from 'mapbox-gl';
+  import 'mapbox-gl/dist/mapbox-gl.css';
+  import './src/index.less';
+
+  interface MapboxOptions {
+    mapOptions: mapboxgl.MapboxOptions;
+  }
+  const props = defineProps<MapboxOptions>();
+  let map;
+  const emit = defineEmits(['mapOnLoad']);
+  onMounted(() => {
+    mapboxgl.accessToken =
+      'pk.eyJ1Ijoic2hpY2hhbzEyMyIsImEiOiJja3FobnI1aDEwNGF6Mm9vOXVhNnBzZmFhIn0.2fZKiMqCQHxVY74QShMEGQ';
+    map = initMap();
+    map.on('load', () => {
+      emit('mapOnLoad', map);
+    });
+  });
+  onUnmounted(() => {
+    map ? map.remove() : null;
+  });
+  const initMap = () => {
+    return new mapboxgl.Map({
+      container: 'mapContainer',
+      style: {
+        glyphs: 'mapbox://fonts/mapbox/{fontstack}/{range}.pbf',
+        version: 8,
+        sources: {
+          'raster-tiles': {
+            type: 'raster',
+            tiles: [
+              'https://t0.tianditu.gov.cn/DataServer?T=img_w&x={x}&y={y}&l={z}&tk=b6585bc41ee16251dbe6b1af64f375d9',
+            ],
+            tileSize: 256,
+          },
+        },
+        layers: [
+          {
+            id: 'tdt-img-tiles',
+            type: 'raster',
+            source: 'raster-tiles',
+            minzoom: 0,
+            maxzoom: 22,
+          },
+        ],
+      },
+      ...props.mapOptions,
+    });
+  };
+</script>
+
+<style scoped>
+  .map-container {
+    width: 100%;
+    height: 100%;
+  }
+</style>

src/components/MapboxMaps/src/index.less

@@ -0,0 +1,3 @@
+.mapboxgl-ctrl-logo{
+    display: none !important;
+}

src/views/dashboard/analysis/index.vue

@@ -1,17 +1,16 @@
 <template>
-  <div class="p-4">
-    <div class="md:flex enter-y">
-      <VisitSource class="md:w-1/3 !md:mx-4 !md:my-0 !my-4 w-full" :loading="loading" />
-    </div>
+  <div class="w-full" style="height: 100%">
+    <MapboxMaps :mapOptions="mapOptions" @map-on-load="mapOnLoad" />
   </div>
 </template>
 <script lang="ts" setup>
-  import { ref } from 'vue';
-  import VisitSource from './components/VisitSource.vue';
+  import MapboxMaps from '@/components/MapboxMaps/index.vue';
 
-  const loading = ref(true);
-
-  setTimeout(() => {
-    loading.value = false;
-  }, 1500);
+  const mapOptions = {
+    center: [116.404, 39.905],
+    zoom: 8,
+  };
+  const mapOnLoad = (map) => {
+    console.log('map::: ', map);
+  };
 </script>

tsconfig.json

@@ -4,10 +4,10 @@
   "compilerOptions": {
     "baseUrl": ".",
     "declaration": false,
-    "types": ["vite/client"],
+    "types": ["vite/client","node"],
     "paths": {
       "@/*": ["src/*"],
-      "#/*": ["types/*"],
+      "#/*": ["types/*"]
     },
     "module": "ES2022",
     "moduleResolution": "node"