From b97f5c597f77147f726da23ee5b84e1530cf9263 Mon Sep 17 00:00:00 2001 From: hym Date: Sun, 29 Sep 2024 11:33:55 +0800 Subject: [PATCH] =?UTF-8?q?=E6=94=B9=E5=86=99=20Cesium=20=E5=8E=9F?= =?UTF-8?q?=E7=94=9F=E9=BC=A0=E6=A0=87=E6=BB=9A=E8=BD=AE=E4=BA=8B=E4=BB=B6?= =?UTF-8?q?=EF=BC=8C=E5=B0=86=E5=9C=B0=E5=9B=BE=E7=BC=A9=E6=94=BE=E6=94=B9?= =?UTF-8?q?=E4=B8=BA=E6=8C=89=E4=B8=8B=20Ctrl=20+=20=E9=BC=A0=E6=A0=87?= =?UTF-8?q?=E6=BB=9A=E8=BD=AE=E3=80=82?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/utils/common.js | 19 +++++++++++++++ src/views/home.vue | 58 ++++++++++++++++++++++++++------------------- 2 files changed, 53 insertions(+), 24 deletions(-) create mode 100644 src/utils/common.js diff --git a/src/utils/common.js b/src/utils/common.js new file mode 100644 index 0000000..6b138f3 --- /dev/null +++ b/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); +} diff --git a/src/views/home.vue b/src/views/home.vue index 132b7be..373d5db 100644 --- a/src/views/home.vue +++ b/src/views/home.vue @@ -72,18 +72,15 @@
  • clear
    • -
  • +
  • {{ item.voyage_name }}
    • -
    +
    +
    @@ -131,10 +128,7 @@
    - +
    @@ -145,11 +139,11 @@ {{ item.des }}
    -
    +
    -
    -
    +
    +
    @@ -174,8 +168,8 @@
    • -

      {{ item.voyage_end_date.slice(8,10) }}

      - {{ item.voyage_end_date.slice(0,7) }} +

      {{ item.voyage_end_date.slice(8, 10) }}

      + {{ item.voyage_end_date.slice(0, 7) }}

      {{ item.voyage_name }}

      @@ -186,8 +180,8 @@
      • -

        {{ item.create_time.slice(8,10) }}

        - {{ item.create_time.slice(0,7) }} +

        {{ item.create_time.slice(8, 10) }}

        + {{ item.create_time.slice(0, 7) }}

        {{ item.dataset_name }}

        @@ -204,19 +198,19 @@
          -
        • +

        • blast基因分析工具

          • -
        • +

        • 温盐深分析工具

          • -
        • +

        • 影像数据物种智能识别

          • -
        • +

        • 海洋物理生态耦合模式分析

          • @@ -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 { @@ -371,6 +369,9 @@ export default { this.viewer.scene._sunBloom = false 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 @@ -430,7 +431,7 @@ export default { zIndex: 1000, width: 2, // 设置线条的材质（颜色） - material: Cesium.Color.fromRandom({alpha: 0.5}) + material: Cesium.Color.fromRandom({ alpha: 0.5 }) } }) this.viewer.camera.setView({ @@ -456,7 +457,7 @@ export default { this.viewer.entities.removeAll() }, // 自动跳转到实体位置 - autoZoom(){ + autoZoom() { this.viewer.zoomTo(this.viewer.entities) }, // 全部轨迹 @@ -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; }