全局搜索、视频收藏

src/components/HKVideo/index2.vue

@@ -22,7 +22,7 @@
       <div class="video-header">
         <div class="label" :title="dot_data.name">{{ dot_data.name }}</div>
         <div class="video-header-right">
-          <i v-if="hiddenCollect" :class="dot_data.isTag ? 'collectFill' : 'collect'" @click.stop="handleCollect" />
+          <i v-if="!hiddenCollect" :class="dot_data.tag && dot_data.tag.length > 0 ? 'collectFill' : 'collect'" @click.stop="handleCollect" />
           <img class="video-enlarge" src="@/assets/images/video/enlarge.png" alt="" @click.stop="handleFullScreen" />
         </div>
       </div>
@@ -45,7 +45,7 @@
       </div>
     </div>
     <!--收藏弹窗-->
-    <VideoTagEdit v-if="showCollectDialog" :id="dot_data.id" v-model="showCollectDialog" :tags="tags" @update-video-tag="getData2" />
+    <VideoTagEdit v-if="showCollectDialog" :id="dot_data.video_code" v-model="showCollectDialog" :tags="tags" @update-video-tag="getData2" />
     <!--点击全屏弹窗-->
     <video-dialog
       v-if="showFullScreenDialog"
@@ -75,7 +75,6 @@ interface DotData {
   status?: string;
   poster?: string;
   collect?: boolean;
-  isTag?: boolean;
   tagLabels?: string;
 }
 interface Props {
@@ -183,6 +182,7 @@ const handleScreenshot = (name) => {
 let showCollectDialog = ref(false);
 // 展示收藏弹窗
 const handleCollect = () => {
+  tags.value = props.dot_data.tag;
   showCollectDialog.value = true;
 };
 // 更新标签
@@ -193,6 +193,7 @@ const getData2 = () => {
   getVideoTagInfo({ video_code: props.dot_data.id }).then((res) => {
     emits('change', res.data);
   });
+  showCollectDialog.value = false;
 };
 const getPlayer = (name) => {
   return videoPlayer.value.getPlayer(name);

src/components/Map/YztMap/index.vue

@@ -329,6 +329,9 @@ const getMapUtils = () => {
 const getDrawTool = () => {
   return mapUtils.getDrawTool();
 };
+const addSearchMarker = (item) => {
+  return mapUtils.addSearchMarker(item);
+};
 // 加载事件
 onMounted(() => {
   init();
@@ -340,7 +343,7 @@ onUnmounted(() => {
 });
 provide('getMapUtils', getMapUtils);
 provide('getMap', getMap);
-defineExpose({ getMap, getDrawTool, getMapUtils, addMarker, clearMarker });
+defineExpose({ getMap, getDrawTool, getMapUtils, addSearchMarker, addMarker, clearMarker });
 </script>
 
 <style scoped>

src/components/Map/index.vue

@@ -26,7 +26,7 @@ const emits = defineEmits(['handleShowVideo', 'handleShowWarehouse', 'handleShow
 const containerRef = ref();
 const width = ref('100%');
 const height = ref('100%');
-let AMap, map, placeSearch;
+let AMap, map;
 
 // 鼠标绘制工具
 const drawTool = useDrawTool();
@@ -58,12 +58,6 @@ const mapUtils = useAMap({
       creatMask2(mmJson, { strokeWeight: 2 });
     }
     drawTool.initMouseTool({ container: 'aMap', map, AMap });
-    placeSearch = new AMap.PlaceSearch({
-      pageSize: 30,
-      pageIndex: 1,
-      city: '0668',
-      extensions: 'base'
-    });
     handleResize();
   },
   onMarkerClick: (data) => {
@@ -288,9 +282,6 @@ const setCenter = (item) => {
 const getMapUtils = () => {
   return mapUtils;
 };
-const getPlaceSearch = () => {
-  return placeSearch;
-};
 const handleResize = () => {
   const containerWidth = !!containerScale ? containerRef.value.clientWidth * containerScale().scaleX : 1;
   const containerHeight = !!containerScale ? containerRef.value.clientHeight * containerScale().scaleY : 1;
@@ -342,7 +333,6 @@ defineExpose({
   handleHover,
   trackPlayback,
   getMapUtils,
-  getPlaceSearch,
   getMapDomSize
 });
 </script>

src/components/VideoTagEdit/index.vue

@@ -70,7 +70,7 @@ const handleAdd = () => {
     tagsId.push(item.value);
   });
   setVideoTag({ video_code: props.id, dict_value_list: tagsId }).then(() => {
-    proxy.$modal.msgSuccess('新增成功');
+    proxy.$modal.msgSuccess('修改成功');
     emits('updateVideoTag');
   });
 };

src/utils/olMap/olMap.ts

@@ -102,8 +102,9 @@ export class olMap {
   private anyLine;
   private scale;
   // 标绘图层
-  private plotLayers = [];
+  private plotLayers = {};
   private addressMarker;
+  private addPoints = [];
 
   constructor(options) {
     this.options = options;
@@ -150,8 +151,8 @@ export class olMap {
       condition: click,
       style: null,
       filter: (feature, layer) => {
-        // 只有vectorLayer图层可选择
-        return layer === this.vectorLayer;
+        // 检查当前图层是否在 plotLayers 中
+        return Object.values(this.plotLayers).includes(layer);
       }
     });
     this.map.addInteraction(this.select);
@@ -665,6 +666,32 @@ export class olMap {
     }
     return style;
   }
+  // 添加搜索的标记的
+  addSearchMarker(item) {
+    const view = this.map.getView();
+    view.setZoom(18);
+    view.setCenter([Number(item.longitude), Number(item.latitude)]);
+    // 获取到上一次的搜索标记并移除
+    const index = this.markers.findIndex((m) => {
+      return m.dataType === 'search';
+    });
+    if (index > -1) {
+      this.markers.splice(index, 1);
+    }
+    if (!this.plotLayers['search']) {
+      this.plotLayers['search'] = new VectorLayer({
+        source: new VectorSource({
+          features: []
+        })
+      });
+      this.map.addLayer(this.plotLayers['search']);
+    } else {
+      this.plotLayers['search'].getSource().clear();
+    }
+    this.addMarker2({'search': item});
+    this.clickMarker = item;
+    this.options.onMarkerClick(item);
+  }
   addMarker(points) {
     this.clearMarker();
     const vectorSource = new VectorSource({
@@ -706,13 +733,16 @@ export class olMap {
     this.vectorLayer.setSource(clusterSource);
   }
   addMarker2(obj) {
-    this.clearMarker2('point2');
+    this.clearMarker2('point');
+    if (!!this.plotLayers['point']) {
+      this.markers = [];
+    }
     let hideInfoFlag = true;
     Object.keys(obj).forEach((key: string) => {
       const data = obj[key];
+      const name = key === 'search' ? 'search' : 'point';
       if (this.clickMarker) {
         const extData = this.clickMarker.get('extData');
-        console.log(extData.id, data.id);
         if (data.id === extData.id) {
           hideInfoFlag = false;
           data.isHover = true;
@@ -749,11 +779,11 @@ export class olMap {
             })
           })
         );
-        this.vectorLayer.getSource().addFeature(feature);
+        this.plotLayers[name].getSource().addFeature(feature);
         this.markers.push(data);
       } else {
         // 单个点
-        const iconConfig = iconList[data.dataType] || iconList.common;
+        const iconConfig = iconList[data.dataType] || (name === 'search' ? iconList.common2 : iconList.common);
         data.image = iconConfig.image;
         data.imageHover = iconConfig.imageHover;
         data.size = iconConfig.size;
@@ -792,7 +822,7 @@ export class olMap {
               })
             })
           );
-          this.vectorLayer.getSource().addFeature(feature);
+          this.plotLayers[name].getSource().addFeature(feature);
         };
         img.src = data.image; // 设置图片的 URL，触发加载
         this.markers.push(data);
@@ -821,7 +851,7 @@ export class olMap {
       });
       this.map.addLayer(this.plotLayers[name]);
     } else {
-      this.vectorLayer.getSource().clear();
+      this.plotLayers[name].getSource().clear();
       this.clickMarker = null;
       this.hideInfo();
     }

src/views/emergencyCommandMap/LeftSection/Communication.vue

@@ -135,7 +135,7 @@
       </div>
     </Dialog>
   </div>
-  <CommunicationDialog v-model="communicationDialogState.showListDialog" :flag="flag" />
+  <CommunicationDialog v-if="communicationDialogState.showListDialog" v-model="communicationDialogState.showListDialog" :flag="flag" />
 </template>
 
 <script lang="ts" setup>

src/views/globalMap/LeftMenu.vue

@@ -128,8 +128,8 @@ import gcoord from 'gcoord';
 import useMapStore from '@/store/modules/map';
 
 const emits = defineEmits(['switchMap', 'clickMenu', 'selectSearchMarker', 'clearAllMenu']);
-const getPlaceSearch = inject('getPlaceSearch');
 const getMapUtils = inject('getMapUtils');
+const amapKey = 'e45d4caa2bef3c84714a2ed9b1e27d98';
 let mapUtils;
 const mapStore = useMapStore();
 // 左侧菜单
@@ -159,7 +159,7 @@ watch(
     immediate: true
   }
 );
-const changeSearchText = () => {
+const changeSearchText = async () => {
   if (!searchState.searchText) {
     searchState.showList = false;
     return;
@@ -172,22 +172,22 @@ const changeSearchText = () => {
       searchState.layerList = res.data.point_data;
       searchState.videoList = res.data.video_data;
     });
-    getPlaceSearch().search(searchState.searchText, (status, result) => {
-      if (!!result.poiList && result.poiList.pois && result.poiList.pois.length > 0) {
-        let arr = [];
-        const pois = result.poiList.pois;
-        arr = pois.map((item) => {
-          return {
-            dataType: 'search',
-            name: item.name,
-            address: item.address,
-            longitude: item.location.lng,
-            latitude: item.location.lat
-          };
-        });
-        searchState.resultList = arr;
-      }
+    const url = `https://restapi.amap.com/v5/place/text?key=${amapKey}&keywords=${searchState.searchText}`;
+    const response = await fetch(url);
+    const data = await response.json();
+    let arr = [];
+    arr = data.pois.map((item) => {
+      const location = item.location.split(',');
+      return {
+        dataType: 'search',
+        name: item.name,
+        address: item.address,
+        longitude: location[0],
+        latitude: location[1],
+        lnglat: location
+      };
     });
+    searchState.resultList = arr;
   }
 };
 
@@ -199,6 +199,7 @@ const selectSearchMarker = (item, type) => {
     data.longitude = lnglat[0];
     data.latitude = lnglat[1];
   }
+  data.type = '2';
   searchState.showList = false;
   emits('selectSearchMarker', data);
 };

src/views/globalMap/data/mapData.ts

@@ -228,9 +228,9 @@ export const iconList = {
     size: [40, 44]
   },
   '48': {
-    image: getImageUrl('48_samll2_hover_reservoir.png'),
-    imageHover: getImageUrl('48_samll2_hover_reservoir_hover.png'),
-    size: [42, 44]
+    image: getImageUrl('48_samll2_reservoir.png'),
+    imageHover: getImageUrl('48_samll2_reservoir_hover.png'),
+    size: [40, 44]
   },
   '49': {
     image: getImageUrl('49_roof_pond.png'),

src/views/globalMap/index.vue

@@ -345,10 +345,6 @@ const showDetail = (data, dataType) => {
 const getDrawTool = () => {
   return mapStore.isAMap ? mapRef.value.drawTool : mapUtils;
 };
-const getPlaceSearch = () => {
-  const domRef = mapStore.isAMap ? mapRef.value : map2Ref.value;
-  return !!domRef ? domRef.getPlaceSearch() : {};
-};
 const trackPlayback = (data) => {
   const domRef = mapStore.isAMap ? mapRef.value : mapUtils;
   if (!!domRef) {
@@ -582,7 +578,6 @@ provide('getMap', getMap);
 provide('trackPlayback', trackPlayback);
 provide('showDetail', showDetail);
 provide('getDrawTool', getDrawTool);
-provide('getPlaceSearch', getPlaceSearch);
 provide('initDataToPlay', initDataToPlay);
 provide('handleShowVideo2', handleShowVideo2);
 </script>