OpenLayers在Vite React TS项目中双地图仅一张显示内容另一张空白

核心问题分析 #

你遇到的问题主要由以下几个原因导致：

1. 代码存在语法错误：new Map({...)}的括号闭合错误，导致第二个地图实例未正确创建；
2. 地图容器高度计算异常：父容器和子容器都用100%高度，但缺少明确的高度基准（如根元素未设置全屏高度），导致其中一个容器实际高度为0；
3. 地图实例未保留引用：局部变量创建的地图实例会被垃圾回收，无法维持渲染状态；
4. 缺少必要的图层和视图：OpenLayers地图需要至少一个图层和视图才能显示内容，你的代码仅指定了target，未配置核心显示要素。

修正后的完整代码 #

import { useEffect, useRef } from 'react';
import Map from 'ol/Map';
import View from 'ol/View';
import TileLayer from 'ol/layer/Tile';
import OSM from 'ol/source/OSM';

const DualMaps = () => {
  const mapRef1 = useRef<HTMLDivElement>(null);
  const mapRef2 = useRef<HTMLDivElement>(null);
  // 用useRef保存地图实例，避免被垃圾回收
  const map1Instance = useRef<Map | null>(null);
  const map2Instance = useRef<Map | null>(null);

  useEffect(() => {
    // 初始化第一张地图
    if (mapRef1.current) {
      map1Instance.current = new Map({
        target: mapRef1.current,
        layers: [
          new TileLayer({
            source: new OSM(),
          }),
        ],
        view: new View({
          center: [0, 0],
          zoom: 2,
        }),
      });
    }

    // 初始化第二张地图
    if (mapRef2.current) {
      map2Instance.current = new Map({
        target: mapRef2.current,
        layers: [
          new TileLayer({
            source: new OSM(),
          }),
        ],
        view: new View({
          center: [100, 30],
          zoom: 5,
        }),
      });
    }

    // 组件卸载时销毁地图，避免内存泄漏
    return () => {
      map1Instance.current?.dispose();
      map2Instance.current?.dispose();
    };
  }, []);

  return (
    // 用Tailwind设置全屏容器，子容器各占一半高度
    <div className="w-full h-screen flex flex-col">
      <div ref={mapRef1} className="w-full h-1/2"></div>
      <div ref={mapRef2} className="w-full h-1/2"></div>
    </div>
  );
};

export default DualMaps;

关键修复点说明 #

• 修正语法错误：将new Map({...)}改为正确的new Map({...})；
• 保留地图实例引用：用useRef存储地图实例，确保组件生命周期内实例不被回收；
• 明确容器高度：使用Tailwind的h-screen和h-1/2直接设置高度，避免百分比高度依赖父元素的问题；
• 添加核心显示要素：给每个地图配置OSM瓦片图层和视图，确保地图有内容可渲染；
• 添加清理逻辑：组件卸载时调用dispose()销毁地图实例，防止内存泄漏。

额外注意事项 #

如果坚持使用id绑定目标元素，需确保id唯一，且在useEffect中确认元素存在后再创建地图：

// 示例：用id绑定
useEffect(() => {
  const target1 = document.getElementById('map1');
  if (target1) {
    new Map({
      target: 'map1',
      // ...图层和视图配置
    });
  }
}, []);

内容的提问来源于stack exchange，提问作者Lande