学习【Cesium】第九篇，鼠标交互和数据查询（学不会揍我）

这篇主要是学习鼠标交互和数据查询，那么这里有必要搞清楚Cesium空间事件类型有哪些才能进行下一步查询操作，话不多说，上图：

文档中查找 ScreenSpaceEventType 对象

文档对于事件类型已经做了列表，我这边画蛇添足😀补充一个中文对照表：

事件名称	类型	描述
LEFT_DOWN	数字	表示鼠标左键按下事件。
LEFT_UP	数字	表示鼠标左键向上事件。
LEFT_CLICK	数字	表示鼠标左键单击事件。
LEFT_DOUBLE_CLICK	数字	表示鼠标左键双击事件。
RIGHT_DOWN	数字	表示鼠标左键按下事件。
RIGHT_UP	数字	表示鼠标右键向上事件。
RIGHT_CLICK	数字	表示鼠标右键单击事件。
MIDDLE_DOWN	数字	表示鼠标中键按下事件。
MIDDLE_UP	数字	表示鼠标中键向上事件。
MIDDLE_CLICK	数字	表示鼠标中键单击事​​件。
MOUSE_MOVE	数字	表示鼠标移动事件。
WHEEL	数字	表示鼠标滚轮事件。
PINCH_START	数字	表示触摸表面上的两指事件的开始。
PINCH_END	数字	表示触摸表面上的两指事件的结束。
PINCH_MOVE	数字	表示触摸表面上两指事件的变化。

 代码示例：

// 添加鼠标左键点击事件
const handler =   new Cesium.ScreenSpaceEventHandler(this.viewer.cavans)
handler.setInputAction(e => {
    console.info('e:', e)
}, Cesium.ScreenSpaceEventType.LEFT_CLICK)

 执行效果，如下：

其他事件都是照葫芦画瓢，把事件类型对就行。
 

以上点击，只是实现了屏幕坐标的信息打印，我们在项目处理过程中，经常会在屏幕坐标和空间坐标进行互转，业务场景大概是：我加载了模型，点击模型想要获取模型的属性信息，如何操作呢？接下来，还是上代码说明：

 添加多边形并添加描述：

const position2 = new Cesium.Cartesian3.fromDegrees(114.21, 30.55, 0)
// 面
const entityC = this.viewer.entities.add({
    id: 'entityC',
    position: position2,
    plane: {
    plane: new Cesium.Plane(Cesium.Cartesian3.UNIT_Z, 5.0),
    dimensions: new Cesium.Cartesian2(400, 400),
    material: Cesium.Color.BURLYWOOD,
    outline: true,
    outlineWidth: 10,
    outlineColor: Cesium.Color.BROWN,
    show: true
    },
    description: `<div>
        <p>这是一个简单的信息</p>
    </div>`
})

 添加点击事件

// 添加鼠标左键点击事件
const handler =   new Cesium.ScreenSpaceEventHandler(this.viewer.cavans)
    handler.setInputAction(e => {
    console.info('e:', e)
    const pick = this.viewer.scene.pick(e.position)
    if (Cesium.defined(pick)) {
        console.info('pick:', pick.id.id)
    }
}, Cesium.ScreenSpaceEventType.LEFT_CLICK)

执行效果：

 

如果以上弹窗没有出现，请检查信息盒子是否打开，看下图：