OpenLayers 在渲染两个地图时不显示第二个地图

Question

我正在使用 Openlayers 在 Vite React Typescript 项目中创建地图。我正在创建两个地图并将它们设置为 div 元素，如下所示：

const mapRef1 = useRef\<HTMLDivElement\>(null)
const mapRef2 = useRef\<HTMLDivElement\>(null)

useEffect(()=>{
 
  if(!mapRef.current) return
  const map1 = new Map({
     target: mapRef1.current
  )}

  if(!mapRef.current) return
  const map2 = new Map({
     target: mapRef2.current
  )}
},[])

return (
  <div>
    <div ref = {mapRef1}></div>
    <div ref = {mapRef2}></div>
  </div>
)

然而，虽然两张地图似乎都出现在屏幕上，但其中只有一张显示实际地图，而一张则只是空白。

我正在使用 Openlayers 7.4、React 18.2、Tailwind 3.3.2。

我尝试将目标设置为纯文本字符串，例如目标：“map1”并设置但没有帮助。

Answer 1

让我们逐步查看您的代码并解决这些问题：

1. 错字：在您的代码中，您已将

   mapRef1

   和

   mapRef2

   定义为引用， 但您正在 useEffect 中检查

   mapRef.current

   。你应该 检查

   mapRef1.current

   和

   mapRef2.current

   。

2. 缺少依赖项：在您的

   useEffect

   中，您正在检查

   mapRef.current

   ，但这种情况应该检查

   mapRef1.current

   并且 分别是

   mapRef2.current

   。

3. 不正确的情况：您正在检查

   if (!mapRef.current)

   两次 你的使用效果。此条件只应在之前检查一次 创建每个地图。

我希望这些小小的改变对你有用