+
+
+
+ Contrast :
+
+ ({{ contrast }})
+
+
+ Brightness :
+
+ ({{ brightness }})
+
+
+ `,
+ styles: [
+ `
+ :host {
+ height: 100%;
+ display: flex;
+ }
+
+ aol-map {
+ width: 70%;
+ }
+
+ .controls {
+ width: 28%;
+ padding: 1rem;
+ }
+
+ .control {
+ display: flex;
+ align-items: center;
+ justify-content: flex-start;
+ margin: 20px;
+ }
+ `,
+ ],
+})
+export class RasterComponent {
+ operation = rasterOperation;
+ brightness = 0;
+ contrast = 0;
+
+ selectLayer = 'osm';
+ @ViewChild(SourceRasterComponent, { static: true })
+ rasterSource;
+
+ beforeOperations(event) {
+ const data: RasterData = event.data;
+ data.brightness = this.brightness;
+ data.contrast = this.contrast;
+ }
+
+ updateRaster() {
+ this.rasterSource.instance.refresh();
+ }
+}
+
+/**
+ * @see https://github.com/canastro/image-filter-brightness/blob/master/src/transform.js
+ * @see https://github.com/canastro/image-filter-contrast/blob/master/src/transform.js
+ */
+export function rasterOperation(imageDatas: [ImageData], data: RasterData): ImageData {
+ const [imageData] = imageDatas;
+
+ const pixels = imageData.data;
+ const pixelsLength = pixels.length;
+ const factor = (259 * (data.contrast + 255)) / (255 * (259 - data.contrast));
+
+ for (let i = 0; i < pixelsLength; i += 4) {
+ pixels[i] += data.brightness;
+ pixels[i + 1] += data.brightness;
+ pixels[i + 2] += data.brightness;
+
+ pixels[i] = factor * (pixels[i] - 128) + 128;
+ pixels[i + 1] = factor * (pixels[i + 1] - 128) + 128;
+ pixels[i + 2] = factor * (pixels[i + 2] - 128) + 128;
+ }
+
+ return imageData;
+}
diff --git a/src/app/select-interaction/select-interaction.component.ts b/src/app/select-interaction/select-interaction.component.ts
new file mode 100644
index 00000000..6fcdaced
--- /dev/null
+++ b/src/app/select-interaction/select-interaction.component.ts
@@ -0,0 +1,48 @@
+import { Component, ViewChild } from '@angular/core';
+import { Layer as OlLayer } from 'ol/layer';
+import { LayerVectorComponent } from '../../../projects/ngx-openlayers/src/lib/layers/layervector.component';
+import { SelectEvent } from 'ol/interaction/Select';
+
+@Component({
+ selector: 'app-select-interaction',
+ template: `
+