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

标签：Cesium entities vuejs viewer 点击 let cesium new id

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

标签：Cesium,entities,vuejs,viewer,点击,let,cesium,new,id
From： https://www.cnblogs.com/wangyan0926/p/17126013.html