我需要创建一个功能来启用和禁用在我们尝试缩小视图时一次又一次发生的地图重新聚焦

Question

我需要创建一个功能来启用和禁用在我们尝试缩小视图时一次又一次发生的地图重新聚焦。我们需要创建两个按钮。一个按钮应该允许重新聚焦，另一个按钮不应该允许重新聚焦发生，这必须使用 react 中的 openLayers 库来实现。

import { useState, useContext, useEffect } from 'react';
import Zoom from 'ol/control/Zoom';
// import Zoom from 'ol/control/Zoom';
// import View from 'ol/View';
import { MapContext } from '.';

import { viewlocksvg, viewunlocksvg } from '../../../assets/icons';

const DEFAULT_ZOOM_LEVEL = 18;

const RefocusControls = () => {
const { map } = useContext(MapContext);
const [isMapLocked, setIsMapLocked] = useState(false);

useEffect(() => {
    const RefocusLockLabel = document.createElement('img');
    const RefocusUnlockLabel = document.createElement('img');
    RefocusLockLabel.src = viewlocksvg;
    RefocusUnlockLabel.src = viewunlocksvg;

    const refocusControls = new Zoom({
        className: 'RefocusControls',
        zoomInLabel: RefocusUnlockLabel,
        zoomOutLabel: RefocusLockLabel,
        zoomInTipLabel: 'Free map view',
        zoomOutTipLabel: 'Lock map to drone',
        delta: 0.1,
        target: document.getElementById('map'),
        onZoomIn: () => setIsMapLocked(false),
        onZoomOut: () => {
            const view = map.getView();
            const currentZoom = view.getZoom();

            if (isMapLocked || currentZoom > DEFAULT_ZOOM_LEVEL) {
                view.setZoom(currentZoom - refocusControls.getDelta());
            } else {
                setIsMapLocked(true);
            }
        },
    });

    map.addControl(refocusControls);

    return () => map.removeControl(refocusControls);
}, [isMapLocked, map]);

useEffect(() => {
    if (isMapLocked) {
        // Lock map logic
        const view = map.getView();
        const dronePosition = [0, 0];
        view.setCenter(dronePosition);
        view.setZoom(DEFAULT_ZOOM_LEVEL);
        view.setConstrainResolution(true);
    } else {
        // Unlock map logic
        const view = map.getView();
        view.setConstrainResolution(false);
    }
}, [isMapLocked, map]);

return null;

};

导出默认 RefocusControls；

这是我试图实现的，但这两个按钮并没有达到预期的效果，而是同时用作 zoomIn 和 zoomout 。请在这方面帮助我，因为这对我来说是一项非常重要的任务