问题:地图上显示了图标,在鼠标悬浮在地图上时,不出现弹窗,当悬浮在地图的图标上时,显示该图标的信息
解决过程:
1.建立处理用户输入事件的画布,写出要在输入事件上执行的功能。
2.Cesium.ScreenSpaceEventType.MOUSE_MOVE表示鼠标移动事件
3.cesium.viewer.scene.pick执行拾取的窗口坐标,如果该位置没有任何内容,则返回未定义的对象
4.弹窗显示的位置可以根据拾取到的坐标进行定位,使用绝对定位,定位到图标的某一个位置上
5. 下面例子中的iconObj.position为图标坐标,iconObj.info为要展示的信息
解决结果:
const mouseHover = event => { let pick = window.cesium.viewer.scene.pick(event.endPosition)let obj = {}obj.position = event.endPositionif(!pick || !pick.id || !pick.id.data){//此处data是画地图图标是就存入的图标信息obj.data = {}//此处鼠标未悬浮到图标上,不显示弹窗,传入弹窗的信息为nulltipDialog.value = false//要在这里给弹窗的组件里传值,当前例子省略了这里,根据开发情况补充即可//例如:mitter.emit('弹窗内容方法',传的值)return}else{obj.data = pick.id.data}let iconInfo = obj.dataif(!iconInfo||!iconInfo.info){// 虽然鼠标在图标上,但当前图标没有任何信息时,弹窗不显示,传入弹窗的信息为nulltipDialog.value = false//要在这里给弹窗的组件里传值,当前例子省略了这里,根据开发情况补充即可//例如:mitter.emit('弹窗内容方法',传的值)return}let iconObj = {position:{},info:''}iconObj.position = obj.positioniconObj.info = obj.data.location//画地图图标是就存入的图标信息//弹窗显示tipDialog.value = true//要在这里给弹窗的组件里传值,当前例子省略了这里,根据开发情况补充即可//例如:mitter.emit('弹窗内容方法',传的值)
}
onMounted(() => {let handlePoint = new Cesium.ScreenSpaceEventHandler(window.cesium.viewer.scene.canvas);// 鼠标悬浮事件handlePoint.setInputAction(function (event) {//可以用节流方法优化这里mouseHover(event)}, Cesium.ScreenSpaceEventType.MOUSE_MOVE);
})
onUnmounted(() => {handlePoint.removeInputAction(Cesium.ScreenSpaceEventType.MOUSE_MOVE)
})