vue+cesium添加点

接上节
项目要求地图标注点有动效，参考动效链接https://blog.csdn.net/weixin_39150852/article/details/124126031
新建一个pointentity.js 如下

/**
 * @param {Viewer} viewer
 * 
*/
export default class PointEntity {
    constructor(val) {
        this.viewer = val.viewer
    }
    addEntity(item) {
        // let poin = this.viewer
        let map_green = require("../../assets/map_icon_green.png")
        let map_green1 = require("../../assets/map_icon_green1.png")
        let x = 1;
        let flog = true;
        let poin = this.viewer.entities.add({
            id: item.id,
            name: item.pointName,
            position: Cesium.Cartesian3.fromDegrees(item.longitude, item.latitude, 990),
            billboard: {
                image:map_green,
                show: true, // default
                pixelOffset: new Cesium.Cartesian2(0, 0), // default: (0, 0)
                eyeOffset: new Cesium.Cartesian3(0.0, 0.0, 0.0), // default
                horizontalOrigin: Cesium.HorizontalOrigin.CENTER, // default
                verticalOrigin: Cesium.VerticalOrigin.BOTTOM, // default: CENTER
                scale: 1.0, // default: 1.0
                // color: Cesium.Color.LIME, // default: WHITE
                // alignedAxis: Cesium.Cartesian3.ZERO, // default
                width: 58, // default: undefined
                height: 58, // default: undefined
                rotation: 50.3,
            },
            monitoItems: item,
        })
        this.viewer.entities.add({
            position: Cesium.Cartesian3.fromDegrees(item.longitude, item.latitude, 990),
            billboard: {
                image:  map_green1,
                pixelOffset: new Cesium.Cartesian2(0, -40),
                scale: new Cesium.CallbackProperty(function () {
                    if (flog) {
                        x = x - 0.04;
                        if (x <= 0.2) {
                            flog = false;
                        }
                    } else {
                        x = x + 0.04;
                        if (x >= 0.8) {
                            flog = true;
                        }
                    }
                    return x;
                }, false)
            },
        });
        return poin
    }

}

上节的index.vue中引入

import PointEntity from './pointentity.js'

批量添加标注点

    getPoint() {
      let _this = this;
      let { viewer, pointList } = _this;
      let drag = new PointEntity({
        viewer: this.viewer,
      })
      //pointList为后台接口返回数据，大致格式为[{id:1,longitude:'113.21',latitude:'37.21',pointName:'点1',...}]
      pointList.forEach((item, index) => {
        let entity = drag.addEntity(item);
        _this.poinEntity[item.id] = entity;
      })
      this.handlePointClick()
    },
    //给点添加点击事件
      handlePointClick() {
      let that = this;
      let id
      let handler = new Cesium.ScreenSpaceEventHandler(that.viewer.scene.canvas);
      handler.setInputAction(function (click) {
        let pick = that.viewer.scene.pick(click.position)
        if (Cesium.defined(pick) && (pick.id.id)) {
          console.log('点击了')
        } else {
        }
      }, Cesium.ScreenSpaceEventType.LEFT_CLICK)
    },