Leaflet：基于地图范围BBox从API刷新GeoJSON图层的问题

核心思路是监听地图的平移/缩放结束事件，每次事件触发时根据当前地图范围重新请求数据，并替换旧图层避免要素重复叠加。具体实现步骤如下：

1. 保留GeoJSON图层的全局引用 #

在全局作用域定义变量存储图层实例，方便后续移除旧图层：

// 全局变量存储GeoJSON图层，用于后续移除操作
let boreholeLayer = null;

2. 封装数据加载与图层更新函数 #

把请求逻辑封装成可复用的函数，包含旧图层清理、新数据请求和图层创建：

async function loadBoreholes() {
  // 移除已存在的旧图层
  if (boreholeLayer) {
    map.removeLayer(boreholeLayer);
  }

  // 获取当前地图范围的bbox参数
  const bbox = map.getBounds().toBBoxString();
  const requestUrl = `https://ogcapi.bgs.ac.uk/collections/agsboreholeindex/items?bbox=${bbox}&limit=100`;

  try {
    const response = await fetch(requestUrl, {
      headers: { 'Accept': 'application/geo+json' }
    });
    const agsboreholes = await response.json();

    // 创建新的GeoJSON图层并添加到地图
    boreholeLayer = L.geoJSON(agsboreholes, {
      onEachFeature: onEachFeature
    }).addTo(map);
  } catch (error) {
    console.error('加载钻孔数据失败:', error);
  }
}

3. 监听地图moveend事件 #

地图平移或缩放操作完成时会触发moveend事件，在此回调中调用加载函数：

// 监听地图平移/缩放结束事件，触发数据刷新
map.on('moveend', loadBoreholes);

4. 初始加载数据 #

页面初始化时调用一次加载函数，加载初始视图范围内的要素：

// 页面加载完成后加载初始数据
loadBoreholes();

完整修改后的代码 #

// 全局变量存储GeoJSON图层
let boreholeLayer = null;

async function loadBoreholes() {
  // 移除旧图层
  if (boreholeLayer) {
    map.removeLayer(boreholeLayer);
  }

  const bbox = map.getBounds().toBBoxString();
  const requestUrl = `https://ogcapi.bgs.ac.uk/collections/agsboreholeindex/items?bbox=${bbox}&limit=100`;

  try {
    const response = await fetch(requestUrl, {
      headers: { 'Accept': 'application/geo+json' }
    });
    const agsboreholes = await response.json();

    boreholeLayer = L.geoJSON(agsboreholes, {
      onEachFeature: onEachFeature
    }).addTo(map);
  } catch (error) {
    console.error('加载钻孔数据失败:', error);
  }
}

function onEachFeature(feature, layer) {
  var popupContent = "<b>AGS钻孔信息</b><br><hr>" +
          "<b>BGS LOCA ID: </b>" + feature.properties.bgs_loca_id + "<br>" +
          "<b>深度(米): </b>" + feature.properties.loca_fdep + "<br>" +
          "<b>项目名称: </b>" + feature.properties.proj_name + "<br>" +
          "<b>项目工程师: </b>" + feature.properties.proj_eng + "<br>" +
          "<b>项目承包商: </b>" + feature.properties.proj_cont + "<br>" +
          "<b>原始LOCA ID: </b>" + feature.properties.loca_id + "<br>" +
          "<b>AGS图形日志: </b>" + "<a href=\"https://agsapi.bgs.ac.uk/ags_log/?bgs_loca_id=" + feature.properties.bgs_loca_id + "\" target=\"_blank\">查看</a>" + "<br>" +
          "<b>AGS数据: </b>" + "<a href=\"https://agsapi.bgs.ac.uk/ags_export/?bgs_loca_id=" + feature.properties.bgs_loca_id + "\" target=\"_blank\">下载</a>" + "<br>" +
          "<b>AGS提交记录(原始数据): </b>" + "<a href=\"" + feature.properties.dad_item_url + "\" target=\"_blank\">查看</a>" + "<br>";
  if (feature.properties && feature.properties.popupContent) {
      popupContent += feature.properties.popupContent;
  }
  layer.bindPopup(popupContent);
}

// 绑定地图事件
map.on('moveend', loadBoreholes);

// 初始加载数据
loadBoreholes();

关键细节说明 #

• 旧图层清理：每次请求新数据前移除旧图层，避免地图上堆积重复要素。
• 事件选择：使用moveend而非move/zoom事件，避免操作过程中频繁触发请求，提升性能。
• 错误捕获：添加try/catch处理请求失败场景，便于调试排查问题。

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