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

AW-6046 ng-openlayers

Browse Source
This commit is contained in:
Peter (extern)
2024-04-10 14:06:44 +02:00
parent 9c270bfe75
commit 4384b12944
100 changed files with 43 additions and 4228 deletions
Download Patch File Download Diff File Expand all files Collapse all files

58
projects/ng-openlayers/src/lib/styles/circle.component.ts
View File

@@ -1,58 +0,0 @@
import { Component, Input, Host, AfterContentInit, OnChanges, OnDestroy, SimpleChanges } from '@angular/core';
import { Circle, Fill, Stroke } from 'ol/style';
import { StyleComponent } from './style.component';
@Component({
selector: 'aol-style-circle',
template: ` <ng-content></ng-content> `,
})
export class StyleCircleComponent implements AfterContentInit, OnChanges, OnDestroy {
@Input()
fill: Fill;
@Input()
radius: number;
@Input()
snapToPixel: boolean;
@Input()
stroke: Stroke;
public componentType = 'style-circle';
public instance: Circle;
constructor(@Host() private host: StyleComponent) {}
/**
* WORK-AROUND: since the re-rendering is not triggered on style change
* we trigger a radius change.
* see openlayers #6233 and #5775
*/
update() {
if (!!this.instance) {
// console.log('setting ol.style.Circle instance\'s radius');
this.instance.setRadius(this.radius);
}
this.host.update();
}
ngAfterContentInit() {
// console.log('creating ol.style.Circle instance with: ', this);
this.instance = new Circle(this);
this.host.instance.setImage(this.instance);
this.host.update();
}
ngOnChanges(changes: SimpleChanges) {
if (!this.instance) {
return;
}
if (changes.radius) {
this.instance.setRadius(changes.radius.currentValue);
}
// console.log('changes detected in aol-style-circle, setting new radius: ', changes['radius'].currentValue);
}
ngOnDestroy() {
// console.log('removing aol-style-circle');
this.host.instance.setImage(null);
}
}

68
projects/ng-openlayers/src/lib/styles/fill.component.ts
View File

@@ -1,68 +0,0 @@
import { Component, Input, Optional, OnInit, OnChanges, SimpleChanges } from '@angular/core';
import { Fill } from 'ol/style';
import { StyleComponent } from './style.component';
import { StyleCircleComponent } from './circle.component';
import { StyleTextComponent } from './text.component';
import { Color } from 'ol/color';
import { ColorLike } from 'ol/colorlike';
@Component({
selector: 'aol-style-fill',
template: ` <div class="aol-style-fill"></div> `,
})
export class StyleFillComponent implements OnInit, OnChanges {
@Input()
color: Color | ColorLike;
public instance: Fill;
private readonly host: StyleComponent | StyleCircleComponent | StyleTextComponent;
constructor(
@Optional() styleHost: StyleComponent,
@Optional() styleCircleHost: StyleCircleComponent,
@Optional() styleTextHost: StyleTextComponent
) {
if (!styleHost) {
throw new Error('aol-style-stroke must be a descendant of aol-style');
}
if (!!styleTextHost) {
this.host = styleTextHost;
} else if (!!styleCircleHost) {
this.host = styleCircleHost;
} else {
this.host = styleHost;
}
// console.log('creating aol-style-fill with: ', this);
}
ngOnInit() {
// console.log('creating ol.style.Fill instance with: ', this);
this.instance = new Fill(this);
switch (this.host.componentType) {
case 'style':
this.host.instance.setFill(this.instance);
// console.log('setting ol.style instance\'s fill:', this.host);
break;
case 'style-text':
this.host.instance.setFill(this.instance);
break;
case 'style-circle':
(this.host as StyleCircleComponent).fill = this.instance;
// console.log('setting ol.style.circle instance\'s fill:', this.host);
break;
default:
throw new Error('unknown host type: ' + this.host);
}
}
ngOnChanges(changes: SimpleChanges) {
if (!this.instance) {
return;
}
if (changes.color) {
this.instance.setColor(changes.color.currentValue);
}
this.host.update();
// console.log('changes detected in aol-style-fill, setting new color: ', changes);
}
}

80
projects/ng-openlayers/src/lib/styles/icon.component.ts
View File

@@ -1,80 +0,0 @@
import { Component, Input, Host, OnInit, OnChanges, SimpleChanges } from '@angular/core';
import { Icon } from 'ol/style';
// TODO https://github.com/openlayers/openlayers/issues/12694
// import IconAnchorUnits from 'ol/style/IconAnchorUnits';
// import IconOrigin from 'ol/style/IconOrigin';
import { StyleComponent } from './style.component';
import { IconAnchorUnits, IconOrigin } from 'ol/style/Icon';
@Component({
selector: 'aol-style-icon',
template: ` <div class="aol-style-icon"></div> `,
})
export class StyleIconComponent implements OnInit, OnChanges {
@Input()
anchor: [number, number];
@Input()
anchorXUnits: IconAnchorUnits;
@Input()
anchorYUnits: IconAnchorUnits;
@Input()
anchorOrigin: IconOrigin;
@Input()
color: [number, number, number, number];
@Input()
crossOrigin: IconOrigin;
@Input()
img: HTMLCanvasElement | HTMLImageElement;
@Input()
offset: [number, number];
@Input()
offsetOrigin: IconOrigin;
@Input()
opacity: number;
@Input()
scale: number;
@Input()
snapToPixel: boolean;
@Input()
rotateWithView: boolean;
@Input()
rotation: number;
@Input()
size: [number, number];
@Input()
imgSize: [number, number];
@Input()
src: string;
public instance: Icon;
constructor(@Host() private host: StyleComponent) {}
ngOnInit() {
// console.log('creating ol.style.Icon instance with: ', this);
this.instance = new Icon(this);
this.host.instance.setImage(this.instance);
}
ngOnChanges(changes: SimpleChanges) {
if (!this.instance) {
return;
}
if (changes.opacity) {
this.instance.setOpacity(changes.opacity.currentValue);
}
if (changes.rotation) {
this.instance.setRotation(changes.rotation.currentValue);
}
if (changes.scale) {
this.instance.setScale(changes.scale.currentValue);
}
if (changes.src) {
this.instance = new Icon(this);
this.host.instance.setImage(this.instance);
}
this.host.update();
// console.log('changes detected in aol-style-icon: ', changes);
}
}

95
projects/ng-openlayers/src/lib/styles/stroke.component.ts
View File

@@ -1,95 +0,0 @@
import { Component, Input, Optional, OnInit, OnChanges, SimpleChanges } from '@angular/core';
import { Stroke } from 'ol/style';
import { StyleComponent } from './style.component';
import { StyleCircleComponent } from './circle.component';
import { StyleTextComponent } from './text.component';
import { Color } from 'ol/color';
import { ColorLike } from 'ol/colorlike';
@Component({
selector: 'aol-style-stroke',
template: ` <div class="aol-style-stroke"></div> `,
})
export class StyleStrokeComponent implements OnInit, OnChanges {
@Input()
color: Color | ColorLike;
@Input()
lineCap: CanvasLineCap | undefined;
@Input()
lineDash: number[];
@Input()
lineJoin: CanvasLineJoin | undefined;
@Input()
miterLimit: number;
@Input()
width: number;
public instance: Stroke;
/* the typings do not have the setters */
private readonly host: StyleComponent | StyleCircleComponent | StyleTextComponent;
constructor(
@Optional() styleHost: StyleComponent,
@Optional() styleCircleHost: StyleCircleComponent,
@Optional() styleTextHost: StyleTextComponent
) {
if (!styleHost) {
throw new Error('aol-style-stroke must be a descendant of aol-style');
}
if (!!styleTextHost) {
this.host = styleTextHost;
} else if (!!styleCircleHost) {
this.host = styleCircleHost;
} else {
this.host = styleHost;
}
// console.log('creating aol-style-stroke with: ', this);
}
ngOnInit() {
// console.log('creating ol.style.Stroke instance with: ', this);
this.instance = new Stroke(this);
switch (this.host.componentType) {
case 'style':
this.host.instance.setStroke(this.instance);
// console.log('setting ol.style instance\'s stroke:', this.host);
break;
case 'style-text':
this.host.instance.setStroke(this.instance);
break;
case 'style-circle':
(this.host as StyleCircleComponent).stroke = this.instance;
// console.log('setting ol.style.circle instance\'s stroke:', this.host);
break;
default:
throw new Error('unknown host type: ' + this.host);
// break;
}
}
ngOnChanges(changes: SimpleChanges) {
if (!this.instance) {
return;
}
if (changes.color) {
this.instance.setColor(changes.color.currentValue);
}
if (changes.lineCap) {
this.instance.setLineCap(changes.lineCap.currentValue);
}
if (changes.lineDash) {
this.instance.setLineDash(changes.lineDash.currentValue);
}
if (changes.lineJoin) {
this.instance.setLineJoin(changes.lineJoin.currentValue);
}
if (changes.miterLimit) {
this.instance.setMiterLimit(changes.miterLimit.currentValue);
}
if (changes.width) {
this.instance.setWidth(changes.width.currentValue);
}
this.host.update();
// console.log('changes detected in aol-style-stroke, setting new properties: ', changes);
}
}

48
projects/ng-openlayers/src/lib/styles/style.component.ts
View File

@@ -1,48 +0,0 @@
import { Component, Input, Optional, OnInit } from '@angular/core';
import { Fill, Image, Stroke, Style, Text } from 'ol/style';
import { Geometry } from 'ol/geom';
import { FeatureComponent } from '../feature.component';
import { LayerVectorComponent } from '../layers/layervector.component';
import { GeometryFunction } from 'ol/style/Style';
@Component({
selector: 'aol-style',
template: ` <ng-content></ng-content> `,
})
export class StyleComponent implements OnInit {
@Input()
geometry: string | Geometry | GeometryFunction;
@Input()
fill: Fill;
@Input()
image: Image;
@Input()
stroke: Stroke;
@Input()
text: Text;
@Input()
zIndex: number;
public instance: Style;
public componentType = 'style';
private readonly host: FeatureComponent | LayerVectorComponent;
constructor(@Optional() featureHost: FeatureComponent, @Optional() layerHost: LayerVectorComponent) {
// console.log('creating aol-style');
this.host = !!featureHost ? featureHost : layerHost;
if (!this.host) {
throw new Error('aol-style must be applied to a feature or a layer');
}
}
update() {
// console.log('updating style\'s host: ', this.host);
this.host.instance.changed();
}
ngOnInit() {
// console.log('creating aol-style instance with: ', this);
this.instance = new Style(this);
this.host.instance.setStyle(this.instance);
}
}

78
projects/ng-openlayers/src/lib/styles/text.component.ts
View File

@@ -1,78 +0,0 @@
import { Component, Input, Optional, OnInit, OnChanges, SimpleChanges } from '@angular/core';
import { Text } from 'ol/style';
import { StyleComponent } from './style.component';
@Component({
selector: 'aol-style-text',
template: ` <div class="aol-style-text"></div> `,
})
export class StyleTextComponent implements OnInit, OnChanges {
@Input()
font: string | undefined;
@Input()
offsetX: number | undefined;
@Input()
offsetY: number | undefined;
@Input()
scale: number | undefined;
@Input()
rotateWithView: boolean | undefined;
@Input()
rotation: number | undefined;
@Input()
text: string | undefined;
@Input()
textAlign: CanvasTextAlign | undefined;
@Input()
textBaseLine: string | undefined;
public instance: Text;
public componentType = 'style-text';
constructor(@Optional() private host: StyleComponent) {
if (!host) {
throw new Error('aol-style-text must be a descendant of aol-style');
}
// console.log('creating aol-style-text with: ', this);
}
ngOnInit() {
// console.log('creating ol.style.Text instance with: ', this);
this.instance = new Text(this);
this.host.instance.setText(this.instance);
}
ngOnChanges(changes: SimpleChanges) {
if (!this.instance) {
return;
}
if (changes.font) {
this.instance.setFont(changes.font.currentValue);
}
if (changes.offsetX) {
this.instance.setOffsetX(changes.offsetX.currentValue);
}
if (changes.offsetY) {
this.instance.setOffsetY(changes.offsetY.currentValue);
}
if (changes.scale) {
this.instance.setScale(changes.scale.currentValue);
}
if (changes.rotation) {
this.instance.setRotation(changes.rotation.currentValue);
}
if (changes.text) {
this.instance.setText(changes.text.currentValue);
}
if (changes.textAlign) {
this.instance.setTextAlign(changes.textAlign.currentValue);
}
if (changes.textBaseLine) {
this.instance.setTextBaseline(changes.textBaseLine.currentValue);
}
this.host.update();
// console.log('changes detected in aol-style-text, setting new properties: ', changes);
}
update() {}
}