Cesium实现Popup弹窗功能

先展示一下效果，大家可以通过修改样式文件，整点更好看的弹窗。我的审美一直是被吐槽的。。

• 方法创建
  这里创建了Popup构造函数，用于创建Popup对象，并对对象内部的逻辑方法进行封装。实现的方法是在Cesium创建的View对象内动态添加一个弹窗元素，通过不断获取Popup弹窗绑定的空间座标，然后转换成页面相对座标来修改弹窗的位置。

   // 创建弹窗对象的方法
      var Popup = function(info){
          this.constructor(info);
      }
      Popup.prototype.id=0;
      Popup.prototype.constructor = function(info){
          var _this = this;
          _this.viewer = info.viewer;//弹窗创建的viewer
          _this.geometry = info.geometry;//弹窗挂载的位置
          _this.id ="popup_" +_this.__proto__.id++ ;
          _this.ctn = $("<div class='bx-popup-ctn' id =  '"+_this.id+"'>");
          $(_this.viewer.container).append( _this.ctn);
          //测试弹窗内容
          var testConfig = {
              header:"测试数据",
              content:"<div>测试窗口</div>",
          }
          _this.ctn.append(_this.createHtml(testConfig.header,testConfig.content));
          
          _this.render(_this.geometry);
          _this.eventListener = _this.viewer.clock.onTick.addEventListener(function(clock) {
              _this.render(_this.geometry);
          })
      }
      // 实时刷新
      Popup.prototype.render = function(geometry){
          var _this = this;
          var position = Cesium.SceneTransforms.wgs84ToWindowCoordinates(_this.viewer.scene,geometry)
          _this.ctn.css("left",position.x- _this.ctn.get(0).offsetWidth/2);
          _this.ctn.css("top",position.y- _this.ctn.get(0).offsetHeight - 10);
      }
      // 动态生成内容
      Popup.prototype.createHtml = function(header,content){
              var html = '<div class="bx-popup-header-ctn">'+
              header+
              '</div>'+
              '<div class="bx-popup-content-ctn" >'+
              '<div class="bx-popup-content" >'+    
              content+
              '</div>'+
              '</div>'+
              '<div class="bx-popup-tip-container" >'+
              '<div class="bx-popup-tip" >'+
              '</div>'+
          '</div>'+
          '<a class="leaflet-popup-close-button" >X</a>';
          return html;
      }
      // 关闭弹窗按钮
      Popup.prototype.close=function(){
          var _this = this;
          _this.ctn.remove();
          _this.viewer.clock.onTick.removeEventListener( _this.eventListener );
      }

   

• 样式修改
  一些基础的样式修改，让你的弹窗更像弹窗，而后你也可以在此基础上进行修改，让你的弹窗更美观。

  .bx-popup-ctn{
      position: absolute;
      z-index: 999;
      background: #fff;
  }
  .bx-popup-tip-container {
      width: 40px;
      height: 20px;
      position: absolute;
      left: 50%;
      margin-left: -20px;
      overflow: hidden;
      pointer-events: none;
  }
  .bx-popup-tip {
      width: 17px;
      background: #fff;
      height: 17px;
      padding: 1px;
      margin: -10px auto 0;
      -webkit-transform: rotate(45deg);
      -moz-transform: rotate(45deg);
      -ms-transform: rotate(45deg);
      transform: rotate(45deg);
  }
  .bx-popup-header-ctn{
      background: #090302;
      color: #fff;
      font-size: 15px;
      padding: 4px;
  }
  .bx-popup-content-ctn{
      padding:15px ;
  }
  .leaflet-popup-close-button{
      user-select: auto;
      position: absolute;
      right: 0;
      top: 0;
      color: #fff;
      cursor: pointer;
  }

   

• 测试代码编写
  我这里采用Cesium的点击事件，获取点击地球对应的座标，然后在这个位置产生一个Popup对象

   // 测试代码,点击地图后，在点击的位置创建弹窗
      var viewer = new Cesium.Viewer('cesiumContainer');
      var handler3D = new Cesium.ScreenSpaceEventHandler(
      viewer.scene.canvas);
      handler3D.setInputAction(function(click){
          console.log("click")
          var pick= new Cesium.Cartesian2(click.position.x,click.position.y);
          if(pick){
              // 获取点击位置座标
              var cartesian = viewer.scene.globe.pick(viewer.camera.getPickRay(pick), viewer.scene);
              if(cartesian){
                  // 调用弹窗方法
                  var popup = new Popup({
                      viewer:viewer,
                      geometry:cartesian
                  })
              }
          }
      }, Cesium.ScreenSpaceEventType.LEFT_CLICK )

  
  完整的代码可以在我的Github获取https://github.com/privatecp/CesiumPopup