在地图上加载媒体文件

Web/src/App.vue

@@ -28,6 +28,7 @@ export default defineComponent({
 .app {
   width: 100%;
   height: 100%;
+  overflow: hidden;
 
   .map-wrapper {
     height: 100%;

Web/src/components/GMap.vue

@@ -3,7 +3,7 @@
     <!-- 地图区域 -->
     <div id="g-container" :style="{ width: '100%', height: '100%' }" />
     <!-- 绘制面板 -->
-    <div class="g-action-panel" :style="{ right: drawVisible ? '316px' : '16px' }">
+    <div class="g-action-panel">
       <div :class="state.currentType === 'pin' ? 'g-action-item selection' : 'g-action-item'"
         @click="draw('pin', true)">
         <a><a-image :src="pin" :preview="false" /></a>
@@ -28,7 +28,7 @@
       </div>
     </div>
     <!-- 地图类型切换控件 -->
-    <div class="g-mapType" :style="{ right: drawVisible ? '316px' : '16px' }">
+    <div class="g-mapType">
       <img :src="planeSrc" v-if="state.mapType === 0" @click="onClickSwitchMapType" />
       <img :src="satelliteSrc" v-else @click="onClickSwitchMapType" />
     </div>
@@ -658,10 +658,6 @@ export default defineComponent({
       return store.state.layerBaseInfo.share
     })
 
-    const drawVisible = computed(() => {
-      return store.state.drawVisible
-    })
-
     const livestreamOthersVisible = computed(() => {
       return store.state.livestreamOthersVisible
     })
@@ -875,8 +871,10 @@ export default defineComponent({
       map.add(text);
       store.state.coverMap[req.id + '_text'] = [text]
       obj.on('click', function () {
-        const id = req.id;
-        store.commit('SET_MAP_CLICK_ID', id);
+        store.commit('SET_MAP_CLICK_ELEMENT', {
+          id: req.id,
+          type: 'DEFAULT',
+        });
       });
     }
     async function postPolylineResource(obj: any) {
@@ -910,8 +908,10 @@ export default defineComponent({
       map.add(text);
       store.state.coverMap[req.id + '_text'] = [text]
       obj.on('click', function () {
-        const id = req.id;
-        store.commit('SET_MAP_CLICK_ID', id);
+        store.commit('SET_MAP_CLICK_ELEMENT', {
+          id: req.id,
+          type: 'DEFAULT',
+        });
       });
     }
     async function postPolygonResource(obj: any) {
@@ -945,8 +945,10 @@ export default defineComponent({
       map.add(text);
       store.state.coverMap[req.id + '_text'] = [text]
       obj.on('click', function () {
-        const id = req.id;
-        store.commit('SET_MAP_CLICK_ID', id);
+        store.commit('SET_MAP_CLICK_ELEMENT', {
+          id: req.id,
+          type: 'DEFAULT',
+        });
       });
     }
 
@@ -1066,7 +1068,6 @@ export default defineComponent({
     return {
       draw,
       mouseMode,
-      drawVisible,
       livestreamOthersVisible,
       livestreamAgoraVisible,
       osdVisible,

Web/src/components/svgIcon.vue

@@ -1,6 +1,6 @@
 <template>
-  <svg :class="svgClass" :aria-hidden="true" :style="{color: color, width:computedWidth, height:computedWidth}">
-    <use :xlink:href="iconName" :fill="color"/>
+  <svg :class="svgClass" :aria-hidden="true" :style="{ color: color, width: computedWidth, height: computedWidth }">
+    <use :xlink:href="iconName" :fill="color" />
   </svg>
 </template>
 
@@ -21,7 +21,6 @@ const props = defineProps({
 })
 const iconName = computed(() => `#icon-${props.name}`)
 const svgClass = computed(() => {
-  console.log(props.name, 'props.name')
   if (props.name) {
     return `svg-icon icon-${props.name}`
   }

Web/src/hooks/use-g-map-cover.ts

@@ -70,7 +70,10 @@ export function useGMapCover() {
     marker.on('click', function (e: any) {
       const options = marker.getOptions()
       const id = options.extData.id;
-      store.commit('SET_MAP_CLICK_ID', id);
+      store.commit('SET_MAP_CLICK_ELEMENT', {
+        id: id,
+        type: 'DEFAULT',
+      });
     })
     AddCoverToMap(marker)
   }
@@ -108,7 +111,10 @@ export function useGMapCover() {
     polyline.on('click', function () {
       const options = polyline.getOptions()
       const id = options.extData.id;
-      store.commit('SET_MAP_CLICK_ID', id);
+      store.commit('SET_MAP_CLICK_ELEMENT', {
+        id: id,
+        type: 'DEFAULT',
+      });
     })
     AddOverlayGroup(polyline)
   }
@@ -147,7 +153,10 @@ export function useGMapCover() {
     polygon.on('click', function () {
       const options = polygon.getOptions()
       const id = options.extData.id;
-      store.commit('SET_MAP_CLICK_ID', id);
+      store.commit('SET_MAP_CLICK_ELEMENT', {
+        id: id,
+        type: 'DEFAULT',
+      });
     })
     AddOverlayGroup(polygon)
   }
@@ -167,6 +176,31 @@ export function useGMapCover() {
     return coverMap[id]
   }
 
+  function updatePhotoElement(id: string, name: string, url: string, coordinates: [number, number]) {
+    const icon = new AMap.Icon({
+      size: new AMap.Size(30, 30),
+      image: url,
+      imageSize: new AMap.Size(30, 30)
+    })
+    const marker = new AMap.Marker({
+      position: new AMap.LngLat(coordinates[0], coordinates[1]),
+      icon: icon,
+      title: name,
+      extData: {
+        id: id
+      }
+    })
+    marker.on('click', function (e: any) {
+      const options = marker.getOptions()
+      const id = options.extData.id;
+      store.commit('SET_MAP_CLICK_ELEMENT', {
+        id: id,
+        type: 'PHOTO',
+      });
+    })
+    AddCoverToMap(marker)
+  }
+
   function updatePinElement(id: string, name: string, coordinates: GeojsonCoordinate, color?: string) {
     init2DPin(name, coordinates, color, {
       id: id,
@@ -304,6 +338,7 @@ export function useGMapCover() {
     initPolygon,
     removeCoverFromMap,
     getElementFromMap,
+    updatePhotoElement,
     updatePinElement,
     updatePolylineElement,
     updatePolygonElement,

Web/src/pages/page-web/projects/layer/components/PhotoDrawer.vue

@@ -0,0 +1,139 @@
+<template>
+  <a-drawer :title="state.info.file_name" placement="right" :closable="true" v-model:visible="visible" :mask="true"
+    getContainer="#g-container" :wrap-style="{ position: 'absolute' }" wrapClassName="drawer-element-wrapper"
+    @close="closeDrawer" width="600">
+    <div class="info">
+      <div>
+        <ClockCircleOutlined /> {{ state.info.picture_time }}
+      </div>
+      <div>
+        {{ state.info.size > 0 ? (state.info.size / 1024 / 1024).toFixed(1) + 'M' : '--' }}
+      </div>
+      <div>
+        <div v-if="state.info.image_width && state.info.image_height">
+          {{ state.info.image_width }}*{{ state.info.image_height }}
+        </div>
+        <div v-else>
+          --
+        </div>
+      </div>
+      <div>
+        <span style="margin-right: 10px;">
+          {{ state.info.latitude }}° N
+        </span>
+        <span>
+          {{ state.info.longitude }}° E
+        </span>
+      </div>
+    </div>
+    <div class="image">
+      <div class="image-background" v-if="state.imgLoading">
+        <a-spin tip="加载中..." />
+      </div>
+      <Panoramic :src="state.info.url" v-else-if="state.info.media_type === 3" />
+      <a-image width="100%" height="100%" style="object-fit: cover;" :src="state.info.url" :preview="false" v-else />
+    </div>
+    <div class="previewList">
+      <div class="previewList-item">
+        <img :src="state.info.thumbnail_url" />
+      </div>
+    </div>
+  </a-drawer>
+</template>
+
+<script lang="ts" setup>
+import { reactive, watch } from 'vue';
+import { ClockCircleOutlined } from '@ant-design/icons-vue';
+import Panoramic from '/@/components/panoramic/index.vue';
+import { apis } from '/@/api/custom';
+
+interface Props {
+  visible: boolean,
+  fileId: string,
+  closeDrawer: () => void,
+};
+
+const props = withDefaults(defineProps<Props>(), {
+
+});
+
+const state = reactive({
+  imgLoading: false,// 图片加载
+  info: {
+    url: '',
+    thumbnail_url: '',// 缩略图
+    media_type: 0,
+    file_name: '',
+    image_width: '',// 照片分辨率-宽度
+    image_height: '',// 照片分辨率-高度
+    size: 0,
+    picture_time: '',// 拍摄时间
+    longitude: '',// 经度
+    latitude: '',// 纬度
+  },
+})
+
+watch(() => props.fileId, async (newValue) => {
+  if (props.visible && newValue) {
+    const fileId = newValue.replace(/^resource__/, '');
+    try {
+      const res = await apis.fetchFileDetail(fileId);
+      state.info = res.data;
+      state.imgLoading = true;
+      const img = new Image();
+      img.src = state.info.url;
+      img.onload = () => {
+        state.imgLoading = false;
+      };
+    } catch (e) {
+      console.error(e);
+    }
+  }
+});
+</script>
+
+<style lang="scss" scoped>
+.info {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-bottom: 24px;
+}
+
+.image {
+  width: 100%;
+  height: 500px;
+
+  &-background {
+    width: 100%;
+    height: 100%;
+    padding: 100px;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+  }
+}
+
+.previewList {
+  width: 100%;
+  height: 70px;
+  display: flex;
+  justify-content: center;
+  margin-top: 24px;
+
+  &-item {
+    width: 80px;
+    height: 60px;
+    border: 2px solid $primary;
+    border-radius: 4px;
+    margin-bottom: 10px;
+    cursor: pointer;
+
+    img {
+      width: 100%;
+      height: 100%;
+      object-fit: cover;
+    }
+  }
+}
+</style>

Web/src/pages/page-web/projects/layer/index.vue

@@ -10,8 +10,9 @@
       <div class="drawer-element-content">
         <div class="name element-item">
           <span class="mr30">名称:</span>
-          <a-input v-model:value="layerState.layerName" style="width:110px" placeholder="element name"
-            @change="changeLayer" />
+          {{ layerState.layerName }}
+          <!-- <a-input v-model:value="layerState.layerName" style="width:110px" placeholder="element name"
+            @change="changeLayer" /> -->
         </div>
         <div class="longitude element-item" v-if="layerState.currentType === geoType.Point">
           <span class="mr30">经度:</span>
@@ -54,100 +55,73 @@
         <a-button type="primary" @click="deleteElement">删除</a-button>
       </div>
     </a-drawer>
-    <!-- <a-drawer title="图片信息" placement="right" :closable="true" v-model:visible="visible" :mask="true"
-      getContainer="#g-container" :wrap-style="{ position: 'absolute' }" wrapClassName="drawer-element-wrapper"
-      @close="closeDrawer" width="300">
-      <div class="drawer-element-content">
-        <div class="name element-item">
-          <span class="mr30">名称:</span>
-          <a-input v-model:value="layerState.layerName" style="width:110px" placeholder="element name"
-            @change="changeLayer" />
-        </div>
-        <div class="longitude element-item" v-if="layerState.currentType === geoType.Point">
-          <span class="mr30">经度:</span>
-          {{ layerState.longitude || '--' }}
-        </div>
-        <div class="latitude element-item" v-if="layerState.currentType === geoType.Point">
-          <span class="mr30">纬度:</span>
-          {{ layerState.latitude || '--' }}
-        </div>
-        <div class="latitude element-item" v-if="layerState.element_from === 2">
-          <span class="mr30">高度:</span>
-          {{ layerState.height || '--' }}
-        </div>
-        <div class="color-content">
-          <span class="mr30">颜色: </span>
-          <div v-for="item in colors" :key="item.id" class="color-item" :style="'background:' + item.color"
-            @click="changeColor(item)">
-            <svg-icon v-if="item.color === layerState.color" :size="18" name="check"></svg-icon>
-          </div>
-        </div>
-        <div class="element-item">
-          <span class="mr30">用户:</span>
-          {{ layerState.user_name || '--' }}
-        </div>
-        <div class="element-item">
-          <span class="mr30">来源:</span>
-          <Icon v-if="layerState.element_from === 2">
-            <template #component>
-              <svg width="1em" height="1em" fill="currentColor" viewBox="0 0 1024 1024">
-                <path
-                  d="M1024 418.21v576H0v-576h1024z m-672 192c-53.02 0-96 42.98-96 96s42.98 96 96 96 96-42.98 96-96-42.98-96-96-96z m320 0c-53.02 0-96 42.98-96 96s42.98 96 96 96 96-42.98 96-96-42.98-96-96-96zM236.59 29.79h125.55v320H236.59v-320z m425.28 0h125.55v320H661.87v-320z"
-                  p-id="4408" />
-              </svg>
-            </template>
-          </Icon>
-          <DesktopOutlined v-else />
-        </div>
-      </div>
-      <div class="flex-row flex-justify-around flex-align-center mt20">
-        <a-button type="primary" @click="deleteElement">删除</a-button>
-      </div>
-    </a-drawer> -->
+    <PhotoDrawer :visible="state.photoDrawerVisible" :fileId="selectedKeys[0]" :closeDrawer="closeDrawer" />
   </div>
 </template>
 
 <script lang="ts" setup>
 import { onMounted, reactive, ref, watch } from 'vue'
-import {
-  deleteElementReq,
-  getElementGroupsReq,
-  updateElementsReq
-} from '/@/api/layer'
 import Icon from '@ant-design/icons-vue';
 import { DesktopOutlined } from '@ant-design/icons-vue';
 import LayersTree from '/@/components/LayersTree.vue'
+import PhotoDrawer from './components/PhotoDrawer.vue'
 import { MapElementEnum } from '/@/constants/map'
 import { useGMapCover } from '/@/hooks/use-g-map-cover'
-import { useMyStore } from '/@/store'
 import { GeojsonCoordinate, LayerResource } from '/@/types/map'
 import { Color, GeoType } from '/@/types/mapLayer'
+import {
+  deleteElementReq,
+  getElementGroupsReq,
+  updateElementsReq
+} from '/@/api/layer'
+import { useMyStore } from '/@/store'
 import { gcj02towgs84, wgs84togcj02 } from '/@/vendors/coordtransform'
 
 interface Props {
-  mapClickId: string,
+  mapClickElement: {
+    id: string,
+    type: string,
+  },
 };
 
 const props = withDefaults(defineProps<Props>(), {
 
 });
 
-watch(() => props.mapClickId, (newValue, oldValue) => {
-  if (newValue) {
-    // 默认文件夹列表
-    const defaultFileList: any = mapLayers.value.filter((item: any) => item.type === 2);
-    if (defaultFileList.length === 0) {
-      return;
+const state = reactive({
+  photoDrawerVisible: false,
+})
+
+watch(() => props.mapClickElement, (newValue, oldValue) => {
+  if (newValue.id) {
+    if (newValue.type === 'DEFAULT') {// 默认文件夹
+      // 默认文件夹列表
+      const defaultFileList: any = mapLayers.value.filter((item: any) => item.type === 2);
+      if (defaultFileList.length === 0) {
+        return;
+      }
+      const pid = defaultFileList[0].id;
+      expandedKeys.value = [pid];
+      selectedKeys.value = [`resource__${newValue.id}`];
+      selectedLayer.value = getCurrentLayer(`resource__${newValue.id}`)
+      setBaseInfo()
+      visible.value = true;
+      state.photoDrawerVisible = false
+    } else if (newValue.type === 'PHOTO') {
+      // 图片标注列表
+      const photoList: any = mapLayers.value.filter((item: any) => item.type === 3);
+      if (photoList.length === 0) {
+        return;
+      }
+      const pid = photoList[0].id;
+      expandedKeys.value = [pid];
+      selectedKeys.value = [`resource__${newValue.id}`];
+      selectedLayer.value = getCurrentLayer(`resource__${newValue.id}`)
+      state.photoDrawerVisible = true
+      visible.value = false;
     }
-    const pid = defaultFileList[0].id;
-    expandedKeys.value = [pid];
-    selectedKeys.value = [`resource__${newValue}`];
-    selectedLayer.value = getCurrentLayer(`resource__${newValue}`)
-    setBaseInfo()
-    visible.value = true
-    store.commit('SET_DRAW_VISIBLE_INFO', visible.value)
   }
-});
+}, { deep: true });
 
 const store = useMyStore()
 let useGMapCoverHook = useGMapCover()
@@ -158,7 +132,6 @@ const selectedKeys = ref<string[]>([])
 const selectedKey = ref<string>('')
 const selectedLayer = ref<any>(null)
 const visible = ref<boolean>(false)
-store.commit('SET_DRAW_VISIBLE_INFO', visible.value)
 const geoType = GeoType
 
 const layerState = reactive({
@@ -207,9 +180,18 @@ watch(() => store.state.Layers, newData => {
 function setMapCoverByElement(elements: LayerResource[]) {
   elements.forEach(element => {
     const name = element.name
-    const color = element.resource?.content.properties.color
-    const type = element.resource?.type as number
-    updateMapElement(element, name, color)
+    const content: any = element.resource?.content;
+    const color = content.properties.color;
+    const pictureInfo = content.picture;
+    if (pictureInfo) {
+      const list: any = element.resource?.content.geometry.coordinates;
+      const coordinates = list.slice(0, 2);
+      // 绘制图片标注文件夹
+      useGMapCoverHook.updatePhotoElement(pictureInfo.file_id, name, pictureInfo.thumbnail_url, coordinates);
+    } else {
+      // 绘制默认文件夹
+      updateMapElement(element, name, color);
+    }
   })
 }
 
@@ -238,20 +220,18 @@ function updateMapElement(
 
 function selectLayer(keys: string[], e) {
   visible.value = false
-  store.commit('SET_DRAW_VISIBLE_INFO', visible.value)
-  if (!e.selected) {
-    return;
-  }
-  selectedKey.value = e.node.eventKey
-  selectedLayer.value = getCurrentLayer(selectedKey.value)
-  setBaseInfo()
-  const info = e.selectedNodes[0];
-  const { type } = info.props.parent;
-  if (type === 2) {// 默认文件夹
-    visible.value = e.selected
-    store.commit('SET_DRAW_VISIBLE_INFO', visible.value)
-  } else if (type === 3) {// 图片标注
-    console.log('此处写图片标注弹出层逻辑');
+  state.photoDrawerVisible = false
+  if (e.selected) {
+    selectedKey.value = e.node.eventKey
+    selectedLayer.value = getCurrentLayer(selectedKey.value)
+    const info = e.selectedNodes[0];
+    const { type } = info.props.parent;
+    if (type === 2) {// 默认文件夹
+      setBaseInfo()
+      visible.value = true
+    } else if (type === 3) {// 图片标注
+      state.photoDrawerVisible = true
+    }
   }
 }
 
@@ -307,8 +287,12 @@ onMounted(() => {
 })
 
 function closeDrawer() {
-  store.commit('SET_MAP_CLICK_ID', '');
-  store.commit('SET_DRAW_VISIBLE_INFO', false)
+  store.commit('SET_MAP_CLICK_ELEMENT', {
+    id: '',
+    type: '',
+  });
+  visible.value = false
+  state.photoDrawerVisible = false
   selectedKeys.value = []
 }
 
@@ -329,7 +313,6 @@ async function deleteElement() {
       return
     }
     visible.value = false
-    store.commit('SET_DRAW_VISIBLE_INFO', visible.value)
     // 移除标点
     useGMapCoverHook.removeCoverFromMap(elementid)
     // 移除文本覆盖物
@@ -349,6 +332,7 @@ async function getElementGroups(type?: string) {
       elements: item.elements.map((o: any) => {
         return {
           ...o,
+          id: item.type === 3 ? o.resource.content.picture.file_id : o.id,// 图片标注类型时，id更改为fileId
           height: o.resource.content.geometry.coordinates[2]
         }
       })
@@ -387,7 +371,6 @@ function updateWgs84togcj02() {
 }
 
 function updateCoordinates(transformType: string, element: LayerResource) {
-  const geoType = element.resource?.content.geometry.type
   const type = element.resource?.type as number
   if (element.resource) {
     if (MapElementEnum.PIN === type) {

Web/src/pages/page-web/projects/media/detail/components/FileInfo.vue

@@ -121,10 +121,10 @@
         </a-tooltip>
         <div v-if="[1, 3].includes(state.info.media_type)">
           <a-tooltip placement="bottom" title="在地图上加载" v-if="!state.info.element_id">
-            <EyeOutlined style="font-size: 20px;margin-right: 20px;" @click="onClickCreateMapElement" />
+            <AimOutlined style="font-size: 20px;margin-right: 20px;" @click="onClickCreateMapElement" />
           </a-tooltip>
           <a-tooltip placement="bottom" title="在地图上取消加载" v-else>
-            <EyeInvisibleOutlined style="font-size: 20px;margin-right: 20px;" @click="onClickDeleteMapElement" />
+            <AimOutlined style="font-size: 20px;margin-right: 20px;" @click="onClickDeleteMapElement" />
           </a-tooltip>
         </div>
       </div>
@@ -140,7 +140,7 @@
 <script lang="ts" setup>
 import { reactive, onMounted } from 'vue';
 import { message } from 'ant-design-vue';
-import { CloseOutlined, EnvironmentOutlined, DownloadOutlined, EyeOutlined, EyeInvisibleOutlined } from '@ant-design/icons-vue';
+import { CloseOutlined, EnvironmentOutlined, DownloadOutlined, AimOutlined } from '@ant-design/icons-vue';
 import Panoramic from '/@/components/panoramic/index.vue';
 import { useGMapManage } from '/@/hooks/use-g-map';
 import { apis } from '/@/api/custom';

Web/src/pages/page-web/projects/media/detail/index.vue

@@ -74,10 +74,10 @@
               <div class="flex-align-center flex-row" style="color: #2d8cf0" v-else>
                 <div v-if="[1, 3].includes(record.media_type)">
                   <a-tooltip title="在地图上加载" v-if="!record.element_id">
-                    <EyeOutlined style="margin-right: 10px;" @click="onClickCreateMapElement(record.file_id)" />
+                    <AimOutlined style="margin-right: 10px;" @click="onClickCreateMapElement(record.file_id)" />
                   </a-tooltip>
                   <a-tooltip title="在地图上取消加载" v-else>
-                    <EyeInvisibleOutlined style="color: #e70102;margin-right: 10px;"
+                    <AimOutlined style="color: #e70102;margin-right: 10px;"
                       @click="onClickDeleteMapElement(record.file_id)" />
                   </a-tooltip>
                 </div>
@@ -126,7 +126,7 @@
 <script lang="ts" setup>
 import { reactive, onMounted } from 'vue';
 import { message } from 'ant-design-vue';
-import { MenuOutlined, AppstoreOutlined, EditOutlined, DeleteOutlined, DownloadOutlined, EyeOutlined, EyeInvisibleOutlined, CheckOutlined, CloseOutlined } from '@ant-design/icons-vue';
+import { MenuOutlined, AppstoreOutlined, EditOutlined, DeleteOutlined, DownloadOutlined, AimOutlined, CheckOutlined, CloseOutlined } from '@ant-design/icons-vue';
 import Search from './components/Search.vue';
 import FileInfo from './components/FileInfo.vue';
 import pictureSrc from '/@/assets/media/picture.svg';

Web/src/pages/page-web/projects/tsa.vue

@@ -96,7 +96,7 @@
                           style="width: 18px; height: 16px; text-align: center;">
                           <span :style="hmsInfo[dock.sn].length > 99 ? 'font-size: 11px' : 'font-size: 12px'">{{
                             hmsInfo[dock.sn].length
-                            }}</span>
+                          }}</span>
                           <span class="fz10">{{ hmsInfo[dock.sn].length > 99 ? '+' : '' }}</span>
                         </div>
                         <a-popover trigger="click" placement="bottom" color="black"
@@ -221,7 +221,7 @@
         </a-collapse-panel>
         <a-collapse-panel style="border-bottom: 1px solid #4f4f4f;" :forceRender="true" :key="EDeviceTypeName.Marker"
           header="地图标注管理">
-          <Layer :mapClickId="mapClickId" />
+          <Layer :mapClickElement="mapClickElement" />
         </a-collapse-panel>
       </a-collapse>
     </div>
@@ -264,7 +264,7 @@ const state = reactive({
   activeKey: -1,
 })
 
-const mapClickId = computed(() => store.state.mapClickId)
+const mapClickElement = computed(() => store.state.mapClickElement)
 const deviceInfo = computed(() => store.state.deviceState.deviceInfo)
 const dockInfo = computed(() => store.state.deviceState.dockInfo)
 const hmsInfo = computed({
@@ -274,11 +274,11 @@ const hmsInfo = computed({
   }
 })
 
-watch(() => mapClickId.value, (newValue, oldValue) => {
+watch(() => mapClickElement.value, (newValue, oldValue) => {
   if (newValue) {
     state.activeKey = EDeviceTypeName.Marker
   }
-});
+}, { deep: true });
 
 onMounted(() => {
   getOnlineTopo()

Web/src/store/index.ts

@@ -9,7 +9,10 @@ import { DevicesCmdExecuteInfo } from '/@/types/device-cmd'
 
 const initStateFunc = () => ({
   trajectoryList: [],// 轨迹列表
-  mapClickId: '',
+  mapClickElement: {
+    id: '',
+    type: '',
+  },
   Layers: [
     // {
     //   name: '默认',
@@ -33,7 +36,6 @@ const initStateFunc = () => ({
   layerBaseInfo: {} as {
     [key: string]: string
   },
-  drawVisible: false,
   livestreamOthersVisible: false,
   livestreamAgoraVisible: false,
   coverMap: {} as {
@@ -104,8 +106,8 @@ const mutations: MutationTree<RootStateType> = {
   SET_TRAJECTORY_LIST(state, list) {
     state.trajectoryList = list
   },
-  SET_MAP_CLICK_ID(state, id) {
-    state.mapClickId = id
+  SET_MAP_CLICK_ELEMENT(state, info) {
+    state.mapClickElement = info
   },
   SET_LAYER_INFO(state, info) {
     state.Layers = info
@@ -142,9 +144,6 @@ const mutations: MutationTree<RootStateType> = {
       dock.work_osd = info.host
     }
   },
-  SET_DRAW_VISIBLE_INFO(state, bool) {
-    state.drawVisible = bool
-  },
   SET_LIVESTREAM_OTHERS_VISIBLE(state, bool) {
     state.livestreamOthersVisible = bool
   },