地图自适应调整

src/components/Map/MapLogical.vue

@@ -1,5 +1,8 @@
 <template>
   <div class="mapContainer">
+    <div class="bg">
+
+    </div>
     <div class="chassis"></div>
     <div :style="{ width: mapState[mapState.active].width + 'px', height: mapState[mapState.active].height + 'px', position: 'relative' }">
       <img :src="mapState[mapState.active].img" alt="" />

src/components/Map/index.vue

@@ -1,6 +1,6 @@
 <template>
-  <div class="map-container">
-    <div id="aMap" class="map-container"></div>
+  <div ref="containerRef" class="map-container">
+    <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">
@@ -30,10 +30,15 @@ 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 mapState = reactive({
   center: [110.93154257997, 21.669064031332],
@@ -93,6 +98,7 @@ const { getAMap, getMap, switchMap, addMarker, addSearchMarker, clearMarker, get
     map.on('zoomchange', zoomChangeHandler);
     initMouseTool({ map, AMap });
     initRuler(map, AMap);
+    handleResize()
   }
 });
 // 监听地图类型变化
@@ -179,12 +185,22 @@ 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);
+  width.value = containerWidth + 'px'
+  height.value = containerHeight + 'px'
+  map.resize();
+}
+onMounted(() => {
+  window.addEventListener('resize', handleResize);
+})
 // 卸载事件
 onUnmounted(() => {
   if (map) {
     map.off('zoomchange', zoomChangeHandler);
   }
+  window.removeEventListener('resize', handleResize);
 });
 </script>
 
@@ -194,7 +210,7 @@ onUnmounted(() => {
   height: 100%;
   position: relative;
   .zoom-text {
-    position: absolute;
+    position: fixed;
     bottom: 0;
     right: 170px;
     color: #eaf3fc;
@@ -202,7 +218,7 @@ onUnmounted(() => {
     font-family: 'SourceHanSansCN';
   }
   .right-tool {
-    position: absolute;
+    position: fixed;
     bottom: 50px;
     right: 5px;
   }

src/views/emergencyCommandMap/LeftSection.vue

@@ -296,6 +296,7 @@ onMounted(() => {
           .address-text {
             font-size: 32px;
             color: #a8ccde;
+            width: 500px;
           }
         }
       }

src/views/emergencyCommandMap/index.vue

@@ -24,7 +24,8 @@ onMounted(() => {
       dw: 8960,
       dh: 2520,
       el: '#dashboard-container',
-      resize: true
+      resize: true,
+      ignore: ["#aMap"]
     },
     false
   );

src/views/globalMap/SwitchMapTool.vue

@@ -139,4 +139,7 @@ const handleExpand = () => {
   width: 100%;
   transform: translateX(0);
 }
+.fixed {
+  position: fixed;
+}
 </style>

src/views/globalMap/index.vue

@@ -34,6 +34,8 @@
         :draw-type="mouseToolState.drawType"
         :graphics-type="mouseToolState.graphicsType"
         :active-map="activeMap"
+        :container-width="isComponent ? 3483 : 8960"
+        :container-height="isComponent ? 2140 : 2520"
         @selectGraphics="analysisSpatial"
         @unSelectGraphics="unSelectGraphics"
       />
@@ -46,7 +48,10 @@
       <!--右侧菜单-->
       <RightMenu ref="rightMenuRef" />
       <!--更换地图类型-->
-      <SwitchMapTool :active-map="activeMap" class="tool-box" @switchMap="switchMap" />
+      <SwitchMapTool
+        :active-map="activeMap"
+        :class="isComponent || activeMap === 'logical' || activeMap === 'satellite2' ? 'tool-box' : 'tool-box fixed'"
+        @switchMap="switchMap" />
       <!--时间轴-->
       <TimeAxis />
       <DrawTools
@@ -55,7 +60,7 @@
         v-model:color="mouseToolState.color"
         v-model:drawType="mouseToolState.drawType"
         v-model:graphicsType="mouseToolState.graphicsType"
-        class="absoluteTool"
+        :class="isComponent || activeMap === 'logical' || activeMap === 'satellite2' ? 'absoluteTool' : 'absoluteTool fixed'"
         @undo="undo"
       />
 <!--      <AnalyzeDataDialog v-if="analysisSpatialDataShow" :selectedScope="selectedScope" />-->
@@ -271,15 +276,16 @@ const unSelectGraphics = (data) => {
 };
 onMounted(() => {
   if (!props.isComponent) {
-    // autofit.init(
-    //   {
-    //     dw: 8960,
-    //     dh: 2520,
-    //     el: '#globalMap',
-    //     resize: true
-    //   },
-    //   false
-    // );
+    autofit.init(
+      {
+        dw: 8960,
+        dh: 2520,
+        el: '#globalMap',
+        resize: true,
+        ignore: ["#aMap"]
+      },
+      false
+    );
   }
 });
 onUnmounted(() => {
@@ -332,4 +338,7 @@ onUnmounted(() => {
     cursor: pointer;
   }
 }
+.fixed {
+  position: fixed !important;
+}
 </style>

src/views/routineCommandMap/index.vue

@@ -21,7 +21,8 @@ onMounted(() => {
       dw: 8960,
       dh: 2520,
       el: '#dashboard-container',
-      resize: true
+      resize: true,
+      ignore: ["#aMap"]
     },
     false
   );
@@ -44,6 +45,7 @@ onUnmounted(() => {
     padding: 69px;
     display: flex;
     height: calc(2560px - 207px);
+    overflow: hidden;
   }
 }
 </style>