cesium实现动态围栏

项目中使用到了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的图片:

  • 8
    点赞
  • 7
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

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

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值