地图调整

src/components/Map/YztMap/index.vue

@@ -1,30 +1,11 @@
 <template>
-  <div class="map-container">
-<!--    :style="{ width: width, height: height }"-->
-    <div ref="mapRef" id="YztMap" class="map-container"></div>
-    <!-- 右下工具  -->
-    <div v-show="mapState.showScale" class="zoom-text">{{ mapState.zoom }}级</div>
-    <div class="right-tool">
-<!--      &lt;!&ndash; 快捷缩放 &ndash;&gt;-->
-<!--      <QuickZoom :step="mapState.zoom" :min-step="mapState.minZoom" :max-step="mapState.maxZoom" @change-step="setMapZoom" />-->
-<!--      <div class="flex" style="margin-top: 5px">-->
-<!--        <div class="model-btn" @click="switchThreeDimensional">{{ mapState.isThreeDimensional ? '3D' : '2D' }}</div>-->
-<!--        <div class="model-btn" style="margin-left: 5px" @click="changeScaleControl">尺</div>-->
-<!--      </div>-->
-<!--      &lt;!&ndash; 测距工具 &ndash;&gt;-->
-<!--      <div class="model-btn" @click="toggleRangingTool">-->
-<!--        {{ isRanging ? '关闭测距' : '开启测距' }}-->
-<!--      </div>-->
-    </div>
+  <div ref="containerRef" class="map-container">
+    <div ref="mapRef" id="YztMap" class="map-container" :style="{ width: width, height: height }"></div>
   </div>
 </template>
 
 <script setup lang="ts">
 import 'ol/ol.css';
-import { UseOpenLayersMap } from '@/hooks/OpenLayersMap/useOpenLayersMap';
-import QuickZoom from '../quickZoom.vue';
-import { useDrawTool } from "@/hooks/OpenLayersMap/useDrawTool";
-import { MapUtils } from '@/utils/olMap/map';
 import { olMap } from '@/utils/olMap/olMap';
 
 interface Props {
@@ -47,8 +28,9 @@ const mapState = reactive({
   // 是否显示比例尺
   showScale: true
 });
-const width = ref('3483px');
-const height = ref('2140px');
+const containerRef = ref();
+const width = ref('100%');
+const height = ref('100%');
 let yztMap, map;
 
 // 监听是否开启绘制
@@ -86,6 +68,7 @@ const init = () => {
             emits('selectGraphics', data);
           }
         });
+
       }
     },
     // 加载完成事件
@@ -125,10 +108,10 @@ const switchThreeDimensional = () => {
   view.setPitch(pitch);
 };
 const handleResize = () => {
-  // const containerWidth = props.containerWidth * (document.body.clientWidth / 8960);
-  // const containerHeight = props.containerHeight * (document.body.clientHeight / 2520);
-  // width.value = containerWidth + 'px';
-  // height.value = containerHeight + 'px';
+  const containerWidth = containerRef.value.clientWidth * (document.body.clientWidth / 8960);
+  const containerHeight = containerRef.value.clientHeight * (document.body.clientHeight / 2520);
+  width.value = containerWidth + 'px';
+  height.value = containerHeight + 'px';
   yztMap.updateSize();
 };
 // 加载事件

src/components/Map/index.vue

@@ -1,7 +1,6 @@
 <template>
   <div ref="containerRef" class="map-container">
-<!--   :style="{ width: width, height: height }" -->
-    <div id="aMap" class="map-container"></div>
+    <div id="aMap" class="map-container" :style="{ width: width, height: height }"></div>
     <!-- 右下工具  -->
     <div v-show="mapState.showScale" class="zoom-text">{{ mapState.zoom }}级</div>
     <div class="right-tool">
@@ -31,15 +30,13 @@ interface Props {
   color: string;
   drawType: string;
   graphicsType: string;
-  containerWidth: number;
-  containerHeight: number;
 }
 
 const props = withDefaults(defineProps<Props>(), {});
 const emits = defineEmits(['update:drawing', 'selectGraphics', 'unSelectGraphics']);
 const containerRef = ref();
-const width = ref('3483px');
-const height = ref('2140px');
+const width = ref('100%');
+const height = ref('100%');
 
 const mapState = reactive({
   center: [110.93154257997, 21.669064031332],
@@ -187,8 +184,8 @@ const setCenter = (item) => {
 
 defineExpose({ addMarker, addSearchMarker, setCenter, getMarkers, clearMarker, handleUndo });
 const handleResize = () => {
-  const containerWidth = props.containerWidth * (document.body.clientWidth / 8960);
-  const containerHeight = props.containerHeight * (document.body.clientHeight / 2520);
+  const containerWidth = containerRef.value.clientWidth * (document.body.clientWidth / 8960);
+  const containerHeight = containerRef.value.clientHeight * (document.body.clientHeight / 2520);
   width.value = containerWidth + 'px';
   height.value = containerHeight + 'px';
   map.resize();

src/hooks/AMap/useDrawTool.ts

@@ -55,36 +55,15 @@ export function useDrawTool(options: DrawToolOptions) {
         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]);
-      }
+      const path = obj.getPath();
+      debugger
+      // 将AMap.LngLat对象数组转换为经纬度数组
+      const pathArr = path.map((lngLat) => {
+        // 返回经度和纬度的数组
+        return [lngLat.lng, lngLat.lat];
+      });
+      pathArr.push(pathArr[0]);
+      data.path = pathArr;
       overlays.push(obj);
       overlaysData.push(data);
       commit(deepClone(overlaysData));

src/permission.ts

@@ -58,8 +58,8 @@ router.beforeEach(async (to, from, next) => {
   //     NProgress.done();
   //   }
   // }
-  usePermissionStore().setMenu(to);
   next();
+  usePermissionStore().setMenu(to);
 });
 
 router.afterEach(() => {

src/utils/ruoyi.ts

@@ -245,6 +245,10 @@ export const blobValidate = (data: any) => {
   return data.type !== 'application/json';
 };
 
+export const validateNum = (num: any) => {
+  return num !== undefined && num !== null && num !== '' ? num : '-';
+};
+
 export default {
   handleTree
 };

src/views/globalMap/RightMenu/SpatialAnalysis.vue

@@ -3,26 +3,26 @@
   <div class="analyze-data-container">
     <div class="item">
       <div class="item-label">行政镇(个)</div>
-      <div class="item-value">{{ analysisSpatialData.townName }}</div>
+      <div class="item-value">{{ validateNum(analysisData.townCount) }}</div>
     </div>
     <div class="item">
       <div class="item-label">行政村(个)</div>
-      <div class="item-value">{{ analysisSpatialData.townName }}</div>
+      <div class="item-value">{{ validateNum(analysisData.villageCount) }}</div>
     </div>
     <div class="item">
       <div class="item-label">面积(km²)</div>
-      <div class="item-value">{{ analysisSpatialData.area }}</div>
+      <div class="item-value">{{ validateNum(analysisData.area) }}</div>
     </div>
     <div class="item">
       <div class="item-label">常住人口(万)</div>
-      <div class="item-value">{{ analysisSpatialData.populationNum }}</div>
+      <div class="item-value">{{ validateNum(analysisData.populationNum) }}</div>
     </div>
     <div class="item">
       <div class="item-label">GDP(万元)</div>
-      <div class="item-value">{{ analysisSpatialData.expert }}</div>
+      <div class="item-value">{{ validateNum(analysisData.gdp) }}</div>
     </div>
     <div class="flex" style="margin: 20px 0; width: 100%">
-      <el-input v-model="keyword" size="large" style="flex: 1;" />
+      <el-input v-model="keyword" size="large" style="flex: 1" />
       <el-button type="primary" size="large">搜索</el-button>
     </div>
   </div>
@@ -30,39 +30,38 @@
 
 <script lang="ts" setup name="AnalyzeDataDialog">
 import BigNumber from 'bignumber.js';
+import { validateNum } from '@/utils/ruoyi';
 
-interface AnalysisSpatialData {
-  townName: string;
-  area: number;
-  populationNum: number;
-  gdp: number;
-  easyFloodPoint: number;
-  medicalInstitutionNum: number;
-  expert: number;
-}
 interface Props {
   analysisData: any;
 }
 const props = withDefaults(defineProps<Props>(), {});
 const keyword = ref('');
-const analysisSpatialData = computed(() => {
-  const data: AnalysisSpatialData = {
-    townName: '',
-    area: 0,
-    populationNum: '',
-    gdp: '',
-    easyFloodPoint: '',
-    medicalInstitutionNum: '',
-    expert: 0
-  };
-  for (let key in props.analysisData) {
-    data.area = new BigNumber(data.area).plus(props.analysisData[key].area);
-    data.expert = new BigNumber(data.expert).plus(props.analysisData[key].expert);
-    // analysisData[key] = '';
-  }
-  data.area = new BigNumber(data.area).dividedBy(1000000);
-  return data;
-});
+// const analysisSpatialData = computed(() => {
+//   const data = props.analysisData;
+//   const data = {
+//     // 镇数量
+//     townCount: 0,
+//     // 村数量
+//     villageCount: 0,
+//     // 面积
+//     area: 0,
+//     // 常住人口
+//     populationNum: 0,
+//     gdp: 0,
+//     // 物资数
+//     emergencyManagementCount: 0,
+//     // 专家数
+//     emergencyExpertCount: 0
+//   };
+//   for (let key in props.analysisData) {
+//     // data.area = new BigNumber(data.area).plus(props.analysisData[key].area);
+//     // data.expert = new BigNumber(data.expert).plus(props.analysisData[key].expert);
+//     // analysisData[key] = '';
+//   }
+//   data.area = new BigNumber(data.area).dividedBy(1000000);
+//   return data;
+// });
 </script>
 
 <style lang="scss" scoped>

src/views/globalMap/RightMenu/index.vue

@@ -38,12 +38,6 @@ import RoadNetworkVideo from './RoadNetworkVideo.vue';
 import Reservoir from './Reservoir.vue';
 import SpatialAnalysis from '@/views/globalMap/RightMenu/SpatialAnalysis.vue';
 
-interface Props {
-  analysisData: object;
-}
-
-const props = withDefaults(defineProps<Props>(), {});
-
 const menuState = reactive({
   showMenu: false,
   activeIndex: 0,
@@ -57,6 +51,7 @@ const activeName = computed(() => {
   }
   return name;
 });
+const analysisData = ref();
 
 // 点击按钮展开
 const clickExpandBtn = () => {
@@ -82,7 +77,12 @@ const handleMenu = (name) => {
   }
 };
 
-defineExpose({ handleMenu });
+const setAnalysisData = (data) => {
+  analysisData.value = data;
+  handleMenu('空间分析');
+};
+
+defineExpose({ handleMenu, clickContractMenu, setAnalysisData });
 </script>
 
 <style lang="scss" scoped>

src/views/globalMap/index.vue

@@ -1,33 +1,17 @@
 <template>
   <div id="globalMap">
-    <div
-      :class="isComponent ? 'global-map' : 'global-map bg'"
-    >
-<!--      :style="{ width: width ? width : '100%', height: height ? height : '100%' }"-->
-<!--      :style="{ width: width ? width : '8960px', height: height ? height : '2560px'}"-->
-<!-- -->
+    <div :class="isComponent ? 'global-map' : 'global-map bg'">
       <MapLogical v-if="activeMap === 'logical'" :map-data="mapData" />
       <YztMap
         v-else-if="activeMap === 'satellite2'"
         ref="map2Ref"
         v-model:drawing="mouseToolState.drawing"
-        :activeMap="activeMap"
+        :active-map="activeMap"
         :color="mouseToolState.color"
         :draw-type="mouseToolState.drawType"
         :graphics-type="mouseToolState.graphicsType"
-        :container-width="isComponent ? 3483 : 8960"
-        :container-height="isComponent ? 2140 : 2520"
-        @selectGraphics="analysisSpatial"
+        @select-graphics="analysisSpatial"
       />
-      <!--    <YMap-->
-      <!--      v-else-if="activeMap === 'satellite2'"-->
-      <!--      ref="map2Ref"-->
-      <!--      v-model:drawing="mouseToolState.drawing"-->
-      <!--      :color="mouseToolState.color"-->
-      <!--      :draw-type="mouseToolState.drawType"-->
-      <!--      :graphics-type="mouseToolState.graphicsType"-->
-      <!--      :active-map="activeMap"-->
-      <!--    />-->
       <Map
         v-else
         ref="mapRef"
@@ -36,25 +20,15 @@
         :draw-type="mouseToolState.drawType"
         :graphics-type="mouseToolState.graphicsType"
         :active-map="activeMap"
-        :container-width="width"
-        :container-height="height"
-        @selectGraphics="analysisSpatial"
-        @unSelectGraphics="unSelectGraphics"
+        @select-graphics="analysisSpatial"
+        @un-select-graphics="unSelectGraphics"
       />
       <!--左侧菜单-->
-      <LeftMenu
-        style="position: absolute; top: 20px; left: 20px"
-        @click-menu="clickMenu"
-        @selectSearchMarker="selectSearchMarker"
-      />
+      <LeftMenu style="position: absolute; top: 20px; left: 20px" @click-menu="clickMenu" @select-search-marker="selectSearchMarker" />
       <!--右侧菜单-->
-      <RightMenu ref="rightMenuRef" :analysisData="selectedScope" />
+      <RightMenu ref="rightMenuRef" :analysis-data="selectedScope" />
       <!--更换地图类型-->
-      <SwitchMapTool
-        :active-map="activeMap"
-        class="tool-box"
-        @switchMap="switchMap"
-      />
+      <SwitchMapTool :active-map="activeMap" class="tool-box" @switch-map="switchMap" />
       <!--时间轴-->
       <TimeAxis />
       <DrawTools
@@ -66,36 +40,23 @@
         class="absoluteTool"
         @undo="undo"
       />
-<!--      <AnalyzeDataDialog v-if="analysisSpatialDataShow" :selectedScope="selectedScope" />-->
-<!--      <div v-if="showDialog" class="box">-->
-<!--        <div v-for="(item, index) in markerList" :key="index" @click="toAddress(item)">{{item.name}}</div>-->
-<!--      </div>-->
     </div>
   </div>
 </template>
 
 <script lang="ts" setup name="globalMap">
 import Map from '@/components/Map/index.vue';
-// import YztMap from '@/components/Map/YztMap/index.vue';
-import YMap from '@/components/Map/YMap.vue';
-import Dialog from '@/components/Dialog/index2.vue';
+import YztMap from '@/components/Map/YztMap/index.vue';
 import MapLogical from '@/components/Map/MapLogical.vue';
 import { iconList, logicalData } from './data/mapData';
 import SwitchMapTool from '@/views/globalMap/SwitchMapTool.vue';
 import LeftMenu from './LeftMenu.vue';
 import TimeAxis from '@/components/TimeAxis/index.vue';
 import DrawTools from '@/views/globalMap/DrawTools.vue';
-import { countCircleArea, countRectangleArea } from '@/utils/geometryUtil';
+import { countCircleArea } from '@/utils/geometryUtil';
 import { deepClone } from '@/utils';
-import {
-  getEmergencyExpertNum,
-  getEmergencyExpertNumRound,
-  getRescueMateria,
-  getSpatialAnalysis
-} from '@/api/globalMap';
-import { listMenu } from '@/api/system/menu';
+import { getEmergencyExpertNumRound, getRescueMateria, getSpatialAnalysis } from '@/api/globalMap';
 import RightMenu from './RightMenu/index.vue';
-import { getWaterList } from '@/api/globalMap/reservoir';
 
 interface Props {
   isComponent?: boolean;
@@ -164,9 +125,9 @@ const clickMenu = (item) => {
     addMarkers(item);
   }
   if (['空间分析', '江湖河库', '路网视频', '水库监测', '河道监测'].includes(item.name)) {
-    if (item.checked) {
-      rightMenuRef.value.handleMenu(item.name);
-    }
+    // if (item.checked) {
+    //   rightMenuRef.value.handleMenu(item.name);
+    // }
     if (item.name === '江湖河库') {
       // getWaterList().then((res) => {
       //   debugger;
@@ -207,7 +168,6 @@ interface AnalysisSpatialData {
   medicalInstitutionNum: string;
   expert: string;
 }
-let analysisSpatialDataShow = ref(false);
 let selectedScope = reactive({});
 // 空间分析数据
 const analysisSpatialData = reactive<AnalysisSpatialData>({
@@ -226,47 +186,27 @@ const analysisSpatial = (data, len?: string) => {
   if (selectedScope[data.id]) {
     delete selectedScope[data.id];
     if (JSON.stringify(selectedScope) === '{}') {
-      analysisSpatialDataShow.value = false;
+      rightMenuRef.value.clickContractMenu();
     }
     return;
   }
-  if (data.type === 'circle') {
-    const params = {
-      location: `POINT(${data.center.join(' ')})`,
-      radius: data.radius.toString()
-    };
-    getEmergencyExpertNumRound(params).then((res) => {
-      selectedScope[data.id] = deepClone(analysisSpatialData);
-      selectedScope[data.id].area = countCircleArea(data.center, data.radius);
-      selectedScope[data.id].expert = res.data.list[0].expertNum?.toString();
-      analysisSpatialDataShow.value = true;
-    });
-  } else {
-    let location = [];
-    if (data.path && data.path.length > 1) {
-      data.path.forEach((item) => {
-        location.push({
-          x: item[0],
-          y: item[1]
-        });
-      });
+  let location = [];
+  if (data.path && data.path.length > 1) {
+    data.path.forEach((item) => {
       location.push({
-        x: data.path[0][0],
-        y: data.path[1][1]
+        x: item[0],
+        y: item[1]
       });
-    }
-    getSpatialAnalysis({ location }).then((res) => {
-      selectedScope[data.id] = deepClone(analysisSpatialData);
-      // selectedScope[data.id].area = countRectangleArea(pathArr);
-      selectedScope[data.id].expert = res.data.list[0].expertNum?.toString();
-      analysisSpatialDataShow.value = true;
     });
   }
+  getSpatialAnalysis({ location }).then((res) => {
+    rightMenuRef.value.setAnalysisData(res.data);
+  });
 };
 // 取消显示
 const unSelectGraphics = (data) => {
   delete selectedScope[data.id];
-  analysisSpatialDataShow.value = false;
+  rightMenuRef.value.clickContractMenu();
 };
 </script>