Implement stylecache for vectorlayer
All checks were successful
FarmMaps.Develop/FarmMapsLib/pipeline/head This commit looks good

This commit is contained in:
Willem Dantuma 2020-09-16 13:38:06 +02:00
parent 7474c00498
commit 3008081ae8

View File

@ -48,9 +48,11 @@ export class ItemLayersComponent extends LayerGroupComponent implements OnChange
return "#" + this.componentToHex(r) + this.componentToHex(g) + this.componentToHex(b) + this.componentToHex(a); return "#" + this.componentToHex(r) + this.componentToHex(g) + this.componentToHex(b) + this.componentToHex(a);
} }
getColorFromGradient(layer: ILayer, feature): style.Style { getColorFromGradient(item:IItem,layer: ILayer, feature): style.Style {
var value = feature.get(layer.name); var value = feature.get(layer.name);
var gradient: IGradientstop[] = layer.renderer.colorMap.gradient; var key = item.code + "_" + value;
if(!this.styleCache[key]) {
var gradient: IGradientstop[] = layer.renderer.colorMap.gradient;
var histogram: IHistogram = layer.renderer.band.histogram; var histogram: IHistogram = layer.renderer.band.histogram;
var index = (value - histogram.min) / histogram.max; var index = (value - histogram.min) / histogram.max;
var min = gradient[0]; var min = gradient[0];
@ -67,7 +69,7 @@ export class ItemLayersComponent extends LayerGroupComponent implements OnChange
var green = Math.round(min.color.green + ((max.color.green - min.color.green) * i / size)); var green = Math.round(min.color.green + ((max.color.green - min.color.green) * i / size));
var blue = Math.round(min.color.blue + ((max.color.blue - min.color.blue) * i / size)); var blue = Math.round(min.color.blue + ((max.color.blue - min.color.blue) * i / size));
return new style.Style( this.styleCache[key] = new style.Style(
{ {
image: new style.Circle({ image: new style.Circle({
fill: new style.Fill({ fill: new style.Fill({
@ -83,6 +85,8 @@ export class ItemLayersComponent extends LayerGroupComponent implements OnChange
width: 1.25 width: 1.25
}), }),
}); });
}
return this.styleCache[key];
} }
createGeotiffLayer(item:IItem,itemLayer:IItemLayer):Layer { createGeotiffLayer(item:IItem,itemLayer:IItemLayer):Layer {
@ -128,7 +132,7 @@ export class ItemLayersComponent extends LayerGroupComponent implements OnChange
url: `${this._apiEndPoint}/api/v1/items/${item.code}/vectortiles/{z}/{x}/{y}.pbf?v=${Date.parse(item.updated)}` url: `${this._apiEndPoint}/api/v1/items/${item.code}/vectortiles/{z}/{x}/{y}.pbf?v=${Date.parse(item.updated)}`
}), }),
style: (feature) => { style: (feature) => {
return this.getColorFromGradient(l, feature); return this.getColorFromGradient(item,l, feature);
} }
}) })
} else if (l && l.rendering && l.rendering.renderoutputType == "Tiles") { } else if (l && l.rendering && l.rendering.renderoutputType == "Tiles") {
@ -161,7 +165,7 @@ export class ItemLayersComponent extends LayerGroupComponent implements OnChange
layer = new VectorLayer({ layer = new VectorLayer({
source: source, source: source,
style: (feature) => { style: (feature) => {
var key = feature.get("color"); var key =feature.get("code") + "_" + feature.get("color");
if (!this.styleCache[key]) { if (!this.styleCache[key]) {
var color = feature.get("color"); var color = feature.get("color");
this.styleCache[key] = new style.Style( this.styleCache[key] = new style.Style(