项目中使用到了cesium,需要实现动态的围栏的效果,
在网上也找了好多案例,通过着色器来实现效果,为此也有好多博主也附上了自己的代码,也许是因为使用方法不同,复制代码并修改依旧还是没有通过他们的方式实现效果【着色器】。
我这里先附上我的代码,便于跟我一样的,第一接触cesium的人,解决当下的需求。
let myDataSource = new Cesium.CustomDataSource("myDataSource");
let wallPosition = [
[91.18114668210865, 29.64862480141244],
[91.18115063110764, 29.64923333583186],
[91.18238771385506, 29.64920082670612],
[91.18235117316942, 29.649837443984836],
[91.18198535795231, 29.64990471360067],
[91.18179467154341, 29.65115405224777],
[91.17986260212876, 29.65107671722995],
[91.17928567829874, 29.649125023468685],
[91.18026801171452, 29.64909857433772],
[91.18036013596532, 29.64862237211234],
[91.18114668210865, 29.64862480141244],
]
viewer.dataSources.add(myDataSource);
const maximumHeights = Array(wallPosition.length).fill(3660);
const minimumHeights = Array(wallPosition.length).fill(3630);
const dayMaximumHeights = Array(minimumHeights.length).fill(3660);
myDataSource.entities.add({
id: tag.id,
name: tag.category,
// 是否显示
show: true,
wall: {
positions: Cesium.Cartesian3.fromDegreesArray(wallPosition.flat()),
maximumHeights: new Cesium.CallbackProperty(() => {
for (let i = 0; i < minimumHeights.length; i++) {
dayMaximumHeights[i] += maximumHeights[i] * 0.0001;
if (dayMaximumHeights[i] > maximumHeights[i]) {
dayMaximumHeights[i] = minimumHeights[i];
}
}
return dayMaximumHeights;
}, false),
minimumHeights,
// material: new Cesium.Color(0, 1, 0, 0.8),
material: new Cesium.ImageMaterialProperty({
color: new Cesium.Color.fromCssColorString("rgba(21,255,255,0.9)"),
image: fence,
}),
},
});
其中fence的图片: