arcgis api 图层树控制

import MapView from '@arcgis/core/views/MapView';
import { DataNode } from 'antd/es/tree';
import React, { useEffect, useMemo, useRef, useState } from 'react';
import { Spin, Tree } from 'antd';
import { CloseOutlined } from '@ant-design/icons';
import './index.less';
import { useRequest } from 'ahooks';
import service from '@/api/axios';
import { layerApi } from '@/api/layer';
import MapImageLayer from '@arcgis/core/layers/MapImageLayer';
import GroupLayer from '@arcgis/core/layers/GroupLayer';
import { flatArr } from '@/utils';
interface Props {
    view: MapView;
    close?: Function;
}

const fieldNames = {
    title: 'layername',
    key: 'id',
    children: 'children',
};
export default function LayerControl(props: Props) {
    const { view, close } = props;
    const { data, loading } = useRequest(async () => {
        const result: IResule<ILayers[]> = await service.get(layerApi.list);
        return result.response;
    });
    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);
    useEffect(() => {
        if (view) view.map.add(layerGroup.current);
    }, [view]);
    const allLayer = useMemo(() => {
        if (data) {
            return flatArr<ILayers>(data);
        }
        return [];
    }, [data]);

    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 { url, id, layeroption } = item;
            const find = layerGroup.current.findLayerById(id) as MapImageLayer;

            if (find) find.visible = false;
        });
    };
    const onCheck = (checkedKeysValue: any, event: any) => {
        const checkedNodes = event.checkedNodes 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;
        });

        hiddenLayer(noCheck);
        if (filter.length) {
            loadLayer(filter);
        }

        setCheckedKeys(checkedKeysValue);
    };

    const onSelect = (selectedKeysValue: React.Key[], info: any) => {
        setSelectedKeys(selectedKeysValue);
    };
    const closeClick = () => {
        close && close();
    };
    return (
        <div className="LayerControl">
            <div className="title">
                <div>图层管理</div>
                <CloseOutlined color="#fff" style={{ cursor: 'pointer' }} onClick={closeClick} />
            </div>
            {loading ? <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>
    );
}

思路

每次选中都有回调，判断图层是否加载过，如果选中了某个图层，并且没有被加载过，那么就加载，第二次选中的时候，查找下是否在GroupLayer中，如果在则说明被加载过了，无需加载。取消的时候根据id找到图层，设置visible=false就可以了。并且在组件销毁完毕清空图层组