React+openlayers は、マップ上の要素をクリックしてオーバーレイをポップアップすることを実現します。

序文

React や vue3 と openlayers の組み合わせの事例はネット上にほとんどありません。今日は仕事で使うのでメモしておきます。今後もol(初心者)とreactとvue3の組み合わせの事例を更新していきますスプレーしないでください）

---

1.地図のクリック音を聞いてオーバーレイを認識します

まず地図を監視し、クリックされた地図要素を取得して判定し、オーバーレイを作成します。コードは以下のように表示されます。

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. オーバーレイの要素: overlayContainerRef.current、オーバーレイ オブジェクト overlayObjRef.current。
2. マップモニターの前にオーバーレイを作成し、モニターが条件を満たしたらオーバーレイ位置を設定してマップに追加します。

---

効果は次のとおりです。