视频监控

src/components/Map/index.vue

@@ -345,6 +345,11 @@ watch(
     });
   }
 );
+const getMapDomSize = () => {
+  const containerWidth = containerRef.value.clientWidth * containerScale().scaleX;
+  const containerHeight = containerRef.value.clientHeight * containerScale().scaleY;
+  return [containerWidth, containerHeight];
+};
 onMounted(() => {
   window.addEventListener('resize', handleResize);
 });
@@ -366,7 +371,8 @@ defineExpose({
   drawTool,
   handleHover,
   trackPlayback,
-  getPlaceSearch
+  getPlaceSearch,
+  getMapDomSize
 });
 </script>
 

src/components/Map/rightTool.vue

@@ -6,7 +6,7 @@
     <QuickZoom @change-step="setMapZoom" />
     <div class="flex" style="margin-top: 5px">
       <div class="mask-btn" @click="handleShowMask">{{ mapStore.showMask ? '显' : '隐' }}</div>
-      <div v-if="mapStore.AMapType.includes(mapStore.activeMap)" class="model-btn" @click="switchThreeDimensional">
+      <div v-if="mapStore.isAMap" class="model-btn" @click="switchThreeDimensional">
         {{ mapStore.mapState.isThreeDimensional ? '3D' : '2D' }}
       </div>
       <div class="ruler-icon" style="margin-left: 5px" @click="changeScaleControl"></div>
@@ -36,7 +36,7 @@ watch(
 );
 // 设置地图层级
 const setMapZoom = (value) => {
-  const map2 = mapStore.AMapType.includes(mapStore.activeMap) ? map : map.getView();
+  const map2 = mapStore.isAMap ? map : map.getView();
   if (!map2) return;
   if (value === 1) {
     map2.setCenter([110.925175, 21.678955]);
@@ -55,7 +55,7 @@ const setMapZoom = (value) => {
 
 // 切换2D、3D
 const switchThreeDimensional = () => {
-  const map2 = mapStore.AMapType.includes(mapStore.activeMap) ? map : map.getView();
+  const map2 = mapStore.isAMap ? map : map.getView();
   mapStore.mapState.isThreeDimensional = !mapStore.mapState.isThreeDimensional;
   const pitch = mapStore.mapState.isThreeDimensional ? 45 : 0;
   map2.setPitch(pitch);

src/components/TimeAxis/index.vue

@@ -146,7 +146,7 @@ const initDataToPlay = (obj) => {
   });
   // 路线轨迹
   if (timeAxisState.type === 'track') {
-    if (mapStore.AMapType.includes(mapStore.activeMap)) {
+    if (mapStore.isAMap) {
       AMap = mapUtils.getAMap();
       trackPlayback1();
     } else {
@@ -406,7 +406,7 @@ const createMarker = () => {
 
 // 轨迹 开始/暂停
 const playOrPauseTrack = () => {
-  if (mapStore.AMapType.includes(mapStore.activeMap)) {
+  if (mapStore.isAMap) {
     if (timeAxisState.playing) {
       if (timeAxisState.activeIndex >= timeAxisState.data.length - 1) {
         // 重新播放
@@ -448,7 +448,7 @@ const prevPauseTime = () => {
   // 更新索引
   timeAxisState.playing = false;
   timeAxisState.activeIndex -= 1;
-  if (mapStore.AMapType.includes(mapStore.activeMap)) {
+  if (mapStore.isAMap) {
     moveMarker.stopMove();
     createMarker();
     movePassedPolyline.setPath(trackPathArr.slice(0, timeAxisState.activeIndex + 1));
@@ -469,7 +469,7 @@ const nextPauseTime = () => {
   // 更新索引
   timeAxisState.playing = false;
   timeAxisState.activeIndex += 1;
-  if (mapStore.AMapType.includes(mapStore.activeMap)) {
+  if (mapStore.isAMap) {
     createMarker();
     movePassedPolyline.setPath(trackPathArr.slice(0, timeAxisState.activeIndex + 1));
     isNewMarkerPause = true;
@@ -515,7 +515,7 @@ watch(
 );
 // 清除元素
 const clearObj = () => {
-  if (mapStore.AMapType.includes(mapStore.activeMap)) {
+  if (mapStore.isAMap) {
     if (moveMarker) {
       // 不停止remove还是有
       moveMarker.stopMove();

src/hooks/AMap/useAMap.ts

@@ -3,9 +3,10 @@ import { nanoid } from 'nanoid';
 import { deepClone, initDrag } from '@/utils';
 import { mergeGeoJsonPolygons, wgs_gcj_encrypts } from '@/utils/gisUtils';
 import carImg from '@/assets/images/car.png';
+import { getImageUrl } from '@/views/globalMap/data/mapData';
 
 export function useAMap(options) {
-  let AMap, map, nowLayer, labelsLayer, scale, cluster;
+  let AMap, map, scale, cluster;
   const markers = {
     point: []
   };
@@ -13,6 +14,10 @@ export function useAMap(options) {
   let addPoints = [];
   let layers = [];
   let defaultLayer;
+  // 标绘图层
+  let plotLayers = {};
+  // 标绘层级
+  let activeLayerkey;
   // 初始化事件
   const initMap = (options) => {
     window._AMapSecurityConfig = {
@@ -23,7 +28,19 @@ export function useAMap(options) {
       version: !!options.version ? options.version : '2.0', // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15
       plugins: options.plugins
         ? options.plugins
-        : ['AMap.Scale', 'AMap.RangingTool', 'AMap.MouseTool', 'AMap.PolygonEditor', 'AMap.MarkerCluster', 'AMap.DistrictSearch', 'AMap.MoveAnimation', 'AMap.Driving', 'AMap.Geocoder', 'AMap.PlaceSearch', 'AMap.GeoJSON']
+        : [
+            'AMap.Scale',
+            'AMap.RangingTool',
+            'AMap.MouseTool',
+            'AMap.PolygonEditor',
+            'AMap.MarkerCluster',
+            'AMap.DistrictSearch',
+            'AMap.MoveAnimation',
+            'AMap.Driving',
+            'AMap.Geocoder',
+            'AMap.PlaceSearch',
+            'AMap.GeoJSON'
+          ]
     }).then((res) => {
       AMap = res;
       defaultLayer = AMap.createDefaultLayer();
@@ -211,13 +228,84 @@ export function useAMap(options) {
       markers['point'].push(item);
     });
   };
-
+  // 添加多个点2 后台做点聚合
+  const addMarker2 = (obj) => {
+    if (plotLayers['points2']) {
+      plotLayers['points2'] = new AMap.TileLayer({
+        zIndex: 10, // 设置图层层级
+        visible: true
+      });
+      map.add(plotLayers['points2']);
+    }
+    Object.keys(obj).forEach((key: string) => {
+      if (obj[key].videos && obj[key].videos.length > 1) {
+        // 聚合点
+      } else {
+        // 单个点
+        const data = obj[key].videos[0];
+        data.image = getImageUrl('31_lakes_video.png');
+        data.imageHover = getImageUrl('31_lakes_video_hover.png');
+        data.icon = data.image;
+        data.size = [40, 40];
+        data.id = data.cameraIndexCode;
+        const content =
+          '<div style="display: flex;flex-direction: column;align-items: center;justify-content: center">' +
+          '<div style="background: url(' +
+          data.icon +
+          ') no-repeat; width: ' +
+          data.size[0] +
+          'px;height: ' +
+          data.size[1] +
+          'px;cursor: pointer; background-size: cover"></div>' +
+          // '<div style="font-size: 36px;white-space: nowrap">'+ context.data[0].name +'</div>' +
+          '</div>';
+        const marker = new AMap.Marker({
+          position: [data.longitude, data.latitude],
+          content: content,
+          anchor: 'bottom-center',
+          offset: new AMap.Pixel(0, 0),
+          map: map,
+          layer: plotLayers['points2']
+        });
+        marker.setExtData(data);
+        marker.on('click', function (e) {
+          const extData = e.target.getExtData();
+          let index = 0;
+          let index2 = 0;
+          for (let i = 0; i < addPoints.length; i++) {
+            if (addPoints[i].id === extData.id && addPoints[i].imageHover) {
+              addPoints[i].icon = addPoints[i].imageHover;
+              marker.setContent(content);
+              index++;
+            } else if (!!clickMarker) {
+              const extData2 = clickMarker.getExtData();
+              if (addPoints[i].id === extData2.id) {
+                addPoints[i].icon = addPoints[i].image;
+                clickMarker.setContent(content);
+                index2++;
+              }
+            }
+            if ((!!clickMarker && index === 1 && index2 === 1) || (!clickMarker && index === 1)) {
+              break;
+            }
+          }
+          // addMarker(addPoints);
+          clickMarker = e.target;
+          options.onMarkerClick(extData);
+        });
+        addPoints.push(data);
+      }
+    });
+  };
   // 清除所有标加
   const clearMarker = (id) => {
     if (!cluster || !markers[id]) return;
     cluster.setMap(null);
     markers[id] = [];
   };
+  const clearMarker2 = (id) => {
+
+  };
 
   const handleHover = (extData, dataType) => {
     map.setZoom(18);
@@ -655,6 +743,7 @@ export function useAMap(options) {
     getMap,
     switchMap,
     addMarker,
+    addMarker2,
     addSearchMarker,
     clearMarker,
     getScale,

src/store/modules/map.ts

@@ -20,6 +20,8 @@ export const useMapStore = defineStore('map', () => {
   const AMapType: string[] = ['vectorgraph', 'satellite'];
   // 粤政图地图类型
   const YMapType: string[] = ['satellite2', 'satellite3', 'imageMap', 'imageMap2'];
+  // 是否是高德地图
+  const isAMap = computed(() => AMapType.includes(activeMap.value));
   // 选中的菜单
   const pointType = ref<PointType[]>([]);
   // 轨迹
@@ -29,6 +31,13 @@ export const useMapStore = defineStore('map', () => {
   });
   // 是否在选点
   const isMapSelect = ref(false);
+  // 视频打点参数
+  const videoPointParams = ref({
+    // 触发请求
+    flag: false,
+    // 选择条件
+    dict_value: ''
+  });
   // 设置地图加载完成状态
   const setMapLoaded = (loaded: boolean) => {
     mapLoaded.value = loaded;
@@ -61,24 +70,35 @@ export const useMapStore = defineStore('map', () => {
     trackState.show = false;
     trackState.data = [];
     isMapSelect.value = false;
+    videoPointParams.value = {
+      flag: false,
+      dict_value: ''
+    };
+  };
+  // 设置视频打点标识
+  const setVideoPointParams = (data: any) => {
+    videoPointParams.value = data;
   };
   return {
     mapState,
     mapLoaded,
     activeMap,
+    isAMap,
     showMask,
     AMapType,
     YMapType,
     pointType,
     trackState,
     isMapSelect,
+    videoPointParams,
     setMapLoaded,
     setZoom,
     setActiveMap,
     setShowMask,
     setTrackState,
     setIsMapSelect,
-    initData
+    initData,
+    setVideoPointParams
   };
 });
 

src/types/components.d.ts

@@ -1,73 +0,0 @@
-/* eslint-disable */
-/* prettier-ignore */
-// @ts-nocheck
-// Generated by unplugin-vue-components
-// Read more: https://github.com/vuejs/core/pull/3399
-export {}
-
-declare module 'vue' {
-  export interface GlobalComponents {
-    Chart: typeof import('./../components/Chart/index.vue')['default']
-    CompanyMap: typeof import('./../components/Map/company-map.vue')['default']
-    Contact: typeof import('./../components/Contact/index.vue')['default']
-    Dialog: typeof import('./../components/Dialog/index.vue')['default']
-    DictTag: typeof import('./../components/DictTag/index.vue')['default']
-    ElButton: typeof import('element-plus/es')['ElButton']
-    ElCheckbox: typeof import('element-plus/es')['ElCheckbox']
-    ElCheckboxGroup: typeof import('element-plus/es')['ElCheckboxGroup']
-    ElCol: typeof import('element-plus/es')['ElCol']
-    ElColorPicker: typeof import('element-plus/es')['ElColorPicker']
-    ElConfigProvider: typeof import('element-plus/es')['ElConfigProvider']
-    ElDatePicker: typeof import('element-plus/es')['ElDatePicker']
-    ElDialog: typeof import('element-plus/es')['ElDialog']
-    ElForm: typeof import('element-plus/es')['ElForm']
-    ElFormItem: typeof import('element-plus/es')['ElFormItem']
-    ElIcon: typeof import('element-plus/es')['ElIcon']
-    ElImage: typeof import('element-plus/es')['ElImage']
-    ElInput: typeof import('element-plus/es')['ElInput']
-    ElOption: typeof import('element-plus/es')['ElOption']
-    ElPagination: typeof import('element-plus/es')['ElPagination']
-    ElRow: typeof import('element-plus/es')['ElRow']
-    ElScrollbar: typeof import('element-plus/es')['ElScrollbar']
-    ElSelect: typeof import('element-plus/es')['ElSelect']
-    ElSlider: typeof import('element-plus/es')['ElSlider']
-    ElText: typeof import('element-plus/es')['ElText']
-    ElTimeline: typeof import('element-plus/es')['ElTimeline']
-    ElTimelineItem: typeof import('element-plus/es')['ElTimelineItem']
-    ElTree: typeof import('element-plus/es')['ElTree']
-    ElUpload: typeof import('element-plus/es')['ElUpload']
-    FileUpload: typeof import('./../components/FileUpload/index.vue')['default']
-    FlvVideo: typeof import('./../components/FlvVideo/index.vue')['default']
-    FooterSection: typeof import('./../components/FooterSection/index.vue')['default']
-    HeaderSection: typeof import('./../components/HeaderSection/index.vue')['default']
-    HikvisionH5player: typeof import('./../components/HKVideo/hikvision-h5player.vue')['default']
-    HikvisionPlayer: typeof import('./../components/HKVideo/hikvision-player.vue')['default']
-    HKVideo: typeof import('./../components/HKVideo/index.vue')['default']
-    IFrame: typeof import('./../components/iFrame/index.vue')['default']
-    Index2: typeof import('./../components/Dialog/index2.vue')['default']
-    InfoDialog: typeof import('./../components/InfoDialog/index.vue')['default']
-    LineWidthSelect: typeof import('./../components/LineWidthSelect/index.vue')['default']
-    Map: typeof import('./../components/Map/index.vue')['default']
-    ModalVideo: typeof import('./../components/HKVideo/modal-video.vue')['default']
-    NearbyVideos: typeof import('./../components/NearbyVideos/index.vue')['default']
-    Pagination: typeof import('./../components/Pagination/index.vue')['default']
-    ParentView: typeof import('./../components/ParentView/index.vue')['default']
-    PdfView: typeof import('./../components/PdfView/index.vue')['default']
-    QuickZoom: typeof import('./../components/Map/quickZoom.vue')['default']
-    RightTool: typeof import('./../components/Map/rightTool.vue')['default']
-    RouterLink: typeof import('vue-router')['RouterLink']
-    RouterView: typeof import('vue-router')['RouterView']
-    Step: typeof import('./../components/Step/index.vue')['default']
-    SvgIcon: typeof import('./../components/SvgIcon/index.vue')['default']
-    Switch: typeof import('./../components/Switch/index.vue')['default']
-    TimeAxis: typeof import('./../components/TimeAxis/index.vue')['default']
-    VideoContainer: typeof import('./../components/HKVideo/video-container.vue')['default']
-    VideoContainer2: typeof import('./../components/HKVideo/video-container2.vue')['default']
-    VideoDialog: typeof import('./../components/HKVideo/video-dialog.vue')['default']
-    VideoTagEdit: typeof import('./../components/VideoTagEdit/index.vue')['default']
-    YztMap: typeof import('./../components/Map/YztMap/index.vue')['default']
-  }
-  export interface ComponentCustomProperties {
-    vLoading: typeof import('element-plus/es')['ElLoadingDirective']
-  }
-}

src/types/video.d.ts

@@ -1,5 +1,5 @@
 interface LocationVideosParams {
-  zoom_level: string;
+  zoom_level: number;
   longitude_max: string;
   longitude_min: string;
   latitude_max: string;

src/views/emergencyCommandMap/LeftSection/Communication.vue

@@ -6,7 +6,7 @@
       </div>
       <!-- 新增的图标按钮 -->
       <div class="more-icon" @click="showCommunicationDialogList">
-        <img src="/yjdp/src/assets/images/video/enlarge.png" />
+        <img src="@/assets/images/video/enlarge.png" />
       </div>
     </div>
     <!--视频会商-->

src/views/emergencyCommandMap/LeftSection/VideoMonitorEdit.vue

@@ -220,7 +220,7 @@ const reset = () => {
 const handleQuery = () => {
   queryParams.current = 1;
   getList();
-  getVideoInfoList();
+  // getVideoInfoList();
 };
 
 /** 重置按钮操作 */
@@ -299,7 +299,7 @@ const getCheckStatus = (id) => {
 onMounted(() => {
   getList();
   getAreaTreeList('areaList', 2);
-  getVideoInfoList();
+  // getVideoInfoList();
 });
 </script>
 

src/views/globalMap/RightMenu/DrawTools.vue

@@ -104,7 +104,7 @@ watch(
       drawOptions.drawType = mouseToolState.drawType;
       drawOptions.graphicsType = mouseToolState.graphicsType;
       drawTool.drawGraphics2(drawOptions);
-      if (mapStore.AMapType.includes(mapStore.activeMap)) {
+      if (mapStore.isAMap) {
         drawTool.getMouseTool().on('draw', onDraw);
       } else {
         drawTool.getMouseTool().on('drawend', onDraw2);
@@ -113,7 +113,7 @@ watch(
     } else {
       mouseToolState.drawing = false;
       drawTool.closeDraw();
-      if (!mapStore.AMapType.includes(mapStore.activeMap)) {
+      if (!mapStore.isAMap) {
         map.on('click', onMapClick);
       }
     }
@@ -342,7 +342,7 @@ const handleRightClick2 = (event) => {
 // 删除图形
 const deleteGraphics = () => {
   let id;
-  if (mapStore.AMapType.includes(mapStore.activeMap)) {
+  if (mapStore.isAMap) {
     id = rightClickObj.getExtData()?.id;
   } else {
     unMapClick();
@@ -351,7 +351,7 @@ const deleteGraphics = () => {
   if (!!id) {
     for (let i = 0; i < overlays.length; i++) {
       const overlay = Array.isArray(overlays[i]) ? overlays[i][0] : overlays[i];
-      const itemId = mapStore.AMapType.includes(mapStore.activeMap) ? overlay?.getExtData().id : overlay.get('id');
+      const itemId = mapStore.isAMap ? overlay?.getExtData().id : overlay.get('id');
       if (itemId === id) {
         removeOverlayByIndex(i);
         commit(deepClone(overlaysData));
@@ -399,7 +399,7 @@ const handleUndo = () => {
           newData.radius = restoreData.radius;
         }
         let obj;
-        if (mapStore.AMapType.includes(mapStore.activeMap)) {
+        if (mapStore.isAMap) {
           obj = getDrawTool().createGraphics(newData);
         } else {
           obj = getDrawTool().createGraphics(newData);
@@ -416,7 +416,7 @@ const handleUndo = () => {
 };
 // 根据索引移除覆盖物
 const removeOverlayByIndex = (index: number) => {
-  if (mapStore.AMapType.includes(mapStore.activeMap)) {
+  if (mapStore.isAMap) {
     if (Array.isArray(overlays[index])) {
       overlays[index].forEach((overlay) => {
         // 移除地图上覆盖物
@@ -493,21 +493,21 @@ const unMapClick = (event) => {
   }
 };
 onMounted(() => {
-  if (!mapStore.AMapType.includes(mapStore.activeMap)) {
+  if (!mapStore.isAMap) {
     map.on('click', onMapClick);
   }
 });
 onBeforeUnmount(() => {
   if (overlays && overlays.length > 0) {
     overlays.forEach((overlay) => {
-      if (mapStore.AMapType.includes(mapStore.activeMap)) {
+      if (mapStore.isAMap) {
         overlay.setMap(null);
       } else {
         mapUtils.getDrawVector().getSource().removeFeature(overlay);
       }
     });
   }
-  if (!mapStore.AMapType.includes(mapStore.activeMap)) {
+  if (!mapStore.isAMap) {
     map.un('click', onMapClick);
   }
 });

src/views/globalMap/RightMenu/FixedPointAnalysis.vue

@@ -168,7 +168,7 @@ const toSelect = () => {
   clearLine();
 };
 const handleClickMap = (e) => {
-  if (mapStore.AMapType.includes(mapStore.activeMap)) {
+  if (mapStore.isAMap) {
     map.off('click', handleClickMap);
   } else {
     map.un('click', handleClickMap);
@@ -203,7 +203,7 @@ const selectEvent = (item, unFitView) => {
 };
 const createMarks = (item, unFitView) => {
   clearMarker();
-  if (mapStore.AMapType.includes(mapStore.activeMap)) {
+  if (mapStore.isAMap) {
     // 以 icon URL 的形式创建一个途经点
     const icon = new AMap.Icon({
       size: new AMap.Size(19, 31),
@@ -269,7 +269,7 @@ const drawRoute = (route, index) => {
   selectIndex.value = index;
   const path = parseRouteToPath(route);
   clearLine();
-  if (mapStore.AMapType.includes(mapStore.activeMap)) {
+  if (mapStore.isAMap) {
     const icon1 = new AMap.Icon({
       size: new AMap.Size(19, 31),
       image: startImg
@@ -422,7 +422,7 @@ const getAddress = async (location) => {
 };
 const clearMarker = () => {
   if (!selectMarker) return;
-  if (mapStore.AMapType.includes(mapStore.activeMap)) {
+  if (mapStore.isAMap) {
     selectMarker.remove();
     selectMarker = null;
   } else {
@@ -433,7 +433,7 @@ const clearMarker = () => {
   }
 };
 const clearLine = () => {
-  if (mapStore.AMapType.includes(mapStore.activeMap)) {
+  if (mapStore.isAMap) {
     if (!!startMarker) {
       startMarker.remove();
       startMarker = null;
@@ -464,7 +464,7 @@ const clearLine = () => {
   }
 };
 onMounted(() => {
-  if (mapStore.AMapType.includes(mapStore.activeMap)) {
+  if (mapStore.isAMap) {
     AMap = mapUtils.getAMap();
   }
   getAddress(props.location);

src/views/globalMap/RightMenu/ForestDefenseVideo/DetailDialog.vue

@@ -159,7 +159,7 @@ const getData = (refresh) => {
 };
 // 加载地图标点
 const initDot = () => {
-  if (mapStore.AMapType.includes(mapStore.activeMap)) {
+  if (mapStore.isAMap) {
     // 切换到高德
     removeMarker();
     removeVisibleRange();
@@ -263,7 +263,7 @@ const createSector = () => {
   const { startAngle, endAngle } = calculateAngle(ptzInfo.value.AzimuthH, ptzInfo.value.AngelH);
   const center = turf.point([detailData.value.lng, detailData.value.lat]);
   const sectorData = turf.sector(center, ptzInfo.value.Distance / 1000, startAngle, endAngle);
-  if (mapStore.AMapType.includes(mapStore.activeMap)) {
+  if (mapStore.isAMap) {
     sector = new AMap.Polyline({
       path: sectorData.geometry.coordinates,
       strokeColor: '#ffffff',
@@ -323,7 +323,7 @@ watch(visibleRange, async () => {
 // 移除标点
 const removeMarker = () => {
   if (!marker) return;
-  if (mapStore.AMapType.includes(mapStore.activeMap)) {
+  if (mapStore.isAMap) {
     map.remove(marker);
   } else if (mapStore.YMapType.includes(mapStore.activeMap)) {
     const source = vectorLayer.getSource();
@@ -333,7 +333,7 @@ const removeMarker = () => {
 };
 // 添加可视域
 const addVisibleRange = () => {
-  if (mapStore.AMapType.includes(mapStore.activeMap)) {
+  if (mapStore.isAMap) {
     // 圆形范围
     circle = new AMap.Circle({
       center: new AMap.LngLat(detailData.value.lng, detailData.value.lat),
@@ -370,7 +370,7 @@ const addVisibleRange = () => {
 // 移除可视域
 const removeVisibleRange = () => {
   if (circle) {
-    if (mapStore.AMapType.includes(mapStore.activeMap)) {
+    if (mapStore.isAMap) {
       map.remove(circle);
     } else if (mapStore.YMapType.includes(mapStore.activeMap)) {
       const source = vectorLayer.getSource();
@@ -384,7 +384,7 @@ const removeVisibleRange = () => {
 // 移除扇形
 const removeSector = () => {
   if (sector) {
-    if (mapStore.AMapType.includes(mapStore.activeMap)) {
+    if (mapStore.isAMap) {
       map.remove(sector);
       sector = null;
     } else if (mapStore.YMapType.includes(mapStore.activeMap)) {

src/views/globalMap/RightMenu/OnlinePlotting/index.vue

@@ -418,7 +418,7 @@ const handleTextEdit = () => {
 };
 const handleClickMap = (e) => {
   // 获取点击位置的经纬度
-  if (mapStore.AMapType.includes(mapStore.activeMap)) {
+  if (mapStore.isAMap) {
     lnglat.value = [e.lnglat.lng, e.lnglat.lat];
   } else {
     lnglat.value = e.coordinate;
@@ -448,7 +448,7 @@ const addText = (textEditState) => {
   commit(deepClone(overlaysData));
   res.text.on('rightclick', handleRightClick);
   // 监听地图点击事件
-  if (mapStore.AMapType.includes(mapStore.activeMap)) {
+  if (mapStore.isAMap) {
     map.off('click', handleClickMap);
   } else {
     map.un('click', handleClickMap);
@@ -467,7 +467,7 @@ watch(
   mouseToolState,
   () => {
     if (mouseToolState.value.graphicsType !== 'text') {
-      if (mapStore.AMapType.includes(mapStore.activeMap)) {
+      if (mapStore.isAMap) {
         map.off('click', handleClickMap);
       } else {
         map.un('click', handleClickMap);
@@ -483,7 +483,7 @@ const initDrawMethod = (options) => {
   const drawTool = getDrawTool();
   const mouseTool = drawTool.getMouseTool();
   let onDraw;
-  if (mapStore.AMapType.includes(mapStore.activeMap)) {
+  if (mapStore.isAMap) {
     onDraw = (event) => {
       mouseTool.off('draw', onDraw);
       close();
@@ -631,7 +631,7 @@ const handleEndDraw = (options, obj) => {
   drawTool.setDrawEndMethod();
   const id = nanoid();
   let data;
-  if (mapStore.AMapType.includes(mapStore.activeMap)) {
+  if (mapStore.isAMap) {
     obj._opts.extData = {
       id: id
     };
@@ -975,7 +975,7 @@ let dataURL = ref('');
 // 页面元素转图片
 const handleScreenshot = () => {
   let canvasBox;
-  if (mapStore.AMapType.includes(mapStore.activeMap)) {
+  if (mapStore.isAMap) {
     canvasBox = map.Iv;
   } else {
     canvasBox = map.targetElement_;

src/views/globalMap/RightMenu/UAV/DroneDetail.vue

@@ -44,7 +44,7 @@
             <div class="box-item" style="flex: 1">
               <div>机房温度：</div>
               <div class="gradient-text">
-                {{ detailData.hangarInfo && !!detailData.hangarInfo.temperature ? detailData.hangarInfo.temperature.toFixed(2) : '-' }}
+                {{ detailData.hangarInfo && !!detailData.hangarInfo.temperature ? detailData.hangarInfo.temperature : '-' }}
               </div>
               <div>℃</div>
             </div>

src/views/globalMap/data/mapData.ts

@@ -1,4 +1,4 @@
-const getImageUrl = (name) => {
+export const getImageUrl = (name) => {
   return new URL(`../../../assets/images/dotIcon/${name}`, import.meta.url).href;
 };
 export const iconList = {

src/views/globalMap/index.vue

@@ -2,7 +2,7 @@
   <div id="globalMap">
     <div class="global-map">
       <Map
-        v-if="AMapType.includes(mapStore.activeMap)"
+        v-if="mapStore.isAMap"
         ref="mapRef"
         @handle-show-video="handleShowVideo"
         @handle-show-warehouse="handleShowWarehouse"
@@ -66,6 +66,7 @@ import { getVehicleTrajectory } from '@/api/globalMap/KeyVehicles';
 import { iconList } from './data/mapData';
 import { deepClone } from '@/utils';
 import { parseTime } from '@/utils/ruoyi';
+import { getLocationVideos } from '@/api/videoMonitor';
 
 //dom元素
 const rightMenuRef = ref(null);
@@ -79,7 +80,6 @@ let map: any = {};
 // 地图类
 let mapUtils: any = {};
 const mapStore = useMapStore();
-const AMapType = mapStore.AMapType;
 // 附近视频菜单数据
 let tempMenu = ref({
   name: '',
@@ -93,7 +93,7 @@ let markerList = ref([]);
 let addMarkersTimer;
 // 添加打点
 const addMarkers = (item) => {
-  const dom = AMapType.includes(mapStore.activeMap) ? mapRef.value : map2Ref.value;
+  const dom = mapStore.isAMap ? mapRef.value : map2Ref.value;
   if (dom) {
     if (!item.checked) {
       let index = mapStore.pointType.findIndex((item2) => item.component === item2.component);
@@ -138,7 +138,7 @@ const adjustPoint = (data) => {
 };
 
 const addMarkersMethod = () => {
-  const dom = AMapType.includes(mapStore.activeMap) ? mapRef.value : map2Ref.value;
+  const dom = mapStore.isAMap ? mapRef.value : map2Ref.value;
   const path = [];
   mapStore.pointType.forEach((item) => {
     path.push(item.component);
@@ -236,7 +236,7 @@ const findChecked = (dataList, name) => {
 };
 // 点击搜索结果，添加标注
 const selectSearchMarker = (item) => {
-  const dom = AMapType.includes(mapStore.activeMap) ? mapRef.value : map2Ref.value;
+  const dom = mapStore.isAMap ? mapRef.value : map2Ref.value;
   let item2 = deepClone(item);
   // 获取图标
   if (iconList[item2.dataType]) {
@@ -257,31 +257,31 @@ const handleAnalysisData = (data) => {
   rightMenuRef.value.handleMenu('空间分析', data);
 };
 const getMapUtils = () => {
-  const domRef = AMapType.includes(mapStore.activeMap) ? mapRef.value : map2Ref.value;
+  const domRef = mapStore.isAMap ? mapRef.value : map2Ref.value;
   return !!domRef ? domRef.getMapUtils() : {};
 };
 // 获取地图元素操作
 const getMap = () => {
-  const domRef = AMapType.includes(mapStore.activeMap) ? mapRef.value : map2Ref.value;
+  const domRef = mapStore.isAMap ? mapRef.value : map2Ref.value;
   return !!domRef ? domRef.getMap() : {};
 };
 const showDetail = (data, dataType) => {
-  const domRef = AMapType.includes(mapStore.activeMap) ? mapRef.value : map2Ref.value;
+  const domRef = mapStore.isAMap ? mapRef.value : map2Ref.value;
   if (!!domRef) {
     domRef.handleHover(data, dataType);
   }
 };
 const getDrawTool = () => {
-  return AMapType.includes(mapStore.activeMap) ? mapRef.value.drawTool : mapUtils;
+  return mapStore.isAMap ? mapRef.value.drawTool : mapUtils;
 };
 const getPlaceSearch = () => {
-  const domRef = AMapType.includes(mapStore.activeMap) ? mapRef.value : map2Ref.value;
+  const domRef = mapStore.isAMap ? mapRef.value : map2Ref.value;
   if (!!domRef) {
     domRef.getPlaceSearch();
   }
 };
 const trackPlayback = (data) => {
-  const domRef = AMapType.includes(mapStore.activeMap) ? mapRef.value : mapUtils;
+  const domRef = mapStore.isAMap ? mapRef.value : mapUtils;
   if (!!domRef) {
     domRef.trackPlayback(data);
   }
@@ -314,7 +314,7 @@ const clearData = () => {
   }
 };
 const closeClickMap = () => {
-  if (AMapType.includes(mapStore.activeMap)) {
+  if (mapStore.isAMap) {
     map.off('click', handleClickMap);
   } else {
     map.un('click', handleClickMap);
@@ -327,7 +327,7 @@ const handleShowVideo = (data) => {
   showNearbyVideos.value = true;
 };
 const handleClickMap = (e) => {
-  if (AMapType.includes(mapStore.activeMap)) {
+  if (mapStore.isAMap) {
     location.value = [e.lnglat.lng, e.lnglat.lat];
   } else {
     location.value = e.coordinate;
@@ -343,7 +343,7 @@ const handleClickMap = (e) => {
       name: '',
       checked: false
     };
-    if (AMapType.includes(mapStore.activeMap)) {
+    if (mapStore.isAMap) {
       map.off('click', handleClickMap);
     } else {
       map.un('click', handleClickMap);
@@ -371,7 +371,7 @@ watch(
   () => mapStore.trackState.show,
   (show) => {
     if (!!show) {
-      const dom = AMapType.includes(mapStore.activeMap) ? mapRef.value : map2Ref.value;
+      const dom = mapStore.isAMap ? mapRef.value : map2Ref.value;
       dom?.addMarker(adjustPoint(mapStore.trackState.data));
       mapStore.trackState.data = [];
       mapStore.trackState.show = false;
@@ -411,10 +411,44 @@ watch(
     immediate: true
   }
 );
-
+// 监听视频打点
+watch(
+  () => mapStore.videoPointParams,
+  () => {
+    if (!mapStore.videoPointParams.flag) return;
+    const queryParams = {
+      zoom_level: mapStore.mapState.zoom,
+      // zoom_level: 8,
+      latitude_min: '',
+      latitude_max: '',
+      longitude_min: '',
+      longitude_max: '',
+      dict_value: 'slfh'
+      // dict_value: mapStore.videoPointParams.dict_value
+    };
+    if (mapStore.isAMap) {
+      const AMap = mapUtils.getAMap();
+      const pixel = new AMap.Pixel(0, 0);
+      const size = mapRef.value.getMapDomSize();
+      const pixel2 = new AMap.Pixel(size[0], size[1]);
+      const lnglat = map.containerToLngLat(pixel);
+      const lnglat2 = map.containerToLngLat(pixel2);
+      queryParams.longitude_min = lnglat.lng;
+      queryParams.latitude_max = lnglat.lat;
+      queryParams.longitude_max = lnglat2.lng;
+      queryParams.latitude_min = lnglat2.lat;
+    }
+    getLocationVideos(queryParams).then((res) => {
+      mapUtils.addMarker2(res.data);
+    });
+  },
+  {
+    deep: true
+  }
+);
 onBeforeUnmount(() => {
   if (!!map) {
-    if (AMapType.includes(mapStore.activeMap)) {
+    if (mapStore.isAMap) {
       map.off('click', handleClickMap);
     } else {
       map.un('click', handleClickMap);