Leaflet地图中GeoJSON数据变更后如何重新加载？

问题核心 #

你用<script>标签直接加载GeoJSON的方式会被浏览器强缓存，而且属于一次性加载，无法主动触发重新获取最新数据。之前加时间戳无效，大概率是因为<?=time()?>这类PHP代码没被服务器解析（比如你的页面是.html后缀，服务器不处理PHP），导致实际请求的URL没带上有效时间戳。

推荐方案：用AJAX/Fetch动态加载并刷新数据 #

修改你的main.js，封装一个加载GeoJSON的函数，主动控制数据获取和图层更新，步骤如下：

1. 编写加载函数，支持主动刷新：

// 全局变量存储GeoJSON图层，方便后续移除
let geoJsonLayer = null;

function refreshMapData() {
  // 带时间戳请求，彻底避免缓存
  fetch('data/export.json?t=' + Date.now())
    .then(res => res.json())
    .then(data => {
      // 移除旧图层（如果存在）
      if (geoJsonLayer) {
        map.removeLayer(geoJsonLayer);
      }
      // 创建新图层并添加到地图
      geoJsonLayer = L.geoJSON(data).addTo(map);
    })
    .catch(err => console.error('加载数据失败:', err));
}

// 页面初始化时加载一次数据
refreshMapData();

2. 表单提交后触发刷新：
   在表单的提交成功回调里调用refreshMapData()，比如表单用AJAX提交的话：

// 假设你的表单ID是data-form
document.getElementById('data-form').addEventListener('submit', function(e) {
  e.preventDefault();
  // 提交表单数据到服务器
  fetch('你的表单处理接口', {
    method: 'POST',
    body: new FormData(this)
  })
  .then(res => res.ok)
  .then(isSuccess => {
    if (isSuccess) {
      // 提交成功后刷新地图数据
      refreshMapData();
    }
  });
});

备选方案：修复script标签加载的缓存问题 #

如果你坚持用<script>标签加载，需要用JS动态生成带时间戳的请求，同时确保GeoJSON文件里的内容是全局变量（比如var mapData = {...};）：

<script>
  function reloadGeoJSONScript() {
    // 移除旧的script标签
    const oldScript = document.querySelector('script[src*="export.json"]');
    if (oldScript) oldScript.remove();
    
    // 创建新的script标签，带时间戳
    const newScript = document.createElement('script');
    newScript.src = 'data/export.json?t=' + Date.now();
    newScript.type = 'text/javascript';
    
    // 加载完成后更新地图
    newScript.onload = function() {
      if (geoJsonLayer) map.removeLayer(geoJsonLayer);
      geoJsonLayer = L.geoJSON(window.mapData).addTo(map);
    };
    
    document.head.appendChild(newScript);
  }
  
  // 初始化加载
  reloadGeoJSONScript();
</script>

额外优化建议 #

• 服务器端给export.json配置缓存策略，比如添加响应头Cache-Control: no-cache，进一步降低缓存概率；
• 如果表单是同步提交，可在页面跳转回地图页时，通过URL参数触发自动刷新（比如map.html?refresh=1，然后在JS里判断参数调用刷新函数）。

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