Improved graphicStroke and graphicFill performance

[nssang00]

Feature Request

Is your feature request related to a problem? Please describe.
A clear and concise description of what the problem is. Ex. I'm always frustrated when [...]

-There is a performance problem when using graphicStroke and graphicFill. It's so slow that it's unusable.
Also, graphicStroke is missing in getOlPolygonSymbolizerFromFillSymbolizer.

Describe the solution you'd like
A clear and concise description of what you want to happen.

Fill, Stroke, and Style objects are created unnecessarily in getOlPolygonSymbolizerFromFillSymbolizer, getOlIconSymbolizerFromIconSymbolizer, and getOlPolygonSymbolizerFromFillSymbolizer.
Fill and Stroke do not have a significant performance penalty, but if you put them as member variables and change them sufficiently with SetColor, SetStroke, or SetFill, you will avoid creating unnecessary objects.
However, in cases such as graphicStroke and graphicFill, rendering is very stuttering.
This part used patternCache.

Describe alternatives you've considered
A clear and concise description of any alternative solutions or features you've considered.

Additional context
Add any other context or screenshots about the feature request here.

    OlStyleParser.prototype.getOlPolygonSymbolizerFromFillSymbolizer = function (symbolizer, feat) {
        for (var _i = 0, _a = Object.keys(symbolizer); _i < _a.length; _i++) {
            var key = _a[_i];
            if ((0, geostyler_style_1.isGeoStylerFunction)(symbolizer[key])) {
                symbolizer[key] = OlStyleUtil_1.default.evaluateFunction(symbolizer[key], feat);
            }
        }
        var color = symbolizer.color;
        var opacity = symbolizer.fillOpacity;
        var fColor = color && Number.isFinite(opacity)
            ? OlStyleUtil_1.default.getRgbaColor(color, opacity)
            : color;

        this.olStyleFill.setColor(fColor);         
        /*
        var fill = color
            ? new this.OlStyleFillConstructor({ color: fColor })
            : undefined;
        */

        var outlineColor = symbolizer.outlineColor;
        var outlineOpacity = symbolizer.outlineOpacity;
        var oColor = (outlineColor && Number.isFinite(outlineOpacity))
            ? OlStyleUtil_1.default.getRgbaColor(outlineColor, outlineOpacity)
            : outlineColor;

        this.olStyleStroke.setColor(oColor);       

        if (symbolizer.graphicFill) {
            let fillPattern = this.olFillPatternCache[symbolizer.graphicFill.image];
            
            if(!fillPattern) {
                fillPattern = new this.OlStyleFillPatternConstructor({
                    size: symbolizer.graphicFill.size,
                    opacity: symbolizer.graphicFill.opacity,                       
                    image: new this.OlStyleIconConstructor({
                        src : (0, geostyler_style_1.isSprite)(symbolizer.graphicFill.image) ? symbolizer.graphicFill.image.source : symbolizer.graphicFill.image,
                        opacity: symbolizer.graphicFill.opacity,     
                        width: symbolizer.graphicFill.size,
                        rotation: (typeof (symbolizer.rotate) === 'number' ? symbolizer.rotate * Math.PI / 180 : undefined),
                        displacement: symbolizer.graphicFill.offset,
                        size: (0, geostyler_style_1.isSprite)(symbolizer.graphicFill.image) ? symbolizer.graphicFill.image.size : undefined,
                        offset: (0, geostyler_style_1.isSprite)(symbolizer.graphicFill.image) ? symbolizer.graphicFill.image.position : undefined,                        
                    })
                });
                this.olFillPatternCache[symbolizer.graphicFill.image] = fillPattern;                
            }
            this.olPolygonStyle.setFill(fillPattern);
        }
        if (symbolizer.graphicStroke) { 
            let strokePattern = this.olStrokePatternCache[symbolizer.graphicStroke.image];
            
            if(!strokePattern) {
                strokePattern = new this.OlStyleStrokePatternConstructor({
                    image: new this.OlStyleIconConstructor({
                        src : (0, geostyler_style_1.isSprite)(symbolizer.graphicStroke.image) ? symbolizer.graphicStroke.image.source : symbolizer.graphicStroke.image,
                        opacity: symbolizer.graphicStroke.opacity,     
                        width: symbolizer.graphicStroke.size,
                        rotation: (typeof (symbolizer.rotate) === 'number' ? symbolizer.rotate * Math.PI / 180 : undefined),
                        displacement: symbolizer.graphicStroke.offset,
                        size: (0, geostyler_style_1.isSprite)(symbolizer.graphicStroke.image) ? symbolizer.graphicStroke.image.size : undefined,
                        offset: (0, geostyler_style_1.isSprite)(symbolizer.graphicStroke.image) ? symbolizer.graphicStroke.image.position : undefined,                     
                    })
                });
                this.olStrokePatternCache[symbolizer.graphicStroke.image] = strokePattern;                
            }
            this.olPolygonStyle.setStroke(strokePattern);
        }
        return this.olPolygonStyle;
    };

[hwbllmnn]

Hm, as far as I can tell you want to use a parser-global Fill instance and reuse that one all the time, right? Unfortunately, I'm guessing that setting the fill color of the same Fill object all the time will lead to problems when you have multiple polygon symbolizers with fills as the last one will always overwrite the previously set value.

[hwbllmnn]

Perhaps you can share the styles/setup with us so we can check the performance problems you're describing?