cesium解决画点只显示一半的问题

Cesium实战系列文章总目录： 传送门

1.背景

在鼠标拾取点击位置坐标，并添加到图上显示的时候，发现点只能显示一半，另一半被压盖，如下图：

此时的核心函数代码为：

/**
 * @description: 获取当前鼠标点击位置坐标，并添加到图上显示
 * @param {*} _viewer
 * @return {*}
 */
function getClickPointAdd(_viewer) {
    // 注册屏幕点击事件
    let handler = new Cesium.ScreenSpaceEventHandler(_viewer.scene.canvas);
    handler.setInputAction(function(event) {
        // 转换为不包含地形的笛卡尔坐标
        let clickPosition = _viewer.scene.camera.pickEllipsoid(event.position);
        // 转经纬度（弧度）坐标
        let radiansPos = Cesium.Cartographic.fromCartesian(clickPosition);
        // 转角度
        console.log("经度：" + Cesium.Math.toDegrees(radiansPos.longitude) + ", 纬度：" + Cesium.Math.toDegrees(radiansPos.latitude));

        // 添加点
        _viewer.entities.add({
            position: clickPosition,
            point: {
                color: Cesium.Color.YELLOW,
                pixelSize: 30,
            }
        })
    }, Cesium.ScreenSpaceEventType.LEFT_CLICK);
}

2.解决方法

2.1设置圆点深度检测阈值

Cesium的PointGraphics中提供了disableDepthTestDistance方法来设置圆的深度检测阈值：传送门
即需要通过设置相机到圆要素的距离阈值来判断是否开启深度检测，这里设置为1000.0米。

disableDepthTestDistance: 1000.0,

当相机与要素距离小于阈值是，此时结果为：
但是当相机距离超过阈值时，就会开启深度检测，圆还是会只显示一半。

将阈值设置为无穷大时：

disableDepthTestDistance: Number.POSITIVE_INFINITY,

虽然无论相机距离远近，圆都可以正常显示，但是没有圆的深度检测，不同要素之间的遮挡无法得到有效判断，有的在建筑物后的点会在建筑物前显示，造成视觉误差与干扰。

2.2设置圆点的高度

为圆要素设置一定的高度，抬伸显示。拉伸的高度与圆符号的大小有关，才能避免被遮挡只显示一半。

position:Cesium.Cartesian3.fromDegrees(lon, lat, height);

但是此时点具有高度，飘在空中，无法准确表达地面坐标，存在一定的视觉干扰；且当相机距离较远时，还是会出现只显示一半的情况。

2.3关闭viewer的深度检测

默认状态下深度检测是关闭的，需要手动开启。

// 关闭深度检测
viewer.scene.globe.depthTestAgainstTerrain = false;

虽然可以用，但是关闭深度检测，会无法有效判断物体的前后关系，而判断是否被遮挡。

3.总结

添加圆只能显示一半是因为深度检测过程，物体因为前后位置关系产生的遮挡所导致的。

但直接关闭深度检测，会影响遮挡判断，这里本人使用的方法是将圆拉伸至一定高度显示。

4.参考

参考1：传送门