cesium创建气泡弹窗

  本人第一次接触cesium又刚毕业，自己也是摸着石头过河，虽然效果实现但是还有很多不足之处，简单说一下我自己的气泡弹窗思路。

1. 点击事件，获取目标的位置，转成屏幕位置；
2. 显示弹窗；
3. 实时更新位置；
4. 实现缩放效果。

效果如下：

 全部代码：

HTML

  <div id="dialog" class="dialog">
      <div class="d-heder">
        <span>黄河站</span>
        <div class="tool" @click="close">x</div>
      </div>
      <div class="d-content">
        <img src="自己的图片位置" alt="">
        <div class='d-p'>
          <p>

            中国北极黄河站,位于北纬78°55′、东经11°56′
            的挪威斯匹次卑尔根群岛的新奥尔松。是中国依据《斯瓦尔巴条约》
            1925年缔约国地位而建立的首个北极科考站,中国也成为第8个在挪威的
            斯匹次卑尔根群岛建立北极科考站的国家。最值得称道的是,北极黄河站拥有全球极地科考中规模最大的空间物理观测点。
          </p>

        </div>
      </div>
    </div>

  let dialogElement = document.getElementById("dialog");

        //拿到句柄设置 事件
        let trackPop = undefined; //记录鼠标捕获实体的坐标
        let handler = new Cesium.ScreenSpaceEventHandler(viewer.scene.canvas);
        handler.setInputAction(function (click) {
            const pick = viewer.scene.pick(click.position);
            if (!pick) {
                return
            }
            console.log('pick', pick.id._id)
            //获取该店的三维坐标
            let cartesians = pick.primitive.position
            trackPop = cartesians
            //获取 世界坐标 转为 屏幕坐标
            let winpos = viewer.scene.cartesianToCanvasCoordinates(cartesians);
            //弹窗位置
            dialogElement.style.left = winpos.x + 20 + "px";
            dialogElement.style.top = winpos.y + 50 + "px";
            //如果对象有id打开弹窗
            if (pick.id._id) {
                let cartographic = Cesium.Cartographic.fromCartesian(cartesians);
                dialogElement.style.display = "block";
            } else {
                dialogElement.style.display = "none";
            }
        }, Cesium.ScreenSpaceEventType.LEFT_CLICK);

        //每帧渲染结束监听
        viewer.scene.postRender.addEventListener(function (e) {
            if (trackPop) {
                let winpos = viewer.scene.cartesianToCanvasCoordinates(
                    trackPop
                );
                let bubble = document.getElementById("dialog");
                let poph = bubble.offsetHeight;
                bubble.style.left = winpos.x + 40 + "px";
                bubble.style.top = winpos.y + 90 - poph + "px";
            }
        });

.dialog {
  padding: 0;
  margin: 0;
  width: 310px;
  position: absolute;
  top: 50px;
  left: 50px;
  background-color: white;
  // border: 1px solid rgb(85, 81, 81);
  padding: 10px;
  display: none;

  overflow: hidden;
  padding: 0;
  margin: 0;

  img {
    padding: 5px 5px 0 5px;
  }

  .d-p {
    padding: 5px;

    p {
      width: 300px;
      text-indent: 2em;
      text-align: left;
    }
  }
}

.d-heder {

  width: calc(100% - 10px);
  height: 30px;
  overflow: hidden;
  margin: 0;
  padding: 5px 5px 0 5px;
  display: flex;
  // align-items: center;
  justify-content: space-between;

  color: #fff;
  background-color: #01c6f7;
  display: flex;

  span {
    display: block;
  }

  .tool {

    width: 20px;
    height: 30px;
    color: aliceblue;
  }

  .tool:hover {
    cursor: pointer;
    color: rgb(255, 213, 0);
  }
}