Reactjs 在React useEffect挂钩触发效果后，如何重新居中Openlayer 6贴图

我目前正在构建一个React应用程序，需要从MapBox移动到Openlayers，因为这是我的客户端在内部使用的。要让openlayers地图对事件做出反应，基本功能真的很难实现。目前，我正在尝试一个简单的“点击按钮，重新中心地图”，但无法让它工作。有人能帮忙吗？一定是我做错了什么

我正在使用Openlayers V6.0.1（ol）

import React，{useState，useffect，useRef}来自“React”；
从“ol/Map.js”导入地图；
从“ol/View.js”导入视图；
从“ol/Overlay.js”导入覆盖；
从“ol/layer/Tile.js”导入LayerFile；
从“ol/source/OSM.js”导入SourceOSM；
从“ol/proj”导入*作为项目；
常量MapView2=（）=>{
//设定状态
const[center，setCenter]=useState（proj.fromlont（[0,0]）；//将地图的中心设置为0,0
const[zoom，setZoom]=useState（3）；//设置aoom
const posGreenwich=lonlat项目（[0,51.47]）；
//设置初始贴图对象
常量视图=新视图({
中心:中心,，
缩放：缩放
});
常量映射=新映射({
target:null，//在componentDidMount useEffect[]中设置此值
图层：[
新LayerTile({
来源：新的SourceOSM（）
})
],
视图：视图
});
const overlayRef=useRef（null）；
const popUpRef=useRef（null）；
//Useffect挂钩
//[]=组件未安装
//设置初始地图目标
useffect（（）=>{
map.setTarget（“map”）；
map.on（“moveend”，（）=>{
setCenter（map.getView（）.getCenter（））；
setZoom（map.getView（）.getZoom（））；
});
//显示新中心位置的基本覆盖图
常量覆盖=新覆盖({
职位：posGreenwich，
元素：overlayRef.current，
定位：“居中”，
stopEvent:false
});
map.addOverlay（覆盖）；
//组件卸载时进行清理
return（）=>{
console.log（“将卸载”）；
map.setTarget（空）；
};
}, []);
//它不起作用*******
useffect（（）=>{
//[居中，缩放]每次更新居中或缩放状态后触发
//它应该设置视图移动的动画
console.log（“使用效果中心和缩放”，中心，缩放）；
console.log（“View”，JSON.stringify（View））；//如果选中此选项，视图将正确地具有新的中心和缩放
//视图具有新的中心和缩放，但不会自动移动到该中心和缩放
//试着强迫它移到这里
//不起作用-如何让地图移动？？：(
动画（{zoom:zoom}，{center:center}，{duration:2000}）；
}，[居中，缩放]；
//助手
const btnAction=（）=>{
//单击按钮时，重新居中贴图
//这不起作用：(
赛特中心（格林威治）；
setZoom（6）；
};
//渲染
返回(
{
b动作（）；
}}
>
点击
);
};
导出默认MapView2；
常量样式={
蓝圈：{
宽度：30，
身高：30，
边框：“1px实心#088”，
波德拉迪乌斯：“15”，
背景色：“0ff”，
不透明度：0.5，
zIndex:9999
}
};

我遇到了一个类似的问题，通过对map变量使用useState解决了这个问题，例如：

const [map] = useState(
  new Map({
    target: null, // set this in componentDidMount useEffect[]
    layers: [
      new LayerTile({
        source: new SourceOSM()
      })
    ],
    view: view
  })
);

然后，内部效应：

map.getView.animate({ zoom: zoom }, { center: center }, { duration: 2000 });

---

嗨！我正在尝试解决一个类似的问题。你让它工作了吗？谢谢

map.getView.animate({ zoom: zoom }, { center: center }, { duration: 2000 });