vuejs+cesium绘制点以及给点添加点击事件

1、绘制一个点

　　this.viewer.entities.add({

               id:‘设置点的id’,

               position : new Cesium.Cartesian3.fromDegrees(经度, 纬度, 高度),

               point : {

                    pixelSize : 15,//点的大小

                    color: Cesium.Color.RED,//点的颜色

                    outlineWidth:2,//边框宽度

                    outlineColor: Cesium.Color.WHITE.withAlpha(0.4),//边框颜色

              }

        })

2、将绘制的点更改为一个图片

        this.viewer.entities.add({

               id:‘设置点的id’,

               position : new Cesium.Cartesian3.fromDegrees(经度, 纬度, 高度),

　　　　    billboard:{

               　　 // 图像地址，URI或Canvas的属性

                　　image: require('../../../assets/image/header/position.png'),

                　　// 设置颜色和透明度

                　　color: Cesium.Color.WHITE.withAlpha(0.8),

                　　// 高度（以像素为单位）

                　　height: 36,

                　　// 宽度（以像素为单位）

                　　width: 36,

                　　// 逆时针旋转

                　　rotation: 0,

                　　// 大小是否以米为单位

                　　sizeInMeters: false,

                　　// 相对于坐标的垂直位置

                　　verticalOrigin: Cesium.VerticalOrigin.CENTER,

                　　// 相对于坐标的水平位置

                　　horizontalOrigin: Cesium.HorizontalOrigin.LEFT,

                　　// 该属性指定标签在屏幕空间中距此标签原点的像素偏移量

                　　pixelOffset: new Cesium.Cartesian2(10, 0),

                　　// 应用于图像的统一比例。比例大于会1.0放大标签，而比例小于会1.0缩小标签。

                　　scale: 1.0,

                　　// 是否显示

                　　show: true

             }

      })

3、绘制多个点且闪烁的

　　   let x = 1;

　　   let flog = true;

        item.data.map((list,index)=>{

              that.viewer.entities.add({

                id:`area${index}`,

　　　　     infoId:list.infoId,

                position : new Cesium.Cartesian3.fromDegrees(list.lng, list.lat, list.alt),

                point : {

                    pixelSize : 15,

                    color: new Cesium.CallbackProperty(function () {

                      if(flog){

                        x = x - 0.01;

                        if(x<=0){

                          flog = false;

                        }

                      }else{

                        x = x + 0.01;

                        if(x>=1){

                          flog = true;

                        }

                      }

                      return Cesium.Color.RED.withAlpha(x);

                    },false),

                    outlineWidth:2,

                    outlineColor: Cesium.Color.WHITE.withAlpha(0.4),

                }

            })

          })

　　　this.handlePointClick();//添加点的点击事件
4、给点添加点击事件

　　handlePointClick(){

　　　　let that = this;

　　　　let handler = new Cesium.ScreenSpaceEventHandler(that.viewer.scene.canvas);

       　　handler.setInputAction(function (click) {

       　　　　let pick = that.viewer.scene.pick(click.position)

        　 　　  if (pick && pick.id) {

          　　　　　that.viewer.entities.values.map((item)=>{

            　　　　　　if(pick.id.id && (item.id == pick.id.id)){

              　　　　　　　　that.viewer._selectedEntity = [];//去除左击之后出现选中的绿框

              　　　　　　　　if(item.infoId){

                　　　　　　　　　　点击点之后的操作

              　　　　　　　　}

            　　　　　　}

         　　　　　　})

        　　　　}

      　　}, Cesium.ScreenSpaceEventType.LEFT_CLICK)

             this.viewer.cesiumWidget.screenSpaceEventHandler.removeInputAction(Cesium.ScreenSpaceEventType.LEFT_DOUBLE_CLICK);//去除双击放大地图效果

　   }

5、删除地图上绘制的所有的点

      this.viewer.entities.removeAll();

6、删除地图上绘制的某一个点(通过id)

      let getByIdBoxs = this.viewer.entities.getById('设置的id名称');

      this.viewer.entities.remove(getByIdBoxs);

7、cesium的属性访问地址：http://cesium.xin/cesium/cn/Documentation1.72/PolygonGraphics.html
8、基础用法笔记来源：https://blog.csdn.net/lyxkgc/article/details/124796138

9、详细vuejs+cesium的使用：https://www.cnblogs.com/wangyan0926/p/16453982.html