OpenLayers 6.4.3点击SVG生成的要素无法获取如何解决

• 你使用的内联SVG字符串没有显式声明width和height属性，OpenLayers的命中检测逻辑依赖图标原始尺寸计算点击触发范围，读取不到尺寸的情况下就无法正确识别点击区域
• 当前设置的锚点参数和SVG实际尺寸不匹配，也会导致命中区域偏移甚至完全无法触发

修改SVG字符串补充宽高属性，同时调整锚点参数匹配SVG实际尺寸即可，也可主动传入imgSize参数强制指定图标尺寸，进一步保证命中检测逻辑正常运行，修改后的核心代码如下：

// 补充width、height属性的SVG字符串
const src =
  `data:image/svg+xml;utf8,` +
  `<svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="90" height="60" >` +
  `<path d='M0,0 L0,60 L90,30 z'/>` +
  `</svg>`;

const iconStyle = new Style({
  image: new Icon({
    anchor: [0.5, 0.5], // 按比例设置居中锚点，可按需调整
    anchorXUnits: 'fraction',
    anchorYUnits: 'fraction',
    src,
    imgSize: [90, 60] // 主动指定图标尺寸，避免内联SVG尺寸读取失败
  }),
});

如果图标尺寸很小，也可以在调用forEachFeatureAtPixel时新增hitTolerance参数扩大检测容差：

const feature = map.forEachFeatureAtPixel(evt.pixel, function (feature) {
  return feature;
}, {
  hitTolerance: 10 // 点击位置距离要素10像素范围内都判定命中，单位为像素
});

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