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