修改实时地图

src/views/mapPage/realTimeMap/components/indexPage.vue

@@ -6,8 +6,10 @@
       height: heightVal + 'px',
       cursor: isDrag ? 'pointer' : 'default',
       scale: isSizeRadio,
-      transformOrigin: '0 0'
+      transformOrigin: '0 0',
+      width: widthVal + 'px'
     }"
+    @wheel="handleWheel"
   >
     <div
       :class="isDrag ? 'indexpage-container-active' : 'indexpage-container'"
@@ -731,7 +733,9 @@ const emitParent = () => {
 }
 //获取扫描图
 const getMapData = async (item) => {
-  // console.log('============', JSON.parse(item.yamlJson))
+  console.log('===22=========', JSON.parse(item.yamlJson))
+  widthVal.value = JSON.parse(item.yamlJson).width
+  heightVal.value = JSON.parse(item.yamlJson).height
   testCarList.value = []
   nowObject.value = JSON.parse(JSON.stringify(item))
   nowObject.value.showYamlJson = JSON.parse(item.yamlJson)
@@ -811,7 +815,32 @@ const getMapLineList = () => {
     lineList.value = res
   })
 }
+//鼠标滚轮
+const handleWheel = (event) => {
+  // 判断 Ctrl 键是否被按下
+  if (event.ctrlKey) {
+    // 阻止默认的滚动行为
+    event.preventDefault()
 
+    // 根据滚轮滚动方向调整缩放比例
+    if (event.deltaY < 0) {
+      // 向上滚动，放大
+      //放大
+      if (isSizeRadio.value < 4) {
+        isSizeRadio.value += 0.2
+      } else {
+        message.warning('不能在放大了')
+      }
+    } else {
+      //缩小
+      if (isSizeRadio.value > 0.2) {
+        isSizeRadio.value -= 0.2
+      } else {
+        message.warning('不能在缩小了')
+      }
+    }
+  }
+}
 // 获取图片尺寸
 const getImageSize = (url) => {
   return new Promise((resolve, reject) => {
@@ -935,8 +964,8 @@ onUnmounted(() => {
 .affix-container {
   width: 100%;
   position: relative;
-  overflow: hidden;
+  // overflow: hidden;
-  background: rgba(0, 0, 0, 0.8);
+  // background: rgba(0, 0, 0, 0.8);
 }
 .indexpage-container {
   width: 100%;

src/views/mapPage/realTimeMap/index.vue

@@ -189,6 +189,6 @@ onMounted(() => {
 
 <style lang="scss" scoped>
 .main-content {
-  background-color: #fff;
+  // background-color: #fff;
 }
 </style>