Label
屏幕空间的文字标注。字号不随距离变化,因此远近都能读,代价是密集时容易互相压盖。
参数
| 参数 | 默认 | 说明 |
|---|---|---|
text | — | 文本内容,支持 \n 换行 |
font | 10px sans-serif | CSS font 简写,必须带字号 |
style | FILL | FILL / OUTLINE / FILL_AND_OUTLINE |
fillColor | WHITE | 填充色 |
outlineColor | BLACK | 描边色,style 含 OUTLINE 时生效 |
outlineWidth | 1 | 描边宽度,像素 |
showBackground | false | 是否画背景板 |
backgroundColor | 半透明黑 | 背景板颜色 |
backgroundPadding | (7,5) | 背景板内边距,Cartesian2 |
pixelOffset | (0,0) | 屏幕偏移,配合图标使用 |
horizontalOrigin | CENTER | LEFT / CENTER / RIGHT |
verticalOrigin | CENTER | TOP / CENTER / BOTTOM |
heightReference | NONE | 贴地或相对地面 |
scale | 1 | 整体缩放 |
translucencyByDistance | — | 按距离淡出 |
distanceDisplayCondition | — | 按距离决定是否绘制 |
disableDepthTestDistance | 0 | 无穷大时永不被遮挡 |
font 的正确写法
font 走的是 canvas 的字体字符串,格式必须是「字号 字体族」,
中间可以插字重。下面第一行有效,第二行无效(缺字号),第三行看起来对,
但部分环境缺少该字重会回退成默认字体:
font: '14px "Microsoft YaHei", sans-serif' // 有效
font: '"Microsoft YaHei", 14px sans-serif' // 无效,整条被忽略
font: '600 14px "PingFang SC", sans-serif' // 依赖系统字体
中文字体名称里有空格时必须加引号。字体族最后一定要跟一个通用族
(sans-serif),否则在没装该字体的机器上会退化成浏览器默认字体。
带描边的城市名
viewer.entities.add({
position: Cesium.Cartesian3.fromDegrees(116.391263, 39.907359),
label: {
text: '北京',
font: '500 13px "Microsoft YaHei", sans-serif',
style: Cesium.LabelStyle.FILL_AND_OUTLINE,
fillColor: Cesium.Color.WHITE,
outlineColor: Cesium.Color.fromCssColorString('#0e1116'),
outlineWidth: 3,
pixelOffset: new Cesium.Cartesian2(0, -22),
disableDepthTestDistance: Number.POSITIVE_INFINITY
}
});
深色底图上不要用纯黑描边配纯白字,对比过强会让文字边缘发虚。 描边色取一层比背景稍亮的颜色更自然。
贴地标注
让文字跟随地形起伏需要同时设置两处:
viewer.scene.globe.depthTestAgainstTerrain = true;
label: {
text: '垭口',
heightReference: Cesium.HeightReference.CLAMP_TO_GROUND,
disableDepthTestDistance: 0
}
CLAMP_TO_GROUND 只改文字的高度,不改水平位置。
disableDepthTestDistance 保持默认 0,地面的山体才能挡住背面的文字。
如果发现远处标注仍然穿过山体,检查是否把它设成了无穷大。
大量标注怎么办
每个 label 都会在纹理图集里占一块位置,上千个之后会出现重建图集导致的卡顿。 三种处理方式:
- 用
distanceDisplayCondition让远景不画,通常能砍掉九成。 - 把静态文字预渲染成 canvas 图标,改用 billboard 显示。
- 同一位置的多个字段合并成多行文本,一个 label 代替三个。
文字模糊。label 按 CSS 像素渲染,在高 DPI 屏上会把 1 像素的描边放大看不出来。
需要清晰边缘时把字号提高一倍、同时把 scale 设为 0.5。
经纬志(2026)。《Label》。https://www.jingweizhi.com/cesium/api/label.html(访问日期 2026-11-03)。