铯标签模糊

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 的纹理缩放系统开始对光栅化字体图像进行缩放。这是有效的，因为 Cesium 标签没有锚定到整数像素位置，它们可以放置在具有亚像素精度的坐标上。因此，当标签四处移动时，标签纹理中的额外分辨率会派上用场。当然，这种方法会消耗更多的纹理内存，但是为了获得更干净的边缘通常是值得的。

这是一个示例，显示了正常（无缩放）、双倍（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>