在开发中,遇到这么一种情况,鼠标移动生成坐标点的经纬,因此 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
}
}));
},