Cesium闪烁点效果Cesium.CallbackProperty（预警效果，可控制闪烁频率）

最近在做的cesium项目遇到了扫描效果（雷达图，实现过程我博客里又可以去找）现在又遇到了闪烁效果（一个点闪烁），今天总结一下实现过成。

一、需求及效果

需求就是有报警就在地图上标注闪烁点。我的做法是用entity来实现变换不同的颜色

不同颜色闪烁

二、实现代码

关键代码就是利用 Cesium.CallbackProperty这个函数实现（不光闪烁点，闪烁多变应，立方体都可以只要是entity支持的）

var entity = viewer.entities.add({
      point: {
        show: pointShow,
        pixelSize: 35,
        color: new Cesium.CallbackProperty(function color() {//关键代码
          return Cesium.Color.fromRandom({
            minimumRed: 0.76,
            minimumGreen: 0.78,
            minimumBlue: 0.75,
            alpha: 1.0
          });
        }, false),
        heightReference:25000,
      },
      position: Cesium.Cartesian3.fromDegrees(Number(lonlat[0]),Number(lonlat[1])),//经纬度
      label: {//可以在点得旁边显示字
        text: text,
        scale: 0.8,
        fillColor: Cesium.Color.YELLOW,
        heightReference: 25000,
        verticalOrigin: Cesium.VerticalOrigin.LEFT,
        horizontalOrigin: Cesium.HorizontalOrigin.CENTER,
        //pixelOffset: new Cesium.Cartesian2(10, 20)
      },
      show: true
    });

下面这个是两种颜色闪烁，且间隔时间长一些（我还没找到随意设置闪烁间隔时间的方法，如果谁有话请在评论区留言告知）txf%几就是间隔几秒变换颜色，比如10s就写txf%10==0;(这个方法亲测是没问题的，根据时间来变换)

color: new Cesium.CallbackProperty(function colorChange(time, result) {
          var txf = Math.floor(time.secondsOfDay);
          var result = ""
          if (txf % 2 ==0) {//间隔两秒变换
            result = Cesium.Color.RED;
          } else {
            result = Cesium.Color.BLUE;
          }
          return result;
        }, false),


         //var txf = Math.floor(time.secondsOfDay);
          //var result ="";
            
          //if (txf%3==0) {//txf%几就是间隔几秒变换颜色（比如想要间隔10s则txf%10==0）
           // result = Cesium.Color.BLUE;
          //} else {
           // result = Cesium.Color.RED;
         //   
         // }
          //return result;

下面是可以控制闪烁频率的方法（根据x值大小来改变频率）（如果有更好的方法可评论告知我）

var x = 3;//控制频率改变x大小越大闪烁间隔越大
    var ha = true; //控制颜色变换的开关
    var circleColor = Cesium.Color.RED; // 圆圈颜色
    var entity = viewer.entities.add({
        point: {
            show: pointShow,
            pixelSize: 35,
            color: new Cesium.CallbackProperty(function colorChange(time, result) {
                if (ha) {
                    x -= 0.2;
                    if (x <= 0) {
                        ha = false;
                        circleColor = Cesium.Color.BLUE;
                    }
                } else {
                    x += 0.2;
                    if (x >= 3) {//这里也要改动
                        ha = true;
                        circleColor = Cesium.Color.RED;
                    }
                }
                return circleColor;
            }, false),
            heightReference: Cesium.HeightReference.RELATIVE_TO_GROUND,
        },
        position: Cesium.Cartesian3.fromDegrees(Number(lonlat[0]), Number(lonlat[1]), Number(lonlat[2])),
        label: {
            text: text,
            scale: 0.8,
            fillColor: Cesium.Color.YELLOW,
            verticalOrigin: Cesium.VerticalOrigin.LEFT,
            horizontalOrigin: Cesium.HorizontalOrigin.CENTER,
            heightReference: Cesium.HeightReference.CLAMP_TO_GROUND,
            //pixelOffset: new Cesium.Cartesian2(10, 20)
        },
        show: true
    });

具体属性可以看callbackProperty中文文档

三、遇到得坑

当有高程或者地形数据的时候entity得label,point会被遮挡显示不全

viewer.scene.globe.depthTestAgainstTerrain = false;//解决地形遮挡entity问题

这里我给大家推荐一个cesium中文文档对于英文不好的可以看这个cesium中文文档当然也可以看官方文档。

我再推荐一个cesium初学者可以看的网站（我也是初学，我觉得很不错）cesium中文网

动态纹理鹰眼图实现可看