arcgis api空间分析

绘制完毕的园可以拖动，拖动完成后在查询

import React, { useEffect, useRef, useState } from 'react';
import { Button, Checkbox, Form, Input, InputNumber, message, Select } from 'antd';
import { CloseOutlined } from '@ant-design/icons';
import './index.less';
import { userAllLayer } from '@/hooks/layer';
import { useRecoilValue, useSetRecoilState } from 'recoil';
import { disabledClickAtom, selectLayerAtom } from '@/store/modules/layerTree';
import { viewAtom } from '@/store/modules/view';
import GraphicsLayer from '@arcgis/core/layers/GraphicsLayer';
import SketchViewModel from '@arcgis/core/widgets/Sketch/SketchViewModel';
import { symbolObj } from '@/config/index';
import { useView } from '@/hooks/view';
import Geometry from '@arcgis/core/geometry/Geometry';
import { queryMap } from '@/utils';
import QueryTable from '../../QueryTable';
import IdentifyResult from '@arcgis/core/rest/support/IdentifyResult';
import Draggable from 'react-draggable';
const options = [
    {
        value: 'circle',
        label: '圆',
    },
    {
        value: 'polyline',
        label: '线',
    },
    {
        value: 'polygon',
        label: '面',
    },
];
const initialValues = {
    type: 'circle',
};
interface Props {
    close?: Function;
}
export default function Overlay(props: Props) {
    const { close } = props;
    const layerData = userAllLayer();
    const selectLayer = useRecoilValue(selectLayerAtom);
    const view = useView();
    const layerRef = useRef(new GraphicsLayer({ id: 'buffers' }));
    const skectRef = useRef<SketchViewModel>();
    const setDsiableClick = useSetRecoilState(disabledClickAtom);
    const [queryList, setQueryList] = useState<IdentifyResult[]>([]);
    useEffect(() => {
        if (view) {
            const sketchViewModel = new SketchViewModel({
                view: view,
                layer: layerRef.current,
                pointSymbol: (symbolObj as any).point,
                polygonSymbol: (symbolObj as any).polygon,
                polylineSymbol: (symbolObj as any).polyline,
            });
            skectRef.current = sketchViewModel;
            view.map.add(layerRef.current);
        }
    }, [view]);
    useEffect(() => {
        setDsiableClick(true);
        return () => {
            setDsiableClick(false);
            layerRef.current && layerRef.current.removeAll();
        };
    }, []);
    const onFinish = async (value: any) => {
        const { layer, radius, type } = value;
        const find = selectLayer?.find(f => f.id === layer);
        setQueryList([]);
        if (find) {
            let sublayers = [];
            let layerOptions = JSON.parse(find.layeroption);
            if (layerOptions && layerOptions.sublayers) {
                const layers = layerOptions.sublayers;
                sublayers = layers.map((s: any) => s.id);
            }
            const clickConfig = {
                name: find.layername,
                sublayers,
                url: find.url,
            };

            layerRef.current.removeAll();
            skectRef.current?.create(type);
            skectRef.current?.on('create', async event => {
                if (event.state === 'complete') {
                    query([clickConfig], event.graphic.geometry);
                }
            });
            skectRef.current?.on('update', async event => {
                if (event.state === 'complete') {
                    query([clickConfig], event.graphics[0].geometry);
                }
            });
        } else {
            message.warning('请先加载图层');
        }
    };

    const query = async (options: ClickQuerylistConfig[], geometoey: any) => {
        if (view) {
            const result = await queryMap(view, options, geometoey);
            if (result && result.length) {
                const data = result[0].results;
                setQueryList(data);
            } else {
                setQueryList([]);
            }
        }
    };
    const onClick = () => {
        close && close();
    };
    const tableClose = () => {
        setQueryList([]);
    };
    return (
        <>
            <Draggable>
                <div className="Overlay">
                    <div className="title-wrap">
                        <div className="title">叠置分析</div>
                        <div className="close" onClick={onClick}>
                            <CloseOutlined />
                        </div>
                    </div>
                    <div className="content">
                        <Form name="basic" onFinish={onFinish} autoComplete="off" initialValues={initialValues}>
                            <Form.Item label="目标图层" name="layer" rules={[{ required: true, message: '请选择目标图层' }]}>
                                <Select showSearch placeholder="请选择图层" optionFilterProp="children" filterOption={(input, option) => (option?.label ?? '').toLowerCase().includes(input.toLowerCase())} options={layerData} />
                            </Form.Item>

                            <Form.Item label="绘制类型" name="type" rules={[{ required: true, message: '请选择绘制类型' }]}>
                                <Select options={options} />
                            </Form.Item>
                            <Form.Item className="btn">
                                <div className="btn-wrap">
                                    <Button type="primary" htmlType="submit">
                                        开始
                                    </Button>
                                </div>
                            </Form.Item>
                        </Form>
                    </div>
                </div>
            </Draggable>

            {queryList.length && <QueryTable close={tableClose} data={queryList} />}
        </>
    );
}