在earth上面实现气泡弹窗

目的：气泡弹窗

气泡弹窗，我们使用div的形式做一个盒子，然后在地球上面加上一个点，当我们点击点的时候，就会出来这个盒子，功能简单，我们先来定义一个div

<div
      ref="info"
      style="
        position: absolute;
        top: 0;
        left: 0;
        background: skyblue;
        width: 100px;
        height: 50px;
        display: none;
      "
    >
    我是气泡
    
    </div>

一个普通的div，其中只有一个ref属性是给盒子起一个名字，名字没有要求，我这里定义info，style中的display我们设置为none，意思是不显示盒子，当我们点击点的时候我们再把display的属性设置为block 就可以了
有了盒子之后我们在定义一个点
这里的点我们使用json的文件来写，先写一个json，我在这里起名叫dian.json,还是老规矩，文件最好放在public下面，我这里先放在js下面，位置要记住，因为我们一会还要引入到earth中

{
    "ref": "dian",
    "czmObject": {
        "xbsjType": "Pin",
        "xbsjGuid": "22fc15ed-61b8-4682-8210-b3106a04d83e",
        "name": "图标点",
        "position": [
            2.1967670250653937,
            0.8228904011998618,
            -8.649274530358012e-9
        ],
        "pinBuilder": {},
        "far": 1073741824,
        "attachedPathGuid": "71476f67-1ed6-4245-ba3e-e62240469997"
    }
}

这就是一个简单的图标点，有了json自然下一步就是引入

import dian from "../js/dian.json";

路径就是自己json放置的路径
引入之后我们push到earth当中

//添加图标点
earth.sceneTree.root.children.push(dian);

我这里是写到上下两块的所以他们的位置自然不是一样的，导入要放到Earth的最上面，也就是最外层，而push要在
mounted（）{里面去写的}
引入很简单，push上去之后我们就可以在earth当中看到这个点了，接下来的步骤就是当我们点击点的时候，出现弹窗，这里的弹窗需要div跟着点的移动而去移动，所以需要一直去刷新坐标，而且在做的时候需要将earth上面的三维坐标转换为二维坐标，接下来看看我们是如何实现的吧

    var handler = new Cesium.ScreenSpaceEventHandler(earth.czm.viewer.canvas);
    handler.setInputAction((event) =>{
      var pick = earth.czm.scene.pick(event.position);
      //这里的position是获取的earth的三维坐标
      var position = Cesium.SceneTransforms.wgs84ToWindowCoordinates(
        earth.czm.scene,
        pick.id._position._value
      );
      
      //弹窗随屏幕移动而移动
      // var infoboxContainer = document.getElementById("bubble");
      var info = this.$refs.info;
      info.style.display = 'block'
      info.style.left = position.x -50 + "px";
      info.style.top = position.y - 100 + "px";
      earth.czm.scene.postRender.addEventListener(function () {
          //这里的changedC是获取的屏幕二维的坐标
        var changedC =Cesium.SceneTransforms.wgs84ToWindowCoordinates(
          earth.czm.scene,
          pick.id._position._value
        );
        //这个if语句是进行判断
        if (Cesium.defined(changedC)) {
            //info.style.*  是我们div在屏幕上的的具体位置
            info.style.left = changedC.x - 50 + "px";
            info.style.top = changedC.y - 100 + "px";
        
        }
      });
      console.log(pick);
    }, Cesium.ScreenSpaceEventType.LEFT_CLICK);

我们所有的功能全部都在一个左键单机事件当中，到此我们的功能就可以实现了~~~~

哦对了使用vue可别忘记了在App.vue中使用我们创建的earth.vue哦