改写 Cesium 原生鼠标滚轮事件，将地图缩放改为按下 Ctrl + 鼠标滚轮。

src/utils/common.js

@@ -0,0 +1,19 @@
+export function modifyCesiumMouseWheel(viewer) {
+    // 地图缩放改为按下 Ctrl + 鼠标滚轮
+    viewer.scene.screenSpaceCameraController.zoomEventTypes = [{ eventType: Cesium.CameraEventType.WHEEL, modifier: Cesium.KeyboardEventModifier.CTRL }];
+
+    // 改写 Cesium 原生鼠标滚轮事件
+    const handler = new Cesium.ScreenSpaceEventHandler(viewer.scene.canvas);
+    handler.setInputAction((event) => {
+        if (event < 0) {
+            window.scrollBy({ left: 0, top: 15, behavior: 'auto' });
+        } else {
+            window.scrollBy({ left: 0, top: -15, behavior: 'auto' });
+        }
+    }, Cesium.ScreenSpaceEventType.WHEEL);
+
+    // 鼠标移动时显示提示信息
+    handler.setInputAction((event) => {
+        document.getElementById('mouseWheelTip').style.display = '';
+    }, Cesium.ScreenSpaceEventType.MOUSE_MOVE);
+}

src/views/home.vue

@@ -72,18 +72,15 @@
             <li>
               <a href="###" @click="clearAll">clear</a>
             </li>
-            <li
+            <li v-for="(item, index) in voyageList" :key="index" :class="chooseIndex == index ? 'active' : ''"
-              v-for="(item, index) in voyageList"
+              @click="toChoose(index, item)">
-              :key="index"
-              :class="chooseIndex == index ? 'active' : ''"
-              @click="toChoose(index, item)"
-            >
               <a href="###">{{ item.voyage_name }}</a>
             </li>
           </ul>
         </div>
-        <div id="cesiumContainer" ref="cesiumContainer" style="height: 100%;width:100%;">
+        <div id="cesiumContainer" ref="cesiumContainer" onmouseleave="document.getElementById('mouseWheelTip').style.display = 'none'" style="height: 100%;width:100%;">
           <div class="son" style="display: none;">弹框插槽</div>
+          <div id="mouseWheelTip" style="display: none;">地图缩放：按下 Ctrl + 鼠标滚轮</div>
         </div>
       </div>
     </div>
@@ -131,10 +128,7 @@
           <div class="swiper-visualization wow fadeInUp">
             <div class="swiper-visualization-box">
               <swiper ref="visualizationSwiper" :options="swiperOptions">
-                <swiper-slide
+                <swiper-slide v-for="(item, index) in visualizationList" :key="index">
-                  v-for="(item, index) in visualizationList"
-                  :key="index"
-                >
                   <div class="pic">
                     <img :src="item.pic" alt="">
                   </div>
@@ -234,6 +228,10 @@ import { getVoyage, getVoyageLine, getParamsList, statisticsNums } from '../api/
 import { swiper, swiperSlide } from 'vue-awesome-swiper'
 import 'swiper/swiper-bundle.css'
 import { sampleDatasetList, voyageRegList } from '@/api/dataTransfer'
+import {
+  modifyCesiumMouseWheel
+} from '@/utils/common'
+
 const Cesium = window.Cesium
 
 export default {
@@ -372,6 +370,9 @@ export default {
       this.viewer.scene.globe.showGroundAtmosphere = false
       this.viewer.scene.postProcessStages.fxaa.enabled = true
       
+      // 改写 Cesium 原生鼠标滚轮事件，地图缩放改为按下 Ctrl + 鼠标滚轮
+      modifyCesiumMouseWheel(this.viewer);
+
       // 不显示底图
       this.viewer.imageryLayers.get(0).show = false
 
@@ -767,6 +768,7 @@ export default {
         height: 100%;
       }
     }
+
     .cover {
       width: 100%;
       height: 800px;
@@ -1257,6 +1259,14 @@ export default {
   z-index: 1000;
 }
 
+#mouseWheelTip{
+  position: absolute;
+  left: 5px;
+  bottom: 5px;
+  z-index: 100;
+  color: #fff;
+}
+
 .cesium-viewer-bottom {
   display: none !important;
 }