在 Mapbox 上旋转 Deck.gl 点云图层

Question

我正在尝试将 deck.gl PointCloud 图层与 Mapbox 上的某个位置对齐。我尝试修改位置值并且它正在工作，但我想知道是否有另一种更简单的方法来修改图层方向而不是修改数据。

我用这段代码来定义图层：

const pointsLayer = new deck.MapboxLayer({
  id: 'points',
  type: deck.PointCloudLayer,
  data: dataArray,
  pickable: false,
  coordinateSystem: deck.COORDINATE_SYSTEM.METER_OFFSETS,
  coordinateOrigin: [25, 55],
  pointSize: 1,
  getPosition: d => d.position,
  getColor: d => d.color,
  
});

我在 documentation 中找不到任何实现该目标的 Prop

Answer 1

您应该在 Layer 基类上使用 modelMatrix property。

transformation 是使用 3D space 的 4x4 变换矩阵完成的，它包括旋转和平移方面。如果你想沿着一个特定的轴旋转，你可以看下面的例子。

// No rotation and no translation
modelMatrix: [1,0,0,0,
              0,1,0,0,
              0,0,1,0,
              0,0,0,1],

// Rotate X-axis theta degrees
modelMatrix: [1,0,0,0,
              0,cos(theta),-sin(theta),0,
              0,sin(theta),cos(theta),0,
              0,0,0,1],

// Rotate Y-axis phi degrees
modelMatrix: [cos(phi),0,sin(phi),0,
              0,1,0,0,
              -sin(phi),0,cos(theta),0,
              0,0,0,1],

// Rotate Z-axis omega degrees
modelMatrix: [cos(omega),-sin(omega),0,0,
              sin(omega),cos(omega),0,0,
              0,0,1,0,
              0,0,0,1],

在 Mapbox 上旋转 Deck.gl 点云图层

rotating a Deck.gl point cloud layer on Mapbox

javascript

mapbox

point-clouds

deck.gl