情景: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);