铯标签模糊

Question

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

        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)
        });

但是很模糊...

我想要一个更清晰的标签。在这张图片中，您可以在红色矩形内看到真正的标签吗？蓝色矩形中是带有放大的标签。在绿色矩形中是我希望的样子。

有没有办法让标签更清晰？

谢谢！

Answer 1

我有时使用的一个技巧是将较大的字体大小与标签上的 scale 设置相结合，以使用 WebGL 缩小大字体。这是一种与简单地选择较小的字体大小略有不同的缩放，因为 WebGL 的纹理缩放系统开始发挥作用以缩放光栅化字体图像。这是有效的，因为铯标签没有锚定到整数像素位置，它们可以以亚像素精度放置在坐标上。因此，当标签四处移动时，标签纹理中的额外分辨率会派上用场。当然，这种方法会消耗更多的纹理内存，但通常值得获得更干净的边缘。

这是一个示例，显示了正常（无缩放）、双倍（0.5 缩放）和三重（大致为 0.3 缩放）之间的区别。

var viewer = new Cesium.Viewer('cesiumContainer', {
    navigationHelpButton: false, animation: false, timeline: false
});

viewer.entities.add({
    position : Cesium.Cartesian3.fromDegrees(-75.1641667, 39.9522222),
    label : {
        text : 'Label == || normal',
        verticalOrigin: Cesium.VerticalOrigin.TOP,
        horizontalOrigin: Cesium.HorizontalOrigin.RIGHT,
        font: '15px Helvetica',        // NOTE: Standard size, no scaling here.
        fillColor: Cesium.Color.WHITE,
        outlineWidth: 2,
        style: Cesium.LabelStyle.FILL,
        pixelOffset: new Cesium.Cartesian2(20, -10)
    }
});

viewer.entities.add({
    position : Cesium.Cartesian3.fromDegrees(-75.1641667, 39.9522222),
    label : {
        text : 'Label == || double',
        verticalOrigin: Cesium.VerticalOrigin.TOP,
        horizontalOrigin: Cesium.HorizontalOrigin.RIGHT,
        font: '31px Helvetica',
        fillColor: Cesium.Color.WHITE,
        outlineWidth: 2,
        style: Cesium.LabelStyle.FILL,
        pixelOffset: new Cesium.Cartesian2(20, 20),
        scale: 0.5
    }
});

viewer.entities.add({
    position : Cesium.Cartesian3.fromDegrees(-75.1641667, 39.9522222),
    label : {
        text : 'Label == || triple',
        verticalOrigin: Cesium.VerticalOrigin.TOP,
        horizontalOrigin: Cesium.HorizontalOrigin.RIGHT,
        font: '57px Helvetica',        // NOTE: Large font size here
        fillColor: Cesium.Color.WHITE,
        outlineWidth: 2,
        style: Cesium.LabelStyle.FILL,
        pixelOffset: new Cesium.Cartesian2(20, 50),
        scale: 0.3       // NOTE: Large font images scaled down via WebGL texturing.
    }
});

html, body, #cesiumContainer {
  width: 100%; height: 100%; margin: 0; padding: 0; overflow: hidden;
}

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

Answer 2

在Bllboard.js或Cesium.js中更改

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

到

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

它会让广告牌对齐一个像素，而不是变得模糊。

在您的查看器初始化中也禁用 FXAA（抗锯齿）

viewer.scene.fxaa = false

它会让广告牌和标签更脆！

之前

.

之后

铯标签模糊

Cesium label blurred

cesium