Question

因此，我创建了一个扁平的HexagonLayer，并与onClick道具绑定了各种交互，如下所示。

我现在的目标是通过添加轮廓，更改该列的颜色或沿这些行进行的其他操作来修改单击的单个列。我可以通过在该层下面添加另一层来提出蛮力解决方案，但是文档对此没有做太多详细说明，我想看看是否有另一条可以采用的修改现有层的方法。

我还想获取诸如给定列中的点数之类的信息，但我想这与第一部分有关。

这是我目前拥有的：

// Here's where I'm creating the settings for the HexagonLayer
const hexagonLayer = {
  id: 'hexagon-layer',
  data: props.G.cells,
  pickable: true,
  extruded: true,
  radius: 50,
  elevationScale: 0,
  autoHighlight: true,
  opacity: 0.3,
  getPosition: d => d.COORDINATES,
  // Here's the onClick interactions
  onClick: (layer, $event) => {
    // I can obtain some information from the layer variable here,
    // but not nearly enough for what I'm trying to accomplish
    switch (props.ctx.phase) {
      case 'setup':
        props.moves.placeUnit(layer.object.position)
        break
      case 'play':
        // Replace with active unit functionality
        const activeUnit = Object.keys(props.G.players[props.ctx.currentPlayer].pieces)[0]

        props.moves.moveUnit(activeUnit, layer.index, layer.object.position)
        break
      default:
        console.error('Unknown phase', props.ctx.phase)
    }
      
    return true
  }
};

// Check some incoming data to add the ducks shown in the screenshot
// Not necessarily related to the question, but they were in the screenshot so I included it
useEffect(() => {
  const tempPieces = []
  props.G.players.forEach(player => {
    Object.values(player.pieces).forEach(piece => {
      tempPieces.push(
        createScenegraphLayer(
          piece.id,
          UNIT_MODEL_MAP[piece.type],
          piece.coordinates, 30
        )
      )
    })
  })
  setPieces(tempPieces)
}, [props.G.cells, props.G.players])

// Rendering the layers
return (
  <div className="Map">
    <DeckGL
      initialViewState={INITIAL_VIEW_STATE}
      controller={true}
      debug={true}>
        <ReactMapGL mapboxApiAccessToken={MAPBOX_ACCESS_TOKEN}>
          <Layer {...threeDLayer} />
        </ReactMapGL>
        <HexagonLayer {...hexagonLayer} />
        {pieces.map(piece => (
          <ScenegraphLayer key={piece.id} {...piece} coordinates={piece.data[0].coordinates} />
        ))}
      </DeckGL>
      <ToastContainer />
  </div>
);

Answer 1

我现在的目标是通过添加轮廓，更改该列的颜色或沿这些行的其他内容来修改单击的单个列。

要更改单击的列的颜色，可以通过以下方式使用highlightColor和highlightedObjectIndex：

 if (activeimages.length >0){
       activeimages[i].classList.remove('thumbnail-active')
   }

有没有办法修改HexagonLayer中的单个列？

1 个答案: