如何在Mapbox中加载支持分页的GeoJSON数据源

嘿，这个问题我之前也踩过坑！Mapbox GL JS的原生GeoJSON源确实没有内置的分页处理机制，不过我们有几种干净的解决思路，既能尽量复用Mapbox的现有能力，又能搞定分页加载的问题。

方案1：手动批量请求+合并数据（推荐，可控性拉满） #

虽然你提到不想手动发请求，但其实可以把这个逻辑封装成一个可复用的函数，而且能实现“一次性加载所有页”或者“按需加载”，之后再把合并后的完整FeatureCollection传给Mapbox的GeoJSON源。这里的关键是利用ArcGIS API返回的exceededTransferLimit标识来判断是否需要继续请求下一页，配合resultOffset参数实现分页遍历。

给你贴个可直接用的示例代码：

async function loadAllFeatures(baseUrl) {
  let allFeatures = [];
  let resultOffset = 0;
  const pageSize = 2000; // API默认每页返回2000条，你也可以试试用`resultRecordCount`参数调整每页大小

  while (true) {
    // 构造带分页参数的请求URL
    const url = new URL(baseUrl);
    url.searchParams.set('resultOffset', resultOffset);
    url.searchParams.set('resultRecordCount', pageSize);

    const response = await fetch(url);
    const data = await response.json();

    // 合并当前页的要素到总列表
    allFeatures = [...allFeatures, ...data.features];

    // 判断是否还有更多数据需要加载
    const hasMore = data.exceededTransferLimit || (data.properties?.exceededTransferLimit);
    if (!hasMore) break;

    // 偏移量累加，准备请求下一页
    resultOffset += pageSize;
  }

  // 返回合并后的完整FeatureCollection
  return {
    type: "FeatureCollection",
    features: allFeatures
  };
}

// 初始化Map之后调用
map.on('load', async () => {
  try {
    // 加载所有分页数据
    const fullData = await loadAllFeatures('https://geospatial.alberta.ca/titan/rest/services/transportation/access_facility_roads/FeatureServer/0/query?where=1%3D1&returnExceededLimitFeatures=true&f=geojson');

    // 添加GeoJSON源并传入完整数据
    map.addSource('main-source', {
      type: 'geojson',
      data: fullData
    });

    // 这里添加你的图层样式
    map.addLayer({
      id: 'roads-layer',
      type: 'line',
      source: 'main-source',
      paint: {
        'line-color': '#2e7dff',
        'line-width': 2
      }
    });
  } catch (err) {
    console.error('加载数据出错:', err);
  }
});

这个方案的好处是可控性极高，你可以轻松添加加载状态提示、错误重试逻辑，甚至结合地图视野实现“视口内按需加载”。唯一需要注意的是，如果数据量特别大（比如几十万条），一次性加载可能会影响性能，但对于大部分场景来说完全够用。

方案2：增量加载+实时更新Mapbox源 #

如果你想让Mapbox实时渲染已加载的数据，而不是等所有数据加载完才显示，可以用“加载一页就更新一次源数据”的方式。本质还是手动请求，但可以和Mapbox的生命周期结合得更紧密：

map.on('load', () => {
  let allFeatures = [];
  let resultOffset = 0;
  const pageSize = 2000;
  const baseUrl = 'https://geospatial.alberta.ca/titan/rest/services/transportation/access_facility_roads/FeatureServer/0/query?where=1%3D1&returnExceededLimitFeatures=true&f=geojson';

  // 先初始化一个空的GeoJSON源
  map.addSource('main-source', {
    type: 'geojson',
    data: { type: 'FeatureCollection', features: [] }
  });

  // 先把图层加上，等数据加载后会自动渲染
  map.addLayer({
    id: 'roads-layer',
    type: 'line',
    source: 'main-source',
    paint: {
      'line-color': '#2e7dff',
      'line-width': 2
    }
  });

  // 封装加载下一页的函数
  async function loadNextPage() {
    try {
      const url = new URL(baseUrl);
      url.searchParams.set('resultOffset', resultOffset);
      url.searchParams.set('resultRecordCount', pageSize);

      const response = await fetch(url);
      const data = await response.json();

      // 合并数据
      allFeatures = [...allFeatures, ...data.features];

      // 实时更新Mapbox的源数据
      map.getSource('main-source').setData({
        type: 'FeatureCollection',
        features: allFeatures
      });

      // 判断是否需要继续加载下一页
      const hasMore = data.exceededTransferLimit || data.properties?.exceededTransferLimit;
      if (hasMore) {
        resultOffset += pageSize;
        await loadNextPage(); // 递归加载下一页
      }
    } catch (err) {
      console.error('加载分页数据失败:', err);
    }
  }

  // 启动加载流程
  loadNextPage();
});

这个方案的优势是用户可以看到数据逐步出现在地图上，体验更流畅，尤其适合大数据量的场景。

方案3：改用ArcGIS矢量瓦片源（最优解，如果支持的话） #

哦对了，你的数据源是ArcGIS Feature Server，很多这类服务都支持直接输出矢量瓦片！如果你的这个服务也支持的话，直接改用Mapbox的vector源是最省心的——矢量瓦片本身就是为地图设计的，Mapbox会自动按需加载视野内的瓦片，完全不需要你处理分页，性能也比GeoJSON好太多。

你可以先试试访问这个URL：https://geospatial.alberta.ca/titan/rest/services/transportation/access_facility_roads/VectorTileServer，如果能正常访问（跳转到ArcGIS的矢量瓦片服务页面），就可以用这种方式：

map.on('load', () => {
  map.addSource('main-source', {
    type: 'vector',
    url: 'https://geospatial.alberta.ca/titan/rest/services/transportation/access_facility_roads/VectorTileServer'
  });

  map.addLayer({
    id: 'roads-layer',
    type: 'line',
    source: 'main-source',
    'source-layer': 'Access_Facility_Roads', // 这里需要替换成矢量瓦片中的实际图层名，可从ArcGIS服务文档里找到
    paint: {
      'line-color': '#2e7dff',
      'line-width': 2
    }
  });
});

这种方式完全是Mapbox原生支持的，不需要写任何分页逻辑，加载速度和性能都是最优的，强烈优先尝试！

关于transformRequest的补充说明 #

你提到的transformRequest确实只能把单个请求转换成另一个单个请求，没办法生成多个分页请求，所以这个API解决不了你的问题，不用花时间在这上面啦。

最后总结一下：Mapbox本身没有内置的GeoJSON分页处理功能，但我们可以通过手动批量请求合并数据，或者改用矢量瓦片源的方式来解决。如果数据量不大，方案1最直接；如果要实时加载体验，方案2更合适；如果API支持矢量瓦片，方案3是绝对的最优解。

内容来源于stack exchange