vue cesium 自定义弹出框随场景移动

// preRender获取当前场景每帧渲染前的事件,监听该事件在每帧渲染之前触发
      viewer.scene.preRender.addEventListener(() => { //一直触发
          var position = Cesium.Cartesian3.fromDegrees(Number("经度"), Number("纬度"));
          //cartesianToCanvasCoordinates 转换三维空间坐标到canvas坐标(窗口坐标)
          var canvasPosition = this.viewer.scene.cartesianToCanvasCoordinates(position, new Cesium.Cartesian2());
          //console.log("canvasPosition:",canvasPosition)
          if (Cesium.defined(canvasPosition)) {
              _this.infoStyle.top = canvasPosition.y - document.getElementById("tanChuKuang").offsetHeight - 30 + 'px';
              _this.infoStyle.left = canvasPosition.x - (document.getElementById("tanChuKuang").offsetWidth / 2) + 'px';
          }
      });

弹出框代码

<div :style="infoStyle" id="tanChuKuang" v-show="dianweixx">
      <Dianweixx ref="child"></Dianweixx>
    </div>



data() {
    return {
      infoStyle: { position: "absolute", top: "500px", left: "1000px" },
      dianweixx: false
    };
  },

 


版权声明:本文为qq_29384639原创文章,遵循CC 4.0 BY-SA版权协议,转载请附上原文出处链接和本声明。