Cesium 鼠标移出地球,但移动中生成的内容还在球上

文章目录

    • 问题
    • 分析

问题

在开发中,遇到这么一种情况,鼠标移动生成坐标点的经纬,因此 lable 是根据鼠标移动一起的,但是当鼠标脱离球体之后,最后一次在球上的标签依然还固定在球上未被消除,想过用删除实体的方式删除,但并没有用。因此,经过尝试之后总结如下:

分析

要实现鼠标在球体上显示,离开球体不显示的效果,你可以借助 Cesium 的 Entity 对象和 ScreenSpaceEventHandler 来实现。首先,创建一个球体的 Entity 对象,然后在鼠标移动事件中更新球体的可见性。

以下是一个示例代码:

// 创建 Cesium 场景
var viewer = new Cesium.Viewer('cesiumContainer');

// 创建球体的 Entity 对象
var sphere = viewer.entities.add({
  position: Cesium.Cartesian3.fromDegrees(-75.59777, 40.03883),
  ellipsoid: {
    radii: new Cesium.Cartesian3(500000.0, 500000.0, 500000.0),
    fill: true,
    outline: true,
    outlineColor: Cesium.Color.BLACK,
    material: Cesium.Color.RED.withAlpha(0.5)
  },
  show: false // 初始状态下不显示球体
});

// 创建 ScreenSpaceEventHandler 对象
var handler = new Cesium.ScreenSpaceEventHandler(viewer.scene.canvas);

// 监听鼠标移动事件
handler.setInputAction(function(movement) {
  var position = movement.endPosition;

  // 将屏幕坐标转换为世界坐标
  var ray = viewer.camera.getPickRay(position);
  var intersection = viewer.scene.globe.pick(ray, viewer.scene);

  if (Cesium.defined(intersection)) {
    // 鼠标在球上移动时,显示球体
    sphere.show = true;
  } else {
    // 鼠标离开球时,隐藏球体
    sphere.show = false;
  }
}, Cesium.ScreenSpaceEventType.MOUSE_MOVE);

在上述代码中,我们创建了一个 Cesium 场景 viewer。然后,我们创建了一个球体的 Entity 对象 sphere,并设置其初始位置和外观属性。初始状态下,将 sphere.show 设置为 false 来隐藏球体。

然后,我们创建了一个 ScreenSpaceEventHandler 对象 handler,并使用 setInputAction 方法监听鼠标移动事件。当鼠标移动时,会触发回调函数,其中 movement.endPosition 是鼠标在屏幕上的位置。

我们使用 viewer.camera.getPickRay(position) 将屏幕坐标转换为射线。然后,通过 viewer.scene.globe.pick(ray, viewer.scene) 方法,判断射线是否与球体交叉。如果有交叉点,则说明鼠标在球体上移动,将 sphere.show 设置为 true 来显示球体;如果没有交叉点,则说明鼠标离开球体,将 sphere.show 设置为 false 来隐藏球体。
经过上述的案例思考后,想出可以使用 this.viewer.entities.remove(labelEntity);来删除

接下来是我完整代码:

  • 鼠标移动事件
//鼠标移动事件
mouseMoveEvent() {
     var labelEntity = null; // 标签实体
     this.viewer.screenSpaceEventHandler.setInputAction((moveEvent) => {
     //var movePosition = this.viewer.scene.pickPosition(moveEvent.endPosition); // 鼠标移动的点
     // 判断是否在球上
         var movePosition = this.viewer.scene.globe.pick(this.viewer.camera.getPickRay(moveEvent.endPosition), this.viewer.scene);
         if(movePosition){
             this.leafEath = true;
             console.log(movePosition)
             if (this.positions.length == 2) {
                 this.positions.pop();
                 this.positions.push(movePosition);

                 // 绘制label
                 if (labelEntity) {
                     this.viewer.entities.remove(labelEntity);
                     this.entityCollection.splice(this.entityCollection.indexOf(labelEntity), 1);
                 }
                 // 计算中点
                 this.centerPoint = Cesium.Cartesian3.midpoint(this.positions[0], this.positions[1], new Cesium.Cartesian3());
                 // 计算距离
                 this.lengthText = "距离:" + this.getLengthText(this.positions[0], this.positions[1]);
                 // 鼠标移动事件
                 labelEntity = this.addLabel(this.centerPoint, this.lengthText);
                 this.entityCollection.push(labelEntity);
             } else {
                 this.positions.push(movePosition);
             }
         }else{
             this.leafEath = false;// 用于控制点击后生成的坐标标签信息,因为之前鼠标点击后要生成坐标标签,因此这个时候需要也控制一下
             this.viewer.entities.remove(labelEntity);
             return false;
         }
     }, Cesium.ScreenSpaceEventType.MOUSE_MOVE);
 },
  • 添加标签
//  添加标签
addLabel(centerPosition, text) {
    return this.viewer.entities.add(new Cesium.Entity({
        position: centerPosition,
        label: {
            text: text,
            font: '14px sans-serif',
            style: Cesium.LabelStyle.FILL_AND_OUTLINE, //FILL  FILL_AND_OUTLINE OUTLINE
            fillColor: Cesium.Color.YELLOW,
            showBackground: true, //指定标签后面背景的可见性
            backgroundColor: new Cesium.Color(0.165, 0.165, 0.165, 0.8), // 背景颜色
            backgroundPadding: new Cesium.Cartesian2(6, 6), //指定以像素为单位的水平和垂直背景填充padding
            pixelOffset: new Cesium.Cartesian2(0, -25),
            disableDepthTestDistance: Number.POSITIVE_INFINITY
        }
    }));
},

你可能感兴趣的:(Cesium,开发,数据可视化)