cesium实现动态圆扩散扫描效果

效果如下

主要调用如下方法：

mapMixin._c_add_rotate_circle([120.952811,31.957272,1000],circlePng,800,'run_circle')   // 添加动态圆扫描
mapMixin._c_add_run_circle({position:[120.952811,31.932272,1000],minR:100,maxR:1000,deviationR:1,img:circlePng1})   // 添加动态圆扩散
mapMixin._c_add_run_point({positions:[120.942811,31.932272,1000],minR:100,maxR:1000,deviationR:1,img:circlePng1})   // 添加动态圆点

主要代码如下

<template>
  <div class="mapBox">
    <div id="cesium" ref="cesium"></div>
  </div>
</template>

<script>
import circlePng from "@/assets/images/cesium/circle红.png";
import circlePng1 from "@/assets/images/cesium/circle蓝1.png";
export default {
  data() {
    return {
      viewer:null,
      tilesets:null
    }
  },
  mounted() {
    this.mapInit();
  },
  methods: {
    mapInit() {
      Cesium.Camera.DEFAULT_VIEW_RECTANGLE = Cesium.Rectangle.fromDegrees( 90, -20, 110, 90); //西南东北，默认显示中国
      this.viewer = new Cesium.Viewer("cesium", {
        animation: false, //是否显示动画控件
        homeButton: false, //是否显示home键
        geocoder: false,// 查询
        baseLayerPicker: false, //是否显示图层选择控件
        timeline: false, //是否显示时间线控件
        fullscreenButton: false, //是否全屏显示
        scene3DOnly: true, //如果设置为true，则所有几何图形以3D模式绘制以节约GPU资源
        infoBox: false, //是否显示点击要素之后显示的信息
        sceneModePicker: false, //是否显示投影方式控件  三维/二维
        navigationHelpButton: false, //是否显示帮助信息控件
        imageryProvider: new Cesium.UrlTemplateImageryProvider({
          url: "http://map.geoq.cn/ArcGIS/rest/services/ChinaOnlineStreetPurplishBlue/MapServer/tile/{z}/{y}/{x}",
        }),
        terrainProvider: new Cesium.CesiumTerrainProvider({ 
          url: "http://data.marsgis.cn/terrain"
        }),
        skyAtmosphere:false,
        // orderIndependentTranslucency: false,
        contextOptions: {
          webgl: {
            alpha: true,
          },
        },
      });
      // 设置基本属性
      this.viewer.scene.sun.show = false; 
      this.viewer.scene.moon.show = false;
      this.viewer.scene.skyBox.show = false; //关闭天空盒，否则会显示天空颜色
      this.viewer.scene.undergroundMode = true; 
      this.viewer.scene.globe.show = true; 
      this.viewer.scene.backgroundColor = new Cesium.Color(0, 0, 0, 0);
      this.viewer.scene.screenSpaceCameraController.minimumZoomDistance = 1000;
      this.viewer.scene.screenSpaceCameraController.maximumZoomDistance = 5600000;
      if (Cesium.FeatureDetection.supportsImageRenderingPixelated()) {
        //判断是否支持图像渲染像素化处理
        this.viewer.resolutionScale = window.devicePixelRatio;
      }
      this.viewer.scene.fxaa = true;
      this.viewer.scene.postProcessStages.fxaa.enabled = true;
      // 隐藏版权
      this.viewer._cesiumWidget._creditContainer.style.display = "none";

      this.viewer.scene.camera.setView({
        destination: Cesium.Cartesian3.fromDegrees(
          120.952811,31.854272,
          6000
        ),
        orientation: {
          heading: Cesium.Math.toRadians(0),
          pitch: Cesium.Math.toRadians(-40),
          roll: Cesium.Math.toRadians(0), //heading、pitch和roll就是镜头相对于xyz轴的角度，比如pitch为-90°而另外两个为0时，就是90°向下俯视地球。
        },
      });
      mapMixin.viewer = this.viewer
      mapMixin._c_add_rotate_circle([120.952811,31.957272,1000],circlePng,800,'run_circle')   // 添加动态圆扫描
      mapMixin._c_add_run_circle({position:[120.952811,31.932272,1000],minR:100,maxR:1000,deviationR:1,img:circlePng1})   // 添加动态圆扩散
      mapMixin._c_add_run_point({positions:[120.942811,31.932272,1000],minR:100,maxR:1000,deviationR:1,img:circlePng1})   // 添加动态圆点
    },
  },
  }
</script>
<style lang='scss'>
.mapBox{
  width: 100%;
  height: 100%;
  #cesium{
    width: 100%;
    height: 100%;
    padding:20px;
    box-sizing: border-box;
  }
  .cesium-selection-wrapper,.cesium-selection-wrapper-visible{
    display: none!important;
  }
}
</style>

 

 

 方法代码如下：

// 添加动态圆this._c_add_rotate_circle([120.952811,31.932272,1000],run_circle,1500,'Prevention_run_circle')
    _c_add_rotate_circle: function(position,img,r,type){
      var rotation = Cesium.Math.toRadians(30);
      function changeR1(){
        rotation -= 0.05;
        return rotation;
      }
      this.viewer.entities.add({
        id:type+this._m_uuid(),
        name : 'Red plane with black outline',
        position: Cesium.Cartesian3.fromDegrees(position[0],position[1],position[2]),
        ellipse: {
          semiMinorAxis: r,
          semiMajorAxis: r,
          height: 20,
          stRotation:new Cesium.CallbackProperty(changeR1, false),
          material: new Cesium.ImageMaterialProperty({
            image: img,
            repeat: new Cesium.Cartesian2(1.0, 1.0),
            transparent: true,
          }),
        },
      });
    },


// 添加动态圆let data = {id:this.drawGeometryList.length+1,name:'危险区域',position:cartesian,text:'',minR:100,maxR:100,deviationR:0}
    _c_add_run_circle: function(item){
      // 平面圆 动态变大
      var data = { id: 1, minR: item.minR, maxR: item.maxR, deviationR: item.deviationR };
      let r1 = data.minR
      function changeR1() {
        // 自动动态扩大
        r1 = r1 + data.deviationR; //deviationR为每次圆增加的大小
        if (r1 >= data.maxR) {
          r1 = data.minR;
        }
        return r1
      }
      var circle = this.viewer.entities.add({
        id:item.id,
        name: item.name,
        position:Cesium.Cartesian3.fromDegrees(item.position[0], item.position[1], item.position[2]),
        ellipse: {
          semiMinorAxis: new Cesium.CallbackProperty(changeR1, false),
          semiMajorAxis: new Cesium.CallbackProperty(changeR1, false),
          height: 20,
          material: new Cesium.ImageMaterialProperty({
            image: item.img,
            repeat: new Cesium.Cartesian2(1.0, 1.0),
            transparent: true,
            // 颜色逐渐透明
            // color:new Cesium.CallbackProperty(function () {
            //   if(data.minR != data.maxR){
            //     var alp=1-r1/data.maxR;
            //     return Cesium.Color.WHITE.withAlpha(alp)  //entity的颜色透明 并不影响材质，并且 entity也会透明哦
            //   }
            // },false)
          }),
        },
        label: { 
          text: item.text,
          font: '500 15px Helvetica',
          showBackground: false,
          backgroundColor: Cesium.Color.fromCssColorString("#40d0da"),
          pixelOffset: new Cesium.Cartesian2(0,0),
        },
      });
      return circle
    },



    // 添加扩散点
    _c_add_run_point: function(item){
      let point = this.viewer.entities.add({
        id:item.draw_id,
        position:Cesium.Cartesian3.fromDegrees(item.positions[0], item.positions[1], item.positions[2]),
        show:true,
        ellipse:{
          semiMinorAxis :50,
          semiMajorAxis :50,
          height:10,
          material:Cesium.Color.fromCssColorString("#07e0e8").withAlpha(0.8)
        },
        label: { 
          text: item.dec,
          font: '500 15px Helvetica',
          showBackground: true,
          backgroundColor: Cesium.Color.fromCssColorString("#02a9ff"),
          pixelOffset: new Cesium.Cartesian2(0,-30),
        },
      });
      this.addCircleRipple({
        position:Cesium.Cartesian3.fromDegrees(item.positions[0], item.positions[1], item.positions[2]),
        deviationR:1,//差值 差值也大 速度越快
        eachInterval:1000,//两个圈的时间间隔
        imageUrl:item.img,
        maxR:200,
        type:item.draw_id
      });
      return point
    },

    addCircleRipple: function(data){
      var r1=0,r2=0;
      function changeR1() { //这是callback，参数不能内传
        r1=r1+data.deviationR;
        if(r1>=data.maxR){
          r1=0;
        }
        return r1;
      }
      //第一个圆先跑
      this.viewer.entities.add({
        id:data.type+this._m_uuid(),
        description:"LIGHT_POINTS",
        position:data.position,
        show:true,
        ellipse:{
          semiMinorAxis :new Cesium.CallbackProperty(changeR1,false),
          semiMajorAxis :new Cesium.CallbackProperty(changeR1,false),
          height:10,
          material:new Cesium.ImageMaterialProperty({
            image:data.imageUrl,
            repeat:Cesium.Cartesian2(1.0, 1.0),  //指定图像在每个方向上重复的次数,默认为Cesium.Cartesian2(1.0, 1.0),{Cartesian2}类型
            transparent:true,// 默认为false，当图像具有透明性时设置为true（例如，当png具有透明部分时）
            color:new Cesium.CallbackProperty(function () {
              var alp=1-r1/data.maxR;
              return  Cesium.Color.WHITE.withAlpha(alp)
              //entity的颜色透明 并不影响材质，并且 entity也会透明
            },false)
          })
        }
      });
      //第二个圆开始跑
      setTimeout( ()=> {
        function changeR2() { //这是callback，参数不能内传
          r2=r2+data.deviationR;
          if(r2>=data.maxR){
            r2=0;
          }
          return r2;
        }
        this.viewer.entities.add({
          id:data.type+this._m_uuid(),
          description:"LIGHT_POINTS",
          position:data.position,
          show:true,
          ellipse:{
            semiMinorAxis :new Cesium.CallbackProperty(changeR2,false),
            semiMajorAxis :new Cesium.CallbackProperty(changeR2,false),
            height:10,
            material:new Cesium.ImageMaterialProperty({
              image:data.imageUrl,
              repeat:Cesium.Cartesian2(1.0, 1.0),
              transparent:true,
              color:new Cesium.CallbackProperty(function () {
                  var alp=1-r2/data.maxR;
                  return  Cesium.Color.WHITE.withAlpha(alp)
                  //entity的颜色透明 并不影响材质，并且 entity也会透明
              },false)
            })
          }
        });
      },data.eachInterval)
    },