地图适应

src/components/Map/YztMap/index.vue

@@ -15,6 +15,7 @@ interface Props {
   drawType: string;
   graphicsType: string;
 }
+const containerScale = inject('containerScale');
 const props = withDefaults(defineProps<Props>(), {});
 const emits = defineEmits(['update:drawing', 'selectGraphics']);
 
@@ -108,8 +109,8 @@ const switchThreeDimensional = () => {
   view.setPitch(pitch);
 };
 const handleResize = () => {
-  const containerWidth = containerRef.value.clientWidth * (document.body.clientWidth / 8960);
-  const containerHeight = containerRef.value.clientHeight * (document.body.clientHeight / 2520);
+  const containerWidth = containerRef.value.clientWidth * containerScale().scaleX;
+  const containerHeight = containerRef.value.clientHeight * containerScale().scaleY;
   width.value = containerWidth + 'px';
   height.value = containerHeight + 'px';
   yztMap.updateSize();

src/components/Map/index.vue

@@ -45,6 +45,7 @@ interface Props {
   pointType: PointType[];
 }
 
+const containerScale = inject('containerScale');
 const props = withDefaults(defineProps<Props>(), {});
 const { proxy } = getCurrentInstance() as ComponentInternalInstance;
 const { point_type } = toRefs<any>(proxy?.useDict('point_type'));
@@ -174,7 +175,6 @@ const handlePointDetails = (data) => {
       }
       showInfo(content, [data.longitude, data.latitude]);
     }
-
   });
 };
 // 监听地图类型变化
@@ -262,8 +262,8 @@ const setCenter = (item) => {
 
 defineExpose({ addMarker, addSearchMarker, setCenter, getMarkers, clearMarker, handleUndo });
 const handleResize = () => {
-  const containerWidth = containerRef.value.clientWidth * (document.body.clientWidth / 8960);
-  const containerHeight = containerRef.value.clientHeight * (document.body.clientHeight / 2520);
+  const containerWidth = containerRef.value.clientWidth * containerScale().scaleX;
+  const containerHeight = containerRef.value.clientHeight * containerScale().scaleY;
   width.value = containerWidth + 'px';
   height.value = containerHeight + 'px';
   map.resize();
@@ -320,14 +320,14 @@ onUnmounted(() => {
   :deep(.amap-scalecontrol) {
     left: unset !important;
     background-color: unset !important;
-    right: 170px;
-    bottom: 30px !important;
+    right: vw(170);
+    bottom: vw(0) !important;
   }
   :deep(.amap-scale-text) {
     text-align: left !important;
     padding-left: 20px;
     color: #eaf3fc;
-    font-size: 25.73px;
+    font-size: vw(25.73);
     font-family: 'SourceHanSansCN';
   }
   :deep(.amap-scale-edgeleft),

src/components/Map/map.scss

@@ -1,3 +1,14 @@
+@use "sass:math";
+$vw_base: 8960;
+$vh_base: 2520;
+
+@function vw($px) {
+  @return math.div($px, $vw_base) * 100vw;
+}
+
+@function vw2($px1, $px2) {
+  @return calc(#{$px1} - (#{$px2} / #{$vw_base}) * 100vw);
+}
 
 :deep(.point-info) {
   width: 200px;

src/utils/index.ts

@@ -316,3 +316,47 @@ export const removeClass = (ele: HTMLElement, cls: string) => {
 export const isExternal = (path: string) => {
   return /^(https?:|http?:|mailto:|tel:)/.test(path);
 };
+
+export const getTransformScale = (element) => {
+  // 获取元素的transform属性值
+  const transform = window.getComputedStyle(element).transform || 'none';
+
+  // 检查是否包含scale变换
+  if (transform === 'none') {
+    return { scaleX: 1, scaleY: 1 };
+  }
+
+  // 正则表达式用于匹配scale变换的部分
+  // 注意：这个正则表达式假设transform属性只包含一个scale变换，或者scale变换是第一个或最后一个
+  // 在更复杂的场景中，你可能需要更复杂的解析逻辑
+  const matrixValues = transform.match(
+    /^matrix\((\d+\.?\d*e?[\-+]?\d*),\s*(\d+\.?\d*e?[\-+]?\d*),\s*(\d+\.?\d*e?[\-+]?\d*),\s*(\d+\.?\d*e?[\-+]?\d*),\s*(\d+\.?\d*e?[\-+]?\d*),\s*(\d+\.?\d*e?[\-+]?\d*)\)$/
+  );
+
+  if (matrixValues) {
+    // 矩阵值：a, b, c, d, tx, ty
+    // 对于2D的scale变换，a = scaleX, d = scaleY
+    const scaleX = parseFloat(matrixValues[1]);
+    const scaleY = parseFloat(matrixValues[4]);
+    return { scaleX, scaleY };
+  }
+
+  // 如果transform属性包含多个变换，并且你想提取scale，你可能需要更复杂的逻辑
+  // 这里我们简单处理只包含单个scale变换的情况
+  const scaleMatch = transform.match(/scale\(([^)]+)\)/);
+  if (scaleMatch) {
+    // 如果scale变换是统一的（即scaleX = scaleY），它将是一个单独的数字
+    // 否则，它将是一个由逗号分隔的两个数字（scaleX, scaleY）
+    const scaleValues = scaleMatch[1].split(',').map(Number);
+    if (scaleValues.length === 1) {
+      // 统一的缩放比例
+      return { scaleX: scaleValues[0], scaleY: scaleValues[0] };
+    } else if (scaleValues.length === 2) {
+      // 分别的scaleX和scaleY
+      return { scaleX: scaleValues[0], scaleY: scaleValues[1] };
+    }
+  }
+
+  // 如果没有找到scale变换，返回默认的缩放比例
+  return { scaleX: 1, scaleY: 1 };
+};

src/views/emergencyCommandMap/index.vue

@@ -1,5 +1,5 @@
 <template>
-  <div id="dashboard-container" class="dashboard-container">
+  <div id="dashboard-container" ref="containerRef" class="dashboard-container">
     <HeaderSection />
     <div class="dashboard-content">
       <LeftSection />
@@ -15,9 +15,13 @@ import LeftSection from './LeftSection/index.vue';
 import RightSection from './RightSection/index.vue';
 import MiddleSection from './MiddleSection.vue';
 import autofit from 'autofit.js';
+import { getTransformScale } from '@/utils';
 
+const containerRef = ref();
+let scale = ref({ scaleX: 1, scaleY: 1 });
+provide('containerScale', () => scale.value);
 onMounted(() => {
-  autofit.init(
+  const a = autofit.init(
     {
       dw: 8960,
       dh: 2520,
@@ -27,8 +31,8 @@ onMounted(() => {
     },
     false
   );
+  scale.value = getTransformScale(containerRef.value);
 });
-
 onUnmounted(() => {
   autofit.off();
 });

src/views/globalMap/index.vue

@@ -56,7 +56,7 @@ import LeftMenu from './LeftMenu.vue';
 import TimeAxis from '@/components/TimeAxis/index.vue';
 import DrawTools from '@/views/globalMap/DrawTools.vue';
 import { deepClone } from '@/utils';
-import { getPointInfo, getSpatialAnalysis } from '@/api/globalMap';
+import { getPointInfo } from '@/api/globalMap';
 import RightMenu from './RightMenu/index.vue';
 import { PointType } from '@/api/globalMap/type';
 

src/views/globalMapPage/index.vue

@@ -1,9 +1,9 @@
 <template>
-  <div id="dashboard-container">
+  <div id="dashboard-container" ref="containerRef">
     <div class="dashboard-container">
       <HeaderSection />
       <div class="dashboard-content">
-        <GlobalMap width="8798" height="2182" />
+        <GlobalMap width="8798" height="2182" :containerScale="scale" />
       </div>
       <FooterSection style="position: absolute; bottom: 0; left: 0" />
     </div>
@@ -13,9 +13,13 @@
 <script lang="ts" setup name="globalMapPage">
 import GlobalMap from '@/views/globalMap/index.vue';
 import autofit from 'autofit.js';
+import { getTransformScale } from '@/utils';
 
+const containerRef = ref();
+let scale = ref({ scaleX: 1, scaleY: 1 });
+provide('containerScale', () => scale.value);
 onMounted(() => {
-  autofit.init(
+  const a = autofit.init(
     {
       dw: 8960,
       dh: 2520,
@@ -25,8 +29,8 @@ onMounted(() => {
     },
     false
   );
+  scale.value = getTransformScale(containerRef.value);
 });
-
 onUnmounted(() => {
   autofit.off();
 });

src/views/routineCommandMap/index.vue

@@ -1,5 +1,5 @@
 <template>
-  <div id="dashboard-container" class="dashboard-container">
+  <div id="dashboard-container" ref="containerRef" class="dashboard-container">
     <HeaderSection />
     <div class="dashboard-content">
       <LeftSection />
@@ -14,18 +14,23 @@ import LeftSection from './LeftSection.vue';
 import RightSection from './RightSection/index.vue';
 import MiddleSection from './MiddleSection.vue';
 import autofit from 'autofit.js';
+import { getTransformScale } from '@/utils';
 
+const containerRef = ref();
+let scale = ref({ scaleX: 1, scaleY: 1 });
+provide('containerScale', () => scale.value);
 onMounted(() => {
-  autofit.init(
+  const a = autofit.init(
     {
       dw: 8960,
       dh: 2520,
       el: '#dashboard-container',
       resize: false,
-      ignore: ['#aMap', '#YztMap', '#map']
+      ignore: ['#aMap', '#YztMap']
     },
     false
   );
+  scale.value = getTransformScale(containerRef.value);
 });
 
 onUnmounted(() => {