openlayers中getFeaturesAtPixel方法

情景：pop弹窗显示图斑属性信息

map.on("click", async (e) => {
        closeInfoBox();
        const features = map.getFeaturesAtPixel(e.pixel);
        const properties = features.getProperties();
        const point = new Point(e.coordinate);
        const datasetNames = datasetName
        const data: any = await getFeaturesByGeometrySql(properties.dataServerUrl, {
          mode: "INTERSECT",
          geometry: point,
          hasGeometry: false,
          datasetNames: datasetNames,
        });
      });

可以通过getFeaturesAtPixel方法获取鼠标点击范围与之相交的图层。

如果图上同时叠加多个图层，可以在拿到features之后进行过滤，找到想要的图层，指定查询参数，即可获得图斑属性信息。

创建pop信息弹窗

 // 创建提示框
    (map as any).mapInfoBoxElement = document.createElement("div");
    (map as any).mapInfoBoxElement.className = "bg-white p-2 rounded-md shadow-md space-y-2 mapbox-container";
    (map as any).mapInfoBox = new Overlay({
      element: (map as any).mapInfoBoxElement,
      // offset: [-175, -200],
      positioning: "bottom-left",
    });
    map.addOverlay((map as any).mapInfoBox);