FarmMaps
/
FarmMapsLib
8
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

Fix styles
FarmMaps.Develop/FarmMapsLib/pipeline/head This commit looks good Details

master
Willem Dantuma 2023-02-14 16:52:46 +01:00
parent aeded938bd
commit fa90eaf1af
1 changed files with 57 additions and 57 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

86
projects/common-map/src/fm-map/components/aol/item-vector-source/item-vector-source.component.ts
View File

@ -1,9 +1,9 @@
import { Component, Host, Input, Output, EventEmitter, OnInit, OnChanges, SimpleChanges, forwardRef, Inject, InjectionToken } from '@angular/core'; import { Component, Host, Input, Output, EventEmitter, OnInit, OnChanges, SimpleChanges, forwardRef, Inject, InjectionToken } from '@angular/core';
import { LayerVectorComponent, SourceVectorComponent, MapComponent } from 'ngx-openlayers'; import { LayerVectorComponent, SourceVectorComponent, MapComponent } from 'ngx-openlayers';
import { ItemService,ItemTypeService,IItem, IItemType } from '@farmmaps/common'; import { ItemService, ItemTypeService, IItem, IItemType } from '@farmmaps/common';
import { Feature } from 'ol'; import { Feature } from 'ol';
import { Point,Geometry } from 'ol/geom'; import { Point, Geometry } from 'ol/geom';
import { MapBrowserEvent } from 'ol'; import { MapBrowserEvent } from 'ol';
import { Types } from 'ol/MapBrowserEventType'; import { Types } from 'ol/MapBrowserEventType';
import * as style from 'ol/style'; import * as style from 'ol/style';
@ -11,18 +11,18 @@ import * as color from 'ol/color';
import * as loadingstrategy from 'ol/loadingstrategy'; import * as loadingstrategy from 'ol/loadingstrategy';
import * as condition from 'ol/events/condition'; import * as condition from 'ol/events/condition';
import * as extent from 'ol/extent'; import * as extent from 'ol/extent';
import {Vector,Cluster,Source} from 'ol/source'; import { Vector, Cluster, Source } from 'ol/source';
import {Layer} from 'ol/layer'; import { Layer } from 'ol/layer';
import {GeoJSON} from 'ol/format'; import { GeoJSON } from 'ol/format';
import {Select} from 'ol/interaction'; import { Select } from 'ol/interaction';
import {IStyles} from '../../../models/style.cache'; import { IStyles } from '../../../models/style.cache';
import {FeatureIconService} from '../../../services/feature-icon.service'; import { FeatureIconService } from '../../../services/feature-icon.service';
@Component({ @Component({
selector: 'fm-map-item-source-vector', selector: 'fm-map-item-source-vector',
template: `<ng-content></ng-content>`, template: `<ng-content></ng-content>`,
providers: [ providers: [
{ provide: SourceVectorComponent , useExisting: forwardRef(() => ItemVectorSourceComponent) } { provide: SourceVectorComponent, useExisting: forwardRef(() => ItemVectorSourceComponent) }
] ]
}) })
export class ItemVectorSourceComponent extends SourceVectorComponent implements OnInit, OnChanges { export class ItemVectorSourceComponent extends SourceVectorComponent implements OnInit, OnChanges {
@ -34,12 +34,12 @@ export class ItemVectorSourceComponent extends SourceVectorComponent implements
@Input() features: Array<Feature<Geometry>>; @Input() features: Array<Feature<Geometry>>;
@Input() selectedFeature: Feature<Geometry>; @Input() selectedFeature: Feature<Geometry>;
@Input() selectedItem: IItem; @Input() selectedItem: IItem;
@Input() styles:IStyles; @Input() styles: IStyles;
@Output() onFeatureSelected: EventEmitter<Feature<Geometry>> = new EventEmitter<Feature<Geometry>>(); @Output() onFeatureSelected: EventEmitter<Feature<Geometry>> = new EventEmitter<Feature<Geometry>>();
@Output() onFeatureHover: EventEmitter<Feature<Geometry>> = new EventEmitter<Feature<Geometry>>(); @Output() onFeatureHover: EventEmitter<Feature<Geometry>> = new EventEmitter<Feature<Geometry>>();
private stylesCache:IStyles = {}; private stylesCache: IStyles = {};
constructor(@Host() private layer: LayerVectorComponent, private itemService: ItemService, private map: MapComponent, private itemTypeService: ItemTypeService,private featureIconService$:FeatureIconService) { constructor(@Host() private layer: LayerVectorComponent, private itemService: ItemService, private map: MapComponent, private itemTypeService: ItemTypeService, private featureIconService$: FeatureIconService) {
super(layer); super(layer);
this._format = new GeoJSON(); this._format = new GeoJSON();
} }
@ -54,14 +54,14 @@ export class ItemVectorSourceComponent extends SourceVectorComponent implements
geometry = new Point(extent.getCenter(e)); geometry = new Point(extent.getCenter(e));
} }
return geometry; return geometry;
} }
getSelectedStyle(feature:Feature<Geometry>):style.Style { getSelectedStyle(feature: Feature<Geometry>): style.Style {
let key = feature.get('itemType')+"_selected"; let key = feature.get('itemType') + "_selected";
let evaluatedStyle: style.Style =undefined; let evaluatedStyle: style.Style = undefined;
var styleEntry = this.stylesCache[key]; var styleEntry = this.stylesCache[key];
if(styleEntry) { if (styleEntry) {
if(typeof styleEntry === 'function') { if (typeof styleEntry === 'function') {
evaluatedStyle = styleEntry(feature); evaluatedStyle = styleEntry(feature);
} else { } else {
evaluatedStyle = styleEntry; evaluatedStyle = styleEntry;
@ -69,8 +69,8 @@ export class ItemVectorSourceComponent extends SourceVectorComponent implements
} else { } else {
evaluatedStyle = this.stylesCache["selected"] as style.Style; evaluatedStyle = this.stylesCache["selected"] as style.Style;
} }
if(evaluatedStyle ) { if (evaluatedStyle) {
evaluatedStyle .setGeometry((feature:Feature<Geometry>) => this.geometry(feature)); evaluatedStyle.setGeometry((feature: Feature<Geometry>) => this.geometry(feature));
} }
return evaluatedStyle as style.Style return evaluatedStyle as style.Style
} }
@ -79,12 +79,12 @@ export class ItemVectorSourceComponent extends SourceVectorComponent implements
this.strategy = loadingstrategy.bbox; this.strategy = loadingstrategy.bbox;
this.format = new GeoJSON(); this.format = new GeoJSON();
this._select = new Select({ this._select = new Select({
style:null, style: null,
hitTolerance: 10, hitTolerance: 10,
layers: [this.layer.instance as Layer<Source>] layers: [this.layer.instance as Layer<Source>]
}); });
this._hoverSelect = new Select({ this._hoverSelect = new Select({
style: (feature:Feature<Geometry>) => { style: (feature: Feature<Geometry>) => {
return this.getSelectedStyle(feature); return this.getSelectedStyle(feature);
}, },
hitTolerance: 10, hitTolerance: 10,
@ -114,39 +114,39 @@ export class ItemVectorSourceComponent extends SourceVectorComponent implements
this.host.instance.setStyle((feature) => { this.host.instance.setStyle((feature) => {
var itemType = feature.get('itemType'); var itemType = feature.get('itemType');
var key = itemType + (this.selectedItem?"_I":""); var key = itemType + (this.selectedItem ? "_I" : "");
if (!this.stylesCache[key]) { if (!this.stylesCache[key]) {
if (this.itemTypeService.itemTypes[itemType]) { if (this.itemTypeService.itemTypes[itemType]) {
let itemTypeEntry = this.itemTypeService.itemTypes[itemType]; let itemTypeEntry = this.itemTypeService.itemTypes[itemType];
let fillColor = color.asArray(itemTypeEntry.iconColor); let fillColor = color.asArray(itemTypeEntry.iconColor);
fillColor[3] = 0; fillColor[3] = 0;
this.stylesCache[key] = new style.Style({ this.stylesCache[key] = new style.Style({
image: itemTypeEntry.icon ? new style.Icon({ image: itemTypeEntry.icon ? new style.Icon({
anchor: [0.5, 1], anchor: [0.5, 1],
scale: 0.05, scale: 0.05,
src: this.featureIconService$.getIconImageDataUrl(itemTypeEntry.icon) src: this.featureIconService$.getIconImageDataUrl(itemTypeEntry.icon)
}):null, }) : null,
stroke: new style.Stroke({ stroke: new style.Stroke({
color: 'red', color: 'red',
width: 1 width: 1
}), }),
fill: new style.Fill({ fill: new style.Fill({
color: fillColor color: fillColor
}), }),
geometry:(feature:Feature<Geometry>) => this.geometry(feature) geometry: (feature: Feature<Geometry>) => this.geometry(feature)
}); });
} else { } else {
key = 'file'; key = 'file';
} }
} }
let evaluatedStyle =null; let evaluatedStyle = null;
var styleEntry = this.stylesCache[key]; var styleEntry = this.stylesCache[key];
if(typeof styleEntry === 'function') { if (typeof styleEntry === 'function') {
evaluatedStyle = styleEntry(feature); evaluatedStyle = styleEntry(feature);
} else { } else {
evaluatedStyle = styleEntry; evaluatedStyle = styleEntry;
} }
if(evaluatedStyle && evaluatedStyle.geometry_ == null) { if (evaluatedStyle && evaluatedStyle.geometry_ == null) {
evaluatedStyle.setGeometry((feature) => this.geometry(feature)); evaluatedStyle.setGeometry((feature) => this.geometry(feature));
} }
return evaluatedStyle; return evaluatedStyle;
@ -179,11 +179,11 @@ export class ItemVectorSourceComponent extends SourceVectorComponent implements
this.map.instance.addInteraction(this._hoverSelect); this.map.instance.addInteraction(this._hoverSelect);
} }
} }
if (changes["styles"] && this.instance) { if (changes["styles"]) {
let styles = changes["styles"].currentValue; let styles = changes["styles"].currentValue;
for (const key in styles) { for (const key in styles) {
if (styles.hasOwnProperty(key)) { if (styles.hasOwnProperty(key)) {
this.stylesCache[key]=styles[key]; this.stylesCache[key] = styles[key];
} }
} }
} }