Typescript 如何将填充样式应用于返回多个样式的多多边形

上下文

我有一个由多个多边形组成的向量，每个多边形都有一个唯一的类，我设置了一个与之相关的样式。我目前正在这样做：

let multiPolyVector=新矢量层({
来源：新矢量源({
格式：new GeoJSON（{dataProjection:'EPSG:31982'}），
url:'assets/geojson/randomVector.geojson'
}),
样式：（特征）=>{
让class=feature.get（“class”）；
交换机（类）{
案例“1类”：
返回此.styleArea（'rgba（240，240，240，1）；//
打破
案例“类别2”：
返回此.styleArea（'rgba（115、115、240、1）'）；
打破
“第3类”案件：
返回此.styleArea（'rgba（168，168，0，1）；//
打破
案例“第4类”：
返回此.stylePoint（'rgba（255，255，115，1）；//
打破
}
}
});

styleArea（）

是一个返回OpenLayers样式的函数：

styleArea（insideColor:string，exteriorColor:string=insideColor，exteriorWidth=2）{
让面积=新样式({
笔划：新笔划({
颜色：外观颜色，
宽度：外部宽度
}),
填充：新填充({
颜色：insideColor
})
});
返回区；
}

问题

现在我尝试创建一个返回OL样式的函数，但这次是作为模式图像。在我自己制作的帮助中，我能够将图案样式应用于向量，但现在我需要应用于多多边形向量。如果我像以前一样尝试，所有其他样式都会被重写。我尝试了不同的解决方案，其中一些产生了错误：

TypeError:“style.getImage不是函数”

我认为这是因为图像应用于样式时尚未加载。我相信，如果我只是声明向量，然后根据过滤的类修改样式，问题就可以解决了（现在还不知道如何解决），但我真的想从函数中返回填充部分作为OL样式，以便以后在其他向量上使用

• 爱奥尼亚版本：5.4.9
• OL版本：6.1.1

我的最新尝试：

stylePattern(pattern:string) {
    console.log("Function Fired");
    let patternSrc = "assets/images/patterns/" + pattern; // The pattern passed is the name of the PNG file
    let ctx = document.createElement('canvas').getContext('2d');
    let image = new Image();
    let createdPattern = ctx.createPattern(image, 'repeat');

    image.onload = () => {
        return new Style({
            fill: new Fill({
                color: createdPattern
            })
        });
    };
    image.src = patternSrc;             
}

---

这样我就不会收到任何错误，我可以看到在Dev Tools中加载的模式图像，但它没有应用到向量样式。

样式函数必须返回样式，而不是onload函数。由于异步加载，您将需要一个类似于此问题的样式缓存解决方案。您可能还希望将此功能传递给stylePattern函数，以便在设置模式时强制重新加载，因此该函数可能如下所示

let styleCache = {};

stylePattern(pattern:string, feature) {
    console.log("Function Fired");
    let style = styleCache[pattern];
    if (!style) {
      let ctx = document.createElement('canvas').getContext('2d');
      let image = new Image();
      style = new Style({
          fill: new Fill({
            color: 'transparent'
          })
        });
      styleCache[pattern] = style;
      image.onload = () => {
        let createdPattern = ctx.createPattern(image, 'repeat');
        style.getFill().setColor(createdPattern);
        feature.changed();  // force a refresh or just wait until next render?
      }
      let patternSrc = "assets/images/patterns/" + pattern; // The pattern passed is the name of the PNG file
      image.src = patternSrc;
    }
    return style;
}