1.cesium在绘制的多边形上添加lable标签
效果演示:
绘制多边形并且为多边形添加lable代码:
let addEnt = viewer.entities.add({
name: "多边形name",
polygon: {
hierarchy: 多边形点位数据【一维数组数组格式】,
material: config.color
? new Cesium.Color.fromCssColorString(config.color).withAlpha(0.5)
: new Cesium.Color.fromCssColorString("#FFD700").withAlpha(0.5),
},
});
var polyPositions = addEnt.polygon.hierarchy.getValue(Cesium.JulianDate.now()).positions;
var polyCenter = Cesium.BoundingSphere.fromPoints(polyPositions).center;//中心点
polyCenter = Cesium.Ellipsoid.WGS84.scaleToGeodeticSurface(polyCenter);
addEnt.position = polyCenter;
addEnt.label={
text:"lable标签内容",
color : Cesium.Color.fromCssColorString('#fff'),
font:'normal 32px MicroSoft YaHei',
showBackground : true,
scale : 0.5,
horizontalOrigin : Cesium.HorizontalOrigin.LEFT_CLICK,
verticalOrigin : Cesium.VerticalOrigin.BOTTOM,
disableDepthTestDistance : 10000.0
};
2.cesium在绘制的point点上添加lable标签
效果演示:
绘制point并且为point添加lable代码:
// 绘制点位
let entity = new Cesium.Entity({
name:'点的name',
show:true,
position:Cesium.Cartesian3.fromDegrees(经度, 纬度),
point:new Cesium.PointGraphics ( {
show : true,
pixelSize :5,
heightReference :Cesium.HeightReference.NONE,
color :new Cesium.Color ( 255 , 255 , 0 , 1 ),
outlineColor :new Cesium.Color ( 0 , 0 , 0 , 0 ),
outlineWidth :0,
scaleByDistance :new Cesium.NearFarScalar ( 0 , 1 , 5e10 , 1 ),
translucencyByDistance :new Cesium.NearFarScalar ( 0 , 1 , 5e10 , 1 ),
distanceDisplayCondition : new Cesium.DistanceDisplayCondition(0, 4.8e10),
} ),
label : {
text : 'lable的内容',
font : '14pt Source Han Sans CN', //字体样式
fillColor:Cesium.Color.BLACK, //字体颜色
backgroundColor:Cesium.Color.AQUA, //背景颜色
showBackground:true, //是否显示背景颜色
style: Cesium.LabelStyle.FILL, //label样式
outlineWidth : 2,
verticalOrigin : Cesium.VerticalOrigin.CENTER,//垂直位置
horizontalOrigin :Cesium.HorizontalOrigin.LEFT,//水平位置
pixelOffset:new Cesium.Cartesian2(10,0) //偏移
}
viewer.entities.add(entity);
3.绘制完成后可能会出现的地形遮挡问题
遮挡演示:
解决方案: 手动关闭cesium当前的深度检测
viewer.scene.globe.depthTestAgainstTerrain = false;