铯标签模糊

Question

我使用以下代码创建了一个 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)
        });

但它是模糊的......

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

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

谢谢！

Answer 1

在 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

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

之前

.

之后

Answer 2

我有时使用的一个技巧是将较大的字体大小与标签上的 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>