?1.这是要移动的弹窗,隐藏显示逻辑、样式、展示内容自己写,主要就是动态设置弹窗的style,floatLeft和floatTop都是Vue中的data双向绑定数据;
<div id="box" v-show="hasMove" :style="{ left: floatLeft + 'px', top: floatTop + 'px' }">
<p>{{ Math.round(distanceSum) }}米</p>
</div>
2.设置好运动轨迹后,当轨迹开始运行可以执行以下方法,则可以实时获取轨迹动画对象的屏幕坐标信息,从而实时更新弹窗相对于运动对象的位置?
// 监听轨迹位置修改弹窗位置
createWindow() {
let _this = this;
// 判断运动的模型是否存在
let model = '你加载到地图中的运动模型对象';
// 监听无人机实时位置变化
Viewer.scene.preUpdate.addEventListener(
this.preUpdate = () => {
// 获取实时位置的笛卡尔坐标
let cartesian3 = model.position.getValue(
Viewer.clock.currentTime
);
// 如果运动结束,则移除监听
if (cartesian3 == undefined) {
Viewer.scene.preUpdate.removeEventListener(
this.preUpdate
);
// 弹窗消失,也可以根据业务需求继续保留弹窗
_this.hasMove= false;
} else {
let cartesian2 = Cesium.SceneTransforms.wgs84ToWindowCoordinates(
Viewer.scene,
cartesian3
);
// 如果没有停止运动,则拿到屏幕坐标系
if (cartesian2) {
_this.floatLeft = cartesian2.x;
_this.floatTop = cartesian2.y;
}
}
}
);
};