Cesium 利用callbackproperty实现鼠标移入高亮

Glen 997

已于 2024-08-23 11:19:56 修改

阅读量1.9k

点赞数 2

分类专栏： cesium 文章标签： js cesium 高亮 callback 鼠标事件

于 2021-05-20 16:11:10 首次发布

本文链接：https://blog.csdn.net/qq_33302004/article/details/117080137

版权

cesium 专栏收录该内容

4 篇文章 1 订阅

订阅专栏

本文介绍了如何在Cesium中利用CallbackProperty实现鼠标悬停时折线高亮的功能。通过为每个entity设置唯一id，并设置全局变量记录当前选中id，结合callbackproperty判断和鼠标监听事件，动态改变属性值，达到高亮显示的效果。

摘要由CSDN通过智能技术生成

一、需求来源

项目中会绘制许多条折线，用户要求实现鼠标悬浮在折线上时突出显示整条折线。

二、核心思想

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

三、效果

四、代码实现

1. 绘制曲线函数（包含callbackproperty的写法）

let selectEntityID = "";

function getAndDrawTrajectoryList() {
    // var that = this;
    // 异步
    axios.get("http://localhost:5600/getTrajectoryList").then(
      function (response) {
        // 【1 - 利用http获取航迹数据并存到List中】
        let TrajectoryList = response.data;
        console.log(TrajectoryList);

        for(let i=0; i<TrajectoryList.length; i++){
            let data_positions = [];
            for(let j=0; j<TrajectoryList[i].length; j++){
                data_positions.push(TrajectoryList[i][j].longitude);
                data_positions.push(TrajectoryList[i][j].latitude);
                // 画点
                // 根据id识别当前在哪条曲线上
                let entityId = "point-"+i+"-"+j;
                // console.log(entityId);
                viewer.entities.add({
                    id:entityId,
                    position: Cesium.Cartesian3.fromDegrees(TrajectoryList[i][j].longitude, TrajectoryList[i][j].latitude,100),
                    point: {
                        color: new Cesium.CallbackProperty(function(){
                            let myIndex = entityId.split("-")[1];
                            let selectIndex = selectEntityID.split("-")[1];
                            if(myIndex == selectIndex){
                                return  Cesium.Color.GREEN;
                            }else{
                                return  Cesium.Color.RED;
                            }
                               
                          }, false),//Cesium.Color.RED,    //点位颜色
                        pixelSize: new Cesium.CallbackProperty(function(){
                            let myIndex = entityId.split("-")[1];
                            let selectIndex = selectEntityID.split("-")[1];
                            if(myIndex == selectIndex){
                                return  14;
                            }else{
                                return  7;
                            }
                               
                          }, false)//7                //像素点大小
                    },
                });
            }
            let entityId = "line-"+i;
            viewer.entities.add({
                id: entityId,
                polyline: {
                    positions: parent.Cesium.Cartesian3.fromDegreesArray(data_positions),
                    width: new Cesium.CallbackProperty(function(){
                        let myIndex = entityId.split("-")[1];
                        let selectIndex = selectEntityID.split("-")[1];
                        if(myIndex == selectIndex){
                            return  8;
                        }else{
                            return  4;
                        }
                           
                      }, false),
                    material: parent.Cesium.Color.YELLOW,
                    clampToGround: true
                }
            });
        }

      },
      function (err) {
        alert("获取航迹数据时访问服务器出错！！");
        console.log(err);
      }
    );
}

2. 鼠标监听函数

viewer.screenSpaceEventHandler.setInputAction(function onMouseMove( movement ) {
    var pickedFeature = viewer.scene.pick(movement.endPosition);
    if (!Cesium.defined(pickedFeature)) {
        selectEntityID = "";
        return;
    }
    selectEntityID = pickedFeature.id.id;
},Cesium.ScreenSpaceEventType.MOUSE_MOVE);