Merge remote-tracking branch 'origin/dev' into dev

src/types/components.d.ts

@@ -49,6 +49,7 @@ declare module 'vue' {
     ElIcon: typeof import('element-plus/es')['ElIcon']
     ElImage: typeof import('element-plus/es')['ElImage']
     ElInput: typeof import('element-plus/es')['ElInput']
+    ElInputNumber: typeof import('element-plus/es')['ElInputNumber']
     ElMenu: typeof import('element-plus/es')['ElMenu']
     ElMenuItem: typeof import('element-plus/es')['ElMenuItem']
     ElOption: typeof import('element-plus/es')['ElOption']
@@ -59,6 +60,8 @@ declare module 'vue' {
     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']

src/views/globalMap/RightMenu/DrawTools.vue

@@ -1,12 +1,12 @@
 <template>
-  <div class="draw-tools-container">
+  <div class="draw-tools-container" v-drag="{ draggable: true, scale: containerScale }">
     <div class="tool-header">
       <div class="gradient-text">空间分析</div>
       <div class="btn-box">
         <div class="btn" :style="{ color: mouseToolState.drawing ? '#ff0000' : '#ffffff' }" @click="openDraw">
           {{ mouseToolState.drawing ? '关闭绘制' : '开启绘制' }}
         </div>
-        <div class="btn-cancel">清空</div>
+        <div class="btn-cancel" @click="handleClear">清空</div>
       </div>
     </div>
     <div class="tool-content">
@@ -61,12 +61,15 @@
       </div>
     </div>
   </div>
+  <div v-if="mouseToolState.drawing" class="tip-box">
+    <div class="gradient-text">
+      {{ mouseToolState.graphicsType === 'polygon' ? '鼠标单击绘制，双击结束绘制' : '鼠标按住拖拽，松开鼠标结束标绘' }}
+    </div>
+  </div>
 </template>
 
 <script lang="ts" setup name="DrawTools">
-import { useHistory } from '@/hooks/useHistory';
 import { nanoid } from 'nanoid';
-import { deepClone } from '@/utils';
 import * as turf from '@turf/turf';
 import Overlay from 'ol/Overlay';
 import useMapStore from '@/store/modules/map';
@@ -76,13 +79,12 @@ interface ListItem {
   value: string;
 }
 
+const containerScale = inject('containerScale');
 const mapStore = useMapStore();
-const AMapType = ['vectorgraph', 'satellite'];
 const getDrawTool = inject('getDrawTool');
 const getMap = inject('getMap');
 const getMapUtils = inject('getMapUtils');
 const emits = defineEmits(['handleAnalysisData']);
-const { currentState, commit, undo, history, future } = useHistory();
 const mouseToolState = reactive({
   drawing: false,
   color: '#f80102',
@@ -160,8 +162,8 @@ const selectColor = (index) => {
   mouseToolState.color = colorList[index].value;
   showColorSelect.value = false;
 };
-const overlays = [];
-const overlaysData = [];
+let overlays = [];
+let overlaysData = [];
 // 点击颜色选择之外
 onClickOutside(selectBoxRef, () => {
   if (!showColorSelect.value) return;
@@ -238,15 +240,20 @@ const onDraw = (event) => {
   data.path = pathArr;
   overlays.push(obj);
   overlaysData.push(data);
-  commit(deepClone(overlaysData));
   // 右击进入编辑
   obj.on('rightclick', handleRightClick);
-  analysisSpatial(data);
+  selectedScope[data.id] = data;
+  analysisSpatial();
   // 点击空间分析
   obj.on('click', function () {
     // 没在编辑时
     if (!mouseToolState.drawing) {
-      analysisSpatial(data);
+      if (selectedScope[data.id]) {
+        delete selectedScope[data.id];
+      } else {
+        selectedScope[data.id] = data;
+      }
+      analysisSpatial();
     }
   });
 };
@@ -277,9 +284,9 @@ const onDraw2 = (event) => {
   }
   overlays.push(feature);
   overlaysData.push(data);
-  commit(deepClone(overlaysData));
   // 右击进入编辑
   map.on('contextmenu', handleRightClick2);
+  selectedScope[data.id] = data;
   analysisSpatial(data);
 };
 let rightClickObj;
@@ -364,7 +371,6 @@ const deleteGraphics = () => {
       const itemId = mapStore.isAMap ? overlay?.getExtData().id : overlay.get('id');
       if (itemId === id) {
         removeOverlayByIndex(i);
-        commit(deepClone(overlaysData));
         rightClickObj = null;
       }
     }
@@ -393,23 +399,16 @@ const removeOverlayByIndex = (index: number) => {
       mapUtils.getDrawVector().getSource().removeFeature(overlays[index]);
     }
   }
-
+  if (selectedScope[overlaysData[index].id]) {
+    delete selectedScope[overlaysData[index].id];
+  }
   overlays.splice(index, 1);
   overlaysData.splice(index, 1);
+  analysisSpatial();
 };
 let selectedScope = reactive({});
 // 空间分析数据
-const analysisSpatial = (data) => {
-  // 已选中的范围
-  if (selectedScope[data.id]) {
-    delete selectedScope[data.id];
-    if (JSON.stringify(selectedScope) === '{}') {
-      // rightMenuRef.value.clickContractMenu();
-      return;
-    }
-  } else {
-    selectedScope[data.id] = data;
-  }
+const analysisSpatial = () => {
   let location = [];
   for (let key in selectedScope) {
     let itemLocation = [];
@@ -448,11 +447,45 @@ const unMapClick = (event) => {
     popup = undefined;
   }
 };
-onMounted(() => {
-  if (!mapStore.isAMap) {
-    map.value.on('click', onMapClick);
+// 清空
+const handleClear = () => {
+  console.log(overlays);
+  for (let i = 0; i < overlays.length; i++) {
+    if (mapStore.isAMap) {
+      if (Array.isArray(overlays[i])) {
+        overlays[i].forEach((overlay) => {
+          // 移除地图上覆盖物
+          map.remove(overlay);
+        });
+      } else {
+        // 移除地图上覆盖物
+        map.remove(overlays[i]);
+      }
+    } else {
+      if (Array.isArray(overlays[i])) {
+        overlays[i].forEach((overlay) => {
+          // 移除地图上覆盖物
+          mapUtils.getDrawVector().getSource().removeFeature(overlay);
+        });
+      } else {
+        // 移除地图上覆盖物
+        mapUtils.getDrawVector().getSource().removeFeature(overlays[i]);
+      }
+    }
+    if (selectedScope[overlaysData[i].id]) {
+      delete selectedScope[overlaysData[i].id];
+    }
   }
-});
+  overlays = [];
+  overlaysData = [];
+  analysisSpatial();
+};
+watch(
+  () => mapStore.isAMap,
+  () => {
+    handleClear();
+  }
+);
 onBeforeUnmount(() => {
   if (overlays && overlays.length > 0) {
     overlays.forEach((overlay) => {
@@ -586,12 +619,12 @@ onBeforeUnmount(() => {
     .select-box1 {
       width: 103px;
       height: 97px;
-      background: url('@/assets/images/map/spatialAnalysis/selecBox1.png') no-repeat;
+      background: url('@/assets/images/map/spatialAnalysis/selectBox1.png') no-repeat;
     }
     .select-box2 {
       width: 104px;
       height: 58px;
-      background: url('@/assets/images/map/spatialAnalysis/selecBox2.png') no-repeat;
+      background: url('@/assets/images/map/spatialAnalysis/selectBox2.png') no-repeat;
     }
     .select-box1,
     .select-box2 {
@@ -660,4 +693,20 @@ onBeforeUnmount(() => {
     border-radius: 2px;
   }
 }
+.tip-box {
+  position: absolute;
+  top: 0;
+  left: 50%;
+  transform: translateX(-50%);
+  z-index: 11;
+  width: 325px;
+  height: 60px;
+  background: url('@/assets/images/map/spatialAnalysis/tipBox.png') no-repeat;
+  background-size: 100% 100%;
+  padding-left: 60px;
+  padding-top: 20px;
+  .gradient-text {
+    font-size: 18px;
+  }
+}
 </style>

src/views/globalMap/RightMenu/SpatialAnalysis.vue

@@ -64,6 +64,7 @@ const emits = defineEmits(['handleMenu']);
 const keyword = ref('');
 let analysisData = ref({
   townCount: '',
+  townData: [],
   villageCount: '',
   areaSize: '',
   populationSize: '',