Cesium三维地球-点击图标放大显示特效

功能说明

在三维地球上放上自定义图标，点击图标后，拉近Z轴距离，放大显示具体地面图标。

关键代码

添加实体

   entity = viewer.entities.add({
        //   id: id++,
        position: Cesium.Cartesian3.fromDegrees(
          position[0],
          position[1],
          position[2]
        ),
        billboard: {
          image: url,
          distanceDisplayCondition: new Cesium.DistanceDisplayCondition(
            near,
            far
          ),
        },
        label: {
          //文字内容
          text: name,
          //文字填充颜色
          fillColor: Cesium.Color.WHITE,
          scale: 0.5,
          //文本大小与字体
          // font: 'normal 14px Microsoft YaHei UI',
          font: 'normal 36px SimHei',

          //是否显示背景
          showBackground: false,
          //背景墙的颜色
          backgroundColor: Cesium.Color.fromCssColorString(
            'rgba(52,79,209,1.0)'
          ),
          //背景宽度
          backgroundPadding: new Cesium.Cartesian2(3, 3),
          //文字与背景墙的总大小

          //文本轮廓
          style: Cesium.LabelStyle.FILL_AND_OUTLINE,
          //外边界颜色
          outlineColor: Cesium.Color.BLACK,
          //外边界宽度
          outlineWidth: 2,
          //文本出现的位置
          verticalOrigin: Cesium.VerticalOrigin.BOTTOM,
          //文本的偏移方向
          pixelOffset: new Cesium.Cartesian2(6, 26),
          distanceDisplayCondition: new Cesium.DistanceDisplayCondition(
            near,
            far
          ),
        },
      })

添加一个屏幕事件监听

handler = new Cesium.ScreenSpaceEventHandler(viewer.scene.canvas)

实现鼠标move到图标，图标变大的一个功能

 handler.setInputAction(function (movement) {
        var pickedObject = viewer.scene.pick(movement.endPosition)
        if (Cesium.defined(pickedObject) && pickedObject.id === entity) {
          entity.billboard.scale = 2.0
          entity.billboard.color = Cesium.Color.YELLOW
        } else {
          entity.billboard.scale = 1.0
          entity.billboard.color = Cesium.Color.WHITE
        }
      }, Cesium.ScreenSpaceEventType.MOUSE_MOVE)

实现鼠标点击图标，视角拉近，显示更多图标功能

设置的实体分类两类，clickFlak为1的是Z轴大于1800000才显示的实体，clickFlak为2的是Z轴小于1800000才显示的实体，在初始化时添加Flag标志进行区分。

 if (clickFlag === 1) {
        handler.setInputAction(function (e) {
          var pick = viewer.scene.pick(e.position)
          // if (pick && pick.id) {
          if (Cesium.defined(pick) && pick.id === entity) {
            viewer.camera.flyTo({
              destination: Cesium.Cartesian3.fromDegrees(
                position[0],
                position[1],
                1800000
              ),
              orientation: {
                heading: Cesium.Math.toRadians(0),
                pitch: Cesium.Math.toRadians(-90),
                roll: Cesium.Math.toRadians(0),
              },
              duration: 2, // 设置飞行持续时间，默认会根据距离来计算
            })
          }
        }, Cesium.ScreenSpaceEventType.LEFT_CLICK)
      }
      if (clickFlag === 2) {
        handler.setInputAction(function (e) {
          var pick = viewer.scene.pick(e.position)
          if (Cesium.defined(pick) && pick.id === entity) {
            const text = pick.id._label._text._value
            that.$router.push({ name: 'topograph', params: { name: text } })
          }
        }, Cesium.ScreenSpaceEventType.LEFT_CLICK)
      }

完整代码

  mounted() {
    viewer = createScene(this)
    viewer.scene.postProcessStages.fxaa.enabled = false
    this.drowSateliite()
    this.AddLandmark(
      [86, 41, 80000],
      '/btn/satellite.png',
      viewer,
      5000000.0,
      Number.MAX_VALUE,
      'AAA站',
      1
    )
    this.AddLandmark(
      [86, 43, 70000],
      '/btn/satellite.png',
      viewer,
      0,
      5000000.0,
      'BBB站1',
      2
    )
    this.AddLandmark(
      [88, 42, 70000],
      '/btn/satellite.png',
      viewer,
      0,
      5000000.0,
      'CCC站',
      2
    )
    }
 methods: {
   AddLandmark(position, url, viewer, near, far, name, clickFlag) {
      const that = this
      var entity = ''
      var handler = ''
      handler = handler && handler.destroy()
      entity = viewer.entities.add({
        //   id: id++,
        position: Cesium.Cartesian3.fromDegrees(
          position[0],
          position[1],
          position[2]
        ),
        billboard: {
          image: url,
          distanceDisplayCondition: new Cesium.DistanceDisplayCondition(
            near,
            far
          ),
        },
        label: {
          //文字内容
          text: name,
          //文字填充颜色
          fillColor: Cesium.Color.WHITE,
          scale: 0.5,
          //文本大小与字体
          // font: 'normal 14px Microsoft YaHei UI',
          font: 'normal 36px SimHei',

          //是否显示背景
          showBackground: false,
          //背景墙的颜色
          backgroundColor: Cesium.Color.fromCssColorString(
            'rgba(52,79,209,1.0)'
          ),
          //背景宽度
          backgroundPadding: new Cesium.Cartesian2(3, 3),
          //文字与背景墙的总大小

          //文本轮廓
          style: Cesium.LabelStyle.FILL_AND_OUTLINE,
          //外边界颜色
          outlineColor: Cesium.Color.BLACK,
          //外边界宽度
          outlineWidth: 2,
          //文本出现的位置
          verticalOrigin: Cesium.VerticalOrigin.BOTTOM,
          //文本的偏移方向
          pixelOffset: new Cesium.Cartesian2(6, 26),
          distanceDisplayCondition: new Cesium.DistanceDisplayCondition(
            near,
            far
          ),
        },
      })
      handler = new Cesium.ScreenSpaceEventHandler(viewer.scene.canvas)
      // move到图标变大
      handler.setInputAction(function (movement) {
        var pickedObject = viewer.scene.pick(movement.endPosition)
        if (Cesium.defined(pickedObject) && pickedObject.id === entity) {
          entity.billboard.scale = 2.0
          entity.billboard.color = Cesium.Color.YELLOW
        } else {
          entity.billboard.scale = 1.0
          entity.billboard.color = Cesium.Color.WHITE
        }
      }, Cesium.ScreenSpaceEventType.MOUSE_MOVE)
      // 图标点击事件

      if (clickFlag === 1) {
        handler.setInputAction(function (e) {
          var pick = viewer.scene.pick(e.position)
          // if (pick && pick.id) {
          if (Cesium.defined(pick) && pick.id === entity) {
            console.log('zxc点击到了：' + pick.id._id)
            viewer.camera.flyTo({
              destination: Cesium.Cartesian3.fromDegrees(
                position[0],
                position[1],
                1800000
              ),
              orientation: {
                heading: Cesium.Math.toRadians(0),
                pitch: Cesium.Math.toRadians(-90),
                roll: Cesium.Math.toRadians(0),
              },
              duration: 2, // 设置飞行持续时间，默认会根据距离来计算
            })
          }
        }, Cesium.ScreenSpaceEventType.LEFT_CLICK)
      }
      if (clickFlag === 2) {
        handler.setInputAction(function (e) {
          var pick = viewer.scene.pick(e.position)
          if (Cesium.defined(pick) && pick.id === entity) {
            console.log(pick, 'zxccccc点击到了：' + pick.id._label._text._value)
            const text = pick.id._label._text._value
            that.$router.push({ name: 'topograph', params: { name: text } })
          }
        }, Cesium.ScreenSpaceEventType.LEFT_CLICK)
      }
    },
}