效果图
为什么需要开启深度检测
当地图出现场景变化时,地物位置显示不正确。点位出现偏移的问题
开启深度检测
// 开启深度测试(开启后解决 点位随着地图拉伸出现位移误差)
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, // 解决开启深度检测之后,线展示不全
},
},
}),
}),
)