Question

我的团队和我正在尝试在Cesium上开发一个需要圆和矩形点的应用程序。我们使用原生的PointGraphics制作圆圈，但正在为矩形创建实体。代码如下所示：

var entity = {
    id: point.id,
    box: {
        dimensions: new Cesium.Cartesian3(20000,
                                          20000,
                                          0),
        outline: true,
        material: Cesium.Color.fromHsl(hue, 1, 0.5)
    },
    position: Cesium.Cartesian3.fromDegrees(point.lon, point.lat)
};

我们正在绘制框，但有一些问题。首先，当两个框重叠时，图形会扭曲，如下所示：

我不确定这是代码还是浏览器问题。此屏幕截图来自Chrome，但我们已在两台不同的计算机上使用Chrome和Firefox进行了尝试。

其次，没有自动缩放比例。当我们缩小时，框保持绝对大小而不是相对于缩放数字，如PointGraphics。将以下示例与上图进行比较：

一旦我们弄清楚如何从Cesium获得缩放，我们可以尝试将尺寸（不确定它们所在的单位）乘以缩放级别，但是我不确定这是否会在实体创建后起作用可能是静态的？

作为旁注，我们正在使用角度版本的Cesium，但我认为这不会阻止我们实施解决方案，即使它已经在常规JS中解决了。

Answer 1

您看到的工件被称为“z-fighting”，当多个多边形在相同深度渲染且深度缓冲区无法区分时，这是3D渲染中的常见问题。

但是让我们尝试一种不同的方法：如果你想让这些盒子保持相同的大小而不管缩放级别，那么你应该切换到使用Billboards来渲染盒子。这将修复进程中的z-fighting伪像。运行此代码段，看看它是否更接近您想要的结果。

var viewer = new Cesium.Viewer('cesiumContainer', {
    navigationHelpButton: false, animation: false, timeline: false
});

var boxImage = 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAIAAACQkWg2AAAACXBIWXMAAAsTAAALEwEAmpwYAAAAB3RJTUUH3wwDFRU4/aN5pAAAACNJREFUKM9jYCARMDIwMPz//59Y1YyMTKTaMKphVAO1NJAMALu5AxxK3JB5AAAAAElFTkSuQmCC';

viewer.entities.add({
    position : Cesium.Cartesian3.fromDegrees(-75.59777, 40.03883),
    billboard : {
        image : boxImage,
        color : Cesium.Color.LIME
    }
});
viewer.entities.add({
    position : Cesium.Cartesian3.fromDegrees(-75.2, 39.8),
    billboard : {
        image : boxImage,
        color : new Cesium.Color(0, 0.5, 1.0, 1.0)
    }
});
viewer.entities.add({
    position : Cesium.Cartesian3.fromDegrees(-70.0, 41.0),
    billboard : {
        image : boxImage,
        color : new Cesium.Color(0.5, 0.9, 1.0, 1.0)
    }
});
viewer.entities.add({
    position : Cesium.Cartesian3.fromDegrees(-73.0, 37.0),
    billboard : {
        image : boxImage,
        color : Cesium.Color.RED
    }
});
viewer.entities.add({
    position : Cesium.Cartesian3.fromDegrees(-89.0, 35.0),
    billboard : {
        image : boxImage,
        color : Cesium.Color.YELLOW,
        scale : 2.0
    }
});

html, body, #cesiumContainer {
    width: 100%; height: 100%; margin: 0; padding: 0; overflow: hidden;
    font-family: sans-serif;
}

<link href="http://cesiumjs.org/releases/1.15/Build/Cesium/Widgets/widgets.css" 
      rel="stylesheet"/>
<script src="http://cesiumjs.org/releases/1.15/Build/Cesium/Cesium.js">
</script>
<div id="cesiumContainer"></div>

CesiumJS矩形实体重叠和大小问题

1 个答案: