将图像作为填充图案应用到多边形不会改变其样式答案

【问题标题】：Applying an image as fill pattern to a polygon does not change its style将图像作为填充图案应用到多边形不会改变其样式
【发布时间】：2020-04-03 21:50:34
【问题描述】：

我正在尝试将图像作为填充图案应用到我的多边形，但多边形样式没有改变，它保持默认样式（如果最初没有声明）。我试图通过直接在 VectorLayer 的样式选项中加载来改变这一点，然后尝试作为单独的样式函数加载。我试图应用一种预定义的样式，但是这个也没有改变。在所有情况下，我都可以看到图像甚至没有加载到开发人员工具的网络选项卡中。我不知道自己做错了什么，因为我正在关注一些成功的案例（1、2 和 3）并且我没有收到任何错误。

OL 版本： 6.1.1
使用离子框架

我最近的尝试：（已编辑）

let mainVectorLayer = new VectorLayer({
    source: new VectorSource ({
        format: new GeoJSON({dataProjection: 'EPSG:31982'}),
        url: 'assets/geojson/randomArea.geojson' 
    }),
    name: 'mainVector'
});
let cnv = document.createElement('canvas');
let ctx = cnv.getContext('2d');
let img = new Image();
img.onload = () => {
    let pattern = ctx.createPattern(img, 'repeat');
    mainVectorLayer.setStyle(
        new Style({
            fill: new Fill({
                color: pattern
            })
        })
    );
};
img.src = 'assets/images/pattern1.png';

作为样式函数：

let mainVectorLayer = new VectorLayer({
    source: new VectorSource ({
        format: new GeoJSON({dataProjection: 'EPSG:31982'}),
        url: 'assets/geojson/randomArea.geojson' 
    }),
    name: 'mainVector'
    style:() => {
        let image = new Image();
        image.src = 'assets/images/pattern1.png';               
        let ctx = document.createElement('canvas').getContext("2d");
        image.onload = () => {
            let pattern = ctx.createPattern(image,"repeat");
            return new Style({
                fill: new Fill({
                    color: pattern
                })
            });
        }
    }
});

在this fiddle 中，Jonatas Walker 能够加载特征的图案图像。我相信相同的方法可以用于 VectorLayer，因为两者都有 setStyle() 方法。

【问题讨论】：

第一种方法应该可以，但是您应该在设置 src 之前指定 onload 函数，因为设置 src 将导致 onload 事件触发。jsfiddle.net/0nduht34您的第二种方法将不起作用，因为同步样式功能将完成在异步加载之前（并且样式函数必须返回样式，而不是 onload 函数）..
非常感谢，信息量很大，我没有意识到设置src 会触发onload() 事件。换个位置解决问题！我也使用了错误的图像路径，这让我失去了一些头发，但现在一切都好。如果你愿意，你可以写一个答案，我很乐意接受。
我也对如何使第二种方法起作用非常感兴趣，因此我可以应用一个更复杂的函数，该函数涉及为每个多边形返回多个样式的多个多边形。我正在尝试不同的方法来实现这一点，现在使用 Promises，但每次我收到“style.getImage 不是函数”错误时。如果您认为需要更多信息，我可以提出一个新问题。

标签： typescript ionic-framework openlayers

【解决方案1】：

按照@Mike 的建议和continuation of this problem，可以使用如下所示的函数来解决问题，它将所需的模式应用于VectorLayer。

stylePatternSimplePoly(pattern:string, vectorLayer) {
    let ctx = document.createElement('canvas').getContext('2d');
    let vectorImage = new Image();  
    vectorImage.onload = () => {
        console.log("Function triggered!");
        let createdPattern = ctx.createPattern(vectorImage, 'repeat');
        vectorLayer.setStyle(
            new Style({
                fill: new Fill({
                    color: createdPattern
                })
            })
        );
    };      
    vectorImage.src = 'assets/images/patterns/' + pattern;  
}

【讨论】：