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

114
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 { 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: `<ng-content></ng-content>`,
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<Feature<Geometry>>;
@Input() selectedFeature: Feature<Geometry>;
@Input() selectedItem: IItem;
@Input() styles:IStyles;
@Input() styles: IStyles;
@Output() onFeatureSelected: 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);
this._format = new GeoJSON();
}
}
geometry(feature: Feature<Geometry>) {
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<Geometry>):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<Geometry>): 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<Geometry>) => this.geometry(feature));
}
}
if (evaluatedStyle) {
evaluatedStyle.setGeometry((feature: Feature<Geometry>) => 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<Source>]
});
this._hoverSelect = new Select({
style: (feature:Feature<Geometry>) => {
style: (feature: Feature<Geometry>) => {
return this.getSelectedStyle(feature);
},
hitTolerance: 10,
@ -94,7 +94,7 @@ export class ItemVectorSourceComponent extends SourceVectorComponent implements
layers: [this.layer.instance as Layer<Source>]
});
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<Geometry>) => 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<Geometry>) => 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];
}
}
}