HightLight
In addition to data display, geographical visualization also requires user interaction. User interaction is generally divided into two types.
- Layer interaction
- Data interaction
Layer interaction
The mouse performs related operations on the visualization layer, and the layer will respond accordingly.L7ofLayerLayers currently natively support two interaction capabilities.
activeMouse over highlightselectMouse selection highlight
active(activeOption | boolean): void
- Turn on or off
mousehoverElement highlighting effect. activeOptioncolor: Highlight colormix: Optional parameter, the default is 0, which means the highlight color is the specified solid color. The maximum valid value is 1, which means the highlight color is all the background color.
// Turn on Active and use the default highlight color
layer.active(true);
// Turn on Active custom highlight color
layer.active({
color: 'red',
mix: 0.6,
});
//Turn off the highlight effect
layer.active(false);
select(selectOption | boolean): void
- Turn on or off
mouseclickElement selection highlight effect. selectOptioncolor: Select highlight colormix: Optional parameter, the default is 0, which means that the selected highlight color is the specified solid color. The maximum effective value is 1, which means that all the selected highlight colors are background colors.
// Turn on Active and use the default highlight color
layer.select(true);
// Turn on Active custom highlight color
layer.select({
color: 'red',
mix: 0.6,
});
//Turn off the highlight effect
layer.select(false);
Data interaction
Sometimes we may need to directly specify a certain data highlight. For example, when the mouse clicks on the data in the data panel, we need to highlight the corresponding element of the map.
setActive(id: number): void
layer.setActive(id);
setSelect(id: number): void
layer.setSelect(id);