Some refactoring
Willem Dantuma
parent
795e8fdf0e
commit
3094170cc2
|
|
@ -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) {
|
||||
|
|
|
|||
|
|
@ -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)
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
|
|
|||
|
|
@ -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,
|
||||
|
|
|
|||
Loading…
Reference in New Issue