arcgis api测距,测面，放大缩小等小部件自定义

export default function Tools(props: { view: MapView }) {
    const [select, setSelect] = useState('')
    const [isFullScreen, setIsFullScreen] = useState(true)
    const [arcgismeasure, setarcgismeasure] = useState<Measurement>();
    const [zoom, setZoom] = useState<Zoom>();
    const { view } = props;

    useEffect(() => {
        if (view) {
            const measurement = new Measurement({ view });
            var zoom = new Zoom({
                view: view
            });
            setZoom(zoom)
            setarcgismeasure(measurement)
        }
    }, [view]);
    const list = [
        { name: '地址查询', icon: addressImg, selectIcon: addressImg_select },
        { name: '图层管理', icon: layerImg, selectIcon: layerImg_select },
        { name: '测距', icon: cejuImg, selectIcon: cejuImg_select },
        { name: '测面', icon: rectImg, selectIcon: rectImg_select },
        { name: '放大', icon: scaleImg, selectIcon: scaleImg_select },
        { name: '缩小', icon: scaleImg1, selectIcon: scaleImg1_select },
        { name: '清除', icon: clearImg, selectIcon: clearImg_img },
        { name: '全屏', icon: screenImg, selectIcon: screenImg_select }
    ]
    const onClick = (values: { name: string }) => {
        const { name } = values;

        if (name === '全屏') {
            setIsFullScreen(!isFullScreen)
            if (isFullScreen) {
                fullScreen();
            } else {
                exitScreen()
            }
        }
        if (name === '放大') {

            zoom && zoom.zoomIn()
        }
        if (name === '缩小') {
            zoom && zoom.zoomOut()
        }
        if (name === '测距' && arcgismeasure) {
            arcgismeasure.activeTool = "distance";
        }
        if (name === '测面' && arcgismeasure) {
            arcgismeasure.activeTool = "area";
        }
        if (name === '清除' && arcgismeasure) {


            arcgismeasure.clear()
        }
        if (select === name && select != '放大' && select != '缩小') {
            setSelect('')
        } else {
            setSelect(name)
        }


    }
    return (
        <div className='tools-box'>
            <div className="tools-img">
                <img src={leftImg} alt="" width="20" height="20" />
            </div>
            <div className="tools-content">
                {list.map((item, index) => {
                    return (
                        <div className={["tools-item", select === item.name ? 'select' : '', item.name === '测距' ? 'tools-distance' : '', item.name === '测面' ? 'area' : '',].join(' ')} onClick={() => onClick(item)} key={item.name + index}>
                            <img src={select === item.name ? item.selectIcon : item.icon} alt={item.name} />
                            <span className="name">{item.name}</span>
                        </div>
                    );
                })}
            </div>
            {select === list[1].name && <LayerControl view={props.view} setSelect={setSelect} />}
            {select === list[0].name && <AddressSearch view={props.view} />}
        </div>
    )
}