如何将图案填充样式应用于返回多种样式的多面体

Question

上下文

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

let multiPolyVector = new VectorLayer({
    source: new VectorSource ({
        format: new GeoJSON({dataProjection: 'EPSG:31982'}),
        url: 'assets/geojson/randomVector.geojson'
    }),
    style: (feature) => {
        let class = feature.get("CLASS");
        switch(class) {
            case "CLASS1":
                return this.styleArea('rgba(240, 240, 240, 1)'); // 
            break;
            case "CLASS2":
                return this.styleArea('rgba(115, 115, 240, 1)'); 
            break;
            case "CLASS3":
                return this.styleArea('rgba(168, 168, 0, 1)'); // 
            break;
            case "CLASS4":
                return this.stylePoint('rgba(255, 255, 115, 1)'); // 
            break;
        }
    }
});

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

styleArea(insideColor:string, exteriorColor:string=insideColor, exteriorWidth=2){
    let area = new Style({
        stroke: new Stroke({
            color: exteriorColor,
            width: exteriorWidth
        }),
            fill: new Fill({
            color: insideColor
        })
    });
    return area;
}

问题

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

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;             
}

这样我不会收到任何错误，我可以看到在开发工具中加载的图案图像，但它没有应用于矢量样式。

Answer 1

样式函数必须返回样式，而不是 onload 函数。由于异步加载，您将需要类似于此问题Scaling the icon-image size to an absolute value 的样式缓存解决方案您可能还希望将该功能传递给您的 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;
}