From 3094170cc2bdce1bf191b415e5752f50e38438ca Mon Sep 17 00:00:00 2001 From: Willem Dantuma Date: Thu, 27 Feb 2020 16:28:10 +0100 Subject: [PATCH] Some refactoring --- .../aol/item-layers/item-layers.component.ts | 263 ++++++++++-------- .../src/fm-map/models/item.layer.ts | 75 +++-- .../src/fm-map/reducers/map.reducer.ts | 4 +- 3 files changed, 198 insertions(+), 144 deletions(-) diff --git a/projects/common-map/src/fm-map/components/aol/item-layers/item-layers.component.ts b/projects/common-map/src/fm-map/components/aol/item-layers/item-layers.component.ts index 2d4f9d2..5fc56f9 100644 --- a/projects/common-map/src/fm-map/components/aol/item-layers/item-layers.component.ts +++ b/projects/common-map/src/fm-map/components/aol/item-layers/item-layers.component.ts @@ -19,6 +19,7 @@ import VectorTileSource from 'ol/source/VectorTile'; import VectorTileLayer from 'ol/layer/VectorTile'; import {GeoJSON,MVT} from 'ol/format'; import { from } from 'rxjs'; +import { IItem } from 'dist/common/public-api'; @Component({ selector: 'fm-map-item-layers', @@ -86,83 +87,95 @@ export class ItemLayersComponent extends LayerGroupComponent implements OnChange }); } - createLayer(itemLayer: IItemLayer): Layer { - var layer: Layer = null; + createGeotiffLayer(item:IItem,itemLayer:IItemLayer):Layer { var layerIndex = -1; - if (itemLayer.item.itemType == 'vnd.farmmaps.itemtype.geotiff.processed') { - layerIndex = itemLayer.layerIndex != -1 ? itemLayer.layerIndex : itemLayer.item.data.layers[0].index; - let source = new XYZ({ maxZoom: 19, minZoom: 1, url: `${this._apiEndPoint}/api/v1/items/${itemLayer.item.code}/tiles/${layerIndex}/{z}/{x}/{y}.png?v=${itemLayer.item.updated.getTime()}` }); + var layer: Layer = null; + layerIndex = itemLayer.layerIndex != -1 ? itemLayer.layerIndex : item.data.layers[0].index; + let source = new XYZ({ maxZoom: 19, minZoom: 1, url: `${this._apiEndPoint}/api/v1/items/${item.code}/tiles/${layerIndex}/{z}/{x}/{y}.png?v=${item.updated.getTime()}` }); + layer = new Tile({ source: source }); + var data = item.data; + var l = (data && data.layers && data.layers.length > 0) ? data.layers[0] : null; + if (l && l.rendering && l.rendering.renderoutputType == "Tiles") { + var rt = l.rendering as IRenderoutputTiles; + let source = new XYZ({ maxZoom: rt.maxzoom, minZoom: rt.minzoom, url: `${this._apiEndPoint}/api/v1/items/${item.code}/tiles/${layerIndex}/{z}/{x}/{y}.png?v=${item.updated.getTime()}` }); layer = new Tile({ source: source }); - var data = itemLayer.item.data; - var l = (data && data.layers && data.layers.length > 0) ? data.layers[0] : null; - if (l && l.rendering && l.rendering.renderoutputType == "Tiles") { - 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/${layerIndex}/{z}/{x}/{y}.png?v=${itemLayer.item.updated.getTime()}` }); - layer = new Tile({ source: source }); - } - if (l && l.rendering && l.rendering.renderoutputType == "Image") { - var ri = l.rendering as IRenderoutputImage; - let projection = new Projection({ - code: 'image', - units: 'pixels', - extent: ri.extent - }); - let source = new ImageStatic({ imageExtent: ri.extent, projection: projection, url: `${this._apiEndPoint}/api/v1/items/${itemLayer.item.code}/mapimage/${layerIndex}?v=${itemLayer.item.updated.getTime()}` }); - layer = new Image({ source: source }); - } - } else if (itemLayer.item.itemType == 'vnd.farmmaps.itemtype.shape.processed') { - var data = itemLayer.item.data; - layerIndex = itemLayer.layerIndex != -1 ? itemLayer.layerIndex : itemLayer.item.data.layers[0].index; - var l = itemLayer.item.data.layers[layerIndex]; - if (l && l.rendering && l.rendering.renderoutputType == "VectorTiles") { - var rt = itemLayer.item.data.layers[layerIndex].rendering as IRenderoutputTiles; - layer = new VectorTileLayer({ - declutter: true, - source: new VectorTileSource({ - maxZoom: rt.maxzoom, - minZoom: rt.minzoom, - format: new MVT(), - url: `${this._apiEndPoint}/api/v1/items/${itemLayer.item.code}/vectortiles/{z}/{x}/{y}.pbf?v=${itemLayer.item.updated.getTime()}` - }), - style: (feature) => { - return this.getColorFromGradient(l, feature); - } + } + if (l && l.rendering && l.rendering.renderoutputType == "Image") { + var ri = l.rendering as IRenderoutputImage; + let projection = new Projection({ + code: 'image', + units: 'pixels', + extent: ri.extent + }); + let source = new ImageStatic({ imageExtent: ri.extent, projection: projection, url: `${this._apiEndPoint}/api/v1/items/${item.code}/mapimage/${layerIndex}?v=${item.updated.getTime()}` }); + layer = new Image({ source: source }); + } + return layer; + } + + createShapeLayer(item:IItem,itemLayer:IItemLayer):Layer { + var layerIndex = -1; + var layer: Layer = null; + layerIndex = itemLayer.layerIndex != -1 ? itemLayer.layerIndex : item.data.layers[0].index; + var data = item.data; + var l = (data && data.layers && data.layers.length > 0) ? data.layers[0] : null; + if (l && l.rendering && l.rendering.renderoutputType == "VectorTiles") { + var rt = item.data.layers[layerIndex].rendering as IRenderoutputTiles; + layer = new VectorTileLayer({ + declutter: true, + source: new VectorTileSource({ + maxZoom: rt.maxzoom, + minZoom: rt.minzoom, + format: new MVT(), + url: `${this._apiEndPoint}/api/v1/items/${item.code}/vectortiles/{z}/{x}/{y}.pbf?v=${item.updated.getTime()}` + }), + style: (feature) => { + return this.getColorFromGradient(l, feature); + } + }) + } else if (l && l.rendering && l.rendering.renderoutputType == "Tiles") { + var rt = l.rendering as IRenderoutputTiles; + layer = new Tile({ + source: new XYZ({ + maxZoom: rt.maxzoom, + minZoom: rt.minzoom, + url: `${this._apiEndPoint}/api/v1/items/${item.code}/vectortiles/image_tiles/${layerIndex}/{z}/{x}/{y}.png?v=${item.updated.getTime()}` }) - } else if (l && l.rendering && l.rendering.renderoutputType == "Tiles") { - var rt = l.rendering as IRenderoutputTiles; - layer = new Tile({ - source: new XYZ({ - maxZoom: rt.maxzoom, - 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()}` - }) - }); - } else { - let __this = this; - let format = new GeoJSON(); - let source = new VectorSource({ - strategy: loadingstrategy.bbox, - loader: function (extent: Extent, resolution: number, projection: Projection) { - var source = this as VectorSource; - __this.itemService.getItemFeatures(itemLayer.item.code, extent, projection.getCode(), layerIndex).subscribe(function (data) { - var features = format.readFeatures(data); - for (let f of features) { - if (f.get("code")) { - f.setId(f.get("code")); - } + }); + } else { + let __this = this; + let format = new GeoJSON(); + let source = new VectorSource({ + strategy: loadingstrategy.bbox, + loader: function (extent: Extent, resolution: number, projection: Projection) { + var source = this as VectorSource; + __this.itemService.getItemFeatures(item.code, extent, projection.getCode(), layerIndex).subscribe(function (data) { + var features = format.readFeatures(data); + for (let f of features) { + if (f.get("code")) { + f.setId(f.get("code")); } - source.addFeatures(features); - }); - } - }); - layer = new VectorLayer({ - source: source, - style: (feature) => { - var key = feature.get("color"); - if (!this.styleCache[key]) { - var color = feature.get("color"); - this.styleCache[key] = new style.Style( - { + } + source.addFeatures(features); + }); + } + }); + layer = new VectorLayer({ + source: source, + style: (feature) => { + var key = feature.get("color"); + if (!this.styleCache[key]) { + var color = feature.get("color"); + this.styleCache[key] = new style.Style( + { + fill: new style.Fill({ + color: color + }), + stroke: new style.Stroke({ + color: color, + width: 1.25 + }), + image: new style.Circle({ fill: new style.Fill({ color: color }), @@ -170,50 +183,64 @@ export class ItemLayersComponent extends LayerGroupComponent implements OnChange color: color, width: 1.25 }), - image: new style.Circle({ - fill: new style.Fill({ - color: color - }), - stroke: new style.Stroke({ - color: color, - width: 1.25 - }), - radius: 5 - }), - } - ) - } - return this.styleCache[key]; + radius: 5 + }), + } + ) } - }); + return this.styleCache[key]; + } + }); + } + return layer; + } + + createExternalLayer(item:IItem,itemLayer:IItemLayer):Layer { + let data = item.data as ILayerData; + var layer: Layer = null; + switch (data.interfaceType) { + case 'OSM': { + let source = new OSM(); + layer = new Tile({ source: source }); + break; } + case 'BingMaps': { + let source = new BingMaps(data.options); + layer = new Tile({ source: source }); + break; + } + case 'TileWMS': { + let source = new TileWMS(data.options); + layer = new Tile({ source: source }); + break; + } + case 'TileArcGISRest': { + let source = new TileArcGISRest(data.options); + layer = new Tile({ source: source }); + break; + } + default: { + break; + } + } + return layer; + } + + createTemporalLayer(item:IItem,itemLayer:IItemLayer):Layer { + return null; + } + + createLayer(itemLayer: IItemLayer): Layer { + var layer: Layer = null; + var layerIndex = -1; + if (itemLayer.item.itemType == 'vnd.farmmaps.itemtype.geotiff.processed') { + layer = this.createGeotiffLayer(itemLayer.item,itemLayer); + } else if (itemLayer.item.itemType == 'vnd.farmmaps.itemtype.shape.processed') { + layer = this.createShapeLayer(itemLayer.item,itemLayer); } else if (itemLayer.item.itemType == 'vnd.farmmaps.itemtype.layer') { - let data = itemLayer.item.data as ILayerData; - switch (data.interfaceType) { - case 'OSM': { - let source = new OSM(); - layer = new Tile({ source: source }); - break; - } - case 'BingMaps': { - let source = new BingMaps(data.options); - layer = new Tile({ source: source }); - break; - } - case 'TileWMS': { - let source = new TileWMS(data.options); - layer = new Tile({ source: source }); - break; - } - case 'TileArcGISRest': { - let source = new TileArcGISRest(data.options); - layer = new Tile({ source: source }); - break; - } - default: { - break; - } - } + layer = this.createExternalLayer(itemLayer.item,itemLayer); + } else if (itemLayer.item.itemType == 'vnd.farmmaps.itemtype.temporal') { + layer = this.createTemporalLayer(itemLayer.item,itemLayer); } if (layer) { let geometry = new GeoJSON().readGeometry(itemLayer.item.geometry); @@ -241,15 +268,17 @@ export class ItemLayersComponent extends LayerGroupComponent implements OnChange layer = this.createLayer(itemLayer); if (layer) { itemLayer.layer = layer; + olLayers.insertAt(index, layer); } - olLayers.insertAt(index, layer); } else if (index !== olIndex) { // layer has moved inside the layers list olLayers.removeAt(olIndex); olLayers.insertAt(index, layer); } - layer.setOpacity(itemLayer.opacity); - layer.setVisible(itemLayer.visible); + if(layer) { + layer.setOpacity(itemLayer.opacity); + layer.setVisible(itemLayer.visible); + } }); // Remove the layers that have disapeared from childrenLayers if (olLayers.getLength() > itemLayers.length) { diff --git a/projects/common-map/src/fm-map/models/item.layer.ts b/projects/common-map/src/fm-map/models/item.layer.ts index 7ddf00a..0138ab4 100644 --- a/projects/common-map/src/fm-map/models/item.layer.ts +++ b/projects/common-map/src/fm-map/models/item.layer.ts @@ -1,26 +1,49 @@ -import { IItem } from '@farmmaps/common'; -import {Layer} from 'ol/layer'; - -export interface IItemLayer { - item: IItem, - layer: Layer, - visible: boolean, - legendVisible:boolean, - projection: string, - opacity: number, - layerIndex:number -} - -export class ItemLayer implements IItemLayer { - public item: IItem; - public layer: Layer = null; - public visible: boolean = true; - public legendVisible: boolean = false; - public projection: string; - public opacity: number = 1; - public layerIndex: number = -1; - - constructor(item:IItem) { - this.item = item; - } -} +import { IItem,IListItem } from '@farmmaps/common'; +import {Layer} from 'ol/layer'; + +export interface IItemLayer { + item: IItem, + layer: Layer, + visible: boolean, + legendVisible:boolean, + projection: string, + opacity: number, + layerIndex:number +} + +export class ItemLayer implements IItemLayer { + public item: IItem; + public layer: Layer = null; + public visible: boolean = true; + public legendVisible: boolean = false; + public projection: string; + public opacity: number = 1; + public layerIndex: number = -1; + + constructor(item:IItem) { + this.item = item; + } +} + +export interface ITemporalItemLayer extends IItemLayer { + previousLayer: Layer + selectedLayer: Layer, + nextLayer: Layer + temporalItems: IListItem[], + selectedItem: IListItem +} + +export class TemporalItemLayer extends ItemLayer implements ITemporalItemLayer { + public previousLayer:Layer = null; + public selectedLayer:Layer = null; + public nextLayer:Layer = null; + public temporalItems:IListItem[] = []; + public selectedItem:IListItem =null; + + constructor(item:IItem) { + super(item) + } +} + + + diff --git a/projects/common-map/src/fm-map/reducers/map.reducer.ts b/projects/common-map/src/fm-map/reducers/map.reducer.ts index 38f9ed6..7dc4055 100644 --- a/projects/common-map/src/fm-map/reducers/map.reducer.ts +++ b/projects/common-map/src/fm-map/reducers/map.reducer.ts @@ -1,6 +1,6 @@ import { tassign } from 'tassign'; import { IItem,Item } from '@farmmaps/common'; -import { IItemLayer,ItemLayer} from '../models/item.layer'; +import { IItemLayer,ItemLayer,TemporalItemLayer} from '../models/item.layer'; import { IMapState} from '../models/map.state'; import { IQueryState} from '@farmmaps/common'; import { IPeriodState} from '../models/period.state'; @@ -164,6 +164,8 @@ export function reducer(state = initialState, action: mapActions.Actions | commo var itemLayer = null; if (a.item && "vnd.farmmaps.itemtype.layer,vnd.farmmaps.itemtype.shape.processed,vnd.farmmaps.itemtype.geotiff.processed".indexOf(a.item.itemType) >=0 ) { itemLayer = new ItemLayer(a.item); + } else if (a.item && a.item.itemType == "vnd.farmmaps.itemtype.temporal") { + itemLayer = new TemporalItemLayer(a.item); } return tassign(state, { selectedItem: a.item,