将图像作为填充图案应用于多边形不会改变其样式 [英] Applying an image as fill pattern to a polygon does not change its style

问题描述

我正在尝试将图像作为填充图案应用于我的多边形，但是多边形样式不会改变，它会保留默认样式(如果最初没有声明).我试图通过直接在VectorLayer的style选项中进行加载来更改此设置，然后尝试作为单独的样式函数进行加载.我尝试应用一种预定义的样式，但是此样式也没有更改.在所有情况下，我都可以在开发人员工具"的网络"标签中看到该图像甚至没有加载.我不知道自己在做什么错，因为我正在关注一些成功的案例( 1 ，2 和 3 )和我没有收到任何错误.

I'm trying to apply an image as a fill pattern to my polygon, but the polygon style does not change, it keeps the default one (if none has declared initially). I tried to change this by loading directly in the VectorLayer's style option and then tried to load as a separate style function. I tried to apply a predefined style, but then this one does not change too. In all cases I can see that the image does not even load in Developer Tool's Network tab. I don't know what I'm doing wrong since I'm following some successful cases (1, 2 and 3) and I'm not receiving any errors.

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

在此小提琴中，Jonatas Walker能够加载特征的图案图像.我相信VectorLayer可以使用相同的方法，因为两者都有setStyle()方法.

In this fiddle, Jonatas Walker was able to load the pattern image for a feature. I believe that the same method can be used in for a VectorLayer since both have setStyle() method.

推荐答案

遵循@Mike的建议和

Following @Mike's suggestions and the continuation of this problem, the problem can be solved using a function like displayed bellow, which apply the desired pattern to a 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;  
}

这篇关于将图像作为填充图案应用于多边形不会改变其样式的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！