Блог

Итак, я создал плоский HexagonLayer и привязал различные взаимодействия к onClick prop, как показано ниже.

Теперь моя цель — изменить отдельный столбец, на который был сделан щелчок, добавив контур, изменив цвет для этого столбца или что-то еще в этом роде. Вероятно, я мог бы решить проблему методом перебора, добавив еще один слой под этим, но в документации об этом подробно не говорится, и я хотел посмотреть, есть ли другой путь, который изменил бы существующий слой.

Я также хотел бы получить такую информацию, как количество точек в данном столбце, но я бы предположил, что это связано с первой частью.

Вот что у меня сейчас есть:

 // 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>
);
  

Теперь моя цель — изменить отдельный столбец, на который был сделан щелчок, добавив контур, изменив цвет для этого столбца или что-то еще в этом роде.

Чтобы изменить цвет выбранного столбца, вы можете использовать highlightColor и highlightedObjectIndex следующим образом:

 const App = () => {
  const [highlightedObjectIndex, setHighlightedObjectIndex] = useState(-1);

  const onClick = info => {
    if (info.object) {
      setHighlightedObjectIndex(info.object.index);
    }
  };

  const layers = [
    new HexagonLayer({
      id: "hexagon-layer",
      data,
      pickable: true,
      radius: 200,
      getPosition: d => d.COORDINATES,
      highlightColor: [0, 0, 255],
      highlightedObjectIndex,
      updateTriggers: {
        highlightedObjectIndex
      },
      onClick
    })
  ];

  return (
    <DeckGL
      initialViewState={INITIAL_VIEW_STATE}
      controller={true}
      layers={layers}
    >
    </DeckGL>
  );
};