如何基于Angular从.ts获取鼠标响应的屏幕坐标，并传递至.html的Style中

首先，我们需要在.ts中申明public变量，然后通过Cesium鼠标事件获取屏幕坐标，赋值给相应public变量。

//声明变量
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);//鼠标左键点击响应
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

此时，我们已经获取了鼠标响应的实时屏幕坐标，这时html即可获取坐标变量。

<!--样式设置-->
<div class="test" [ngStyle]="{left:screenX,top:screenY}">
<!--....相关代码-->
</div>
1
2
3
4