revisit
/
DSDSWeb
1
0
Fork 0
Code Issues 3 Pull Requests Packages Projects Releases Wiki Activity

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

This commit is contained in:
hym 2024-09-29 11:33:55 +08:00
parent c3d7f5c5cd
commit b97f5c597f
2 changed files with 53 additions and 24 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

19
src/utils/common.js Normal file
View File

@ -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);
}

58
src/views/home.vue
View File

@ -72,18 +72,15 @@
<li>
<a href="###" @click="clearAll">clear</a>
</li>
<li
v-for="(item, index) in voyageList"
:key="index"
:class="chooseIndex == index ? 'active' : ''"
@click="toChoose(index, item)"
>
<li v-for="(item, index) in voyageList" :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
v-for="(item, index) in visualizationList"
:key="index"
>
<swiper-slide v-for="(item, index) in visualizationList" :key="index">
<div class="pic">
<img :src="item.pic" alt="">
</div>
@ -145,11 +139,11 @@
<span>{{ item.des }}</span>
</div>
</div>
<div class="mask"/>
<div class="mask" />
</swiper-slide>
</swiper>
<div class="swiper-arrow swiper-prev"/>
<div class="swiper-arrow swiper-next"/>
<div class="swiper-arrow swiper-prev" />
<div class="swiper-arrow swiper-next" />
</div>
</div>
</div>
@ -174,8 +168,8 @@
<ul>
<li v-for="(item, index) in dataUpdateList" :key="index" @click="turnDetailPage(item)">
<div class="date">
<p>{{ item.voyage_end_date.slice(8,10) }}</p>
<span>{{ item.voyage_end_date.slice(0,7) }}</span>
<p>{{ item.voyage_end_date.slice(8, 10) }}</p>
<span>{{ item.voyage_end_date.slice(0, 7) }}</span>
</div>
<div class="des">
<p>{{ item.voyage_name }}</p>
@ -186,8 +180,8 @@
<ul>
<li v-for="(item, index) in sampleDataUpdateList" :key="index">
<div class="date">
<p>{{ item.create_time.slice(8,10) }}</p>
<span>{{ item.create_time.slice(0,7) }}</span>
<p>{{ item.create_time.slice(8, 10) }}</p>
<span>{{ item.create_time.slice(0, 7) }}</span>
</div>
<div class="des">
<p>{{ item.dataset_name }}</p>
@ -204,19 +198,19 @@
</div>
<div class="gongju_con">
<ul>
<li @click="turnPage('http://10.0.82.239/analysisTools/index','url')">
<li @click="turnPage('http://10.0.82.239/analysisTools/index', 'url')">
<img src="../../static/images/mofang.png" alt="">
<p>blast基因分析工具</p>
</li>
<li @click="turnPage('http://10.0.82.239/analysisTools/index','url')">
<li @click="turnPage('http://10.0.82.239/analysisTools/index', 'url')">
<img src="../../static/images/mofang.png" alt="">
<p>温盐深分析工具</p>
</li>
<li @click="turnPage('http://10.0.82.239/analysisTools/index','url')">
<li @click="turnPage('http://10.0.82.239/analysisTools/index', 'url')">
<img src="../../static/images/mofang.png" alt="">
<p>影像数据物种智能识别</p>
</li>
<li @click="turnPage('http://10.0.82.239/analysisTools/index','url')">
<li @click="turnPage('http://10.0.82.239/analysisTools/index', 'url')">
<img src="../../static/images/mofang.png" alt="">
<p>海洋物理生态耦合模式分析</p>
</li>
@ -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
@ -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;
}