云查询-地图叠加的高清影像

src/components/CloudQueryContent/CloudQueryModal/BasicQuery/ModalMap/index.vue

@@ -1,5 +1,8 @@
 <template>
-  <div :id="mapId" :style="`position: ${position}; top: 0px; left: 0px; width: ${width}; height: ${height}; z-index: ${zIndex} `"></div>
+  <div
+    :id="mapId"
+    :style="`position: ${position}; top: 0px; left: 0px; width: ${width}; height: ${height}; z-index: ${zIndex} `"
+  ></div>
 </template>
 
 <script setup lang="ts">
@@ -8,7 +11,10 @@
   import mapboxgl, { Map } from 'mapbox-gl';
   import { MapboxConfig, MapboxDefaultStyle } from '@/components/MapboxMaps/src/config';
   import { getAppEnvConfig } from '@/utils/env';
-  const { VITE_GLOB_YINGXIANG_SERVER } = getAppEnvConfig();
+  import axios from 'axios';
+
+  const { VITE_GLOB_YINGXIANG_SERVER, VITE_GLOB_YAOGANYINGXIANG_SERVER } = getAppEnvConfig();
+  const { VITE_GLOB_API_URL, VITE_GLOB_LAN_API_URL } = getAppEnvConfig();
 
   const props = defineProps(['width', 'height', 'zIndex', 'position', 'centerAndZoom']);
   const emits = defineEmits(['getMap']);
@@ -26,23 +32,115 @@
   });
 
   const mapId = `modal-map-${uuidv4()}`;
+  const networkType = ref('WAN');
   let map: Map;
   onMounted(() => {
     mapboxgl.accessToken = MapboxConfig.ACCESS_TOKEN;
+    // 获取网络环境后加载地图
+    // loadMapInfo();
     map = initMap();
     map.on('load', () => {
-      addResourcesAndLayers();
       emits('getMap', map);
     });
   });
+
+  async function loadMapInfo() {
+    try {
+      await axios.get(VITE_GLOB_LAN_API_URL + '/api/DroneCloudQuery/IsPublic').then((res) => {
+        if (res.data.result) {
+          networkType.value = 'WAN';
+        } else {
+          networkType.value = 'LAN';
+        }
+      });
+    } catch (e) {
+      networkType.value = 'WAN';
+    } finally {
+      map = initMap();
+      map.on('load', () => {
+        emits('getMap', map);
+      });
+    }
+  }
+
   const initMap = () => {
     return new mapboxgl.Map({
       container: mapId,
       language: 'zh-cmn',
       projection: 'equirectangular', // wgs84参考系
-      style: MapboxDefaultStyle,
-      maxZoom: 24,
-      minZoom: 6,
+      style: {
+        glyphs: 'mapbox://fonts/mapbox/{fontstack}/{range}.pbf',
+        version: 8,
+        sources: {
+          'raster-tiles': {
+            type: 'raster',
+            tiles: [
+              `http://t0.tianditu.gov.cn/DataServer?T=img_w&x={x}&y={y}&l={z}&tk=${MapboxConfig.TDT_TOKEN}`,
+            ],
+            tileSize: 256,
+            minzoom: 1,
+            maxzoom: 17,
+          },
+          'raster-tiles-font': {
+            type: 'raster',
+            tiles: [
+              `https://t0.tianditu.gov.cn/DataServer?T=vec_w&x={x}&y={y}&l={z}&tk=${MapboxConfig.TDT_TOKEN}`,
+            ],
+            tileSize: 256,
+          },
+          yaogan: {
+            type: 'raster',
+            tiles: [VITE_GLOB_YAOGANYINGXIANG_SERVER],
+            tileSize: 256,
+            minzoom: 16,
+            maxzoom: 24,
+          },
+          yingxiang: {
+            type: 'raster',
+            tiles: [VITE_GLOB_YINGXIANG_SERVER],
+            tileSize: 256,
+            minzoom: 16,
+            maxzoom: 24,
+          },
+        },
+        layers: [
+          {
+            id: 'tdt-vec-tiles',
+            type: 'raster',
+            source: 'raster-tiles-font',
+            maxZoom: 32,
+          },
+          {
+            id: 'tdt-img-tiles',
+            type: 'raster',
+            source: 'raster-tiles',
+            maxZoom: 32,
+          },
+          {
+            id: 'yaogan',
+            type: 'raster',
+            source: 'yaogan',
+            layout: {
+              visibility: networkType.value == 'LAN' ? 'visible' : 'none',
+            },
+            minzoom: 9,
+            maxzoom: 15,
+          },
+          {
+            id: 'yingxiang',
+            type: 'raster',
+            source: 'yingxiang',
+            layout: {
+              visibility: networkType.value == 'LAN' ? 'visible' : 'none',
+            },
+            minzoom: 13,
+            maxzoom: 24,
+          },
+        ],
+      },
+      maxZoom: 22,
+      minZoom: 8,
+      pitch: 0,
       zoom: props.centerAndZoom
         ? calculateZoom(JSON.parse(`[${props.centerAndZoom[0]?.fourpoint}]`))
         : 14,
@@ -52,28 +150,6 @@
     });
   };
 
-  function addResourcesAndLayers() {
-    map.addSource('yingxiang', {
-      type: 'raster',
-      tiles: [
-        VITE_GLOB_YINGXIANG_SERVER,
-      ],
-      tileSize: 256,
-      minzoom:13,
-      maxzoom:24,
-    });
-    map.addLayer({
-      id: 'yingxiang',
-      type: 'raster',
-      source: 'yingxiang',
-      layout: {
-        visibility: 'visible',
-      },
-      minzoom:13,
-      maxzoom:24
-    });
-  }
-
   // 移动位置
   function getCenter(fourpoint) {
     let x = 0;