更新 globe.gl 中的数据

Question

我正在使用 globe gl library 中提供的点图层。但是我似乎无法在设置 Globe().pointsData.

后更新数据

在下面的示例中，我创建了一个 Globe 实例，然后编写了一个在 2 秒后调用的测试脚本。但是在 2 秒过去后，即使数据点已更新，地球上也没有任何更新。

const N = 1;
var gData = [...Array(N).keys()].map(() => ({
  lat: 5,
  lng: 10,
  size: 0.5,
  color: 'red'
}));

var world = Globe()
  .globeImageUrl('//unpkg.com/three-globe/example/img/earth-night.jpg')
  .pointsData(gData)
  .pointAltitude('size')
  .pointColor('color')
(document.getElementById('globeViz'))

function resolveAfter2Seconds() {
  return new Promise(resolve => {
    setTimeout(() => {
      resolve('resolved')
    }, 2000);
  });
}

async function asyncCall() {
  console.log('calling');
  const result = await resolveAfter2Seconds();
  
  // Updating the data here
  gData[0].size = 1
  gData[0].lat = 30

  // Setting the updated points
  world.pointsData = gData

  console.log(world.pointsData)
}

asyncCall();

我不确定我是否应该调用将触发反映在 Globe 本身上的更新的内容。从 apis.

看不出来

Codepen 实现是 here。

Answer 1

Looking at their Points Layer API，看起来需要使用 pointsData(gData)

而不是 pointsData = gData

async function asyncCall() {
  console.log('calling');
  const result = await resolveAfter2Seconds();

  gData[0].size = 1
  gData[0].lat = 30
  gData[0].color = 'green'
  
  world.pointsData(gData)
}

更新 globe.gl 中的数据

Updating data in globe.gl

three.js

webgl-globe