Cesium中设置弹窗随轨迹动画对象移动

发布时间:2024年01月12日

?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;
            }
          }
        }
      );
    };

文章来源:https://blog.csdn.net/qq_48273925/article/details/135548274
本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。