当我点击弹窗弹出地图之后cesium 鼠标惯性消失了,原因是我初始化地图上已经操作过地图,我想知道是否有办法将鼠标惯性事件继续保留在后续的地图操作上。
我自己写了一个测试的例子在下面,麻烦知道的大佬帮忙解决一下。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>测试多视口下cesium是否卡顿</title>
<script src="../lib/supermap/Cesium.js"></script>
<link href="../lib/supermap/Widgets/widgets.css" rel="stylesheet">
<body>
<div onclick="openMap()">打开三视口</div>
<div id="viewer"></div>
<div id="map" style="display: none" >
</div>
<script>
function createBlankViewer(viewerElement,options) {
const defaultOptions = {
geocoder: false, // 位置查找工具
homeButton: false, // 视角返回初始位置
sceneModePicker: false, // 选择视角的模式(球体、平铺、斜视平铺)
navigationHelpButton: false, // 导航帮助(手势,鼠标)
baseLayerPicker: false,
infoBox: false,
animation: false,
fullscreenButton: false,
timeline: false,
// 注销掉默认的图层
// imageryProvider: new SingleTileImageryProvider({
// url: process.env.BASE_URL + 'lib/cesium/map_bg.jpg',
// }),
//resolutionScale:1,
contextOptions: {
//webgl截屏设置
webgl: {
alpha: true,
depth: true,
stencil: true,
antialias: true,
premultipliedAlpha: true,
//通过canvas.toDataURL()实现截图需要将该项设置为true
preserveDrawingBuffer: true,
failIfMajorPerformanceCaveat: true,
},
},
navigation:false,
};
const option =
typeof options === 'object'
? { ...defaultOptions, ...options }
: defaultOptions;
const viewer = new Cesium.Viewer(viewerElement, option);
// @ts-expect-error 调整内部属性。
// viewer._cesiumWidget._creditContainer.style.display = 'none';
//关闭掉太阳月亮
// viewer.scene.sun.show = false;
// viewer.scene.moon.show = false;
//关闭天空盒子
//viewer.scene.skyBox.show = false
// viewer.cesiumWidget.screenSpaceEventHandler.removeInputAction(Cesium.ScreenSpaceEventType.LEFT_DOUBLE_CLICK);
// viewer.cesiumWidget.screenSpaceEventHandler.removeInputAction(Cesium.ScreenSpaceEventType.LEFT_CLICK);
return viewer;
}
function openMap(){
document.getElementById("map").style= "display:block"
}
/**
* 操作:复现bug 1. 先转动地球 2.点击打开三视口
*
* 测试结果,当第一个地图操作过之后惯性事件就会被占用,在操作其他地图惯性事件就会丢失掉了,所以不是代码原因的卡顿,而是超图固有的bug
*/
window.onload = function(){
let viewer = createBlankViewer(document.getElementById("viewer"));
let map = new Cesium.Viewer(document.getElementById("map"));
map.scene.debugShowFramesPerSecond = false;
map.scene.hdrEnabled = false;
map.scene.sun.show = true;
map.scene.multiViewportMode = 4;
}
</script>
<style>
#viewer{
width: 100vw;
height: 100vh;
}
#map{
top: 0px;
position: fixed;
width: 100vw;
height: 100vh;
z-index: 200;
}
</style>
</body>
</html>