Leaflet地图瓦片部署至EC2实例后显示错位问题求助

核心排查方向与解决步骤 #

1. 确保添加正确的Viewport Meta标签

Leaflet的瓦片坐标计算依赖正确的视口设置，生产环境中若缺少该标签会导致像素偏差：

<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />

将该标签添加到项目根HTML文件（如public/index.html）的<head>中。

2. 修复全局CSS样式冲突

全局box-sizing设置（如border-box）会干扰Leaflet容器的尺寸计算，需为Leaflet容器单独设置：

.leaflet-container {
  box-sizing: content-box;
}

Leaflet默认使用content-box计算瓦片尺寸，border-box会挤压容器内部空间，导致瓦片错位。

3. 明确地图容器的宽高设置

确保地图容器拥有确定的宽高，避免依赖未明确设置的父元素高度：

#map {
  width: 100%;
  height: 80vh; /* 或固定像素值，如600px */
}

生产环境中布局渲染时序可能与本地不同，不确定的宽高会导致Leaflet初始化时计算错误。

4. 强制Leaflet重新计算地图尺寸

在组件挂载完成后，调用invalidateSize()方法让Leaflet重新校准瓦片位置：

import { useEffect, useRef } from 'react';
import L from 'leaflet';
import 'leaflet/dist/leaflet.css';

export default function Map() {
  const mapContainerRef = useRef(null);

  useEffect(() => {
    if (!mapContainerRef.current) return;

    const map = L.map(mapContainerRef.current).setView([51.505, -0.09], 13);
    L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
      attribution: '© OpenStreetMap contributors'
    }).addTo(map);

    // 初始化后强制校准尺寸
    map.invalidateSize();

    // 监听窗口 resize 事件，动态校准
    const handleResize = () => map.invalidateSize();
    window.addEventListener('resize', handleResize);

    return () => {
      window.removeEventListener('resize', handleResize);
      map.remove();
    };
  }, []);

  return <div ref={mapContainerRef} id="map" />;
}

部署后地图容器可能在Leaflet初始化时尚未完成渲染，该方法可强制重新计算瓦片坐标。

5. 验证生产环境的Leaflet CSS加载

确认生产构建中Leaflet的CSS已正确导入，避免打包工具遗漏资源路径。在React中需确保代码中存在：

import 'leaflet/dist/leaflet.css';

可通过浏览器开发者工具的Elements面板检查.leaflet-container是否应用了Leaflet的默认样式。

内容的提问来源于stack exchange，提问作者Anandu krishna v v