First, we need to declare public variables in .ts, then obtain the screen coordinates through Cesium mouse events and assign them to the corresponding public variables.
//声明变量
public screenX:String="";//当前屏幕坐标X
public screenX:String="";//当前屏幕坐标Y
//
//......其它代码
//网上已有大量资料介绍Cesium中hander如何声明
//
//建立鼠标事件,并获取坐标
hander.setInputAction((movement)=>{
this.screenX=movement.position.x+"px";//此处转为分辨率单位,便于html中的Style设置。当然读者可根据实际需要自定义修改设置。
this.screenY=movement.position.y+"px";
}
),Cesium.ScreenSpaceEventType.LEFT_CLICK);//鼠标左键点击响应
At this point, we have obtained the real-time screen coordinates of the mouse response, and then the html can obtain the coordinate variables.
<!--样式设置-->
<div class="test" [ngStyle]="{left:screenX,top:screenY}">
<!--....相关代码-->
</div>