Cesium禁止相機進入地下(地形穿透)問題

原創

青鱼梦镜白

2020-02-22 13:07

Cesium滾動鼠標的禁止相機進入地下親測可行的解決方法

問題描述

Cesium的地形圖中，滾動鼠標滾輪會出現Cesiumviewer進入地形之下,出現格網
如下圖所示

在設置了 scene.screenSpaceCameraController.minimumZoomDistance=100;

之後，在地形還在加載的過程中旋轉地球，依然會出現上述問題。

解決方案

先是會出現部分格網，但是會加載對應的視角的地形。之前是一直出現格網不會加載地形的。效果受電腦配置影響。
監控相機的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有關係，不會出現格網,而是緩慢加載對應視角的地圖情況。效果如下圖所示：
地形加載過程中：

加載完成
如果沒有解決地形格網，則格網將一直存在，解決後將加載對應視角的地形情況，如下圖