Cesium 铯标记模糊

我使用以下代码创建了铯标签：

        var label: Cesium.LabelGraphics = new Cesium.LabelGraphics({
            text : lab,
            verticalOrigin: Cesium.VerticalOrigin.TOP,
            horizontalOrigin: Cesium.HorizontalOrigin.RIGHT,
            font: '15px Helvetica',
            fillColor: Cesium.Color.WHITE,
            outlineWidth: 2,
            style: Cesium.LabelStyle.FILL,
            pixelOffset: new Cesium.Cartesian2(20, 20)
        });

但它是模糊的

我想要一个更清晰的标签。你能在红色矩形内看到的这个图像是真实的标签吗。蓝色矩形中是带有放大的标签。在绿色的矩形中是我想要的样子。

有没有办法让标签更清晰

---

谢谢

我有时使用的一个技巧是将较大的字体大小与标签上的

scale

设置相结合，以使用WebGL缩小较大的字体。这与简单地选择较小的字体大小略有不同，因为WebGL的纹理缩放系统用于缩放光栅化字体图像。这是因为铯标签不是固定在整数像素位置，它们可以以亚像素精度放置在坐标上。因此，标签在移动时，标签纹理中的额外分辨率非常方便。当然，这种方法需要更多的纹理内存，但通常值得获得更干净的边缘

下面是一个示例，显示了正常（无缩放）、双精度（0.5缩放）和三精度（约0.3缩放）之间的差异

var-viewer=新铯.viewer（'cesiumContainer'{
navigationHelpButton:false，动画：false，时间线：false
});
viewer.entities.add({
位置：铯。笛卡尔3。从度（-75.1641667，39.952222），
标签：{
文本：“标签==| |法线”，
Verticargin:Ce.Verticargin.TOP，
水平起源：铯。水平起源。对，
font:'15px Helvetica'，//注意：标准尺寸，此处无缩放。
填充颜色：铯。颜色。白色，
大纲第1页第2页，
样式：铯。标签样式。填充，
像素偏移：新铯。笛卡尔氮（20，-10）
}
});
viewer.entities.add({
位置：铯。笛卡尔3。从度（-75.1641667，39.952222），
标签：{
文本：“Label==| | double”，
Verticargin:Ce.Verticargin.TOP，
水平起源：铯。水平起源。对，
字体：“31px Helvetica”，
填充颜色：铯。颜色。白色，
大纲第1页第2页，
样式：铯。标签样式。填充，
像素偏移：新的铯。笛卡尔氮（20,20），
比例：0.5
}
});
viewer.entities.add({
位置：铯。笛卡尔3。从度（-75.1641667，39.952222），
标签：{
文本：“标签==| |三重”，
Verticargin:Ce.Verticargin.TOP，
水平起源：铯。水平起源。对，
font:'57px Helvetica'，//注意：此处字体较大
填充颜色：铯。颜色。白色，
大纲第1页第2页，
样式：铯。标签样式。填充，
像素偏移：新的铯。笛卡尔氮（20,50），
比例：0.3//注意：通过WebGL纹理缩小大字体图像。
}
});
html，body，#cesiumContainer{
宽度：100%；高度：100%；边距：0；填充：0；溢出：隐藏；
}
在Bllboard.js或Cesium.js中更改

gl_Position = czm_viewportOrthographic * vec4(positionWC.xy,-positionWC.z, 1.0);

到

这将使广告牌捕捉到一个像素，而不是变得模糊

同时在查看器初始化中禁用FXAA（antialias）

viewer.scene.fxaa = false

这将使广告牌和标签更脆

以前



之后

这当然有帮助，但是否有类似“抓拍到像素”的功能？目前铯中没有。我认为有一种方法可以获得屏幕位置，因此您可以将一个HTMLDOM元素放在画布顶部的该位置。它不会参与深度测试，但如果你真的需要，它会提供DOM文本的清晰性。铯团队对这个答案做了一些实验。事实证明，上面显示的着色器代码更改在这里根本无效。此解决方案中真正的“活性成分”是设置
viewer.scene.fxaa=false。这是目前唯一修复模糊的方法。因此，我们的官方建议是，将fxaa设置为false，不要更改着色器代码。我们将继续跟踪此问题，因为铯中存在一个bug：@emackey着色器修改只允许以1x1像素渲染图像。当广告牌按比例缩放时，这不是一个好的做法。但是，如果比例为1x1，则会将广告牌数据逐像素渲染到视口。您是否在启用fxaa的情况下尝试过？因为我们昨天试过了，它不像你描述的那么简单。fxaa阻止了它。阅读我链接到的问题。
viewer.scene.fxaa = false