arcgis api图层树加载

import MapView from '@arcgis/core/views/MapView';
import React, { CSSProperties, useEffect, useMemo, useRef, useState } from 'react';
import { Spin, Tree } from 'antd';
import { CloseOutlined } from '@ant-design/icons';
import './index.less';
import MapImageLayer from '@arcgis/core/layers/MapImageLayer';
import GroupLayer from '@arcgis/core/layers/GroupLayer';
import { flatArr } from '@/utils';
import { groupBy } from 'lodash';
import { useRecoilState, useRecoilValue, useSetRecoilState } from 'recoil';
import { clickQueryAtom } from '@/store';
import { allLayerAtom, layerTreeAtom, selectLayerAtom } from '@/store/modules/layerTree';
import { useView } from '@/hooks/view';
interface Props {
    view: MapView;
    close?: Function;
    style?: CSSProperties;
    change?: Function;
}

const fieldNames = {
    title: 'layername',
    key: 'id',
    children: 'children',
};

export default function LayerControl(props: Props) {
    const { view, close, style = {}, change } = props;
    const data = useRecoilValue(layerTreeAtom);
    const layerGroup = useRef(new GroupLayer({ id: 'layerTree' }));
    const [expandedKeys, setExpandedKeys] = useState<React.Key[]>([]); //打开的节点
    const [checkedKeys, setCheckedKeys] = useState<React.Key[]>([]); //选中的节点
    const [selectedKeys, setSelectedKeys] = useState<React.Key[]>([]);
    const [autoExpandParent, setAutoExpandParent] = useState<boolean>(true);
    const setAllLayerAtom = useSetRecoilState(allLayerAtom);
    const setSelectAtom = useSetRecoilState(selectLayerAtom);
    const views = useView(view);
    useEffect(() => {
        if (views) views.map.add(layerGroup.current);
    }, [views]);
    const allLayer = useMemo(() => {
        if (data) {
            const temp = flatArr<ILayers>(data);

            return temp;
        }
        return [];
    }, [data]);
    useEffect(() => {
        setAllLayerAtom(allLayer);
    }, [allLayer]);

    const onExpand = (expandedKeysValue: React.Key[]) => {
        setExpandedKeys(expandedKeysValue);
        setAutoExpandParent(false);
    };
    useEffect(() => {
        return () => {
            // layerGroup.current.removeAll();
        };
    }, []);
    const loadLayer = (arr: ILayers[]) => {
        arr.forEach(item => {
            const { url, id, layeroption } = item;
            const sublayers = JSON.parse(layeroption);
            if (sublayers && sublayers.sublayers) {
                const find = layerGroup.current.findLayerById(id) as MapImageLayer;
                if (find) {
                    find.visible = true;
                } else {
                    let layer = new MapImageLayer({
                        id,
                        url,
                        sublayers: sublayers.sublayers,
                    });
                    layerGroup.current.add(layer);
                }
            } else {
                console.warn('未设置sublayers');
            }
        });
    };
    const hiddenLayer = (arr: ILayers[]) => {
        arr.forEach(item => {
            const { id } = item;
            const find = layerGroup.current.findLayerById(id) as MapImageLayer;

            if (find) find.visible = false;
        });
    };
    const clickConfig = (arr: ILayers[]) => {
        let selectConfig: ClickQuerylistConfig[] = [];
        let group = groupBy(arr, 'url');
        Object.keys(group).forEach(key => {
            if (key && key != 'null') {
                let value = group[key];
                let sublayers: any[] = [];
                value.forEach(item => {
                    let layerOptions = JSON.parse(item.layeroption);
                    if (layerOptions && layerOptions.sublayers) {
                        const layers = layerOptions.sublayers;

                        let s = layers.map((s: any) => s.id);
                        sublayers.push(...s);
                    }
                });

                selectConfig.push({
                    name: '图层控制',
                    url: key,
                    sublayers,
                });
            }
        });
        change && change(selectConfig);
    };

    useEffect(() => {
        const checkedNodes = allLayer.filter(f => checkedKeys.includes(f.id)) as ILayers[];

        const filter = checkedNodes.filter(f => f.url && f.layeroption && f.layertype);

        const noCheck = allLayer.filter(f => {
            const find = checkedNodes.find(c => c.id === f.id);
            if (!find) return f;
        });
        setSelectAtom(filter);
        clickConfig(filter);

        hiddenLayer(noCheck);
        if (filter.length) {
            loadLayer(filter);
        }
    }, [checkedKeys]);
    const onCheck = (checkedKeysValue: any, event: any) => {
        setCheckedKeys(checkedKeysValue);
    };

    const onSelect = (selectedKeysValue: React.Key[], info: any) => {
        setSelectedKeys(selectedKeysValue);
    };
    const closeClick = () => {
        close && close();
    };
    return (
        <div className="LayerControl" style={{ ...style }}>
            <div className="title">
                <div>图层管理</div>
                <CloseOutlined color="#fff" style={{ cursor: 'pointer' }} onClick={closeClick} />
            </div>
            {!data ? <Spin /> : <div className="tree-wrap">{data && <Tree checkable onExpand={onExpand} expandedKeys={expandedKeys} fieldNames={fieldNames} autoExpandParent={autoExpandParent} onCheck={onCheck} checkedKeys={checkedKeys} onSelect={onSelect} selectedKeys={selectedKeys} treeData={data as any} />}</div>}
        </div>
    );
}