Cesium自定义弹窗

import { Viewer } from 'cesium';
import * as Cesium from 'cesium';
import React, { ReactNode, useEffect, useRef } from 'react';
import './index.less';
interface Prsop {
    viewer: Viewer;
    clickData: any;
    children: ReactNode;
}

export default function PopupWrap(props: Prsop) {
    const { viewer, clickData, children } = props;
    const postRef = useRef<Cesium.Event.RemoveCallback | null>();
    const popupRef = useRef<HTMLDivElement | null>(null);
    useEffect(() => {
        if (postRef.current) {
            postRef.current();
            postRef.current = null;
        }
        if (clickData && clickData.cartesian3 && viewer) {
            postRef.current = viewer.scene.postRender.addEventListener(function () {
                const { cartesian3 } = clickData;

                const winPos = viewer.scene.cartesianToCanvasCoordinates(cartesian3);

                if (popupRef.current && winPos && winPos.x && winPos.y) {
                    popupRef.current.style.left = winPos.x - popupRef.current.clientWidth / 2 + 'px';
                    popupRef.current.style.top = winPos.y - popupRef.current.clientHeight + 'px';
                }
            });
        }

        return () => {
            if (postRef.current) {
                postRef.current();
                postRef.current = null;
            }
        };
    }, [viewer, clickData]);
    return (
        <div className="PopupWrap" ref={popupRef}>
            {children}
        </div>
    );
}

使用

  <PopupWrap viewer={viewers} clickData={result}>
                    <Popup1 colse={colse} data={result.data as any} />
                </PopupWrap>