ArcGIS JS中如何将屏幕像素转为地图像素以用于GetFeatureInfo请求？

首先明确核心：WMS的GetFeatureInfo请求需要的是对应当前地图视口下WMS瓦片的图像像素位置，你拿到的屏幕像素无法直接使用，view.toMap()得到的是地理坐标，还需要完成到WMS图像空间的映射，或者直接用OpenLayers内置API简化流程。

方法一：用OpenLayers内置API直接生成请求URL #

这是最简便的方式，无需手动计算像素：

1. 先获取点击位置相对地图容器的屏幕像素，再转成地理坐标
2. 调用WMS数据源的getGetFeatureInfoUrl()方法，它会自动帮你计算正确的X/Y像素、BBOX、WIDTH/HEIGHT等请求参数：

// 假设已拿到点击事件event，以及map、view实例
const mapElement = map.getTargetElement();
const rect = mapElement.getBoundingClientRect();
// 计算相对地图容器的屏幕像素
const screenX = event.clientX - rect.left;
const screenY = event.clientY - rect.top;
// 转地理坐标
const coordinate = view.toMap([screenX, screenY]);
// 获取目标WMS图层的数据源
const wmsSource = map.getLayers()
  .getArray()
  .find(layer => layer.get('type') === 'wms') // 也可通过instanceof判断类型
  .getSource();
// 生成GetFeatureInfo请求URL
const infoUrl = wmsSource.getGetFeatureInfoUrl(
  coordinate,
  view.getResolution(),
  view.getProjection(),
  {
    'INFO_FORMAT': 'application/json', // 根据需求设置返回格式
    'FEATURE_COUNT': 5,
    'QUERY_LAYERS': '你的WMS图层名称' // 必须指定要查询的图层名
  }
);
// 发起请求
if (infoUrl) {
  fetch(infoUrl)
    .then(res => res.json())
    .then(data => {
      // 处理返回的要素信息
    });
}

方法二：手动计算WMS图像像素（自定义请求时用） #

如果需要自己构造请求，可按以下步骤转换像素：

1. 获取当前地图视口的范围和尺寸：

const viewSize = view.getSize();
const extent = view.calculateExtent(viewSize);
const [minX, minY, maxX, maxY] = extent;

2. 将地理坐标映射为WMS图像像素：

const coordX = coordinate[0];
const coordY = coordinate[1];
// X像素：基于地理坐标在视口范围的占比计算
const imageX = Math.round((coordX - minX) / (maxX - minX) * viewSize[0]);
// Y像素：注意WMS的Y轴方向可能和屏幕相反，需用maxY减去坐标值计算
const imageY = Math.round((maxY - coordY) / (maxY - minY) * viewSize[1]);

3. 构造GetFeatureInfo请求参数：

const params = new URLSearchParams({
  SERVICE: 'WMS',
  VERSION: '1.3.0', // 匹配你的WMS服务版本
  REQUEST: 'GetFeatureInfo',
  BBOX: extent.join(','),
  WIDTH: viewSize[0],
  HEIGHT: viewSize[1],
  X: imageX,
  Y: imageY,
  CRS: view.getProjection().getCode(),
  QUERY_LAYERS: '你的WMS图层名称',
  INFO_FORMAT: 'application/json'
});
const infoUrl = `${wmsSource.getUrls()[0]}?${params.toString()}`;

关键注意事项 #

• 确保屏幕坐标是相对地图容器的，而非整个屏幕（可通过event.offsetX/offsetY，或减去容器getBoundingClientRect()的left/top值获取）
• WMS 1.1.1和1.3.0版本参数有差异：1.3.0用CRS，1.1.1用SRS，Y轴计算方向也可能不同，需对应服务版本
• QUERY_LAYERS参数必须和WMS服务发布的图层名称完全一致

内容的提问来源于stack exchange，提问作者Toto