1. Método de resaltado
Hay muchas formas de configurar el resaltado de los elementos del mapa. Este artículo habla directamente sobre el método más directo, es decir, configurar el estilo del elemento, dos estilos: resaltado y no resaltado. Puede configurar el estilo correspondiente en diferentes situaciones. .No más tonterías., ve directamente al código:
//非高亮样式
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. Llamar usando
El código es el siguiente (ejemplo):
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));
}
};