Add custom style for vnd.farmmaps.itemntype.layer
All checks were successful
FarmMaps.Develop/FarmMapsLib/develop This commit looks good
All checks were successful
FarmMaps.Develop/FarmMapsLib/develop This commit looks good
This commit is contained in:
Willem Dantuma
parent
3c0bece982
commit
709e964579
@ -1,277 +1,277 @@
|
||||
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 { LayerVectorComponent, LayerTileComponent, LayerGroupComponent, MapComponent } from 'ngx-openlayers';
|
||||
import { ItemService } from '@farmmaps/common';
|
||||
import { AppConfig } from '@farmmaps/common';
|
||||
import { IItemLayer} from '../../../models/item.layer';
|
||||
import { ILayerData} from '../../../models/layer.data';
|
||||
import { IRenderoutputTiles,IRenderoutputImage,IGradientstop,ILayer,IHistogram} from '../../../models/color.map';
|
||||
import {Extent} from 'ol/extent';
|
||||
import Projection from 'ol/proj/Projection';
|
||||
import * as proj from 'ol/proj';
|
||||
import * as loadingstrategy from 'ol/loadingstrategy';
|
||||
import * as style from 'ol/style';
|
||||
import {Tile,Layer,Image} from 'ol/layer';
|
||||
import {XYZ,ImageStatic,OSM,BingMaps,TileWMS,TileArcGISRest} from 'ol/source';
|
||||
import {Vector as VectorSource} from 'ol/source';
|
||||
import { Vector as VectorLayer } from 'ol/layer';
|
||||
import VectorTileSource from 'ol/source/VectorTile';
|
||||
import VectorTileLayer from 'ol/layer/VectorTile';
|
||||
import {GeoJSON,MVT} from 'ol/format';
|
||||
import { from } from 'rxjs';
|
||||
|
||||
@Component({
|
||||
selector: 'fm-map-item-layers',
|
||||
template: `<ng-content></ng-content>`,
|
||||
providers: [
|
||||
{ provide: LayerGroupComponent, useExisting: forwardRef(() => ItemLayersComponent) }
|
||||
]
|
||||
})
|
||||
|
||||
export class ItemLayersComponent extends LayerGroupComponent implements OnChanges, OnInit {
|
||||
@Input() itemLayers: IItemLayer[];
|
||||
@Input() itemLayer: IItemLayer;
|
||||
private _apiEndPoint: string;
|
||||
|
||||
constructor(private itemService: ItemService, @Host() private map: MapComponent, public appConfig: AppConfig) {
|
||||
super(map);
|
||||
this._apiEndPoint = appConfig.getConfig("apiEndPoint");
|
||||
}
|
||||
|
||||
private styleCache = {}
|
||||
|
||||
componentToHex(c) {
|
||||
var hex = c.toString(16);
|
||||
return hex.length == 1 ? "0" + hex : hex;
|
||||
}
|
||||
|
||||
rgbaToHex(r, g, b,a) {
|
||||
return "#" + this.componentToHex(r) + this.componentToHex(g) + this.componentToHex(b) + this.componentToHex(a);
|
||||
}
|
||||
|
||||
getColorFromGradient(layer: ILayer, feature): style.Style {
|
||||
var value = feature.get(layer.name);
|
||||
var gradient: IGradientstop[] = layer.renderer.colorMap.gradient;
|
||||
var histogram: IHistogram = layer.renderer.band.histogram;
|
||||
var index = (value - histogram.min) / histogram.max;
|
||||
var min = gradient[0];
|
||||
var max = gradient[gradient.length - 1];
|
||||
for (var n = 0; n < gradient.length; n++) {
|
||||
var s = gradient[n];
|
||||
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;
|
||||
}
|
||||
var i = index - min.relativestop;
|
||||
var size = max.relativestop - min.relativestop;
|
||||
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 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));
|
||||
|
||||
return new style.Style(
|
||||
{
|
||||
image: new style.Circle({
|
||||
fill: new style.Fill({
|
||||
color: this.rgbaToHex(red,green,blue,alpha)
|
||||
}),
|
||||
radius: 3
|
||||
}),
|
||||
fill: new style.Fill({
|
||||
color: this.rgbaToHex(red, green, blue, alpha)
|
||||
}),
|
||||
stroke: new style.Stroke({
|
||||
color: this.rgbaToHex(red, green, blue, alpha),
|
||||
width: 1.25
|
||||
}),
|
||||
});
|
||||
}
|
||||
|
||||
createLayer(itemLayer: IItemLayer): Layer {
|
||||
var layer: Layer = null;
|
||||
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()}` });
|
||||
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/{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?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;
|
||||
var 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 == "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"));
|
||||
}
|
||||
}
|
||||
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
|
||||
}),
|
||||
stroke: new style.Stroke({
|
||||
color: color,
|
||||
width: 1.25
|
||||
}),
|
||||
radius: 5
|
||||
}),
|
||||
}
|
||||
)
|
||||
}
|
||||
return this.styleCache[key];
|
||||
}
|
||||
});
|
||||
}
|
||||
} 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;
|
||||
}
|
||||
}
|
||||
}
|
||||
if (layer) {
|
||||
let geometry = new GeoJSON().readGeometry(itemLayer.item.geometry);
|
||||
let extent = geometry ? proj.transformExtent(geometry.getExtent(), 'EPSG:4326', 'EPSG:3857') : null;
|
||||
if (extent) layer.setExtent(extent);
|
||||
}
|
||||
|
||||
return layer;
|
||||
}
|
||||
|
||||
ngOnInit() {
|
||||
super.ngOnInit();
|
||||
this.updateLayers(this.itemLayers);
|
||||
}
|
||||
|
||||
updateLayers(itemLayers: IItemLayer[]) {
|
||||
if (itemLayers) {
|
||||
var olLayers = this.instance.getLayers();
|
||||
itemLayers.forEach((itemLayer, index) => {
|
||||
|
||||
var layer = itemLayer.layer;
|
||||
let olIndex = olLayers.getArray().indexOf(layer);
|
||||
if (olIndex < 0) {
|
||||
// New layer: we add it to the map
|
||||
layer = this.createLayer(itemLayer);
|
||||
if (layer) {
|
||||
itemLayer.layer = 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);
|
||||
});
|
||||
// Remove the layers that have disapeared from childrenLayers
|
||||
if (olLayers.getLength() > itemLayers.length) {
|
||||
for (let i = itemLayers.length; i < olLayers.getLength(); i++) {
|
||||
olLayers.removeAt(i);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
ngOnChanges(changes: SimpleChanges) {
|
||||
if (this.instance) {
|
||||
if (changes['itemLayers']) {
|
||||
var itemLayers = changes['itemLayers'].currentValue as IItemLayer[];
|
||||
this.updateLayers(itemLayers);
|
||||
}
|
||||
if (changes['itemLayer']) {
|
||||
var itemLayer = changes['itemLayer'].currentValue as IItemLayer;
|
||||
if(itemLayer) {
|
||||
this.updateLayers([itemLayer]);
|
||||
} else {
|
||||
this.updateLayers([]);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
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 { LayerVectorComponent, LayerTileComponent, LayerGroupComponent, MapComponent } from 'ngx-openlayers';
|
||||
import { ItemService } from '@farmmaps/common';
|
||||
import { AppConfig } from '@farmmaps/common';
|
||||
import { IItemLayer} from '../../../models/item.layer';
|
||||
import { ILayerData} from '../../../models/layer.data';
|
||||
import { IRenderoutputTiles,IRenderoutputImage,IGradientstop,ILayer,IHistogram} from '../../../models/color.map';
|
||||
import {Extent} from 'ol/extent';
|
||||
import Projection from 'ol/proj/Projection';
|
||||
import * as proj from 'ol/proj';
|
||||
import * as loadingstrategy from 'ol/loadingstrategy';
|
||||
import * as style from 'ol/style';
|
||||
import {Tile,Layer,Image} from 'ol/layer';
|
||||
import {XYZ,ImageStatic,OSM,BingMaps,TileWMS,TileArcGISRest} from 'ol/source';
|
||||
import {Vector as VectorSource} from 'ol/source';
|
||||
import { Vector as VectorLayer } from 'ol/layer';
|
||||
import VectorTileSource from 'ol/source/VectorTile';
|
||||
import VectorTileLayer from 'ol/layer/VectorTile';
|
||||
import {GeoJSON,MVT} from 'ol/format';
|
||||
import { from } from 'rxjs';
|
||||
|
||||
@Component({
|
||||
selector: 'fm-map-item-layers',
|
||||
template: `<ng-content></ng-content>`,
|
||||
providers: [
|
||||
{ provide: LayerGroupComponent, useExisting: forwardRef(() => ItemLayersComponent) }
|
||||
]
|
||||
})
|
||||
|
||||
export class ItemLayersComponent extends LayerGroupComponent implements OnChanges, OnInit {
|
||||
@Input() itemLayers: IItemLayer[];
|
||||
@Input() itemLayer: IItemLayer;
|
||||
private _apiEndPoint: string;
|
||||
|
||||
constructor(private itemService: ItemService, @Host() private map: MapComponent, public appConfig: AppConfig) {
|
||||
super(map);
|
||||
this._apiEndPoint = appConfig.getConfig("apiEndPoint");
|
||||
}
|
||||
|
||||
private styleCache = {}
|
||||
|
||||
componentToHex(c) {
|
||||
var hex = c.toString(16);
|
||||
return hex.length == 1 ? "0" + hex : hex;
|
||||
}
|
||||
|
||||
rgbaToHex(r, g, b,a) {
|
||||
return "#" + this.componentToHex(r) + this.componentToHex(g) + this.componentToHex(b) + this.componentToHex(a);
|
||||
}
|
||||
|
||||
getColorFromGradient(layer: ILayer, feature): style.Style {
|
||||
var value = feature.get(layer.name);
|
||||
var gradient: IGradientstop[] = layer.renderer.colorMap.gradient;
|
||||
var histogram: IHistogram = layer.renderer.band.histogram;
|
||||
var index = (value - histogram.min) / histogram.max;
|
||||
var min = gradient[0];
|
||||
var max = gradient[gradient.length - 1];
|
||||
for (var n = 0; n < gradient.length; n++) {
|
||||
var s = gradient[n];
|
||||
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;
|
||||
}
|
||||
var i = index - min.relativestop;
|
||||
var size = max.relativestop - min.relativestop;
|
||||
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 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));
|
||||
|
||||
return new style.Style(
|
||||
{
|
||||
image: new style.Circle({
|
||||
fill: new style.Fill({
|
||||
color: this.rgbaToHex(red,green,blue,alpha)
|
||||
}),
|
||||
radius: 3
|
||||
}),
|
||||
fill: new style.Fill({
|
||||
color: this.rgbaToHex(red, green, blue, alpha)
|
||||
}),
|
||||
stroke: new style.Stroke({
|
||||
color: this.rgbaToHex(red, green, blue, alpha),
|
||||
width: 1.25
|
||||
}),
|
||||
});
|
||||
}
|
||||
|
||||
createLayer(itemLayer: IItemLayer): Layer {
|
||||
var layer: Layer = null;
|
||||
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()}` });
|
||||
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/{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?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;
|
||||
var 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);
|
||||
}
|
||||
})
|
||||
} 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"));
|
||||
}
|
||||
}
|
||||
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
|
||||
}),
|
||||
stroke: new style.Stroke({
|
||||
color: color,
|
||||
width: 1.25
|
||||
}),
|
||||
radius: 5
|
||||
}),
|
||||
}
|
||||
)
|
||||
}
|
||||
return this.styleCache[key];
|
||||
}
|
||||
});
|
||||
}
|
||||
} 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;
|
||||
}
|
||||
}
|
||||
}
|
||||
if (layer) {
|
||||
let geometry = new GeoJSON().readGeometry(itemLayer.item.geometry);
|
||||
let extent = geometry ? proj.transformExtent(geometry.getExtent(), 'EPSG:4326', 'EPSG:3857') : null;
|
||||
if (extent) layer.setExtent(extent);
|
||||
}
|
||||
|
||||
return layer;
|
||||
}
|
||||
|
||||
ngOnInit() {
|
||||
super.ngOnInit();
|
||||
this.updateLayers(this.itemLayers);
|
||||
}
|
||||
|
||||
updateLayers(itemLayers: IItemLayer[]) {
|
||||
if (itemLayers) {
|
||||
var olLayers = this.instance.getLayers();
|
||||
itemLayers.forEach((itemLayer, index) => {
|
||||
|
||||
var layer = itemLayer.layer;
|
||||
let olIndex = olLayers.getArray().indexOf(layer);
|
||||
if (olIndex < 0) {
|
||||
// New layer: we add it to the map
|
||||
layer = this.createLayer(itemLayer);
|
||||
if (layer) {
|
||||
itemLayer.layer = 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);
|
||||
});
|
||||
// Remove the layers that have disapeared from childrenLayers
|
||||
if (olLayers.getLength() > itemLayers.length) {
|
||||
for (let i = itemLayers.length; i < olLayers.getLength(); i++) {
|
||||
olLayers.removeAt(i);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
ngOnChanges(changes: SimpleChanges) {
|
||||
if (this.instance) {
|
||||
if (changes['itemLayers']) {
|
||||
var itemLayers = changes['itemLayers'].currentValue as IItemLayer[];
|
||||
this.updateLayers(itemLayers);
|
||||
}
|
||||
if (changes['itemLayer']) {
|
||||
var itemLayer = changes['itemLayer'].currentValue as IItemLayer;
|
||||
if(itemLayer) {
|
||||
this.updateLayers([itemLayer]);
|
||||
} else {
|
||||
this.updateLayers([]);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -54,19 +54,27 @@ export class ItemVectorSourceComponent extends SourceVectorComponent implements
|
||||
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() {
|
||||
this.strategy = loadingstrategy.bbox;
|
||||
this.format = new GeoJSON();
|
||||
this._select = new Select({
|
||||
style: (feature) => {
|
||||
return this.stylesCache['selected'];
|
||||
return this.getSelectedStyle(feature);
|
||||
},
|
||||
hitTolerance: 10,
|
||||
layers: [this.layer.instance as Layer]
|
||||
});
|
||||
this._hoverSelect = new Select({
|
||||
style: (feature) => {
|
||||
return this.stylesCache['selected'];
|
||||
return this.getSelectedStyle(feature);
|
||||
},
|
||||
hitTolerance: 10,
|
||||
condition: (e: MapBrowserEvent) => {
|
||||
@ -148,7 +156,7 @@ export class ItemVectorSourceComponent extends SourceVectorComponent implements
|
||||
for (const key in styles) {
|
||||
if (styles.hasOwnProperty(key)) {
|
||||
let style = styles[key];
|
||||
if(style.geometry == null) {
|
||||
if(style.geometry_ == null) {
|
||||
style.setGeometry((feature) => this.geometry(feature));
|
||||
}
|
||||
this.stylesCache[key]=style;
|
||||
|
||||
@ -32,6 +32,7 @@ import {Extent,createEmpty,extend } from 'ol/extent';
|
||||
import {transform} from 'ol/proj';
|
||||
import { query } from '@angular/animations';
|
||||
import { tassign } from 'tassign';
|
||||
import * as style from 'ol/style';
|
||||
|
||||
|
||||
@Component({
|
||||
@ -156,6 +157,26 @@ export class MapComponent implements OnInit, OnDestroy,AfterViewInit {
|
||||
this.query$.pipe(withLatestFrom(this.mapState$)).subscribe((state) => {
|
||||
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;
|
||||
|
||||
Loading…
Reference in New Issue
Block a user