如何从JSON数组提取指定数量随机条目实现globe.gl随机弧线展示

1. 随机加载10条弧线的逻辑 #

你之前的代码渲染了全部弧线，是因为直接把全量的首都数据传给了arcsData，只要提前从capitals.features中随机抽取10条再传入即可。
这里先给出原生JS的随机取样函数，如果你用D3可以直接用内置的d3.shuffle实现更均匀的随机排序，避免原生sort随机的偏差问题：

// 原生JS实现：从数组中随机取n个不重复元素
function getRandomItems(arr, n) {
  const shuffled = [...arr].sort(() => 0.5 - Math.random());
  return shuffled.slice(0, n);
}

// D3简化版本，直接调用内置随机洗牌方法
// function getRandomItems(arr, n) {
//   return d3.shuffle([...arr]).slice(0, n);
// }

修改后的初始化代码如下：

const capitalsUrl = "https://raw.githubusercontent.com/fallenartist/playground/main/json/capitals.json";
const world = Globe()(document.getElementById('globe'));
let allCapitals = []; // 把全量数据提到外层作用域，方便后续刷新调用

fetch(capitalsUrl).then(res => res.json()).then(capitals => {
  allCapitals = capitals.features;
  // 首次渲染10条随机弧线
  updateArcs();
  // 3秒后刷新新的10条弧线，要循环定时刷新可以换成setInterval(updateArcs, 3000)
  setTimeout(updateArcs, 3000);
});

2. 封装公共更新函数实现定时刷新 #

你之前setTimeout不生效主要是两个原因：一是capitals变量仅在fetch回调的局部作用域可访问，外部调用拿不到数据；二是没有重新抽取随机10条数据，还是传入了全量数据集。
把更新弧线的逻辑封装成独立函数，每次调用重新随机抽取数据即可：

function updateArcs() {
  // 随机取1个起点、10个终点，你也可以根据需求调整起点的逻辑
  const startPoint = getRandomItems(allCapitals, 1)[0];
  const randomEndPoints = getRandomItems(allCapitals, 10);
  world
    // 直接传入筛选后的10条数据，globe.gl会自动只渲染对应数量的弧线
    .arcsData(randomEndPoints)
    .arcStartLat(() => startPoint.geometry.coordinates[1])
    .arcStartLng(() => startPoint.geometry.coordinates[0])
    .arcEndLat(d => d.geometry.coordinates[1])
    .arcEndLng(d => d.geometry.coordinates[0]);
}

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