From fa90eaf1af75b9fcdba9bf51aa3294403448c2f9 Mon Sep 17 00:00:00 2001 From: Willem Dantuma Date: Tue, 14 Feb 2023 16:52:46 +0100 Subject: [PATCH] Fix styles --- .../item-vector-source.component.ts | 114 +++++++++--------- 1 file changed, 57 insertions(+), 57 deletions(-) diff --git a/projects/common-map/src/fm-map/components/aol/item-vector-source/item-vector-source.component.ts b/projects/common-map/src/fm-map/components/aol/item-vector-source/item-vector-source.component.ts index 2d805e8..f02763c 100644 --- a/projects/common-map/src/fm-map/components/aol/item-vector-source/item-vector-source.component.ts +++ b/projects/common-map/src/fm-map/components/aol/item-vector-source/item-vector-source.component.ts @@ -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 { ItemService,ItemTypeService,IItem, IItemType } from '@farmmaps/common'; +import { ItemService, ItemTypeService, IItem, IItemType } from '@farmmaps/common'; import { Feature } from 'ol'; -import { Point,Geometry } from 'ol/geom'; +import { Point, Geometry } from 'ol/geom'; import { MapBrowserEvent } from 'ol'; import { Types } from 'ol/MapBrowserEventType'; import * as style from 'ol/style'; @@ -11,18 +11,18 @@ import * as color from 'ol/color'; import * as loadingstrategy from 'ol/loadingstrategy'; import * as condition from 'ol/events/condition'; import * as extent from 'ol/extent'; -import {Vector,Cluster,Source} from 'ol/source'; -import {Layer} from 'ol/layer'; -import {GeoJSON} from 'ol/format'; -import {Select} from 'ol/interaction'; -import {IStyles} from '../../../models/style.cache'; -import {FeatureIconService} from '../../../services/feature-icon.service'; - +import { Vector, Cluster, Source } from 'ol/source'; +import { Layer } from 'ol/layer'; +import { GeoJSON } from 'ol/format'; +import { Select } from 'ol/interaction'; +import { IStyles } from '../../../models/style.cache'; +import { FeatureIconService } from '../../../services/feature-icon.service'; + @Component({ selector: 'fm-map-item-source-vector', template: ``, providers: [ - { provide: SourceVectorComponent , useExisting: forwardRef(() => ItemVectorSourceComponent) } + { provide: SourceVectorComponent, useExisting: forwardRef(() => ItemVectorSourceComponent) } ] }) export class ItemVectorSourceComponent extends SourceVectorComponent implements OnInit, OnChanges { @@ -34,15 +34,15 @@ export class ItemVectorSourceComponent extends SourceVectorComponent implements @Input() features: Array>; @Input() selectedFeature: Feature; @Input() selectedItem: IItem; - @Input() styles:IStyles; + @Input() styles: IStyles; @Output() onFeatureSelected: EventEmitter> = new EventEmitter>(); @Output() onFeatureHover: EventEmitter> = new EventEmitter>(); - 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); this._format = new GeoJSON(); - } + } geometry(feature: Feature) { let view = this.map.instance.getView(); @@ -54,24 +54,24 @@ export class ItemVectorSourceComponent extends SourceVectorComponent implements geometry = new Point(extent.getCenter(e)); } return geometry; - } + } - getSelectedStyle(feature:Feature):style.Style { - let key = feature.get('itemType')+"_selected"; - let evaluatedStyle: style.Style =undefined; - var styleEntry = this.stylesCache[key]; - if(styleEntry) { - if(typeof styleEntry === 'function') { + getSelectedStyle(feature: Feature): style.Style { + let key = feature.get('itemType') + "_selected"; + let evaluatedStyle: style.Style = undefined; + var styleEntry = this.stylesCache[key]; + if (styleEntry) { + if (typeof styleEntry === 'function') { evaluatedStyle = styleEntry(feature); } else { evaluatedStyle = styleEntry; } } else { evaluatedStyle = this.stylesCache["selected"] as style.Style; - } - if(evaluatedStyle ) { - evaluatedStyle .setGeometry((feature:Feature) => this.geometry(feature)); - } + } + if (evaluatedStyle) { + evaluatedStyle.setGeometry((feature: Feature) => this.geometry(feature)); + } return evaluatedStyle as style.Style } @@ -79,12 +79,12 @@ export class ItemVectorSourceComponent extends SourceVectorComponent implements this.strategy = loadingstrategy.bbox; this.format = new GeoJSON(); this._select = new Select({ - style:null, + style: null, hitTolerance: 10, layers: [this.layer.instance as Layer] }); this._hoverSelect = new Select({ - style: (feature:Feature) => { + style: (feature: Feature) => { return this.getSelectedStyle(feature); }, hitTolerance: 10, @@ -94,7 +94,7 @@ export class ItemVectorSourceComponent extends SourceVectorComponent implements layers: [this.layer.instance as Layer] }); this.map.instance.addInteraction(this._select); - this.map.instance.addInteraction(this._hoverSelect); + this.map.instance.addInteraction(this._hoverSelect); this._select.on('select', (e) => { if (e.selected.length > 0 && e.selected[0]) { this.onFeatureSelected.emit(e.selected[0]); @@ -111,44 +111,44 @@ export class ItemVectorSourceComponent extends SourceVectorComponent implements }); this.instance = new Vector(this); this.host.instance.setSource(this.instance); - - this.host.instance.setStyle((feature) => { + + this.host.instance.setStyle((feature) => { var itemType = feature.get('itemType'); - var key = itemType + (this.selectedItem?"_I":""); + var key = itemType + (this.selectedItem ? "_I" : ""); if (!this.stylesCache[key]) { if (this.itemTypeService.itemTypes[itemType]) { let itemTypeEntry = this.itemTypeService.itemTypes[itemType]; let fillColor = color.asArray(itemTypeEntry.iconColor); fillColor[3] = 0; this.stylesCache[key] = new style.Style({ - image: itemTypeEntry.icon ? new style.Icon({ - anchor: [0.5, 1], - scale: 0.05, - src: this.featureIconService$.getIconImageDataUrl(itemTypeEntry.icon) - }):null, - stroke: new style.Stroke({ - color: 'red', - width: 1 - }), - fill: new style.Fill({ - color: fillColor - }), - geometry:(feature:Feature) => this.geometry(feature) - }); + image: itemTypeEntry.icon ? new style.Icon({ + anchor: [0.5, 1], + scale: 0.05, + src: this.featureIconService$.getIconImageDataUrl(itemTypeEntry.icon) + }) : null, + stroke: new style.Stroke({ + color: 'red', + width: 1 + }), + fill: new style.Fill({ + color: fillColor + }), + geometry: (feature: Feature) => this.geometry(feature) + }); } else { key = 'file'; } - } - let evaluatedStyle =null; - var styleEntry = this.stylesCache[key]; - if(typeof styleEntry === 'function') { + } + let evaluatedStyle = null; + var styleEntry = this.stylesCache[key]; + if (typeof styleEntry === 'function') { evaluatedStyle = styleEntry(feature); } else { evaluatedStyle = styleEntry; } - if(evaluatedStyle && evaluatedStyle.geometry_ == null) { + if (evaluatedStyle && evaluatedStyle.geometry_ == null) { evaluatedStyle.setGeometry((feature) => this.geometry(feature)); - } + } return evaluatedStyle; }); } @@ -169,21 +169,21 @@ export class ItemVectorSourceComponent extends SourceVectorComponent implements if (feature) { //this.instance.removeFeature(feature); features.push(feature) - } + } } if (changes["selectedItem"] && this.instance) { var item = changes["selectedItem"].currentValue if (item) { - this.map.instance.removeInteraction(this._hoverSelect); + this.map.instance.removeInteraction(this._hoverSelect); } else { - 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; for (const key in styles) { if (styles.hasOwnProperty(key)) { - this.stylesCache[key]=styles[key]; + this.stylesCache[key] = styles[key]; } } }