空间分析 调整

src/types/components.d.ts

@@ -48,6 +48,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']
@@ -58,6 +59,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']
     ElSubMenu: typeof import('element-plus/es')['ElSubMenu']
     ElSwitch: typeof import('element-plus/es')['ElSwitch']

src/views/globalMap/RightMenu/DrawTools.vue

@@ -1,5 +1,5 @@
 <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">
@@ -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',
@@ -238,7 +240,6 @@ const onDraw = (event) => {
   data.path = pathArr;
   overlays.push(obj);
   overlaysData.push(data);
-  commit(deepClone(overlaysData));
   // 右击进入编辑
   obj.on('rightclick', handleRightClick);
   selectedScope[data.id] = data;
@@ -283,7 +284,6 @@ const onDraw2 = (event) => {
   }
   overlays.push(feature);
   overlaysData.push(data);
-  commit(deepClone(overlaysData));
   // 右击进入编辑
   map.on('contextmenu', handleRightClick2);
   selectedScope[data.id] = data;
@@ -371,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;
       }
     }
@@ -481,11 +480,12 @@ const handleClear = () => {
   overlaysData = [];
   analysisSpatial();
 };
-onMounted(() => {
-  if (!mapStore.isAMap) {
-    map.value.on('click', onMapClick);
+watch(
+  () => mapStore.isAMap,
+  () => {
+    handleClear();
   }
-});
+);
 onBeforeUnmount(() => {
   if (overlays && overlays.length > 0) {
     overlays.forEach((overlay) => {
@@ -619,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 {
@@ -693,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>