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缩放）之间的差异。

＆＃13;

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

＆＃13;

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

＆＃13;

<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>

＆＃13;

铯标签模糊

2 个答案: