Refactor getcolor
All checks were successful
FarmMaps.Develop/FarmMapsLib/pipeline/head This commit looks good
All checks were successful
FarmMaps.Develop/FarmMapsLib/pipeline/head This commit looks good
This commit is contained in:
parent
f8a0e1e167
commit
5b710ce200
18
package-lock.json
generated
18
package-lock.json
generated
@ -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"
|
||||||
}
|
}
|
||||||
|
@ -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",
|
||||||
|
@ -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") {
|
||||||
|
Loading…
Reference in New Issue
Block a user