react+openlayers实现点击地图上要素弹出overlay

前言

网上关于react或者vue3与openlayers结合的案例非常少，今天由于工作中用到，特记录下笔记，后面将持续更新react和vue3与ol的结合案例（新手勿喷）

---

1.监听map点击，实现overlay叠加层

首先监听map，获取点击到的地图要素进行判断，创建overlay。代码如下：

interface PropsType {
//父组件传过来的map实例
  map?: Map;
}
const Fieldoverlay: React.FC<PropsType> = memo((props: any) => {
  //组件绑定的ref
  const overlayContainerRef = useRef<any>(null);
  //overlay对象ref
  const overlayObjRef = useRef<any>();
  //解析父组件传过来的数据（map）
  const map = props.map?.mapInstance;
  
//这部分可忽略
type Fieldinfo = {
    name: string;
    typeName: string;
    area: number;
  };
  const [fielddata, setfielddata] = useState<Fieldinfo[]>([
    // { name: '水稻', typeName: '水田', area: 12 }
  ]);
  
  //解决地图初始化overlay闪现问题
  useEffect(() => {
    overlayObjRef.current = new Overlay({
      element: overlayContainerRef.current,
      positioning: 'center-center',
      autoPan: true
    });
  }, []);
  useEffect(() => {
    if (hxmap) {
      overlayObjRef.current = new Overlay({
        element: overlayContainerRef.current,
        positioning: 'center-center',
        autoPan: true
      });
      //overlayObjRef.current.setPosition('');
      hxmap.on('click', function (e: any) {
        //删除上一个overlay
        overlayObjRef.current.setPosition('');
        const feas = map.getFeaturesAtPixel(e.pixel);
        if (feas.length == 1 && feas !== undefined && feas[0].name) {
          //fielddata这段可以忽略
          let fielddatalist = [];
          fielddatalist.push({
            name: feas[0].values_.name,
            typeName: feas[0].values_.type,
            area: Number(feas[0].values_.area.toFixed(2))
          });
          setfielddata(fielddatalist);
          
          //获取地图点击的位置
          var overlaycoodinate = map.getCoordinateFromPixel(e.pixel);
          overlayObjRef.current.setPosition(overlaycoodinate);
          map?.addOverlay(overlayObjRef.current);
        } else {
          //删除overlay
          overlayObjRef.current.setPosition('');
        }
        if (feas == undefined) {
          overlayObjRef.current.setPosition('');
          map.getTargetElement().style.cursor = 'auto';
        }
      });
    }
  }, [hxmap]);

return (
    <div className="overlaydiv" ref={overlayContainerRef}>
      弹窗内容
   </div>
  );
};
export default Fieldoverlay;

注意：
1、Overlay中element: overlayContainerRef.current，Overlay对象overlayObjRef.current。
2、在地图监听前创建好Overlay，当监听时符合条件后再设置overlay位置并添加到map中。

---

效果如下：