使用Mapbox与Turf.js高效绘制世界地图方格网格问题咨询

问题根因 #

1. 一次性生成全球100米精度网格无法显示：该精度下全球网格的要素数量达到千万级，Turf计算时会直接出现内存溢出、计算超时，无法生成有效GeoJSON，自然无法渲染。
2. 视口动态生成网格出现位置、ID偏移：每次生成网格的起点是当前视口的西南角，没有和全局统一的基准原点对齐，导致不同视口下生成的网格错位，同一个物理位置的网格ID也会发生变化。

核心解决思路 #

放弃一次性生成全球网格的方案，基于全局基准原点对齐的规则动态生成视口范围内的网格，既保证数据量可控，又实现网格位置、ID的全局一致性。

具体实现步骤 #

1. 定义全局固定参数 #

首先确定不会随视口变化的网格基础配置，保证所有网格生成逻辑用同一套基准：

// 网格全局基准原点，固定为西经180、南纬90，可根据需求调整
const GRID_ORIGIN = [-180, -90];
// 固定网格边长
const GRID_CELL_SIZE = 10;
// 固定单位
const GRID_UNIT = 'meters';
// 预计算1度经度/纬度对应的米数，避免重复计算
const LNG_PER_METER = 1 / turf.length(turf.lineString([GRID_ORIGIN, [GRID_ORIGIN[0] + 1, GRID_ORIGIN[1]]], {units: GRID_UNIT}));
const LAT_PER_METER = 1 / turf.length(turf.lineString([GRID_ORIGIN, [GRID_ORIGIN[0], GRID_ORIGIN[1] + 1]]], {units: GRID_UNIT}));

2. 实现视口边界对齐逻辑 #

每次生成网格前，将当前视口的边界对齐到全局网格的整数倍位置，保证生成的网格和全局基准网格完全重合：

function getAlignedBbox(bounds) {
  const SW = bounds.getSouthWest();
  const NE = bounds.getNorthEast();
  // 计算西南角对齐后的坐标，向下取整到网格步长的整数倍
  const alignedSWLng = GRID_ORIGIN[0] + Math.floor((SW.lng - GRID_ORIGIN[0]) * LNG_PER_METER / GRID_CELL_SIZE) * GRID_CELL_SIZE * LNG_PER_METER;
  const alignedSWLat = GRID_ORIGIN[1] + Math.floor((SW.lat - GRID_ORIGIN[1]) * LAT_PER_METER / GRID_CELL_SIZE) * GRID_CELL_SIZE * LAT_PER_METER;
  // 计算东北角对齐后的坐标，向上取整并多延伸2个网格，避免视口边缘出现空白
  const alignedNELng = GRID_ORIGIN[0] + Math.ceil((NE.lng - GRID_ORIGIN[0]) * LNG_PER_METER / GRID_CELL_SIZE) * GRID_CELL_SIZE * LNG_PER_METER + 2 * GRID_CELL_SIZE * LNG_PER_METER;
  const alignedNELat = GRID_ORIGIN[1] + Math.ceil((NE.lat - GRID_ORIGIN[1]) * LAT_PER_METER / GRID_CELL_SIZE) * GRID_CELL_SIZE * LAT_PER_METER + 2 * GRID_CELL_SIZE * LAT_PER_METER;
  return [alignedSWLng, alignedSWLat, alignedNELng, alignedNELat];
}

3. 动态生成并渲染网格 #

监听地图移动事件，基于对齐后的边界生成网格，同时生成全局唯一的固定ID：

// 初始化数据源和图层的逻辑，放在map.on('load')回调中
map.on('load', () => {
  map.addSource('grid-source', {
    type: 'geojson',
    data: {type: 'FeatureCollection', features: []}
  });
  map.addLayer({
    id: 'grid-layer',
    type: 'line',
    source: 'grid-source',
    paint: {
      'line-color': '#ccc',
      'line-width': 1
    }
  });
  // 初始化时生成一次网格
  updateGrid();
});

// 网格更新逻辑，加防抖避免频繁触发
let updateGridTimer = null;
function updateGrid() {
  const bounds = map.getBounds();
  const alignedBbox = getAlignedBbox(bounds);
  // 生成对齐后的网格
  const grid = turf.squareGrid(alignedBbox, GRID_CELL_SIZE, {units: GRID_UNIT});
  // 给每个网格生成固定ID，用行列号拼接，同一个位置的网格ID永远不变
  grid.features.forEach(feature => {
    const center = turf.center(feature);
    const col = Math.floor((center.geometry.coordinates[0] - GRID_ORIGIN[0]) * LNG_PER_METER / GRID_CELL_SIZE);
    const row = Math.floor((center.geometry.coordinates[1] - GRID_ORIGIN[1]) * LAT_PER_METER / GRID_CELL_SIZE);
    feature.id = `${col}-${row}`;
  });
  // 更新数据源
  map.getSource('grid-source').setData(grid);
}

// 监听地图移动结束事件，更新网格
map.on('moveend', () => {
  clearTimeout(updateGridTimer);
  updateGridTimer = setTimeout(updateGrid, 150);
});

可选优化 #

• 层级适配：根据地图缩放等级动态调整GRID_CELL_SIZE，避免高缩放下网格过密、低缩放下网格无法识别
• 跨日期线兼容：如果需要支持视口跨±180经度的场景，可判断视口是否跨经度边界，拆分左右两个区域分别生成网格后合并
• 缓存复用：可缓存最近生成的网格要素，视口小范围移动时直接复用已有要素，不需要重新生成所有网格

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