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

Add custom style for vnd.farmmaps.itemntype.layer
All checks were successful
FarmMaps.Develop/FarmMapsLib/develop This commit looks good
Details

Browse Source
This commit is contained in:
Willem Dantuma 2020-02-13 11:24:23 +01:00
parent 3c0bece982
commit 709e964579
3 changed files with 309 additions and 280 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

554
projects/common-map/src/fm-map/components/aol/item-layers/item-layers.component.ts
View File

@ -1,277 +1,277 @@
import { Component, Host, Input, Output, EventEmitter, Optional, QueryList, OnInit, AfterViewInit, OnChanges, SimpleChanges, SkipSelf, forwardRef, Inject, InjectionToken } from '@angular/core'; import { Component, Host, Input, Output, EventEmitter, Optional, QueryList, OnInit, AfterViewInit, OnChanges, SimpleChanges, SkipSelf, forwardRef, Inject, InjectionToken } from '@angular/core';
import { HttpClient } from "@angular/common/http"; import { HttpClient } from "@angular/common/http";
import { LayerVectorComponent, LayerTileComponent, LayerGroupComponent, MapComponent } from 'ngx-openlayers'; import { LayerVectorComponent, LayerTileComponent, LayerGroupComponent, MapComponent } from 'ngx-openlayers';
import { ItemService } from '@farmmaps/common'; import { ItemService } from '@farmmaps/common';
import { AppConfig } from '@farmmaps/common'; import { AppConfig } from '@farmmaps/common';
import { IItemLayer} from '../../../models/item.layer'; import { IItemLayer} from '../../../models/item.layer';
import { ILayerData} from '../../../models/layer.data'; import { ILayerData} from '../../../models/layer.data';
import { IRenderoutputTiles,IRenderoutputImage,IGradientstop,ILayer,IHistogram} from '../../../models/color.map'; import { IRenderoutputTiles,IRenderoutputImage,IGradientstop,ILayer,IHistogram} from '../../../models/color.map';
import {Extent} from 'ol/extent'; import {Extent} from 'ol/extent';
import Projection from 'ol/proj/Projection'; import Projection from 'ol/proj/Projection';
import * as proj from 'ol/proj'; import * as proj from 'ol/proj';
import * as loadingstrategy from 'ol/loadingstrategy'; import * as loadingstrategy from 'ol/loadingstrategy';
import * as style from 'ol/style'; import * as style from 'ol/style';
import {Tile,Layer,Image} from 'ol/layer'; import {Tile,Layer,Image} from 'ol/layer';
import {XYZ,ImageStatic,OSM,BingMaps,TileWMS,TileArcGISRest} from 'ol/source'; import {XYZ,ImageStatic,OSM,BingMaps,TileWMS,TileArcGISRest} from 'ol/source';
import {Vector as VectorSource} from 'ol/source'; import {Vector as VectorSource} from 'ol/source';
import { Vector as VectorLayer } from 'ol/layer'; import { Vector as VectorLayer } from 'ol/layer';
import VectorTileSource from 'ol/source/VectorTile'; import VectorTileSource from 'ol/source/VectorTile';
import VectorTileLayer from 'ol/layer/VectorTile'; import VectorTileLayer from 'ol/layer/VectorTile';
import {GeoJSON,MVT} from 'ol/format'; import {GeoJSON,MVT} from 'ol/format';
import { from } from 'rxjs'; import { from } from 'rxjs';
@Component({ @Component({
selector: 'fm-map-item-layers', selector: 'fm-map-item-layers',
template: `<ng-content></ng-content>`, template: `<ng-content></ng-content>`,
providers: [ providers: [
{ provide: LayerGroupComponent, useExisting: forwardRef(() => ItemLayersComponent) } { provide: LayerGroupComponent, useExisting: forwardRef(() => ItemLayersComponent) }
] ]
}) })
export class ItemLayersComponent extends LayerGroupComponent implements OnChanges, OnInit { export class ItemLayersComponent extends LayerGroupComponent implements OnChanges, OnInit {
@Input() itemLayers: IItemLayer[]; @Input() itemLayers: IItemLayer[];
@Input() itemLayer: IItemLayer; @Input() itemLayer: IItemLayer;
private _apiEndPoint: string; private _apiEndPoint: string;
constructor(private itemService: ItemService, @Host() private map: MapComponent, public appConfig: AppConfig) { constructor(private itemService: ItemService, @Host() private map: MapComponent, public appConfig: AppConfig) {
super(map); super(map);
this._apiEndPoint = appConfig.getConfig("apiEndPoint"); this._apiEndPoint = appConfig.getConfig("apiEndPoint");
} }
private styleCache = {} private styleCache = {}
componentToHex(c) { componentToHex(c) {
var hex = c.toString(16); var hex = c.toString(16);
return hex.length == 1 ? "0" + hex : hex; return hex.length == 1 ? "0" + hex : hex;
} }
rgbaToHex(r, g, b,a) { rgbaToHex(r, g, b,a) {
return "#" + this.componentToHex(r) + this.componentToHex(g) + this.componentToHex(b) + this.componentToHex(a); return "#" + this.componentToHex(r) + this.componentToHex(g) + this.componentToHex(b) + this.componentToHex(a);
} }
getColorFromGradient(layer: ILayer, feature): style.Style { getColorFromGradient(layer: ILayer, feature): style.Style {
var value = feature.get(layer.name); var value = feature.get(layer.name);
var gradient: IGradientstop[] = layer.renderer.colorMap.gradient; var gradient: IGradientstop[] = layer.renderer.colorMap.gradient;
var histogram: IHistogram = layer.renderer.band.histogram; var histogram: IHistogram = layer.renderer.band.histogram;
var index = (value - histogram.min) / histogram.max; var index = (value - histogram.min) / histogram.max;
var min = gradient[0]; var min = gradient[0];
var max = gradient[gradient.length - 1]; var max = gradient[gradient.length - 1];
for (var n = 0; n < gradient.length; n++) { for (var n = 0; n < gradient.length; n++) {
var s = gradient[n]; var s = gradient[n];
if (s.relativestop <= index && min.relativestop < s.relativestop && n < gradient.length - 1) min = s; if (s.relativestop <= index && min.relativestop < s.relativestop && n < gradient.length - 1) min = s;
if (s.relativestop >= index && max.relativestop > s.relativestop && n > 0) max = s; if (s.relativestop >= index && max.relativestop > s.relativestop && n > 0) max = s;
} }
var i = index - min.relativestop; var i = index - min.relativestop;
var size = max.relativestop - min.relativestop; var size = max.relativestop - min.relativestop;
var alpha = Math.round( min.color.alpha + ((max.color.alpha - min.color.alpha) * i / size)); var alpha = Math.round( min.color.alpha + ((max.color.alpha - min.color.alpha) * i / size));
var red = Math.round(min.color.red + ((max.color.red - min.color.red) * i / size)); var red = Math.round(min.color.red + ((max.color.red - min.color.red) * i / size));
var green = Math.round(min.color.green + ((max.color.green - min.color.green) * i / size)); var green = Math.round(min.color.green + ((max.color.green - min.color.green) * i / size));
var blue = Math.round(min.color.blue + ((max.color.blue - min.color.blue) * i / size)); var blue = Math.round(min.color.blue + ((max.color.blue - min.color.blue) * i / size));
return new style.Style( return new style.Style(
{ {
image: new style.Circle({ image: new style.Circle({
fill: new style.Fill({ fill: new style.Fill({
color: this.rgbaToHex(red,green,blue,alpha) color: this.rgbaToHex(red,green,blue,alpha)
}), }),
radius: 3 radius: 3
}), }),
fill: new style.Fill({ fill: new style.Fill({
color: this.rgbaToHex(red, green, blue, alpha) color: this.rgbaToHex(red, green, blue, alpha)
}), }),
stroke: new style.Stroke({ stroke: new style.Stroke({
color: this.rgbaToHex(red, green, blue, alpha), color: this.rgbaToHex(red, green, blue, alpha),
width: 1.25 width: 1.25
}), }),
}); });
} }
createLayer(itemLayer: IItemLayer): Layer { createLayer(itemLayer: IItemLayer): Layer {
var layer: Layer = null; var layer: Layer = null;
if (itemLayer.item.itemType == 'vnd.farmmaps.itemtype.geotiff.processed') { if (itemLayer.item.itemType == 'vnd.farmmaps.itemtype.geotiff.processed') {
let source = new XYZ({ maxZoom: 19, minZoom: 1, url: `${this._apiEndPoint}/api/v1/items/${itemLayer.item.code}/tiles/{z}/{x}/{y}.png?v=${itemLayer.item.updated.getTime()}` }); let source = new XYZ({ maxZoom: 19, minZoom: 1, url: `${this._apiEndPoint}/api/v1/items/${itemLayer.item.code}/tiles/{z}/{x}/{y}.png?v=${itemLayer.item.updated.getTime()}` });
layer = new Tile({ source: source }); layer = new Tile({ source: source });
var data = itemLayer.item.data; var data = itemLayer.item.data;
var l = (data && data.layers && data.layers.length > 0) ? data.layers[0] : null; var l = (data && data.layers && data.layers.length > 0) ? data.layers[0] : null;
if (l && l.rendering && l.rendering.renderoutputType == "Tiles") { if (l && l.rendering && l.rendering.renderoutputType == "Tiles") {
var rt = l.rendering as IRenderoutputTiles; var rt = l.rendering as IRenderoutputTiles;
let source = new XYZ({ maxZoom: rt.maxzoom, minZoom: rt.minzoom, url: `${this._apiEndPoint}/api/v1/items/${itemLayer.item.code}/tiles/{z}/{x}/{y}.png?v=${itemLayer.item.updated.getTime()}` }); let source = new XYZ({ maxZoom: rt.maxzoom, minZoom: rt.minzoom, url: `${this._apiEndPoint}/api/v1/items/${itemLayer.item.code}/tiles/{z}/{x}/{y}.png?v=${itemLayer.item.updated.getTime()}` });
layer = new Tile({ source: source }); layer = new Tile({ source: source });
} }
if (l && l.rendering && l.rendering.renderoutputType == "Image") { if (l && l.rendering && l.rendering.renderoutputType == "Image") {
var ri = l.rendering as IRenderoutputImage; var ri = l.rendering as IRenderoutputImage;
let projection = new Projection({ let projection = new Projection({
code: 'image', code: 'image',
units: 'pixels', units: 'pixels',
extent: ri.extent extent: ri.extent
}); });
let source = new ImageStatic({ imageExtent: ri.extent, projection: projection, url: `${this._apiEndPoint}/api/v1/items/${itemLayer.item.code}/mapimage?v=${itemLayer.item.updated.getTime()}` }); let source = new ImageStatic({ imageExtent: ri.extent, projection: projection, url: `${this._apiEndPoint}/api/v1/items/${itemLayer.item.code}/mapimage?v=${itemLayer.item.updated.getTime()}` });
layer = new Image({ source: source }); layer = new Image({ source: source });
} }
} else if (itemLayer.item.itemType == 'vnd.farmmaps.itemtype.shape.processed') { } else if (itemLayer.item.itemType == 'vnd.farmmaps.itemtype.shape.processed') {
var data = itemLayer.item.data; var data = itemLayer.item.data;
var layerIndex = itemLayer.layerIndex != -1 ? itemLayer.layerIndex : itemLayer.item.data.layers[0].index; var layerIndex = itemLayer.layerIndex != -1 ? itemLayer.layerIndex : itemLayer.item.data.layers[0].index;
var l = itemLayer.item.data.layers[layerIndex]; var l = itemLayer.item.data.layers[layerIndex];
if (l && l.rendering && l.rendering.renderoutputType == "VectorTiles") { if (l && l.rendering && l.rendering.renderoutputType == "VectorTiles") {
var rt = itemLayer.item.data.layers[layerIndex].rendering as IRenderoutputTiles; var rt = itemLayer.item.data.layers[layerIndex].rendering as IRenderoutputTiles;
layer = new VectorTileLayer({ layer = new VectorTileLayer({
declutter: true, declutter: true,
source: new VectorTileSource({ source: new VectorTileSource({
maxZoom: rt.maxzoom, maxZoom: rt.maxzoom,
minZoom: rt.minzoom, minZoom: rt.minzoom,
format: new MVT(), format: new MVT(),
url: `${this._apiEndPoint}/api/v1/items/${itemLayer.item.code}/vectortiles/{z}/{x}/{y}.pbf?v=${itemLayer.item.updated.getTime()}` url: `${this._apiEndPoint}/api/v1/items/${itemLayer.item.code}/vectortiles/{z}/{x}/{y}.pbf?v=${itemLayer.item.updated.getTime()}`
}), }),
style: (feature) => { style: (feature) => {
return this.getColorFromGradient(l, feature); return this.getColorFromGradient(l, feature);
} }
}) })
} if (l && l.rendering && l.rendering.renderoutputType == "Tiles") { } else if (l && l.rendering && l.rendering.renderoutputType == "Tiles") {
var rt = l.rendering as IRenderoutputTiles; var rt = l.rendering as IRenderoutputTiles;
layer = new Tile({ layer = new Tile({
source: new XYZ({ source: new XYZ({
maxZoom: rt.maxzoom, maxZoom: rt.maxzoom,
minZoom: rt.minzoom, minZoom: rt.minzoom,
url: `${this._apiEndPoint}/api/v1/items/${itemLayer.item.code}/vectortiles/image_tiles/${layerIndex}/{z}/{x}/{y}.png?v=${itemLayer.item.updated.getTime()}` url: `${this._apiEndPoint}/api/v1/items/${itemLayer.item.code}/vectortiles/image_tiles/${layerIndex}/{z}/{x}/{y}.png?v=${itemLayer.item.updated.getTime()}`
}) })
}); });
} else { } else {
let __this = this; let __this = this;
let format = new GeoJSON(); let format = new GeoJSON();
let source = new VectorSource({ let source = new VectorSource({
strategy: loadingstrategy.bbox, strategy: loadingstrategy.bbox,
loader: function (extent: Extent, resolution: number, projection: Projection) { loader: function (extent: Extent, resolution: number, projection: Projection) {
var source = this as VectorSource; var source = this as VectorSource;
__this.itemService.getItemFeatures(itemLayer.item.code, extent, projection.getCode(), layerIndex).subscribe(function (data) { __this.itemService.getItemFeatures(itemLayer.item.code, extent, projection.getCode(), layerIndex).subscribe(function (data) {
var features = format.readFeatures(data); var features = format.readFeatures(data);
for (let f of features) { for (let f of features) {
if (f.get("code")) { if (f.get("code")) {
f.setId(f.get("code")); f.setId(f.get("code"));
} }
} }
source.addFeatures(features); source.addFeatures(features);
}); });
} }
}); });
layer = new VectorLayer({ layer = new VectorLayer({
source: source, source: source,
style: (feature) => { style: (feature) => {
var key = feature.get("color"); var key = feature.get("color");
if (!this.styleCache[key]) { if (!this.styleCache[key]) {
var color = feature.get("color"); var color = feature.get("color");
this.styleCache[key] = new style.Style( this.styleCache[key] = new style.Style(
{ {
fill: new style.Fill({ fill: new style.Fill({
color: color color: color
}), }),
stroke: new style.Stroke({ stroke: new style.Stroke({
color: color, color: color,
width: 1.25 width: 1.25
}), }),
image: new style.Circle({ image: new style.Circle({
fill: new style.Fill({ fill: new style.Fill({
color: color color: color
}), }),
stroke: new style.Stroke({ stroke: new style.Stroke({
color: color, color: color,
width: 1.25 width: 1.25
}), }),
radius: 5 radius: 5
}), }),
} }
) )
} }
return this.styleCache[key]; return this.styleCache[key];
} }
}); });
} }
} else if (itemLayer.item.itemType == 'vnd.farmmaps.itemtype.layer') { } else if (itemLayer.item.itemType == 'vnd.farmmaps.itemtype.layer') {
let data = itemLayer.item.data as ILayerData; let data = itemLayer.item.data as ILayerData;
switch (data.interfaceType) { switch (data.interfaceType) {
case 'OSM': { case 'OSM': {
let source = new OSM(); let source = new OSM();
layer = new Tile({ source: source }); layer = new Tile({ source: source });
break; break;
} }
case 'BingMaps': { case 'BingMaps': {
let source = new BingMaps(data.options); let source = new BingMaps(data.options);
layer = new Tile({ source: source }); layer = new Tile({ source: source });
break; break;
} }
case 'TileWMS': { case 'TileWMS': {
let source = new TileWMS(data.options); let source = new TileWMS(data.options);
layer = new Tile({ source: source }); layer = new Tile({ source: source });
break; break;
} }
case 'TileArcGISRest': { case 'TileArcGISRest': {
let source = new TileArcGISRest(data.options); let source = new TileArcGISRest(data.options);
layer = new Tile({ source: source }); layer = new Tile({ source: source });
break; break;
} }
default: { default: {
break; break;
} }
} }
} }
if (layer) { if (layer) {
let geometry = new GeoJSON().readGeometry(itemLayer.item.geometry); let geometry = new GeoJSON().readGeometry(itemLayer.item.geometry);
let extent = geometry ? proj.transformExtent(geometry.getExtent(), 'EPSG:4326', 'EPSG:3857') : null; let extent = geometry ? proj.transformExtent(geometry.getExtent(), 'EPSG:4326', 'EPSG:3857') : null;
if (extent) layer.setExtent(extent); if (extent) layer.setExtent(extent);
} }
return layer; return layer;
} }
ngOnInit() { ngOnInit() {
super.ngOnInit(); super.ngOnInit();
this.updateLayers(this.itemLayers); this.updateLayers(this.itemLayers);
} }
updateLayers(itemLayers: IItemLayer[]) { updateLayers(itemLayers: IItemLayer[]) {
if (itemLayers) { if (itemLayers) {
var olLayers = this.instance.getLayers(); var olLayers = this.instance.getLayers();
itemLayers.forEach((itemLayer, index) => { itemLayers.forEach((itemLayer, index) => {
var layer = itemLayer.layer; var layer = itemLayer.layer;
let olIndex = olLayers.getArray().indexOf(layer); let olIndex = olLayers.getArray().indexOf(layer);
if (olIndex < 0) { if (olIndex < 0) {
// New layer: we add it to the map // New layer: we add it to the map
layer = this.createLayer(itemLayer); layer = this.createLayer(itemLayer);
if (layer) { if (layer) {
itemLayer.layer = layer; itemLayer.layer = layer;
} }
olLayers.insertAt(index, layer); olLayers.insertAt(index, layer);
} else if (index !== olIndex) { } else if (index !== olIndex) {
// layer has moved inside the layers list // layer has moved inside the layers list
olLayers.removeAt(olIndex); olLayers.removeAt(olIndex);
olLayers.insertAt(index, layer); olLayers.insertAt(index, layer);
} }
layer.setOpacity(itemLayer.opacity); layer.setOpacity(itemLayer.opacity);
layer.setVisible(itemLayer.visible); layer.setVisible(itemLayer.visible);
}); });
// Remove the layers that have disapeared from childrenLayers // Remove the layers that have disapeared from childrenLayers
if (olLayers.getLength() > itemLayers.length) { if (olLayers.getLength() > itemLayers.length) {
for (let i = itemLayers.length; i < olLayers.getLength(); i++) { for (let i = itemLayers.length; i < olLayers.getLength(); i++) {
olLayers.removeAt(i); olLayers.removeAt(i);
} }
} }
} }
} }
ngOnChanges(changes: SimpleChanges) { ngOnChanges(changes: SimpleChanges) {
if (this.instance) { if (this.instance) {
if (changes['itemLayers']) { if (changes['itemLayers']) {
var itemLayers = changes['itemLayers'].currentValue as IItemLayer[]; var itemLayers = changes['itemLayers'].currentValue as IItemLayer[];
this.updateLayers(itemLayers); this.updateLayers(itemLayers);
} }
if (changes['itemLayer']) { if (changes['itemLayer']) {
var itemLayer = changes['itemLayer'].currentValue as IItemLayer; var itemLayer = changes['itemLayer'].currentValue as IItemLayer;
if(itemLayer) { if(itemLayer) {
this.updateLayers([itemLayer]); this.updateLayers([itemLayer]);
} else { } else {
this.updateLayers([]); this.updateLayers([]);
} }
} }
} }
} }
} }

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

@ -54,19 +54,27 @@ export class ItemVectorSourceComponent extends SourceVectorComponent implements
return geometry; return geometry;
} }
getSelectedStyle(feature:Feature):style.Style {
let key = feature.get('itemType')+"_selected";
if(this.stylesCache[key]) {
return this.stylesCache[key];
}
return this.stylesCache["selected"];
}
ngOnInit() { ngOnInit() {
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: (feature) => { style: (feature) => {
return this.stylesCache['selected']; return this.getSelectedStyle(feature);
}, },
hitTolerance: 10, hitTolerance: 10,
layers: [this.layer.instance as Layer] layers: [this.layer.instance as Layer]
}); });
this._hoverSelect = new Select({ this._hoverSelect = new Select({
style: (feature) => { style: (feature) => {
return this.stylesCache['selected']; return this.getSelectedStyle(feature);
}, },
hitTolerance: 10, hitTolerance: 10,
condition: (e: MapBrowserEvent) => { condition: (e: MapBrowserEvent) => {
@ -148,7 +156,7 @@ export class ItemVectorSourceComponent extends SourceVectorComponent implements
for (const key in styles) { for (const key in styles) {
if (styles.hasOwnProperty(key)) { if (styles.hasOwnProperty(key)) {
let style = styles[key]; let style = styles[key];
if(style.geometry == null) { if(style.geometry_ == null) {
style.setGeometry((feature) => this.geometry(feature)); style.setGeometry((feature) => this.geometry(feature));
} }
this.stylesCache[key]=style; this.stylesCache[key]=style;

21
projects/common-map/src/fm-map/components/map/map.component.ts
View File

@ -32,6 +32,7 @@ import {Extent,createEmpty,extend } from 'ol/extent';
import {transform} from 'ol/proj'; import {transform} from 'ol/proj';
import { query } from '@angular/animations'; import { query } from '@angular/animations';
import { tassign } from 'tassign'; import { tassign } from 'tassign';
import * as style from 'ol/style';
@Component({ @Component({
@ -156,6 +157,26 @@ export class MapComponent implements OnInit, OnDestroy,AfterViewInit {
this.query$.pipe(withLatestFrom(this.mapState$)).subscribe((state) => { this.query$.pipe(withLatestFrom(this.mapState$)).subscribe((state) => {
this.replaceUrl(state[1], state[0],false); this.replaceUrl(state[1], state[0],false);
}); });
this.initCustomStyles();
}
initCustomStyles() {
this.store.dispatch(new mapActions.SetStyle('vnd.farmmaps.itemtype.layer',new style.Style({
stroke: new style.Stroke({
color: 'red',
lineDash: [ 5,5],
width: 1
}),
geometry:(feature) =>feature.getGeometry()
})));
this.store.dispatch(new mapActions.SetStyle('vnd.farmmaps.itemtype.layer_selected',new style.Style({
stroke: new style.Stroke({
color: 'red',
lineDash: [ 5,5],
width: 3
}),
geometry:(feature) =>feature.getGeometry()
})));
} }
private stateSetCount: number = 0; private stateSetCount: number = 0;