如何使用Turf.js将数组所有元素转换为FeatureCollection？

嘿，你这是踩了个很常见的变量赋值坑！问题出在你遍历providers数组的方式上——每次循环你都用points = turf.point(...)把之前的points变量给覆盖掉了，而不是把新生成的点对象添加到数组里，最后自然只有最后一个点被放进FeatureCollection里啦。

方案1：用forEach循环+push添加元素 #

把原来的map换成forEach（或者继续用map但内部执行push），每次生成点后推到数组里：

function handleNearby() { 
  const { region, providers } = this.state; 
  let points = []; 
  providers.forEach((p) => { 
    // 重点：用push把新点加入数组，而不是覆盖整个变量
    points.push(turf.point([p.coordinates.latitude, p.coordinates.longitude]));
  }); 
  var collection = turf.featureCollection(points); // 直接传入完整的点数组
  console.log(collection); 
  console.log(providers); 
  // 后续的targetPoint、nearest逻辑也能正常使用啦
}

方案2：用map直接生成点数组（更简洁） #

既然map本身就是用来生成新数组的，咱们可以直接把map的结果赋值给points，省去额外的push操作：

function handleNearby() { 
  const { region, providers } = this.state; 
  // 直接用map遍历生成所有点的数组
  const points = providers.map(p => turf.point([p.coordinates.latitude, p.coordinates.longitude]));
  var collection = turf.featureCollection(points); 
  console.log(collection); 
  console.log(providers); 
}

为什么原来的代码失效？ #

原来的代码里，points = turf.point(...)每次循环都会把points从数组变成单个的Turf Point对象，循环结束后points只保存了最后一次生成的那个点。当你传入featureCollection([points])时，数组里就只有这一个点，所以最终的FeatureCollection自然只有一个元素啦。

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