cesium分别绘制多边形与点,并且为其添加lable标签。解决绘制后出现的地形遮挡问题

1.cesium在绘制的多边形上添加lable标签

效果演示:
多边形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;
  • 5
    点赞
  • 6
    收藏
    觉得还不错? 一键收藏
  • 1
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值