1. Highlight method
There are many ways to set the highlighting of map elements. This article directly talks about the most direct method, that is, setting the style of the element, two styles: highlighting and non-highlighting. You can set the corresponding style in different situations. No more nonsense. , go directly to the code:
//非高亮样式
const unselectFieldStyle = (fea: any) => {
return new Style({
text: new Text({
text: fea.name,
font: '20px',
fill: new Fill({
color: [255, 255, 255]
})
}),
fill: new Fill({
color: [153, 153, 144, 0.2]
}),
stroke: new Stroke({
width: 2,
color: '#FFFFFF',
lineDash: [8, 4],
lineCap: 'butt'
})
});
};
//高亮样式
const selectFieldStyle = (fea: any) => {
return new Style({
text: new Text({
text: fea.name,
font: '20px',
fill: new Fill({
color: [255, 255, 255]
})
}),
fill: new Fill({
color: [75, 126, 255, 0.5]
}),
stroke: new Stroke({
width: 2,
color: '#FFFFFF',
lineDash: [8, 4],
lineCap: 'butt'
})
});
};
export {
selectFieldStyle, unselectFieldStyle };
2. Call using
The code is as follows (example):
const overlayContainerRef = useRef<any>(null);
const overlayObjRef = useRef<any>();
const [visible, setVisible] = useState<boolean>(false);
const {
feature, map ,timestamp} = props.params;
const hxmap = map?.mapInstance;
useEffect(() => {
if (hxmap) {
//overlay初始化
overlayObjRef.current = new Overlay({
element: overlayContainerRef.current,
positioning: 'center-center',
autoPan: true
});
hxmap?.addOverlay(overlayObjRef.current);
}
}, [hxmap]);
useEffect(() => {
if (hxmap) {
if (feature != null) {
let fielddatalist = [];
fielddatalist.push({
name: feature.values_.name,
typeName: feature.values_.type,
area: Number(feature.values_.area.toFixed(2))
});
setfielddata(fielddatalist);
if (overlayObjRef && overlayObjRef.current) {
setOverlayVisible(true);
**//被选定的要素高亮显示**
feature.setStyle(selectFieldStyle(feature));
nextTick(()=>{
const center=getCenter(feature.getGeometry().getExtent());
overlayObjRef.current.setPosition(center);
})
}
} else {
if (overlayObjRef && overlayObjRef.current) {
setOverlayVisible(false);
}
}
}
}, [timestamp]);
//关闭overlay
const closeOverlay = () => {
setOverlayVisible(false);
if (feature) {
**//要素高亮取消**
feature.setStyle(unselectFieldStyle(feature));
}
};