坐标地面闪烁

选中坐标的时候,让坐标下方有一个闪烁图片效果

在点击事件中加入添加闪烁图片函数

// 给全图绑定事件
const handler = new Cesium.ScreenSpaceEventHandler(this.viewer.scene.canvas)
// 点击事件
handler.setInputAction((click) => {
  // 添加弹框特效(红色选中波纹特效)
  this.addCircleRippleInit(this.viewer, lon2, lat2, 1)
})

闪烁图片函数，选中效果

// 选中效果
addCircleRippleInit(viewer, long, lat, height) {
  let data = {
    id: ['abcd-111', 'abcd-222'], // 2个实现圆弧效果的实体id，后面对这2个实体的操作都是通过这个id来的
    lon: long * 1, // 经度 就不多说了
    lat: lat * 1, // 维度 也不多说了
    height: height, // 因为是3d地图，地图上的实体会有高度属性，可以设置实体的高度
    maxR: 40, // 圆弧的最大半径
    minR: 0, // 最好为0
    deviationR: 0.3, // 差值 差值也大 速度越快
    eachInterval: 1000, // 两个圈的时间间隔
    imageUrl: require('@/assets/image/zl.jpg'),
  }

  // 调用上面构造圆弧的方法
  this.addCircleRipple(viewer, data)
},
// 构建圆弧效果
addCircleRipple(viewer, data) {
  // console.log('🚀 ~ file: No01-init.vue ~ line 288 ~ addCircleRipple ~ viewer, data', viewer, data)
  const Cesium = this.cesium
  var r1 = data.minR,
    r2 = data.minR
  // 通过 entities.getById()方法找到要操作的实体
  // 移除上一次的波纹效果
  if (viewer.entities.getById(data.id[0])) {
    viewer.entities.remove(viewer.entities.getById(data.id[0]))
  }

  if (viewer.entities.getById(data.id[1])) {
    viewer.entities.remove(viewer.entities.getById(data.id[1]))
  }

  // 回调函数1
  function changeR1() {
    //这是callback，参数不能内传
    r1 = r1 + data.deviationR
    if (r1 >= data.maxR) {
      r1 = data.minR
    }
    return r1
  }
  // 回调函数2
  function changeR2() {
    r2 = r2 + data.deviationR
    if (r2 >= data.maxR) {
      r2 = data.minR
    }
    return r2
  }
  viewer.entities.add({
    id: data.id[0],
    name: '',
    position: Cesium.Cartesian3.fromDegrees(data.lon, data.lat, data.height),
    ellipse: {
      // 这里为什么一个方法要写成 changeR1 changeR2
      // 因为 Cesium中使用圆的扩散，可以采用回调函数来进行绘制，这样可以可以获得动态扩散的效果。但是做的过程中遇到一个长半轴小于短半轴的报错
      // 原因
      // semiMinorAxis和semiMajorAxis使用同一个回调函数，并且semiMajorAxis属性要早于semiMinorAxis属性，所以造成长半轴小于短半轴。
      // 解决方案：
      // semiMinorAxis使用另一个回调函数
      // 关于这里的报错，可以看最下方的参考文章那里
      semiMinorAxis: new Cesium.CallbackProperty(changeR1, false),
      semiMajorAxis: new Cesium.CallbackProperty(changeR2, false),
      height: data.height,
      material: new Cesium.ImageMaterialProperty({
        image: data.imageUrl,
        repeat: new Cesium.Cartesian2(1.0, 1.0),
        transparent: true,
        color: new Cesium.CallbackProperty(function () {
          var alp = 1 - r1 / data.maxR
          return Cesium.Color.WHITE.withAlpha(alp) //entity的颜色透明 并不影响材质，并且 entity也会透明哦
        }, false),
      }),
    },
  })
  setTimeout(function () {
    viewer.entities.add({
      id: data.id[1],
      name: '',
      position: Cesium.Cartesian3.fromDegrees(data.lon, data.lat, data.height),
      ellipse: {
        semiMinorAxis: new Cesium.CallbackProperty(changeR1, false),
        semiMajorAxis: new Cesium.CallbackProperty(changeR2, false),
        height: data.height,
        material: new Cesium.ImageMaterialProperty({
          image: data.imageUrl,
          repeat: new Cesium.Cartesian2(1.0, 1.0),
          transparent: true,
          color: new Cesium.CallbackProperty(function () {
            var alp = 1
            alp = 1 - r2 / data.maxR
            return Cesium.Color.WHITE.withAlpha(alp)
          }, false),
        }),
      },
    })
  }, data.eachInterval)
},