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

Question

语境

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

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() 是一个 return 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;
}

问题

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

TypeError: "style.getImage is not a function"

我认为这是因为图像在应用于样式时尚未加载。我相信，如果我只是声明向量，然后根据过滤后的 classes 修改样式，问题就可以解决（还不知道如何解决），但我真的很想 return填充样式作为函数中的 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

样式函数必须 return 样式，而不是 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;
}

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

How to apply a pattern fill style to a multipolygon that returns multiple styles

openlayers

typescript

ionic-framework