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

Question

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

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() 方法。

Answer 1

按照@Mike 的建议和，可以使用如下所示的函数解决问题，该函数将所需的模式应用于 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;  
}

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

Applying an image as fill pattern to a polygon does not change its style

openlayers

typescript

ionic-framework