如何解决有没有办法修改HexagonLayer中的单个列?
因此,我创建了一个扁平的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>
);
解决方法
我现在的目标是通过添加轮廓,更改该列的颜色或沿这些行的其他内容来修改单击的单个列。
要更改单击的列的颜色,可以通过以下方式使用highlightColor和highlightedObjectIndex:
if (activeimages.length >0){
activeimages[i].classList.remove('thumbnail-active')
}
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。