在一些应用场景下需要实现将鼠标移动到模型上后自动显示模型信息,而不需要点击,这样可以让整个场景浏览十分顺畅,但是webgl中暂时没有mouse-over事件可供调用,但是提供了mouse-move事件,可以基于此事件实现鼠标滑动选择对象功能。
选择Entity
首先需要在场景中注册鼠标移动事件,获取鼠标的滑动的实时位置,然后通过scene.pick()接口进行获取鼠标位置上的对象。
viewer.cesiumWidget.screenSpaceEventHandler.setInputAction(function(ev){
if($('#checkbox')[0].checked){
var pickedObject = viewer.scene.pick(ev.endPosition);
console.log(pickedObject);
}
}, Cesium.ScreenSpaceEventType.MOUSE_MOVE);
当鼠标放到Entity对象上时,接口就会返回对象的基本信息,例如id等,当移除时,接口灰返回undefined。获取信息后可以通过div将信息以表格或弹窗形式展示在场景中。
选择S3M
上文已经实现了对Entity对象实现mouse-move事件,但是在鼠标移动到S3M模型上时,接口只会返回undefined。其实细心的小伙伴已经发现,scene.pick()会将对应点的S3M变为选择状态,因此我们可以通过获取模型选择集,来获取当前鼠标所在的模型。
获取完模型id后可以根据id对iserver中的数据服务进行查询,建议先将全部属性数据查询查询回来,保存在数组里面,再进行调用,否则实时查询对iserver压力会毕竟大。