cesium中点击不同类型的entity,弹出不同弹框效果

1.封装场景点击的函数；

// 封装场景点击监听函数
//result为回调函数，将你所需要的信息传递出去，以便后续使用
    initSceneEvent(viewer, eventType, result) {
        this.handler = new Cesium.ScreenSpaceEventHandler(viewer.canvas)
        this.handler.setInputAction(e => {
            if (e.position) {
                let position = viewer.scene.pickPosition(e.position);
                result(viewer.scene.pick(e.position), e, position);
            } else if (e.endPosition) {
                let position = viewer.scene.pickPosition(e.endPosition);
                result(viewer.scene.pick(e.endPosition), e, position);
            }
        }, Cesium.ScreenSpaceEventType[eventType])
    },

2.页面初始化时监听点击事件

//viewer为cesium创建的viewer对象
initSceneEvent(viewer，"LEFT_CLICK", (res, e, cartesian3) => {
    //每次点击弹框显示之前先移除之前的弹窗
      removeAllPopup();
      entity=viewer.selectedEntity;
      html=`<div class="popup-content tableTitle">
              <div  class="header" style="padding-top: 0px;">title</div>
              <div  class="content" style="padding-top: 0px;">other：${aaa} 
             </div>
            </div>
        `
      };
 show({
    position:cartesian3,
          html:html,
          onclose:false,
})
}

3.封装show函数

show(obj) {
        const config = {
            cartesian3: obj.position,
            width: obj.width || 350,
            offsets: obj.offsets || [175, 130],
            html: obj.html || "暂无数据",
            class: obj.class || "myPopup",
            onclose: obj.onclose,
            funcs: obj.func ? obj.func : null,
        };
//笛卡尔坐标转屏幕坐标
        let windowCoord = Cesium.SceneTransforms.wgs84ToWindowCoordinates(this.scene, config.cartesian3)
        let position = {
            x: windowCoord.x,
            y: windowCoord.y
        }
        let popup = $(
            `<div style="width: ${config.width * window.screen.width / 1920}px;height: ${config.height * window.screen.height / 1080}px;" class='${config.class}'>
            <i class="el-icon-close popupClose"></i>
            ${config.html}</div>'`
        );
        this.container.append(popup);
        popup.css({
            left: (position.x - config.offsets[0]) + "px",
            top: (position.y - config.offsets[1]) + "px"
        });
        this.popups.push({
            popup,
            config
        })
        // 绑定关闭事件
        $(".popupClose").click(function () {
            $(this)
                .parent()
                .remove();
            if (config.onclose) {
                config.onclose();
            }
        });
        if (config.funcs && config.funcs.length) {
            this.setFuncs(config.funcs)
        }
        // 显示父容器
        this.container.show();
    },