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 color(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 color=Cesium.Color.RED;
 var entity = viewer.entities.add({
      point: {
        show: pointShow,
        pixelSize: 35,
        color: new Cesium.CallbackProperty(function color(time,result) {
           if(ha){
             x-=0.2;
            if(x<=0){
               ha=false;
          color=Cesium.Color.BLUE;
             }
           }else{
             x+=0.2;
             if(x>=3){//这里也要改动
              ha=true;
               color = Cesium.Color.RED;
             }
          }
           return color;
        }, 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中文网

动态纹理鹰眼图实现可看