Bootstrap

cesium 实战011--开启深度检测之后,添加物被遮挡,解决办法

效果图

在这里插入图片描述

为什么需要开启深度检测

当地图出现场景变化时,地物位置显示不正确。点位出现偏移的问题

开启深度检测

 // 开启深度测试(开启后解决 点位随着地图拉伸出现位移误差)
 this.webGlobe.scene.globe.depthTestAgainstTerrain = true

Entity、primitives实现聚合效果被遮挡,解决办法

解决方法,添加属性: heightReference: Cesium.HeightReference.CLAMP_TO_GROUND。
如图,添加Entity,方式

  let entity = new Cesium.Entity({
        id: ele.oldId ? ele.layerKey + "_" + ele.oldId : ele.layerKey + "_" + ele.id,
        name: ele.oldId ? ele.layerKey + "_" + ele.oldId : ele.layerKey + "_" + ele.id,
        propsData: ele,
        position: Cesium.Cartesian3.fromDegrees(Number(center.lng), Number(center.lat), 0),
        billboard: {
          image: ele.url.slice(ele.url.indexOf("/xgcsdn")),
          width: ele.poiWid,
          height: ele.poiHig,
          scale: 1,
          verticalOrigin: Cesium.VerticalOrigin.BOTTOM,
          heightReference: Cesium.HeightReference.CLAMP_TO_GROUND,
          // verticalOrigin: Cesium.VerticalOrigin.TOP, //垂直位置
        },
        label: that.option.poilabelShow
          ? {
              text: ele.name,
              font: that.option.poiLabelFontSize + "px Source Han Sans CN", //字体样式
              pixelOffset: new Cesium.Cartesian2(0, -ele.poiHig),
              fillColor: new Cesium.Color.fromCssColorString(that.option.poiLabelColor), //字体颜色
              showBackground: that.option.poiLabelBgColor ? true : false, //是否显示背景颜色
              backgroundColor: new Cesium.Color.fromCssColorString(that.option.poiLabelBgColor), //背景颜色
              // verticalOrigin: Cesium.VerticalOrigin.BOTTOM, //垂直位置
              // horizontalOrigin: Cesium.HorizontalOrigin.CENTER, //水平位置
              verticalOrigin: Cesium.VerticalOrigin.BOTTOM,
              heightReference: Cesium.HeightReference.CLAMP_TO_GROUND,
              disableDepthTestDistance: Number.POSITIVE_INFINITY,
              // horizontalOrigin: Cesium.HorizontalOrigin.CENTER,
            }
          : null,
      })

绘制线被遮挡,解决办法

        const polyline = new Cesium.PolylineGeometry({
          positions: Cesium.Cartesian3.fromDegreesArray(arr1),
          width: that.option.lineStrokeWeight || 2,
          vertexFormat: Cesium.PolylineMaterialAppearance.VERTEX_FORMAT,
        })
        const polygon = new Cesium.GeometryInstance({
          geometry: polyline,
          id: i,
        })
        instances.push(polygon)
      })

      const material = new Cesium.Material({
        fabric: {
          type: "Color",
          uniforms: {
            color: Cesium.Color.fromCssColorString(that.option.lineColor),
            speed: that.option.lineStrokespeed || 0,
          },
        },
      })

      this.polylinePrimitive = that.webGlobe.scene.primitives.add(
        new Cesium.Primitive({
          geometryInstances: instances,
          appearance: new Cesium.PolylineMaterialAppearance({
            flat: true,
            material: material,
            renderState: {
              depthTest: {
                enabled: false, // 解决开启深度检测之后,线展示不全
              },
            },
          }),
        }),
      )