Cesium的地形图中,滚动鼠标滚轮会出现Cesiumviewer进入地形之下,出现格网
如下图所示
在设置了 scene.screenSpaceCameraController.minimumZoomDistance=100;
之后,在地形还在加载的过程中旋转地球,依然会出现上述问题。
注意:版本号1.47.0测试成功 其他1.XX版本相差不太大
先是会出现部分格网,但是会加载对应的视角的地形。之前是一直出现格网不会加载地形的。效果受电脑配置影响。
监控相机的pitch值
pitch>0的时候就禁止地球旋转事件
监控鼠标滚轮按下的鼠标移动事件
当鼠标朝下移的时候就允许地球旋转
具体代码
//初始化地球
var viewer = new Cesium.Viewer('cesiumContainer',{
infoBox: false,
selectionIndicator: false,
shadows: true,
shouldAnimate: true,
animation: false, //动画控制不显示
baseLayerPicker: false, //图层控制显示
geocoder: false, //地名查找不显示
timeline: false, //时间线不显示
sceneModePicker: false, //投影方式显示
sceen3DOnly: true,
fullscreenButton: false,
homeButton: false,
navigationHelpButton: false,
})
//相机的pitch值大于0则禁止球旋转操作
var scene = viewer.scene;
var canvas = viewer.canvas;
var camera = viewer.camera;
scene.screenSpaceCameraController.minimumZoomDistance=100; //距离地形的距离?这个值可以多测试几个值,,我这不太好描述
viewer.clock.onTick.addEventListener(function () {
setMinCamera();
})
var setMinCamera = function () {
if(camera.pitch > 0){
scene.screenSpaceCameraController.enableTilt = false;
}
}
//监控鼠标滚轮按下状态下移动鼠标事件,当鼠标向下移动的时候就允许地球旋转操作
var startMousePosition;
var mousePosition;
var handler = new Cesium.ScreenSpaceEventHandler(canvas);
handler.setInputAction(function(movement) {
mousePosition = startMousePosition = Cesium.Cartesian3.clone(movement.position);
handler.setInputAction(function(movement) {
mousePosition = movement.endPosition;
var y = mousePosition.y - startMousePosition.y;
if(y>0){
scene.screenSpaceCameraController.enableTilt = true;
}
}, Cesium.ScreenSpaceEventType.MOUSE_MOVE);
}, Cesium.ScreenSpaceEventType.MIDDLE_DOWN);
至此相机操作不会再进入地下或者地形里面,个人发现和那个minimumZoomDistance=100有关系,不会出现格网,而是缓慢加载对应视角的地图情况。效果如下图所示:
地形加载过程中:
加载完成
如果没有解决地形格网,则格网将一直存在,解决后将加载对应视角的地形情况,如下图