react+arcgis api 3.x多个弹窗组件化实现

import { useMapStore } from '@/store/map';
import { Handle } from 'esri';
import { loadModules } from 'esri-loader';
import React, { useEffect, useMemo, useRef } from 'react';
import './index.less';

interface Props {
    children: React.ReactNode;
    location: { x: number; y: number };
    position: 'left' | 'center';
}

type MapModules = [typeof import('esri/geometry/Point')];
type PointModules = import('esri/geometry/Point');

const renderDom = (map: Maps, dom: HTMLDivElement, point: PointModules, position: 'left' | 'center') => {
    const screen = point ? map.toScreen(point) : { x: -200, y: -200 };

    let childWidth = dom.clientWidth;
    let childHeight = dom.clientHeight;
    if (childWidth && childHeight) {
        if (position === 'center') {
            dom.style.left = screen.x - childWidth / 2 + 'px';
            dom.style.top = screen.y - childHeight / 2 + 'px';
        }
        if (position === 'left') {
            dom.style.left = screen.x + 'px';
            dom.style.top = screen.y - childHeight / 2 + 'px';
        }
    }
};
export default function Marker(props: Props) {
    const { state } = useMapStore();
    const { children, location, position = 'center' } = props;
    const domRef = useRef(null);
    const handleRef = useRef<Handle>();
    useEffect(() => {
        if (state && state.map && location && domRef.current) {
            let map = state.map;
            const dom = domRef.current;
            const { x, y } = location;

            loadModules(['esri/geometry/Point']).then(res => {
                const [Point] = res as MapModules;
                const point = new Point(x, y, map.spatialReference);

                renderDom(map, dom, point, position);
                map.on('extent-change', e => {
                    renderDom(map, dom, point, position);
                });
            });
        }
    }, [state, location]);

    return (
        <div ref={domRef} className="Marker">
            {children && children}
        </div>
    );
}



css

.Marker {
    position: fixed;
    z-index: 200;
}

使用方法

townsTotal.map((item: any, index: number) => {
                    return (
                        <Marker location={{ x: item.x, y: item.y }} key={index} position={'center'}>
                            <TownsCircle
                                options={{
                                    number: item.value,
                                    unit: '',
                                    name: item.name_new,
                                }}
                            />
                        </Marker>
                    );
                })}