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

Some refactoring

Browse Source
This commit is contained in:
Willem Dantuma 2020-02-27 16:28:10 +01:00
parent 795e8fdf0e
commit 3094170cc2
3 changed files with 198 additions and 144 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -19,6 +19,7 @@ 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';
import { IItem } from 'dist/common/public-api';
@Component({ @Component({
selector: 'fm-map-item-layers', selector: 'fm-map-item-layers',
@ -86,83 +87,95 @@ export class ItemLayersComponent extends LayerGroupComponent implements OnChange
}); });
} }
createLayer(itemLayer: IItemLayer): Layer { createGeotiffLayer(item:IItem,itemLayer:IItemLayer):Layer {
var layer: Layer = null;
var layerIndex = -1; var layerIndex = -1;
if (itemLayer.item.itemType == 'vnd.farmmaps.itemtype.geotiff.processed') { var layer: Layer = null;
layerIndex = itemLayer.layerIndex != -1 ? itemLayer.layerIndex : itemLayer.item.data.layers[0].index; 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/${itemLayer.item.code}/tiles/${layerIndex}/{z}/{x}/{y}.png?v=${itemLayer.item.updated.getTime()}` }); 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 }); 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 == "Image") {
if (l && l.rendering && l.rendering.renderoutputType == "Tiles") { var ri = l.rendering as IRenderoutputImage;
var rt = l.rendering as IRenderoutputTiles; let projection = new Projection({
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()}` }); code: 'image',
layer = new Tile({ source: source }); units: 'pixels',
} extent: ri.extent
if (l && l.rendering && l.rendering.renderoutputType == "Image") { });
var ri = l.rendering as IRenderoutputImage; let source = new ImageStatic({ imageExtent: ri.extent, projection: projection, url: `${this._apiEndPoint}/api/v1/items/${item.code}/mapimage/${layerIndex}?v=${item.updated.getTime()}` });
let projection = new Projection({ layer = new Image({ source: source });
code: 'image', }
units: 'pixels', return layer;
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()}` }); createShapeLayer(item:IItem,itemLayer:IItemLayer):Layer {
layer = new Image({ source: source }); var layerIndex = -1;
} var layer: Layer = null;
} else if (itemLayer.item.itemType == 'vnd.farmmaps.itemtype.shape.processed') { layerIndex = itemLayer.layerIndex != -1 ? itemLayer.layerIndex : item.data.layers[0].index;
var data = itemLayer.item.data; var data = item.data;
layerIndex = itemLayer.layerIndex != -1 ? itemLayer.layerIndex : itemLayer.item.data.layers[0].index; var l = (data && data.layers && data.layers.length > 0) ? data.layers[0] : null;
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 = 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/${item.code}/vectortiles/{z}/{x}/{y}.pbf?v=${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); }
} })
} 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; } else {
layer = new Tile({ let __this = this;
source: new XYZ({ let format = new GeoJSON();
maxZoom: rt.maxzoom, let source = new VectorSource({
minZoom: rt.minzoom, strategy: loadingstrategy.bbox,
url: `${this._apiEndPoint}/api/v1/items/${itemLayer.item.code}/vectortiles/image_tiles/${layerIndex}/{z}/{x}/{y}.png?v=${itemLayer.item.updated.getTime()}` 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) {
} else { var features = format.readFeatures(data);
let __this = this; for (let f of features) {
let format = new GeoJSON(); if (f.get("code")) {
let source = new VectorSource({ f.setId(f.get("code"));
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"));
}
} }
source.addFeatures(features); }
}); source.addFeatures(features);
} });
}); }
layer = new VectorLayer({ });
source: source, layer = new VectorLayer({
style: (feature) => { source: source,
var key = feature.get("color"); style: (feature) => {
if (!this.styleCache[key]) { var key = feature.get("color");
var color = feature.get("color"); if (!this.styleCache[key]) {
this.styleCache[key] = new style.Style( 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({ fill: new style.Fill({
color: color color: color
}), }),
@ -170,50 +183,64 @@ export class ItemLayersComponent extends LayerGroupComponent implements OnChange
color: color, color: color,
width: 1.25 width: 1.25
}), }),
image: new style.Circle({ radius: 5
fill: new style.Fill({ }),
color: color }
}), )
stroke: new style.Stroke({
color: color,
width: 1.25
}),
radius: 5
}),
}
)
}
return this.styleCache[key];
} }
}); 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') { } else if (itemLayer.item.itemType == 'vnd.farmmaps.itemtype.layer') {
let data = itemLayer.item.data as ILayerData; layer = this.createExternalLayer(itemLayer.item,itemLayer);
switch (data.interfaceType) { } else if (itemLayer.item.itemType == 'vnd.farmmaps.itemtype.temporal') {
case 'OSM': { layer = this.createTemporalLayer(itemLayer.item,itemLayer);
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;
}
}
} }
if (layer) { if (layer) {
let geometry = new GeoJSON().readGeometry(itemLayer.item.geometry); let geometry = new GeoJSON().readGeometry(itemLayer.item.geometry);
@ -241,15 +268,17 @@ export class ItemLayersComponent extends LayerGroupComponent implements OnChange
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); if(layer) {
layer.setVisible(itemLayer.visible); layer.setOpacity(itemLayer.opacity);
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) {

25
projects/common-map/src/fm-map/models/item.layer.ts
View File

@ -1,4 +1,4 @@
import { IItem } from '@farmmaps/common'; import { IItem,IListItem } from '@farmmaps/common';
import {Layer} from 'ol/layer'; import {Layer} from 'ol/layer';
export interface IItemLayer { export interface IItemLayer {
@ -24,3 +24,26 @@ export class ItemLayer implements IItemLayer {
this.item = item; 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)
}
}

4
projects/common-map/src/fm-map/reducers/map.reducer.ts
View File

@ -1,6 +1,6 @@
import { tassign } from 'tassign'; import { tassign } from 'tassign';
import { IItem,Item } from '@farmmaps/common'; 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 { IMapState} from '../models/map.state';
import { IQueryState} from '@farmmaps/common'; import { IQueryState} from '@farmmaps/common';
import { IPeriodState} from '../models/period.state'; import { IPeriodState} from '../models/period.state';
@ -164,6 +164,8 @@ export function reducer(state = initialState, action: mapActions.Actions | commo
var itemLayer = null; 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 ) { 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); itemLayer = new ItemLayer(a.item);
} else if (a.item && a.item.itemType == "vnd.farmmaps.itemtype.temporal") {
itemLayer = new TemporalItemLayer(a.item);
} }
return tassign(state, { return tassign(state, {
selectedItem: a.item, selectedItem: a.item,