arcgis api弹窗封装，支持多个和单个

import { getDomOffset } from '@/utils';
import Point from '@arcgis/core/geometry/Point';
import SpatialReference from '@arcgis/core/geometry/SpatialReference';
import React, { useEffect, useRef } from 'react';
import { useRecoilValue } from 'recoil';
import './index.less';
import { markerPositionAtom, viewAtom } from '@/store';
interface Props {
    position?: LocationPoint;
    children: JSX.Element;
    align?: 'center' | 'right' | 'left';
    pointHeight?: number;
}

export default function MarkerWrap(props: Props) {
    const { position, children, align = 'center' } = props;
    const view = useRecoilValue(viewAtom);
    const markerPosition = useRecoilValue(markerPositionAtom);

    const markerRef = useRef<HTMLDivElement>(null);
    const watrchHandle = useRef<IHandle>();
    const pointToScreen = (location: LocationPoint) => {
        console.log(location, 'location');

        if (location && view) {
            const point = new Point({ x: location.x, y: location.y, spatialReference: new SpatialReference({ wkid: 4490 }) });
            const screen = view.toScreen(point);

            const mapWrap = document.getElementById('MapBox-wrap');
            const top = getDomOffset.top(mapWrap);
            const left = getDomOffset.left(mapWrap);

            if (markerRef.current) {
                const { clientWidth, clientHeight } = markerRef.current;


                if (align === 'center') {
                    markerRef.current.style.left = screen.x + left - clientWidth / 2 + 'px';
                    markerRef.current.style.top = screen.y - clientHeight + top + 'px';
                }
                if (align === 'right') {
                    markerRef.current.style.left = screen.x + 20 + 'px';
                    markerRef.current.style.top = screen.y - clientHeight / 2 + top + 'px';
                }
            }
        }
    };
    useEffect(() => {
        if (markerRef && markerRef.current && view) {
            if (position) {
                pointToScreen(position);
                watrchHandle.current = view.watch('extent', () => {
                    pointToScreen(position);
                });
            } else if (markerPosition) {
                pointToScreen(markerPosition);
                watrchHandle.current = view.watch('extent', () => {
                    pointToScreen(markerPosition);
                });
            }

        }

    }, [markerPosition, view, markerRef, position]);
    useEffect(() => {
        return () => {
            if (watrchHandle.current) watrchHandle.current.remove();
        };
    }, []);

    return (
        markerPosition && (
            <div className="MarkerWrap" id="markerpopup" ref={markerRef}>
                {children}
            </div>
        )
    );
}