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;