Fix styles
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
aeded938bd
commit
fa90eaf1af
@ -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();
|
||||||
}
|
}
|
||||||
@ -56,12 +56,12 @@ export class ItemVectorSourceComponent extends SourceVectorComponent implements
|
|||||||
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,7 +114,7 @@ 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];
|
||||||
@ -125,7 +125,7 @@ export class ItemVectorSourceComponent extends SourceVectorComponent implements
|
|||||||
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
|
||||||
@ -133,20 +133,20 @@ export class ItemVectorSourceComponent extends SourceVectorComponent implements
|
|||||||
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];
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
Loading…
Reference in New Issue
Block a user