如何基于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);//鼠标左键点击响应

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

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

猜你喜欢

转载自blog.csdn.net/HeyLoong/article/details/126105895