Cesium JS如何禁用billboard关联label的缩放并保持固定尺寸

解决方法 #

你可以通过修改Label的相关配置实现禁用缩放效果，根据你的实际需求选择对应方案即可：

方案1：Label与Billboard同步按真实世界大小显示（适配已开启sizeInMeters的Billboard） #

该方案效果为缩放场景时，Label和Billboard会按照透视规则同步变化大小，不会出现错位：

label : {
    text : 'Label on top of scaling billboard',
    font : '20px sans-serif',
    showBackground : true,
    horizontalOrigin : Cesium.HorizontalOrigin.CENTER,
    pixelOffset : new Cesium.Cartesian2(0.0, -100), // Billboard高度为100米，对应偏移100即可
    sizeInMeters: true, // 开启Label按米单位计算大小，和Billboard规则对齐
    scaleByDistance: undefined // 禁用默认的距离缩放逻辑
}

方案2：Label永久保持固定屏幕像素大小 #

该方案效果为无论怎么拉近拉远视角，Label在屏幕上的显示大小始终固定：

label : {
    text : 'Label on top of scaling billboard',
    font : '20px sans-serif',
    showBackground : true,
    horizontalOrigin : Cesium.HorizontalOrigin.CENTER,
    pixelOffset : new Cesium.Cartesian2(0.0, -image.height),
    scaleByDistance: undefined // 禁用距离缩放逻辑
    // 删除原有pixelOffsetScaleByDistance配置即可
}

配置说明 #

• scaleByDistance是Cesium控制Label、Billboard等图元大小随视角距离变化的核心属性，默认启用近大远小的像素缩放逻辑，设置为undefined即可禁用该逻辑
• pixelOffsetScaleByDistance用于控制像素偏移量随距离缩放，不需要偏移量动态变化时直接删除该配置即可
• Label的sizeInMeters属性作用与Billboard同名属性完全一致，开启后会按照真实世界米单位计算大小，适配已开启sizeInMeters的Billboard场景。

内容的提问来源于stack exchange，提问作者vignesh nithyanandan