取消全选

index.html

@@ -7,7 +7,6 @@
     <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" />
 <!--    <link rel="icon" href="/favicon.ico" />-->
     <script src="/h5player.min.js"></script>
-    <script src="/ol-plot.js"></script>
 
     <title>茂名智慧应急一张图</title>
     <!--[if lt IE 11

src/assets/styles/index.scss

@@ -374,6 +374,18 @@ aside {
   cursor: pointer;
   font-size: 38px;
 }
+.common-btn5 {
+  width: 191px;
+  height: 76px;
+  background: url('@/assets/images/common/btn4.png') no-repeat;
+  background-size: 100% 100%;
+  color: #ffffff;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  cursor: pointer;
+  font-size: 38px;
+}
 .common-btn-danger{
   width: 268px;
   height: 72px;

src/hooks/OpenLayersMap/useDrawTool.ts

@@ -1,300 +0,0 @@
-import { nanoid } from 'nanoid';
-import { useHistory } from '@/hooks/useHistory';
-import { deepClone } from '@/utils';
-import { countCircleArea, countRectangleArea } from '@/utils/geometryUtil';
-import olPlot from 'ol-plot';
-
-interface DrawToolOptions {
-  color: string;
-  drawType: string;
-  graphicsType: string;
-  onDrawCompleted?: Function;
-}
-export function useDrawTool(options: DrawToolOptions) {
-  const drawOptions = {
-    strokeColor: options.color,
-    strokeOpacity: 1,
-    strokeWeight: 2,
-    fillColor: options.color,
-    fillOpacity: options.drawType === '1' ? 0 : 0.5,
-    strokeStyle: 'solid'
-  };
-  const { currentState, commit, undo, history, future } = useHistory();
-  const overlays = [];
-  const overlaysData = [];
-  let graphicsType = options.graphicsType;
-  let mouseTool, contextMenu, map, plot, rightClickObj;
-  const initMouseTool = (map1) => {
-    map = map1;
-    plot = new olPlot(map1, {
-      zoomToExtent: true
-    });
-    // 绘制结束后，添加到FeatureOverlay显示。
-    function onDrawEnd (event) {
-      var feature = event.feature;
-      const aa = feature.getGeometry();
-      // 开始编辑
-      plot.plotEdit.activate(feature);
-    }
-
-    plot.plotDraw.on('drawEnd', onDrawEnd);
-    // 初始化绘制工具
-    // mouseTool = new AMap.MouseTool(map);
-    // // 绘制完成事件
-    // initDrawMethod();
-    // //创建右键菜单
-    // contextMenu = new AMap.ContextMenu();
-    // // 右键删除按钮
-    // contextMenu.addItem(
-    //   '删除',
-    //   function (event) {
-    //     deleteGraphics();
-    //   },
-    //   0
-    // );
-  };
-  // 初始化绘制完成回调
-  const initDrawMethod = () => {
-    mouseTool.on('draw', function (event) {
-      const obj = event.obj;
-      const id = nanoid();
-      obj._opts.extData = {
-        id: id
-      };
-      const data: any = {
-        id: id,
-        type: getType(obj.className),
-        color: obj._opts.strokeColor,
-        drawType: obj._opts.fillOpacity === 0 ? '1' : '2'
-      };
-      if (data.type === 'circle') {
-        data.center = [obj.getCenter().lng, obj.getCenter().lat];
-        data.radius = obj.getRadius();
-      } else if (data.type === 'rectangle') {
-        const bounds = obj.getBounds();
-        // 从bounds中获取西南角和东北角的坐标
-        const southWest = bounds.getSouthWest();
-        const northEast = bounds.getNorthEast();
-        data.southWest = [southWest.lng, southWest.lat];
-        data.northEast = [northEast.lng, northEast.lat];
-        const pathArr = [
-          [
-            [southWest.lng, northEast.lat],
-            [northEast.lng, northEast.lat],
-            [northEast.lng, southWest.lat],
-            [southWest.lng, southWest.lat],
-            [southWest.lng, northEast.lat]
-          ]
-        ];
-      } else if (data.type === 'polygon') {
-        const path = obj.getPath();
-        // 将AMap.LngLat对象数组转换为经纬度数组
-        const pathArr = path.map((lngLat) => {
-          // 返回经度和纬度的数组
-          return [lngLat.lng, lngLat.lat];
-        });
-        data.path = pathArr;
-        const newPathArr = deepClone(pathArr);
-        newPathArr.push(newPathArr[0]);
-      }
-      overlays.push(obj);
-      overlaysData.push(data);
-      commit(deepClone(overlaysData));
-      if (typeof options.onDrawCompleted === 'function') {
-        options.onDrawCompleted(data, overlaysData, obj, event);
-      }
-      // 右击菜单
-      obj.on('rightclick', handleRightClick);
-    });
-  };
-  // 图形右击事件
-  const handleRightClick = (event) => {
-    rightClickObj = event.target;
-    contextMenu.open(map, event.lnglat);
-  };
-  // 删除图形
-  const deleteGraphics = () => {
-    const id = rightClickObj.getExtData()?.id;
-    if (id) {
-      for (let i = 0; i < overlays.length; i++) {
-        if (overlays[i].getExtData()?.id === id) {
-          removeOverlayByIndex(i);
-          commit(deepClone(overlaysData));
-          rightClickObj = null;
-        }
-      }
-    }
-  };
-  // 判断图形类型
-  const getType = (type) => {
-    let res = '';
-    if (type === 'Overlay.Circle') {
-      res = 'circle';
-    } else if (type === 'Overlay.Rectangle') {
-      res = 'rectangle';
-    } else if (type === 'Overlay.Polygon') {
-      res = 'polygon';
-    }
-    return res;
-  };
-  // 绘制图形
-  const drawGraphics = (type: string) => {
-    if (type === 'circle') {
-      // 绘制圆形
-      plot.plotDraw.activate('Circle');
-    } else if (type === 'rectangle') {
-      // 绘制矩形
-      plot.plotDraw.activate('RectAngle');
-    } else if (type === 'polygon') {
-      // 绘制多边形
-      plot.plotDraw.activate('Polygon');
-    } else if (type === 'freePolygon') {
-      // 绘制索套
-      plot.plotDraw.activate('FreePolygon');
-    }
-  };
-  // 设置颜色
-  const setColor = (color: string) => {
-    drawOptions.strokeColor = color;
-    drawOptions.fillColor = color;
-  };
-  // 设置线框面框
-  const setDrawType = (drawType: string) => {
-    drawOptions.fillOpacity = drawType === '1' ? 0 : 0.5;
-  };
-  // 设置图形类型
-  const setGraphicsType = (type: string) => {
-    closeDraw();
-    graphicsType = type;
-    drawGraphics(type);
-  };
-  // 关闭绘制
-  const closeDraw = () => {
-    mouseTool.close();
-  };
-  // 返回鼠标工具对象
-  const getMouseTool = () => {
-    return mouseTool;
-  };
-  // 创建图形
-  const createGraphics = (data: any) => {
-    if (data.type === 'circle') {
-      // 绘制圆形
-      createCircle(data);
-    } else if (data.type === 'rectangle') {
-      // 绘制矩形
-      createRectangle(data);
-    } else if (data.type === 'polygon') {
-      // 绘制多边形
-      createPolygon(data);
-    }
-  };
-  // 创建圆形
-  const createCircle = (options) => {
-    const circle = new AMap.Circle({
-      center: options.center,
-      radius: options.radius, //半径
-      strokeColor: options.color,
-      strokeOpacity: 1,
-      strokeWeight: 2,
-      fillColor: options.color,
-      fillOpacity: options.drawType === '1' ? 0 : 0.5,
-      strokeStyle: 'solid'
-    });
-    overlays.push(circle);
-    map.add(circle);
-  };
-  // 创建矩形
-  const createRectangle = (options: any) => {
-    const southWest = new AMap.LngLat(options.southWest[0], options.southWest[1]);
-    const northEast = new AMap.LngLat(options.northEast[0], options.northEast[1]);
-    const bounds = new AMap.Bounds(southWest, northEast);
-    const rectangle = new AMap.Rectangle({
-      bounds: bounds,
-      strokeColor: options.color,
-      strokeOpacity: 1,
-      strokeWeight: 2,
-      fillColor: options.color,
-      fillOpacity: options.drawType === '1' ? 0 : 0.5,
-      strokeStyle: 'solid'
-    });
-    overlays.push(rectangle);
-    map.add(rectangle);
-  };
-  // 创建矩形
-  const createPolygon = (options: any) => {
-    // 将数组转换为AMap.LngLat对象的数组
-    const path = options.path.map((coord) => {
-      return new AMap.LngLat(coord[0], coord[1]);
-    });
-    const polygon = new AMap.Polygon({
-      path: path,
-      strokeColor: options.color,
-      strokeOpacity: 1,
-      strokeWeight: 2,
-      fillColor: options.color,
-      fillOpacity: options.drawType === '1' ? 0 : 0.5,
-      strokeStyle: 'solid'
-    });
-    overlays.push(polygon);
-    map.add(polygon);
-  };
-  // 处理撤销
-  const handleUndo = () => {
-    const previous = history.value[history.value.length - 2];
-    if (history.value.length > 1) {
-      if (currentState.value.length > previous.length) {
-        // 撤销新增
-        removeOverlayByIndex(currentState.value.length - 1);
-      } else {
-        let restoreData;
-        for (let i = 0; i < previous.length; i++) {
-          let index = 0;
-          for (let k = 0; k < currentState.value.length; k++) {
-            if (previous[i].id !== currentState.value[k].id) {
-              index++;
-            } else {
-              break;
-            }
-          }
-          if (index === previous.length - 1) {
-            restoreData = previous[i];
-            break;
-          }
-        }
-        if (restoreData) {
-          createGraphics(restoreData);
-        }
-      }
-      undo();
-
-      console.log(history.value, future.value, currentState.value);
-    }
-  };
-  // 根据索引移除覆盖物
-  const removeOverlayByIndex = (index: number) => {
-    // 移除地图上覆盖物
-    map.remove(overlays[index]);
-    overlays.splice(index, 1);
-    overlaysData.splice(index, 1);
-  };
-  // // 图层分析显示信息
-  // const addText = (text) => {
-  //
-  // }
-  return {
-    overlays,
-    getMouseTool,
-    initMouseTool,
-    drawGraphics,
-    closeDraw,
-    setColor,
-    setDrawType,
-    setGraphicsType,
-    createCircle,
-    removeOverlayByIndex,
-    handleUndo,
-    currentState,
-    history
-  };
-}

src/hooks/OpenLayersMap/useOpenLayersMap.ts

@@ -1,123 +0,0 @@
-// 引入OpenLayers的主模块
-import Map from 'ol/Map';
-import View from 'ol/View';
-import Projection from 'ol/proj/Projection';
-import { getWidth, getTopLeft } from 'ol/extent';
-import TileLayer from 'ol/layer/Tile';
-import WMTS from 'ol/source/WMTS';
-import WMTSTileGrid from 'ol/tilegrid/WMTS';
-import WMTSCapabilities from 'ol/format/WMTSCapabilities';
-import proj4 from 'proj4';
-import { register } from 'ol/proj/proj4';
-import { defaults } from 'ol/control';
-import axios from 'axios';
-
-interface Options {
-  id: string;
-  center: number[];
-  zoom?: number;
-  minZoom?: number;
-  maxZoom?: number;
-  showScale?: boolean;
-  // 加载完成事件
-  onLoadCompleted?: Function;
-};
-interface LayerParam {
-  layerName: string;
-  styleName: string;
-  tilematrixset: string;
-  format: string;
-}
-
-proj4.defs('EPSG:4490', '+proj=longlat +ellps=GRS80 +no_defs +type=crs');
-proj4.defs('EPSG:4525', '+proj=tmerc +lat_0=0 +lon_0=111 +k=1 +x_0=37500000 +y_0=0 +ellps=GRS80 +units=m +no_defs +type=crs');
-register(proj4);
-const commonUrl = import.meta.env.VITE_APP_BASE_API + '/api/oneShare/proxyHandler/mm/';
-const projection = new Projection({
-  code: 'EPSG:4490',
-  units: 'degrees'
-});
-const projectionExtent = [-180, -90, 180, 90];
-const size = getWidth(projectionExtent) / 256;
-const resolutions = [];
-for (let z = 2; z < 22; ++z) {
-  resolutions[z] = size / Math.pow(2, z);
-}
-
-export function UseOpenLayersMap(options) {
-  let map: Map;
-  const initMap = (dom) => {
-    map = new Map({
-      controls: defaults({
-        zoom: false,
-        rotate: false
-      }),
-      layers: [],
-      target: dom,
-      view: new View({
-        center: options.center && options.center.length === 2 ? [options.center[0], options.center[1]] : [110.90153121597234, 21.98323671981171],
-        zoom: options.zoom ? options.zoom : 9.6,
-        projection: projection,
-        maxZoom: options.maxZoom ? options.maxZoom : 18,
-        minZoom: options.minZoom ? options.minZoom : 1
-      })
-    });
-    // 初始化比例尺
-    if (options.showScale) {
-      // map.addControl(new AMap.Scale());
-    }
-    if (typeof options.onLoadCompleted === 'function') {
-      options.onLoadCompleted(map);
-    }
-    formatXml(options.id);
-  };
-
-  const formatXml = (code: string, minZoom?: number, maxZoom?: number, zIndex?: number, visible?: boolean) => {
-    const xml = new WMTSCapabilities();
-    getCapabilities(code).then((lists) => {
-      const mapData = xml.read(lists.data);
-      const layerParam: LayerParam = {
-        layerName: mapData.Contents.Layer[0].Title,
-        styleName: mapData.Contents.Layer[0].Style[0].Identifier,
-        tilematrixset: mapData.Contents.TileMatrixSet[0].Identifier,
-        format: mapData.Contents.Layer[0].Format[0]
-      };
-      createWmsLayer(code, layerParam, minZoom, maxZoom, zIndex, visible);
-    });
-  }
-  // 请求接口获取地图信息
-  const getCapabilities = (code) => {
-    return axios.get(commonUrl + code);
-  }
-  // 请求地图图片加载图层
-  const createWmsLayer = (code: string, layerParam: LayerParam, minZoom?: number = 0, maxZoom?: number, zIndex?: number = -1, visible?: boolean = true) => {
-    const source = new WMTS({
-      url: commonUrl + code,
-      crossOrigin: 'Anonymous',
-      layer: layerParam.layerName,
-      style: layerParam.styleName,
-      matrixSet: layerParam.tilematrixset,
-      format: layerParam.format,
-      wrapX: true,
-      tileGrid: new WMTSTileGrid({
-        origin: getTopLeft(projectionExtent),
-        resolutions: resolutions,
-        matrixIds: ['0', '1', '2', '3', '4', '5', '6', '7', '8', '9', '10', '11', '12', '13', '14', '15', '16', '17', '18', '19', '20', '21']
-      })
-    });
-    const layer = new TileLayer({
-      source: source,
-      zIndex: zIndex,
-      minZoom: minZoom,
-      maxZoom,
-      visible: visible
-    });
-    layer.set('layerName', code);
-
-    map.addLayer(layer);
-  }
-  return {
-    initMap,
-    formatXml
-  };
-}

src/store/modules/map.ts

@@ -1,4 +1,5 @@
 import { PointType } from '@/api/globalMap/type';
+import { listMenu } from '@/api/system/menu';
 
 export const useMapStore = defineStore('map', () => {
   const mapState = reactive({
@@ -10,6 +11,14 @@ export const useMapStore = defineStore('map', () => {
     // 是否显示比例尺
     showScale: true
   });
+  // 地图左侧菜单
+  const menuData = ref([]);
+  // 右侧菜单
+  const menuState = ref({
+    showMenu: false,
+    activeIndex: 0,
+    menuData: []
+  });
   // 地图加载是否完成
   const mapLoaded = ref(false);
   // 当前地图类型
@@ -74,13 +83,62 @@ export const useMapStore = defineStore('map', () => {
       flag: false,
       dict_value: ''
     };
+    menuState.value = {
+      showMenu: false,
+      activeIndex: 0,
+      menuData: []
+    };
+    initMenuData();
   };
   // 设置视频打点标识
   const setVideoPointParams = (data: any) => {
     videoPointParams.value = data;
   };
+  // 初始化左侧菜单数据
+  const initMenuData = () => {
+    listMenu().then((res: any) => {
+      const data = res.data ? res.data[0]?.children : [];
+      data.forEach((item: any) => {
+        item.show = true;
+        item.name = item.meta?.title;
+        item.children?.forEach((item2) => {
+          item2.show = true;
+          item2.name = item2.meta?.title;
+          item2.children?.forEach((item3) => {
+            item3.name = item3.meta?.title;
+            if (item3.component === '2' && !!item3.path) {
+              item3.checked = false;
+            }
+          });
+        });
+      });
+      menuData.value = data;
+    });
+  };
+  // 取消勾选左侧所有菜单
+  const handleCancelAllChecked = () => {
+    const data = menuData.value;
+    data.forEach((topLevelItem) => {
+      if (topLevelItem.children && topLevelItem.children.length > 0) {
+        topLevelItem.children.forEach((secondLevelItem) => {
+          if (secondLevelItem.children && secondLevelItem.children.length > 0) {
+            secondLevelItem.children.forEach((thirdLevelItem) => {
+              thirdLevelItem.checked = false;
+            });
+          }
+        });
+      }
+    });
+    menuState.value = {
+      showMenu: false,
+      activeIndex: 0,
+      menuData: []
+    };
+  };
   return {
     mapState,
+    menuData,
+    menuState,
     mapLoaded,
     activeMap,
     isAMap,
@@ -98,7 +156,8 @@ export const useMapStore = defineStore('map', () => {
     setTrackState,
     setIsMapSelect,
     initData,
-    setVideoPointParams
+    setVideoPointParams,
+    handleCancelAllChecked
   };
 });
 

src/types/components.d.ts

@@ -0,0 +1,80 @@
+/* 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']
+    ElSkeleton: typeof import('element-plus/es')['ElSkeleton']
+    ElSkeletonItem: typeof import('element-plus/es')['ElSkeletonItem']
+    ElSlider: typeof import('element-plus/es')['ElSlider']
+    ElStep: typeof import('element-plus/es')['ElStep']
+    ElSteps: typeof import('element-plus/es')['ElSteps']
+    ElSwitch: typeof import('element-plus/es')['ElSwitch']
+    ElTabPane: typeof import('element-plus/es')['ElTabPane']
+    ElTabs: typeof import('element-plus/es')['ElTabs']
+    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/views/globalMap/LeftMenu.vue

@@ -67,6 +67,9 @@
       </div>
       <Transition>
         <div v-show="menuState.isExpand" class="menu-box2">
+          <div class="btn-box">
+            <div class="common-btn5" @click="handleCancelAllChecked">取消勾选</div>
+          </div>
           <div class="menu-header">
             <div
               v-for="(item, index) in menuData"
@@ -113,14 +116,17 @@
 <script lang="ts" setup name="LeftMenu">
 import VideoDialog from '@/components/HKVideo/video-dialog.vue';
 import { getPointInfoComprehensiveSearch } from '@/api/globalMap';
-import { listMenu } from '@/api/system/menu';
 import { deepClone } from '@/utils';
 import gcoord from 'gcoord';
+import useMapStore from '@/store/modules/map';
 
-const emits = defineEmits(['switchMap', 'clickMenu', 'selectSearchMarker']);
+const emits = defineEmits(['switchMap', 'clickMenu', 'selectSearchMarker', 'clearAllMenu']);
 const getPlaceSearch = inject('getPlaceSearch');
+const getMapUtils = inject('getMapUtils');
+let mapUtils;
+const mapStore = useMapStore();
 // 左侧菜单
-let menuData = ref([]);
+const { menuData } = storeToRefs(mapStore);
 
 const searchState = reactive({
   searchText: '',
@@ -135,6 +141,17 @@ let searchBoxRef = ref();
 onClickOutside(searchBoxRef, (event) => {
   searchState.showList = false;
 });
+watch(
+  () => mapStore.mapLoaded,
+  (loaded) => {
+    if (loaded) {
+      mapUtils = getMapUtils();
+    }
+  },
+  {
+    immediate: true
+  }
+);
 const changeSearchText = () => {
   if (!searchState.searchText) {
     searchState.showList = false;
@@ -205,28 +222,6 @@ const handleClick = (item) => {
   emits('clickMenu', item, menuData.value);
 };
 
-const initData = () => {
-  listMenu().then((res: any) => {
-    const data = res.data ? res.data[0]?.children : [];
-    data.forEach((item) => {
-      item.show = true;
-      item.name = item.meta?.title;
-      item.children?.forEach((item2) => {
-        item2.show = true;
-        item2.name = item2.meta?.title;
-        item2.children?.forEach((item3) => {
-          item3.name = item3.meta?.title;
-          if (item3.component === '2' && !!item3.path) {
-            item3.checked = false;
-          }
-        });
-      });
-    });
-    menuData.value = data;
-    console.log(menuData.value);
-  });
-};
-
 const setMenuChange = (item, flag) => {
   for (let i = 0; i < menuData.value.length; i++) {
     if (item.meta.title === menuData.value[i].meta.title) {
@@ -264,9 +259,12 @@ const handleShowDialog = (row) => {
     showDialog.value = true;
   });
 };
-onMounted(() => {
-  initData();
-});
+// 取消所有勾选
+const handleCancelAllChecked = () => {
+  mapStore.handleCancelAllChecked();
+  // 清空所有打点
+  mapUtils.clearMarker('point');
+};
 defineExpose({ setMenuChange });
 </script>
 
@@ -449,12 +447,16 @@ defineExpose({ setMenuChange });
     background: url('@/assets/images/menu/btn.png') no-repeat;
     background-size: 100% 100%;
   }
-
-  .menu-header {
+  .btn-box {
     display: flex;
+    justify-content: flex-end;
     margin-top: 65px;
+    margin-right: 40px;
+  }
+  .menu-header {
+    display: flex;
     height: 88px;
-
+    margin-top: 20px;
     .menu-item {
       width: 339px;
       height: 78px;

src/views/globalMap/RightMenu/index.vue

@@ -127,22 +127,20 @@ import TyphoonVideo from './TyphoonVideo.vue';
 import RescueTeam from './RescueTeam.vue';
 import TrafficVideo from './TrafficVideo.vue';
 import WindMonitor from './WindMonitor/index.vue';
+import useMapStore from '@/store/modules/map';
 
 const emits = defineEmits(['update:drawing']);
 const scrollListRef = ref();
-const menuState = reactive({
-  showMenu: false,
-  activeIndex: 0,
-  menuData: []
-});
+const mapStore = useMapStore();
+const { menuState } = storeToRefs(mapStore);
 
 // 点击收缩展开
 const clickContractMenu = () => {
-  menuState.showMenu = !menuState.showMenu;
+  menuState.value.showMenu = !menuState.value.showMenu;
 };
 // 菜单上下移动
 const clickBtn = (direction: string) => {
-  const len = menuState.menuData.length;
+  const len = menuState.value.menuData.length;
   if (direction === 'up' && scrollListRef.value.scrollTop - 168 >= 0) {
     scrollListRef.value.scrollTop -= 168;
   } else if (direction === 'down' && scrollListRef.value.scrollTop + 168 <= 168 * len) {
@@ -150,7 +148,7 @@ const clickBtn = (direction: string) => {
   }
 };
 const showIndexMenu = (name) => {
-  let index = menuState.menuData.findIndex((item) => {
+  let index = menuState.value.menuData.findIndex((item) => {
     return item.name === name;
   });
   if (index > -1) {
@@ -159,19 +157,19 @@ const showIndexMenu = (name) => {
 };
 // 点击菜单
 const clickMenu = (index) => {
-  menuState.showMenu = true;
-  menuState.activeIndex = index;
+  menuState.value.showMenu = true;
+  menuState.value.activeIndex = index;
 };
 let location = ref([]);
 let location2 = ref([]);
 // 显示菜单
 const handleMenu = (name, data) => {
-  let index = menuState.menuData.findIndex((item) => {
+  let index = menuState.value.menuData.findIndex((item) => {
     return item.name === name;
   });
   if (name === '空间分析') {
-    menuState.showMenu = true;
-    menuState.activeIndex = index;
+    menuState.value.showMenu = true;
+    menuState.value.activeIndex = index;
     nextTick(() => {
       location.value = data;
     });
@@ -183,33 +181,33 @@ const handleMenu = (name, data) => {
 const updateMenu = (type, menu, newLocation?: any) => {
   if (type === '1') {
     if (menu.name === '图层分析') {
-      let index = menuState.menuData.findIndex((item) => {
+      let index = menuState.value.menuData.findIndex((item) => {
         return item.name === menu.name;
       });
       if (index === -1) {
-        menuState.menuData.push(menu);
+        menuState.value.menuData.push(menu);
       }
     } else if (menu.name === '定点分析') {
-      menuState.menuData.push(menu);
+      menuState.value.menuData.push(menu);
       location2.value = newLocation;
     } else {
-      menuState.menuData.push(menu);
+      menuState.value.menuData.push(menu);
     }
-    clickMenu(menuState.menuData.length - 1);
+    clickMenu(menuState.value.menuData.length - 1);
   } else if (type === '2') {
-    let index = menuState.menuData.findIndex((item) => item.name === menu.name);
+    let index = menuState.value.menuData.findIndex((item) => item.name === menu.name);
     if (index > -1) {
-      menuState.menuData.splice(index, 1);
-      menuState.activeIndex = 0;
+      menuState.value.menuData.splice(index, 1);
+      menuState.value.activeIndex = 0;
     }
     if (menu.name === '空间分析') {
       location.value = [];
     }
   } else if (type === '4') {
-    let index = menuState.menuData.findIndex((item) => item.name === menu.name);
+    let index = menuState.value.menuData.findIndex((item) => item.name === menu.name);
     if (index > -1) {
-      menuState.menuData.splice(index, 1);
-      menuState.activeIndex = 0;
+      menuState.value.menuData.splice(index, 1);
+      menuState.value.activeIndex = 0;
     }
     location2.value = newLocation;
   }

src/views/globalMap/data/mapData.ts

@@ -211,6 +211,16 @@ export const iconList = {
     image: getImageUrl('43_vehicle.png'),
     imageHover: getImageUrl('43_vehicle_hover.png'),
     size: [40, 44]
+  },
+  '44': {
+    image: getImageUrl('44_child_welfare_institution.png'),
+    imageHover: getImageUrl('44_child_welfare_institution_hover.png'),
+    size: [40, 44]
+  },
+  '45': {
+    image: getImageUrl('45_elderly_care_institution.png'),
+    imageHover: getImageUrl('45_elderly_care_institution_hover.png'),
+    size: [40, 44]
   }
 };
 

src/views/globalMap/index.vue

@@ -163,8 +163,6 @@ const toAddress = (item) => {
 };
 
 let showDrawTools = ref(false);
-// 右侧菜单
-
 // 点击菜单
 const clickMenu = (item, dataList) => {
   if (item.path === '1') {
@@ -446,6 +444,9 @@ watch(
     deep: true
   }
 );
+onMounted(() => {
+  mapStore.initData();
+});
 onBeforeUnmount(() => {
   if (!!map) {
     if (mapStore.isAMap) {