Cesium 利用callbackproperty实现鼠标点击改变point尺寸

一、需求来源

项目中会绘制许多条折线，用户要求实现鼠标悬浮时突出显示此点。分为固定尺寸和回调函数两种

二、核心思想

• 为每个entity设置id，同时设置一个全局变量作为当前被选中的id；
• 在callbackproperty中判断当前选中的实体是否和描绘的point属于同一个，由此返回不同的属性值；
• 设置鼠标监听事件，根据鼠标悬浮的位置重置当前被选中的id；

三、效果

四、代码实现

1、绘制点1

let pointArr = [];//点位数组
let pointItem = null//右击选中的点位
let pointItemName = ''
function createPoint(worldPosition, ind, index) {
            var point = viewer.entities.add({
                position: worldPosition,
                // id: index,
                name: index + '-' + ind,
                point: {
                    color: new Cesium.CallbackProperty(function () {
                        let color = Cesium.Color.fromCssColorString(viewModel.colorPink3)
                        return color;
                    }, false),
                    pixelSize: new Cesium.CallbackProperty(function () {
                       if( pointItemName == (index + '-' + ind))
                            {
                              return viewModel['zdSize'] * 1+10;
                            }
                        else{
                            return viewModel['zdSize'] * 1;
                        }
                    }, false),
                    // heightReference: Cesium.HeightReference.NONE,//该位置固定在地形上
                }
            });

           
            pointArr.push(point)
           
        }

2. 鼠标监听函数

viewer.screenSpaceEventHandler.setInputAction(function onMouseMove( movement ) {
           let pickItem = viewer.scene.pick(event.position);//选中的点位
         let entitiesArr = viewer.entities._entities._array;//里面包括点线面
                if (entitiesArr.length) {
                    entitiesArr.forEach(item => {
                        if (item._name != '直线' && item._name != '面' && item._id == pickItem.id._id) {
                           pointItem = item//选中点位  
                           pointItemName =item._name
                           
                        }                  
                    })
                }
            } 
},Cesium.ScreenSpaceEventType.MOUSE_MOVE);

 五、项目中点的尺寸固定时，用户要求实现鼠标悬浮突出显示此点。

给cesium添加鼠标移动事件，然后获取到cesium中entity实体对象，找到point属性，然后进行设置其_pixelSize属性值大小即可。

           //鼠标移动事件point放大缩小
            var canvas = this.cesiumViewer.scene.canvas;
            var handler = new Cesium.ScreenSpaceEventHandler(canvas);
            var viewer = this.cesiumViewer;
            handler.setInputAction((movement)=> {
                let pickedFeatureStart = viewer.scene.pick(movement.startPosition);
                let pickedFeatureEnd = viewer.scene.pick(movement.endPosition);
                if (!Cesium.defined(pickedFeatureStart)) {
                    return;
                }
                let entitieStart = pickedFeatureStart;
                if (!Cesium.defined(pickedFeatureEnd)) {
                   //结束位置无实体
                   entitieStart.id._point._pixelSize._value = 30
                   //console.log('鼠标滑动结束位置实体对象',pickedFeatureEnd)
                   //console.log('鼠标滑动开始位置实体对象',pickedFeatureStart)
                   return;
                }
                if(entitieStart.id._id){
                    entitieStart.id._point._pixelSize._value = 60
                }
                return
            },
            Cesium.ScreenSpaceEventType.MOUSE_MOVE);