Cesium 点击实体显示可随地图移动的弹框

实体数据加载到地图上之后，使用点击事件拾取实体获取实体信息

 clickPop() {
      let _this = this;
      // 实体的点击事件
      _this.drawHandler = new Cesium.ScreenSpaceEventHandler(
        viewer.scene.canvas
      );
      _this.drawHandler.setInputAction(function (click) {
        let pickedObject = viewer.scene.pick(click.position);
        // 判断一下在添加点的时候给点绑定的标识在不在
        // 来判断点击的是哪种类型的点，根据不同的类型显示不同的弹框
        if (
          pickedObject &&
          pickedObject.hasOwnProperty('id') &&
          pickedObject.id &&
          typeof pickedObject.id == 'object' &&
          pickedObject.id.hasOwnProperty('layerId') &&
          pickedObject.id.layerId.indexOf('*') == -1 &&
          pickedObject.id.layerId.indexOf('monitor') == -1 
        ) {
          let tempId = pickedObject.id.layerId.split('-')[1];// 截取之前拼接的标识符
          let param = {
            deviceId: tempId,
            dataSources: pickedObject.id.dataSources || '',
          };// 向后端发请求
          getOneDeviceData(param).then((res) => {
            if (res.code == 200 && res.message == 'success') {
              let { result } = res;
              if (result) {
                  let tempHtml = `
                  

                    

                      
                    
                    
${pickedObject.id.deviceName}
                    

                     // ...
                     // 这个里面写的就是你弹框中要显示的内容
                     // 可以先在页面上写好结构和样式然后移植过来
                    
                  `;
                  // 这里的经纬度高度一般都要和你添加的点位置一致，不然地图放大的时候可能会有偏移
                  let optionsw = {
                    position: [lng, lat],// 经纬度位置
                    alt: alt,// 高度
                    content: tempHtml,
                    offsetWidth: -330, // 横向偏移的像素值
                    offsetHeight: 490, // 纵向偏移的像素值，这两个值根据你弹框的背景来调整
                    id: 'opto2',
                  };
                  _this.pointMap(optionsw);
               }
            }
          });
        }
      }, Cesium.ScreenSpaceEventType.LEFT_CLICK);
    },

计算弹框位置的函数

    pointMap(options) {
      let optionsDom = document.querySelectorAll(`.cesium-popup`);
      if (optionsDom.length > 0) {
        for (let i = 0; i < optionsDom.length; i++) {
          optionsDom[i].remove();
        }
      }
      let phtml =
        `
` +
        options.content +
        ``;
      var div = document.createElement('div');
      div.innerHTML = phtml;
      if (viewer) {
        viewer.container.append(div);
      }
      this.addlayer(div, options.id);
      if (viewer) {
        viewer.scene._postRender.addEventListener(() => {
          if (viewer) {
            let windowCoord = Cesium.SceneTransforms.wgs84ToWindowCoordinates(
              viewer.scene,
              Cesium.Cartesian3.fromDegrees(...options.position, options.alt)
            );
            //这里要注意，如果弹框被移出屏幕外的时候，是计算不到位置的，如果不加这句话会报错
            if (!windowCoord) return;
            let x = windowCoord.x - options.offsetWidth;
            let y = windowCoord.y - options.offsetHeight;
            div.style.cssText = `
          position:absolute;
          left:0;
          top:0;
          width:300px;
          height:350px;
          transform:translate3d(${Math.round(x)}px,${Math.round(y)}px, 0);
      `;
            div.classList.add('cesium-popup');
          }
        });
      }
    },

添加弹框的函数

    addlayer(div, id) {
      if (window.layerCollection.has(id)) {
        window.layerCollection.get(id).push(div);
      } else {
        window.layerCollection.set(id, [div]);
      }
    },

关闭弹框的函数

    closePop() {
      let optionsDom = document.querySelectorAll(`.cesium-popup`);
      if (optionsDom.length > 0) {
        for (let i = 0; i < optionsDom.length; i++) {
          optionsDom[i].remove();
        }
      }
    },

注意一点，这个弹框的关闭函数会在页面初始化的时候绑定到window上，不然写在原生html标签里面的函数无法触发

window.closePop = this.closePop;