From 5b710ce2008649f5a402ce087026e499baded087 Mon Sep 17 00:00:00 2001 From: Willem Dantuma Date: Mon, 15 Mar 2021 16:26:05 +0100 Subject: [PATCH] Refactor getcolor --- package-lock.json | 18 ++--- package.json | 6 +- .../aol/item-layers/item-layers.component.ts | 69 ++++++++++++------- 3 files changed, 58 insertions(+), 35 deletions(-) diff --git a/package-lock.json b/package-lock.json index d4b3f5f..3663e34 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1865,25 +1865,25 @@ } }, "@farmmaps/common": { - "version": "0.0.1-prerelease.563", - "resolved": "https://repository.akkerweb.nl/repository/npm-group/@farmmaps/common/-/common-0.0.1-prerelease.563.tgz", - "integrity": "sha512-XsPocXZm3/glNaaRF3ojzzbwILmM6HVW6lvLKMDUH/1deUB4EAlTbcj0O1hpkArcDfBs6lRvMXkWpbyT58fxmQ==", + "version": "0.0.1-prerelease.569", + "resolved": "https://repository.akkerweb.nl/repository/npm-group/@farmmaps/common/-/common-0.0.1-prerelease.569.tgz", + "integrity": "sha512-98PielIjWbn6J2AAIW7WgFcDGY1wI77MhhZDVy44TS5y0zo7tg0cgwcFARrhpFztGzFKSyhmt7+wySBNBovDGQ==", "requires": { "tslib": "^2.0.0" } }, "@farmmaps/common-map": { - "version": "0.0.1-prerelease.563", - "resolved": "https://repository.akkerweb.nl/repository/npm-group/@farmmaps/common-map/-/common-map-0.0.1-prerelease.563.tgz", - "integrity": "sha512-uxjRwwh/8Q/NHF86grwNUC8b0cyHrtAHeVuOYuAtLSjy/DA9k0+C3/S6LgOnvmP0K4Sempc81BLeDvN0eG0cGA==", + "version": "0.0.1-prerelease.569", + "resolved": "https://repository.akkerweb.nl/repository/npm-group/@farmmaps/common-map/-/common-map-0.0.1-prerelease.569.tgz", + "integrity": "sha512-3r0I0BB1XWqXVZ5nw5LxeytnMu0IJ/ltKrmJpMs+T86hqCQI+SWXAcvsZ+jnTS2waSzaIPMW+FVewIkX9hkzEA==", "requires": { "tslib": "^2.0.0" } }, "@farmmaps/common-map3d": { - "version": "0.0.1-prerelease.563", - "resolved": "https://repository.akkerweb.nl/repository/npm-group/@farmmaps/common-map3d/-/common-map3d-0.0.1-prerelease.563.tgz", - "integrity": "sha512-njlJgIjhpZll8Q1B/VSe7lwrM47Zc4V40jj8Eb2MVWwW7DrRVhf1qrqTbrNHbOzdi+0oy79/TUKQlYvmeVEkPQ==", + "version": "0.0.1-prerelease.569", + "resolved": "https://repository.akkerweb.nl/repository/npm-group/@farmmaps/common-map3d/-/common-map3d-0.0.1-prerelease.569.tgz", + "integrity": "sha512-Vn3DQBEuoPVVueqX97jrAJMUfrTPcjUOef8fhaqAh9dH5FIRSVWEQRYwVliGfuemiFtbTf/p/hgjB5J0nqaYLg==", "requires": { "tslib": "^2.0.0" } diff --git a/package.json b/package.json index 3322d1b..4b41e75 100644 --- a/package.json +++ b/package.json @@ -19,9 +19,9 @@ "@angular/platform-browser": "~10.2.4", "@angular/platform-browser-dynamic": "~10.2.4", "@angular/router": "~10.2.4", - "@farmmaps/common": ">=0.0.1-prerelease.563 <0.0.1", - "@farmmaps/common-map": ">=0.0.1-prerelease.563 <0.0.1", - "@farmmaps/common-map3d": ">=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.569 <0.0.1", + "@farmmaps/common-map3d": ">=0.0.1-prerelease.569 <0.0.1", "@microsoft/signalr": "^3.1.3", "@ng-bootstrap/ng-bootstrap": "^7.0", "@ngrx/effects": "^10.0", diff --git a/projects/common-map/src/fm-map/components/aol/item-layers/item-layers.component.ts b/projects/common-map/src/fm-map/components/aol/item-layers/item-layers.component.ts index 65f5086..3d3e654 100644 --- a/projects/common-map/src/fm-map/components/aol/item-layers/item-layers.component.ts +++ b/projects/common-map/src/fm-map/components/aol/item-layers/item-layers.component.ts @@ -3,7 +3,7 @@ import { LayerGroupComponent, MapComponent } from 'ngx-openlayers'; import { ItemService,IItem,AppConfig } from '@farmmaps/common'; import { IItemLayer, ITemporalItemLayer} from '../../../models/item.layer'; 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 Projection from 'ol/proj/Projection'; 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); } - getColorFromGradient(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 gradient: IGradientstop[] = layer.renderer.colorMap.gradient; + getColorFromGradient(layer: ILayer, value: number): IColor { + var gradient: IGradientstop[] = layer.renderer.colorMap.gradient; var histogram: IHistogram = layer.renderer.band.histogram; var index = (value - histogram.min) / histogram.max; var min = gradient[0]; @@ -68,27 +65,53 @@ export class ItemLayersComponent extends LayerGroupComponent implements OnChange } var i = index - 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 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)); - this.styleCache[key] = new style.Style( - { - image: new style.Circle({ - fill: new style.Fill({ - color: this.rgbaToHex(red,green,blue,alpha) + 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( + { + 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(red, green, blue, alpha) - }), - stroke: new style.Stroke({ - color: this.rgbaToHex(red, green, blue, 255), - width: 1.25 - }), - }); + fill: new style.Fill({ + color: this.rgbaToHex(color.red, color.green, color.blue, color.alpha) + }), + stroke: new style.Stroke({ + color: this.rgbaToHex(color.red, color.green, color.blue, 255), + width: 1.25 + }), + }); } 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)}` }), style: (feature) => { - return this.getColorFromGradient(item,l, feature); + return this.getColor(item,l, feature); } }) } else if (l && l.rendering && l.rendering.renderoutputType == "Tiles") {