使用cesium,同时渲染热力图和一个有透明度的实体,热力图会在实体下方,被实体遮挡。 因为Cesium中透明实体的渲染顺序与不透明实体不同,透明实体默认会被后渲染
热力图被遮挡效果:
以下是解决方案,分为两步
一、viewer关闭透明物体独立排序
// 在viewer初始化时添加
const viewer = new Cesium.Viewer('cesiumContainer', {
orderIndependentTranslucency: false,
}
});
二、热力图添加离地高度
将热力图图层添加离地高度,如果不想有明显的离地效果,可以将高度值设置小一点
如果使用CesiumHeatmap创建的热力图可以使用如下方法修改高度
CesiumHeatmap.js 源码中搜索CHInstance.prototype.updateLayer方法,设置rectangle的height属性
CHInstance.prototype.updateLayer = function () {
if (CesiumHeatmap.defaults.useEntitiesIfAvailable && this._cesium.entities) {
if (this._layer) {
this._cesium.entities.remove(this._layer);
}
material = new Cesium.ImageMaterialProperty({
image: this._heatmap._renderer.canvas,
});
if (Cesium.VERSION >= "1.21") {
material.transparent = true;
} else if (Cesium.VERSION >= "1.16") {
material.alpha = 0.99;
}
this._layer = this._cesium.entities.add({
show: true,
rectangle: {
coordinates: this._rectangle,
material: material,
height: 1
}
});
} else {
if (this._layer) {
this._cesium.scene.imageryLayers.remove(this._layer);
}
this._layer = this._cesium.scene.imageryLayers.addImageryProvider(CesiumHeatmap._getImageryProvider(this));
}
};
热力图层级调整后的效果: