1.高亮方法

有多种方法设置地图要素高亮，本文直说最直接的一种方法，即设置要素的样式，高亮与不高亮两种样式，不同情况下设置对应的样式即可，废话不多说，直接上代码：

//非高亮样式
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.调用使用

代码如下（示例）：

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