Refactor getcolor
All checks were successful
FarmMaps.Develop/FarmMapsLib/pipeline/head This commit looks good

This commit is contained in:
Willem Dantuma 2021-03-15 16:26:05 +01:00
parent f8a0e1e167
commit 5b710ce200
3 changed files with 58 additions and 35 deletions

18
package-lock.json generated
View File

@ -1865,25 +1865,25 @@
} }
}, },
"@farmmaps/common": { "@farmmaps/common": {
"version": "0.0.1-prerelease.563", "version": "0.0.1-prerelease.569",
"resolved": "https://repository.akkerweb.nl/repository/npm-group/@farmmaps/common/-/common-0.0.1-prerelease.563.tgz", "resolved": "https://repository.akkerweb.nl/repository/npm-group/@farmmaps/common/-/common-0.0.1-prerelease.569.tgz",
"integrity": "sha512-XsPocXZm3/glNaaRF3ojzzbwILmM6HVW6lvLKMDUH/1deUB4EAlTbcj0O1hpkArcDfBs6lRvMXkWpbyT58fxmQ==", "integrity": "sha512-98PielIjWbn6J2AAIW7WgFcDGY1wI77MhhZDVy44TS5y0zo7tg0cgwcFARrhpFztGzFKSyhmt7+wySBNBovDGQ==",
"requires": { "requires": {
"tslib": "^2.0.0" "tslib": "^2.0.0"
} }
}, },
"@farmmaps/common-map": { "@farmmaps/common-map": {
"version": "0.0.1-prerelease.563", "version": "0.0.1-prerelease.569",
"resolved": "https://repository.akkerweb.nl/repository/npm-group/@farmmaps/common-map/-/common-map-0.0.1-prerelease.563.tgz", "resolved": "https://repository.akkerweb.nl/repository/npm-group/@farmmaps/common-map/-/common-map-0.0.1-prerelease.569.tgz",
"integrity": "sha512-uxjRwwh/8Q/NHF86grwNUC8b0cyHrtAHeVuOYuAtLSjy/DA9k0+C3/S6LgOnvmP0K4Sempc81BLeDvN0eG0cGA==", "integrity": "sha512-3r0I0BB1XWqXVZ5nw5LxeytnMu0IJ/ltKrmJpMs+T86hqCQI+SWXAcvsZ+jnTS2waSzaIPMW+FVewIkX9hkzEA==",
"requires": { "requires": {
"tslib": "^2.0.0" "tslib": "^2.0.0"
} }
}, },
"@farmmaps/common-map3d": { "@farmmaps/common-map3d": {
"version": "0.0.1-prerelease.563", "version": "0.0.1-prerelease.569",
"resolved": "https://repository.akkerweb.nl/repository/npm-group/@farmmaps/common-map3d/-/common-map3d-0.0.1-prerelease.563.tgz", "resolved": "https://repository.akkerweb.nl/repository/npm-group/@farmmaps/common-map3d/-/common-map3d-0.0.1-prerelease.569.tgz",
"integrity": "sha512-njlJgIjhpZll8Q1B/VSe7lwrM47Zc4V40jj8Eb2MVWwW7DrRVhf1qrqTbrNHbOzdi+0oy79/TUKQlYvmeVEkPQ==", "integrity": "sha512-Vn3DQBEuoPVVueqX97jrAJMUfrTPcjUOef8fhaqAh9dH5FIRSVWEQRYwVliGfuemiFtbTf/p/hgjB5J0nqaYLg==",
"requires": { "requires": {
"tslib": "^2.0.0" "tslib": "^2.0.0"
} }

View File

@ -19,9 +19,9 @@
"@angular/platform-browser": "~10.2.4", "@angular/platform-browser": "~10.2.4",
"@angular/platform-browser-dynamic": "~10.2.4", "@angular/platform-browser-dynamic": "~10.2.4",
"@angular/router": "~10.2.4", "@angular/router": "~10.2.4",
"@farmmaps/common": ">=0.0.1-prerelease.563 <0.0.1", "@farmmaps/common": ">=0.0.1-prerelease.569 <0.0.1",
"@farmmaps/common-map": ">=0.0.1-prerelease.563 <0.0.1", "@farmmaps/common-map": ">=0.0.1-prerelease.569 <0.0.1",
"@farmmaps/common-map3d": ">=0.0.1-prerelease.563 <0.0.1", "@farmmaps/common-map3d": ">=0.0.1-prerelease.569 <0.0.1",
"@microsoft/signalr": "^3.1.3", "@microsoft/signalr": "^3.1.3",
"@ng-bootstrap/ng-bootstrap": "^7.0", "@ng-bootstrap/ng-bootstrap": "^7.0",
"@ngrx/effects": "^10.0", "@ngrx/effects": "^10.0",

View File

@ -3,7 +3,7 @@ import { LayerGroupComponent, MapComponent } from 'ngx-openlayers';
import { ItemService,IItem,AppConfig } from '@farmmaps/common'; import { ItemService,IItem,AppConfig } from '@farmmaps/common';
import { IItemLayer, ITemporalItemLayer} from '../../../models/item.layer'; import { IItemLayer, ITemporalItemLayer} from '../../../models/item.layer';
import { ILayerData} from '../../../models/layer.data'; import { ILayerData} from '../../../models/layer.data';
import { IRenderoutputTiles,IRenderoutputImage,IGradientstop,ILayer,IHistogram} from '../../../models/color.map'; import { IRenderoutputTiles,IRenderoutputImage,IGradientstop,ILayer,IHistogram,IColor} from '../../../models/color.map';
import {Extent} from 'ol/extent'; import {Extent} from 'ol/extent';
import Projection from 'ol/proj/Projection'; import Projection from 'ol/proj/Projection';
import * as proj from 'ol/proj'; import * as proj from 'ol/proj';
@ -52,11 +52,8 @@ 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(item:IItem,layer: ILayer, feature): style.Style { getColorFromGradient(layer: ILayer, value: number): IColor {
var value = layer.indexKey ? feature.get(layer.indexKey): 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];
@ -68,27 +65,53 @@ export class ItemLayersComponent extends LayerGroupComponent implements OnChange
} }
var i = index - min.relativestop; var i = index - min.relativestop;
var size = max.relativestop - min.relativestop; var size = max.relativestop - min.relativestop;
var alpha = Math.round( min.color.alpha + ((max.color.alpha - min.color.alpha) * i / size)); var alpha = Math.round(min.color.alpha + ((max.color.alpha - min.color.alpha) * i / size));
var red = Math.round(min.color.red + ((max.color.red - min.color.red) * i / size)); var red = Math.round(min.color.red + ((max.color.red - min.color.red) * i / size));
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));
this.styleCache[key] = new style.Style( return { alpha: alpha, red: red, green: green, blue: blue };
{ }
image: new style.Circle({
fill: new style.Fill({ getColorForValue(layer: ILayer, value: number): IColor {
color: this.rgbaToHex(red,green,blue,alpha) var color: IColor = { alpha:0,red:0,green:0,blue:0};
layer.renderer.colorMap.entries.forEach((entry) => {
if(entry.value==value) {
color =entry.color;
return;
}
});
return color;
}
getColor(item: IItem, layer: ILayer, feature): style.Style {
var value = layer.indexKey ? feature.get(layer.indexKey) : feature.get(layer.name);
var key = item.code + "_" + value;
if (!this.styleCache[key]) {
var color: IColor;
if(layer.renderer.colorMap.colormapType == "manual") {
color = this.getColorForValue(layer, value);
} else {
color = this.getColorFromGradient(layer, value);
}
this.styleCache[key] = new style.Style(
{
image: new style.Circle({
fill: new style.Fill({
color: this.rgbaToHex(color.red, color.green, color.blue, color.alpha)
}),
radius: 3
}), }),
radius: 3 fill: new style.Fill({
}), color: this.rgbaToHex(color.red, color.green, color.blue, color.alpha)
fill: new style.Fill({ }),
color: this.rgbaToHex(red, green, blue, alpha) stroke: new style.Stroke({
}), color: this.rgbaToHex(color.red, color.green, color.blue, 255),
stroke: new style.Stroke({ width: 1.25
color: this.rgbaToHex(red, green, blue, 255), }),
width: 1.25 });
}),
});
} }
return this.styleCache[key]; return this.styleCache[key];
} }
@ -133,7 +156,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(item,l, feature); return this.getColor(item,l, feature);
} }
}) })
} else if (l && l.rendering && l.rendering.renderoutputType == "Tiles") { } else if (l && l.rendering && l.rendering.renderoutputType == "Tiles") {