Cesium实现鼠标移入提示框

class TooltipDiv1 {
    parentDom: Element;
    type: 'center' | 'right';
    private _div: HTMLElement;
    private _title: HTMLElement;
    constructor(options: ITooltipOtions) {
        const { parentDom, type = 'center' } = options;
        this.parentDom = parentDom;
        this.type = type;
        const div = document.createElement('DIV');
        div.className = 'tooltipdiv ' + this.type; //
        this._div = div;
        const arrow = document.createElement('DIV');
        arrow.className = 'tooltipdiv-arrow';
        div.appendChild(arrow);

        const title = document.createElement('DIV');
        title.className = 'tooltipdiv-inner';
        div.appendChild(title);
        this._title = title;
        parentDom.appendChild(div);
    }
    setVisible(visible: boolean) {
        this._div.style.display = visible ? 'block' : 'none';
    }

    showAt(position: any, message: any) {
        if (position && message) {
            this.setVisible(true);
            this._title.innerHTML = message;
            if (this.type == 'right') {
                this._div.style.left = position.x + 30 + 'px';
                this._div.style.top = position.y - this._div.clientHeight / 2 + 'px';
            } else if (this.type === 'center') {
                this._div.style.left = position.x - this._div.clientWidth / 2 + 'px';
                this._div.style.top = position.y - this._div.clientHeight - 20 + 'px';
            }
        }
    }
}

使用

const moveShowLabel = () => {
        const tooltipDiv1 = new TooltipDiv1({ parentDom: viewer.cesiumWidget.container });
        const handler = new Cesium.ScreenSpaceEventHandler(viewer.scene.canvas);
        handler.setInputAction(function (movement: any) {
            const pick = viewer.scene.pick(movement.endPosition);
            if (Cesium.defined(pick)) {
                let attr = pick.id.attr;

                const { tipname1 = '', tipname2 = '' } = attr;
                if (tipname1 || tipname2) {
                    tooltipDiv1.showAt(movement.endPosition, `${tipname1 ?? ''}-${tipname2 ?? ''}`);
                }
            } else {
                tooltipDiv1.setVisible(false);
            }
        }, Cesium.ScreenSpaceEventType.MOUSE_MOVE);
    };