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,10 +52,7 @@ 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 key = item.code + "_" + value;
if(!this.styleCache[key]) {
var gradient: IGradientstop[] = layer.renderer.colorMap.gradient; 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;
@ -68,24 +65,50 @@ 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));
return { alpha: alpha, red: red, green: green, blue: blue };
}
getColorForValue(layer: ILayer, value: number): IColor {
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( this.styleCache[key] = new style.Style(
{ {
image: new style.Circle({ image: new style.Circle({
fill: new style.Fill({ fill: new style.Fill({
color: this.rgbaToHex(red,green,blue,alpha) color: this.rgbaToHex(color.red, color.green, color.blue, color.alpha)
}), }),
radius: 3 radius: 3
}), }),
fill: new style.Fill({ fill: new style.Fill({
color: this.rgbaToHex(red, green, blue, alpha) color: this.rgbaToHex(color.red, color.green, color.blue, color.alpha)
}), }),
stroke: new style.Stroke({ stroke: new style.Stroke({
color: this.rgbaToHex(red, green, blue, 255), color: this.rgbaToHex(color.red, color.green, color.blue, 255),
width: 1.25 width: 1.25
}), }),
}); });
@ -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") {