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

Question

我和我的团队正在尝试在 Cesium 上开发一个需要圆点和矩形点的应用程序。我们使用 native 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 的 Angular 版本，但我认为这不会阻止我们实现解决方案，即使它是在常规 JS 中解决的。

Answer 1

您看到的伪像称为“z-fighting”，这是 3D 渲染中的一个常见问题，当多个多边形以相同深度渲染并且深度缓冲区无法区分它们时。

但让我们尝试一种不同的方法:如果您希望这些框无论缩放级别如何都保持相同大小，那么您应该切换到使用广告牌来渲染框。这将修复过程中的 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>