Cesium Entity Label 主要属性概览

94 阅读2分钟
属性分类属性名称类型默认值描述
核心内容textstring标签显示的文本内容。支持使用 '{propertyName}' 形式绑定 Entity 的 properties 中的字段。
fontstring'30px sans-serif'设置文本字体样式,例如 '14pt monospace'12 或 '500 20px MyFont'7。
外观样式fillColorColorColor.WHITE文本的填充颜色。
outlineColorColorColor.BLACK文本的轮廓颜色。
outlineWidthnumber1.0文本的轮廓宽度。
styleLabelStyleLabelStyle.FILL文本样式:FILL(仅填充)、OUTLINE(仅轮廓)、FILL_AND_OUTLINE(填充+轮廓)12。
scalenumber1.0标签的整体缩放比例。
pixelOffsetCartesian2Cartesian2.ZERO基于屏幕空间的像素偏移。X向右为正,Y向下为正47。
eyeOffsetCartesian3Cartesian3.ZERO基于场景世界的偏移。在相机视角方向上的偏移,常用于避免深度冲突7。
heightReferenceHeightReferenceHeightReference.NONE高度参考:NONE(绝对高度)、CLAMP_TO_GROUND(贴地)、RELATIVE_TO_GROUND(相对地面)。
背景属性showBackgroundbooleanfalse是否显示文本背景框47。
backgroundColorColorColor.BLACK背景框的颜色47。
backgroundPaddingCartesian2new Cartesian2(7, 5)背景框的内边距(像素)4。
位置对齐horizontalOriginHorizontalOriginHorizontalOrigin.CENTER水平对齐原点LEFTCENTERRIGHT47。
verticalOriginVerticalOriginVerticalOrigin.CENTER垂直对齐原点TOPCENTERBOTTOMBASELINE124。
可见性与显示showbooleantrue控制标签的可见性。
distanceDisplayConditionDistanceDisplayCondition根据与相机的距离条件控制显示,如 new DistanceDisplayCondition(1000.0, 10000.0) 表示在1000米到10000米范围内可见6。
translucencyByDistanceNearFarScalar根据与相机的距离条件控制透明度(渐变)。
pixelOffsetScaleByDistanceNearFarScalar根据与相机的距离条件控制像素偏移量的缩放。
其他属性disableDepthTestDistancenumber0.0设置多少距离后禁用深度测试(像素),可使标签不被地形或其他实体遮挡。
scaleByDistanceNearFarScalar根据与相机的距离条件控制标签本身的缩放(渐变)。

创建一个带标签的 Entity

// 直接添加Entity并设置Label
const entity = viewer.entities.add({
  position: Cesium.Cartesian3.fromDegrees(116.39, 39.91, 100), // 北京坐标,高度100米
  label: {
    text: '北京市',
    font: '20px sans-serif', // 字体大小和类型
    fillColor: Cesium.Color.YELLOW, // 文字填充色
    outlineColor: Cesium.Color.BLACK, // 文字轮廓色
    outlineWidth: 2,
    pixelOffset: new Cesium.Cartesian2(0, -50), // 在屏幕空间向下偏移50像素
    verticalOrigin: Cesium.VerticalOrigin.BOTTOM, // 偏移基准点为标签底部
    showBackground: true, // 显示背景
    backgroundColor: new Cesium.Color(0.165, 0.165, 0.165, 0.8), // 背景颜色(深灰色,80%透明度)
    backgroundPadding: new Cesium.Cartesian2(10, 5), // 背景内边距
  }
});

// 视角定位到该Entity
viewer.zoomTo(entity);

修改已存在 Entity 的 Label 属性

// 获取Entity(假设id已知)
const entity = viewer.entities.getById('myLabelEntity');

if (entity) {
  // 修改label的多个属性
  entity.label.show = true; // 确保显示
  entity.label.text = '新文本';
  entity.label.font = 'bold 24px Microsoft YaHei';
  entity.label.fillColor = Cesium.Color.fromCssColorString('#ff0000');
}

使用属性绑定 (Property Binding)

// 假设有一个Entity,其properties包含name和elevation字段
const entityWithDynamicLabel = viewer.entities.add({
  position: Cesium.Cartesian3.fromDegrees(-75.59777, 40.03883),
  properties: {
    name: '测量点A',
    elevation: 285.6
  },
  label: {
    // 使用模板字符串动态组合属性值
    text: new Cesium.CallbackProperty(function(time, result) {
      // 更动态的方式:可以从properties或其他地方实时计算
      return `${entityWithDynamicLabel.properties.name} (海拔: ${entityWithDynamicLabel.properties.elevation}米)`;
    }, false), // false表示不常量求值,需要时才调用
    font: '14px sans-serif',
    pixelOffset: new Cesium.Cartesian2(0, 20)
  }
});