How to get the screen coordinates of the mouse response from .ts based on Angular and pass it to the Style of .html

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>

Guess you like

Origin blog.csdn.net/HeyLoong/article/details/126105895