如何在OpenLayers v7中让矩形图片适配多边形几何？

你当前用Static图片源的方式只能基于外接矩形显示图片，要让图片适配任意几何形状，得改用**矢量图层+图案填充（Pattern）**的方式，利用OpenLayers的样式系统将图片裁剪成目标几何的形状。以下是修改后的代码：

this.map.on('click', (e) => {
  const feature = this.map.forEachFeatureAtPixel(e.pixel, (feature: any) => feature);
  
  if (!feature) return;

  const geometry = feature.getGeometry();
  const extent = geometry.getExtent();
  // 计算几何外接矩形的宽高
  const width = extent[2] - extent[0];
  const height = extent[3] - extent[1];

  // 创建图片对象，处理异步加载
  const img = new Image();
  img.src = 'assets/rhino.jpg';
  img.crossOrigin = 'anonymous'; // 若图片跨域需设置

  img.onload = () => {
    // 创建图案填充样式
    const pattern = new Pattern({
      image: img,
      repeat: 'no-repeat',
      // 设置图案尺寸匹配几何外接矩形
      width: width,
      height: height,
      // 对齐图案到几何的左上角
      offsetX: extent[0],
      offsetY: extent[1],
    });

    const fillStyle = new Fill({
      color: pattern,
    });

    // 创建矢量图层承载带图片填充的要素
    const vectorLayer = new VectorLayer({
      source: new VectorSource({
        features: [feature.clone()], // 克隆原要素避免影响原图层
      }),
      style: new Style({
        fill: fillStyle,
        // 可选：保留原要素的边框
        stroke: new Stroke({
          color: '#333',
          width: 1,
        }),
      }),
      opacity: 0.5,
    });

    this.map.addLayer(vectorLayer);
  };
});

关键说明： #

• 图案填充（Pattern）：通过ol/style/Pattern将图片作为填充内容，设置width和height匹配几何的外接矩形，确保图片刚好覆盖几何范围，再结合几何的裁剪特性，只显示几何内部的图片区域。
• 图片加载异步处理：必须等图片加载完成后再创建Pattern，否则会出现填充失效的问题。
• 克隆要素：使用feature.clone()避免修改原图层的要素样式，保证原要素不受影响。

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