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 { Feature } from 'ol';
import { Point, Geometry } from 'ol/geom';
import { MapBrowserEvent } from 'ol';
import { Types } from 'ol/MapBrowserEventType';
import * as style from 'ol/style';
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';
@Component({
selector: 'fm-map-item-source-vector',
template: ``,
providers: [
{ provide: SourceVectorComponent, useExisting: forwardRef(() => ItemVectorSourceComponent) }
]
})
export class ItemVectorSourceComponent extends SourceVectorComponent implements OnInit, OnChanges {
instance: Vector;
private _format: GeoJSON;
private _select: Select;
private _hoverSelect: Select;
private _iconScale = 0.05;
@Input() features: Array>;
@Input() selectedFeature: Feature;
@Input() selectedItem: IItem;
@Input() styles: IStyles;
@Output() onFeatureSelected: EventEmitter> = new EventEmitter>();
@Output() onFeatureHover: EventEmitter> = new EventEmitter>();
private stylesCache: IStyles = {};
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) {
const view = this.map.instance.getView();
const resolution = view.getResolution();
let geometry = feature.getGeometry();
const e = geometry.getExtent();
//var size = Math.max((e[2] - e[0]) / resolution, (e[3] - e[1]) / resolution);
if (resolution > 12) {
geometry = new Point(extent.getCenter(e));
}
return geometry;
}
getSelectedStyle(feature: Feature): style.Style {
const key = feature.get('itemType') + "_selected";
let evaluatedStyle: style.Style = undefined;
const 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));
}
return evaluatedStyle as style.Style
}
ngOnInit() {
this.strategy = loadingstrategy.bbox;
this.format = new GeoJSON();
this._select = new Select({
style: null,
hitTolerance: 10,
layers: [this.layer.instance as Layer