我和我的团队正在尝试在 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 的 Angular 版本,但我不认为这会阻止我们实现解决方案,即使它是在常规 JS 中解决的。
最佳答案
您看到的伪影称为“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>
关于javascript - CesiumJS矩形实体重叠和大小问题,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/34076024/