地图 风险等级显隐

src/components/Map/YztMap/DistributionMap.vue

@@ -5,8 +5,8 @@
       <i class="left-decoration" />
       <div class="box">
         <div v-show="!hideBox" class="box2">
-          <div class="box-title">{{ legend.title }}</div>
-          <div v-for="(item, index) in legend.data" :key="index" class="box-item">
+          <div class="box-title">{{ legendTitle }}</div>
+          <div v-for="(item, index) in legend" :key="index" class="box-item">
             <div class="checked-box" @click="handleClick(item)">
               <i :class="!!item.checked ? 'checked' : 'unchecked'" />
               <div class="text">{{ item.name }}</div>
@@ -23,25 +23,19 @@
 
 <script setup lang="ts">
 import 'ol/ol.css';
+import mmJson from '@/assets/json/mm.json';
 import { olMap } from '@/utils/olMap/olMap';
-interface LegendItem {
-  name: string;
-  color: string;
-  checked: boolean;
-}
-interface Legend {
-  show: boolean;
-  title: string;
-  data: LegendItem[];
-}
+import { deepClone } from '@/utils';
 interface Props {
   activeMap: string;
   points?: [];
   distributionData?: [];
-  legend?: Legend;
+  legendTitle?: string;
 }
 const containerScale = inject('containerScale');
-const props = withDefaults(defineProps<Props>(), {});
+const props = withDefaults(defineProps<Props>(), {
+  legendTitle: '风险等级'
+});
 const emits = defineEmits(['update:drawing', 'selectGraphics']);
 
 const mapRef = ref(null);
@@ -80,6 +74,32 @@ watch(
     deep: true
   }
 );
+let legend = ref([]);
+// 更新分布图数据
+const updateMask = () => {
+  if (!map || !map.createMask) return;
+  const data = [];
+  legend.value.forEach((item) => {
+    if (!!item.checked) {
+      data.push(item);
+    }
+  });
+  map.createMask(data);
+};
+watch(
+  () => props.distributionData,
+  () => {
+    const data = deepClone(props.distributionData);
+    data.forEach((item) => {
+      item.checked = true;
+    });
+    legend.value = data;
+    updateMask();
+  },
+  {
+    deep: true
+  }
+);
 
 const init = () => {
   const id = props.activeMap === 'imageMap' ? ['YZT1640925052482', 'YZT1695608158269'] : ['YZT1708679726700', 'YZT1695608158269'];
@@ -93,11 +113,10 @@ const init = () => {
     // 加载完成事件
     onLoadCompleted: (yMap) => {
       yztMap = yMap;
-      // initMouseTool(map);
-      // map.createVecByJson(mmJson, '茂名市');
+      map.createVecByJson(mmJson, '茂名市');
       handleResize();
       map.addMarker(props.points);
-      map.createMask(props.distributionData);
+      map.createMask(legend.value);
     }
   });
 };
@@ -109,7 +128,9 @@ const clearMarker = () => {
 };
 const handleClick = (item) => {
   item.checked = !item.checked;
+  updateMask();
 };
+
 defineExpose({ addMarker, clearMarker });
 const handleResize = () => {
   let containerScaleData = !!containerScale ? containerScale() : {

src/types/components.d.ts

@@ -51,6 +51,8 @@ declare module 'vue' {
     ElSlider: typeof import('element-plus/es')['ElSlider']
     ElSubMenu: typeof import('element-plus/es')['ElSubMenu']
     ElSwitch: typeof import('element-plus/es')['ElSwitch']
+    ElTable: typeof import('element-plus/es')['ElTable']
+    ElTableColumn: typeof import('element-plus/es')['ElTableColumn']
     ElTag: typeof import('element-plus/es')['ElTag']
     ElText: typeof import('element-plus/es')['ElText']
     ElTimeline: typeof import('element-plus/es')['ElTimeline']

src/utils/olMap/olMap.ts

@@ -295,8 +295,7 @@ export class olMap {
       source: new VectorSource(),
       style: new Style({
         fill: new Fill({
-          // color: 'rgba(16, 36, 59, 0.65)'
-          color: 'rgba(255,7,35,0.65)'
+          color: 'rgba(16, 36, 59, 0.65)'
         }),
         stroke: new Stroke({
           color: 'rgba(38, 138, 185, 1)',
@@ -344,6 +343,7 @@ export class olMap {
     this.removeMask();
     if (!data || data.length === 0) return;
     data.forEach((item) => {
+      if (!item.points || item.points.length === 0) return;
       // 遮罩图层的样式
       const maskStyle = new Style({
         fill: new Fill({
@@ -376,11 +376,15 @@ export class olMap {
   removeMask() {
     //移除图层
     const layersArray = this.map.getLayers().getArray();
+    const layers = [];
     layersArray.forEach((layer) => {
       // 检查图层是否有自定义属性，并且该属性是否匹配你要移除的图层的标识符
       if (layer.get('name') === 'mask') {
-        this.map.removeLayer(layer);
+        layers.push(layer);
       }
     });
+    layers.forEach((layer) => {
+      this.map.removeLayer(layer);
+    });
   }
 }

src/views/censusDataAnalysis/ForestFire/index.vue

@@ -54,7 +54,6 @@
         :active-map="activeMap"
         :distributionData="distributionData"
         :points="points"
-        :legend="legendData"
       />
       <div class="map-title">{{ mapTitle }}</div>
     </div>
@@ -94,16 +93,6 @@ let activeMap = ref('imageMap');
 let mapTitle = ref('森林火灾风险等级分布图');
 let distributionData = ref([]);
 let points = ref([]);
-let legendData = ref({
-  show: true,
-  title: '风险等级',
-  data: [
-    { name: '高', color: '#ff2f3c', checked: true },
-    { name: '较高', color: '#ffaf00', checked: true },
-    { name: '较低', color: '#ffd800', checked: true },
-    { name: '低', color: '#40c75f', checked: true }
-  ]
-});
 // 点击图层分析
 const handleClick2 = (item, index) => {
   if (activeIndex2.value === index) return;
@@ -115,7 +104,13 @@ const handleClick2 = (item, index) => {
 const getDistributionData = () => {
   const tempData2 = [
     {
-      color: '#ff8552',
+      name: '高',
+      color: '#ff2f3c',
+      points: []
+    },
+    {
+      name: '较高',
+      color: '#ffaf00',
       points: [
         [
           [110.718235, 21.96198],
@@ -137,7 +132,13 @@ const getDistributionData = () => {
       ]
     },
     {
-      color: '#ff0000',
+      name: '较低',
+      color: '#ffd800',
+      points: []
+    },
+    {
+      name: '低',
+      color: '#40c75f',
       points: [
         [
           [110.491302, 22.035445],