arcgis api封装弹窗组件

import { useView } from '@/hooks/view';
import MapView from '@arcgis/core/views/MapView';
import React, { ReactNode, useEffect, useRef } from 'react';
import Feature from '@arcgis/core/widgets/Feature';
import IdentifyResult from '@arcgis/core/rest/support/IdentifyResult';
import './index.less';
import { getDomOffset } from '@/utils';
interface Props {
    view?: MapView;
    position: IdentifyResult;
    children: ReactNode;
}
export default function MarkerWrap(props: Props) {
    const { view, position, children } = props;
    const viwes = useView(view);
    const markRef = useRef<HTMLDivElement | null>(null);
    const watchHandle = useRef<IHandle>();
    const render = () => {
        const { geometry } = position.feature;
        const { type, centroid, extent } = geometry as any;
        const top = getDomOffset.top(viwes?.container);
        const left = getDomOffset.left(viwes?.container);
        if (!markRef.current) return;

        const { clientWidth, clientHeight } = markRef.current;
        let p = null;
        if (type === 'point') {
            p = geometry;
        } else if (type === 'polygon') {
            p = centroid;
        } else if (type === 'polyline') {
            p = extent.center;
        }

        if (p) {
            const screenPoint = viwes?.toScreen(p);
            if (screenPoint && markRef.current) {
                markRef.current.style.top = screenPoint.y + left - clientWidth / 2 + 'px';
                markRef.current.style.left = screenPoint.x + top - clientHeight + 'px';
            }
        }
    };
    useEffect(() => {
        if (viwes && position) {
            render();
            watchHandle.current = viwes.watch('extent', render);
        }
    }, [position, viwes]);
    useEffect(() => {
        return () => {
            if (watchHandle.current) watchHandle.current.remove();
        };
    }, []);
    return (
        <div className="MarkerWrap" ref={markRef}>
            {children}
        </div>
    );
}