arcgis api批量渲染自定义点位

封装代码

import { getDomOffset } from '@/utils';
import Point from '@arcgis/core/geometry/Point';
import SceneView from '@arcgis/core/views/SceneView';
import React, { ReactNode, useEffect, useRef } from 'react';
import './index.less';
interface Props {
    view: SceneView;
    children: ReactNode;
    position: { x: number; y: number };
}
export default function MarkerWrap(props: Props) {
    const { view, children, position } = props;
    const domRef = useRef<HTMLDivElement>(null);
    const point = new Point({ x: position.x, y: position.y, spatialReference: view.spatialReference });
    const watchHandle = useRef<IHandle | null>();
    const render = () => {
        if (!domRef.current) return;
        const screen = view.toScreen(point);
        let childWidth = domRef.current.clientWidth;
        let childHeight = domRef.current.clientHeight;
        if (childWidth && childHeight) {
            domRef.current.style.left = screen.x - childWidth / 2 + 'px';
            domRef.current.style.top = screen.y - childHeight / 2 + 'px';
        }
    };
    useEffect(() => {
        watchHandle.current?.remove();
        watchHandle.current = view.watch('extent', render);
    }, []);
    return (
        <div className="MarkerWrap" ref={domRef}>
            {children}
        </div>
    );
}

使用

import Footer from '@/components/Footer';
import Header from '@/components/Header';
import Left from '@/components/Left';
import Maps from '@/components/Maps';
import Right from '@/components/Right';
import TypesList from '@/components/TypesList';
import { viewAtom } from '@/store/view';
import { useEffect, useRef } from 'react';
import { useRecoilValue } from 'recoil';
import Point from '@arcgis/core/geometry/Point';
import GraphicsLayer from '@arcgis/core/layers/GraphicsLayer';
import './index.less';
import MarkerWrap from '@/components/MarkerWrap';
import pointImg from '@/assets/images/blur_point.png';
const Home = (props: {}) => {
    const view = useRecoilValue(viewAtom);

    return (
        <>
            
            {view && (
                <MarkerWrap view={view} position={{ x: 120.99916563327463, y: 31.312911753490518 }}>
                    <div className="point-img">
                        <img src={pointImg} alt="" />
                    </div>
                </MarkerWrap>
            )}
        </>
    );
};

export default Home;