@artstesh/maps 1.0.8 → 1.0.9

package/dist/fesm2015/maps-components.js

@@ -3,19 +3,20 @@ import { Component, Injectable, ChangeDetectionStrategy, Input, ViewChild, NgMod
 import * as i6 from '@angular/common';
 import { CommonModule } from '@angular/common';
 import { Feature } from 'ol';
-import { Point } from 'ol/geom';
+import { Point, LineString } from 'ol/geom';
 import { GeoJSON, WKT } from 'ol/format';
 import { getCenter, createEmpty, extend } from 'ol/extent';
-import { get, useGeographic } from 'ol/proj';
+import { get, useGeographic, transform } from 'ol/proj';
 import { PostboyGenericMessage, PostboyCallbackMessage, PostboyService, PostboyAbstractRegistrator } from '@artstesh/postboy';
 import { first, filter, auditTime } from 'rxjs/operators';
 import { Vector, XYZ } from 'ol/source';
 import { Draw } from 'ol/interaction';
+import { createRegularPolygon } from 'ol/interaction/Draw';
 import TileLayer from 'ol/layer/Tile';
 import OSM from 'ol/source/OSM';
 import { Vector as Vector$1 } from 'ol/layer';
 import { bbox } from 'ol/loadingstrategy';
-import { fromExtent } from 'ol/geom/Polygon';
+import Polygon, { fromExtent } from 'ol/geom/Polygon';
 import Cluster from 'ol/source/Cluster';
 import { combineLatest } from 'rxjs';
 import Map from 'ol/Map';
@@ -23,6 +24,7 @@ import View from 'ol/View';
 import Overlay from 'ol/Overlay';
 import Style from 'ol/style/Style';
 import { Icon, Circle, Fill, Stroke, Text } from 'ol/style';
+import { METERS_PER_UNIT } from 'ol/proj/epsg4326';
 
 class DestructibleComponent {
     constructor() {
@@ -177,6 +179,7 @@ class PolygonModel {
 var DrawingType;
 (function (DrawingType) {
     DrawingType[DrawingType["Polygon"] = 1] = "Polygon";
+    DrawingType[DrawingType["Circle"] = 2] = "Circle";
 })(DrawingType || (DrawingType = {}));
 
 var FeatureOutputFormat;
@@ -341,6 +344,19 @@ class DrawingFinishedEvent extends PostboyGenericMessage {
 }
 DrawingFinishedEvent.ID = 'c724b68e-b4eb-4783-90f1-a8e31973fd36';
 
+class GenerateDrawQuery extends PostboyCallbackMessage {
+    constructor(layer, style, type) {
+        super();
+        this.layer = layer;
+        this.style = style;
+        this.type = type;
+    }
+    get id() {
+        return GenerateDrawQuery.ID;
+    }
+}
+GenerateDrawQuery.ID = 'f01c99ba-0953-4ab5-82f9-04e6fbb678c1';
+
 class MapPostboyService extends PostboyService {
     constructor() {
         super();
@@ -540,17 +556,18 @@ class DrawingService {
                     this.clearInteraction(l);
                     return;
                 }
-                const cancelSub = this.observeCancelation(ev, l);
-                this.drawInteraction = new Draw({
-                    source: l.getSource(),
-                    type: DrawingType[ev.type],
-                    style: ev.style,
-                });
-                this.map.addInteraction(this.drawInteraction);
-                this.drawInteraction.on('drawend', (evt) => {
-                    cancelSub.unsubscribe();
-                    this.onEnd(evt, ev, l);
+                const drawQuery = new GenerateDrawQuery(l, ev.style, ev.type);
+                drawQuery.result.subscribe((draw) => {
+                    var _a;
+                    const cancelSub = this.observeCancelation(ev, l);
+                    this.drawInteraction = draw;
+                    (_a = this.map) === null || _a === void 0 ? void 0 : _a.addInteraction(this.drawInteraction);
+                    this.drawInteraction.on('drawend', (evt) => {
+                        cancelSub.unsubscribe();
+                        this.onEnd(evt, ev, l);
+                    });
                 });
+                this.postboy.fire(drawQuery);
             });
         });
         this.observeMapRender();
@@ -595,10 +612,31 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImpo
             type: Injectable
         }], ctorParameters: function () { return [{ type: MapPostboyService }]; } });
 
+class DrawingGenerationService {
+    constructor(postboy) {
+        this.postboy = postboy;
+    }
+    up() {
+        this.postboy.subscribe(GenerateDrawQuery.ID).subscribe((ev) => {
+            ev.finish(new Draw({
+                source: ev.layer.getSource(),
+                type: DrawingType[ev.type],
+                style: ev.style,
+                geometryFunction: ev.type !== DrawingType.Circle ? undefined : createRegularPolygon(32),
+            }));
+        });
+    }
+}
+DrawingGenerationService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: DrawingGenerationService, deps: [{ token: MapPostboyService }], target: i0.ɵɵFactoryTarget.Injectable });
+DrawingGenerationService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: DrawingGenerationService });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: DrawingGenerationService, decorators: [{
+            type: Injectable
+        }], ctorParameters: function () { return [{ type: MapPostboyService }]; } });
+
 class MessageRegistratorService extends PostboyAbstractRegistrator {
-    constructor(service, management, state, feature, interaction, drawing) {
+    constructor(service, management, state, feature, interaction, drawing, drawGenerator) {
         super(service);
-        this.registerServices([management, state, interaction, feature, drawing]);
+        this.registerServices([management, state, interaction, feature, drawing, drawGenerator]);
     }
     _up() {
         this.registerReplay(MapRenderedEvent.ID);
@@ -615,13 +653,14 @@ class MessageRegistratorService extends PostboyAbstractRegistrator {
         this.registerSubject(StartDrawingCommand.ID);
         this.registerSubject(GetLayerQuery.ID);
         this.registerSubject(DrawingFinishedEvent.ID);
+        this.registerSubject(GenerateDrawQuery.ID);
     }
 }
-MessageRegistratorService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: MessageRegistratorService, deps: [{ token: MapPostboyService }, { token: MapManagementService }, { token: MapStateService }, { token: MapFeatureService }, { token: MapClickService }, { token: DrawingService }], target: i0.ɵɵFactoryTarget.Injectable });
+MessageRegistratorService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: MessageRegistratorService, deps: [{ token: MapPostboyService }, { token: MapManagementService }, { token: MapStateService }, { token: MapFeatureService }, { token: MapClickService }, { token: DrawingService }, { token: DrawingGenerationService }], target: i0.ɵɵFactoryTarget.Injectable });
 MessageRegistratorService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: MessageRegistratorService });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: MessageRegistratorService, decorators: [{
             type: Injectable
-        }], ctorParameters: function () { return [{ type: MapPostboyService }, { type: MapManagementService }, { type: MapStateService }, { type: MapFeatureService }, { type: MapClickService }, { type: DrawingService }]; } });
+        }], ctorParameters: function () { return [{ type: MapPostboyService }, { type: MapManagementService }, { type: MapStateService }, { type: MapFeatureService }, { type: MapClickService }, { type: DrawingService }, { type: DrawingGenerationService }]; } });
 
 class TileLayerSettings {
     constructor() {
@@ -1198,6 +1237,7 @@ MapPlateComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", vers
         MapClickService,
         MapFeatureService,
         DrawingService,
+        DrawingGenerationService,
     ], usesInheritance: true, ngImport: i0, template: "<ng-content></ng-content>\r\n<lib-osm-tile-layer *ngIf=\"osmUrl && map\" [map]=\"map\" [url]=\"osmUrl\"></lib-osm-tile-layer>\r\n<lib-feature-layer *ngIf=\"map\" [settings]=\"drawingLayerSettings\"></lib-feature-layer>\r\n", styles: ["lib-map-plate{position:relative;display:flex;flex-direction:column;height:100%}\n"], components: [{ type: OsmTileLayerComponent, selector: "lib-osm-tile-layer", inputs: ["url", "map"] }, { type: FeatureLayerComponent, selector: "lib-feature-layer", inputs: ["settings"] }], directives: [{ type: i6.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: MapPlateComponent, decorators: [{
             type: Component,
@@ -1213,6 +1253,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImpo
                         MapClickService,
                         MapFeatureService,
                         DrawingService,
+                        DrawingGenerationService,
                     ],
                 }]
         }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: MapPostboyService }, { type: MapPlateFactory }, { type: MessageRegistratorService }, { type: i0.ChangeDetectorRef }]; }, propDecorators: { settings: [{
@@ -1502,6 +1543,57 @@ class TextStyleHelper {
     }
 }
 
+class StringifyFeatureHelper {
+    static polygon(feature, format = FeatureOutputFormat.GeoJson) {
+        return format === FeatureOutputFormat.GeoJson
+            ? new GeoJSON().writeFeature(feature)
+            : new WKT().writeFeature(feature);
+    }
+    static circle(feature, format = FeatureOutputFormat.GeoJson) {
+        // const clone = feature.clone();
+        // clone.setGeometry(fromCircle(feature.getGeometry()! as Circle));
+        const tetemp = feature.getGeometryName();
+        const circle = feature.getGeometry();
+        // const temp = StringifyFeatureHelper.drawCircle(circle.getCenter(), circle.getRadius());
+        const ttt = feature.getGeometry().getExtent();
+        const eastPoint = [ttt[2], (ttt[1] + ttt[3]) / 2];
+        const aaa = [
+            ...transform([ttt[0], ttt[1]], 'EPSG:4326', 'EPSG:3857'),
+            ...transform([ttt[2], ttt[3]], 'EPSG:4326', 'EPSG:3857'),
+        ];
+        const radius = (aaa[2] - aaa[0]) / 2;
+        const radius2 = new LineString([circle.getCenter(), eastPoint]).getLength();
+        const polygonGeom = new Polygon(StringifyFeatureHelper.drawCircle(circle.getCenter(), radius));
+        // var edgeCoordinate = [circle.getCenter()[0] + radius, circle.getCenter()[1]];
+        // var wgs84Sphere = new Sphere(6378137);
+        return StringifyFeatureHelper.polygon(new Feature(polygonGeom), format);
+        //  const rad = circle.getRadius();
+        //  const degrees = 180 / Math.PI; // radians to degrees
+        //  const radians = Math.PI / 180; // degrees to radians
+        //  const rlat = rad * degrees * 1000;
+        //  const rlng = rad * radians;
+        //  return StringifyFeatureHelper.polygon(new Feature<Geometry>(circular(circle.getCenter(),circle.getRadius() * METERS_PER_UNIT)), format);
+    }
+    static drawCircle(point, radius) {
+        const tetetemp = transform(point, 'EPSG:4326', 'EPSG:3857');
+        // const tetetemp = point;
+        const radians = Math.PI / 180; // degrees to radians
+        const degrees = 180 / Math.PI; // radians to degrees
+        const earthsradius = 6378137.0;
+        const rlat = (radius / earthsradius) * degrees;
+        const rlng = rlat / Math.cos(tetetemp[1] * radians);
+        const extp = [];
+        for (let i = 0; i <= 32; i++) {
+            const theta = Math.PI * (i / 16);
+            extp.push([
+                tetetemp[0] + rlng * Math.cos(theta) * METERS_PER_UNIT,
+                tetetemp[1] + rlat * Math.sin(theta) * METERS_PER_UNIT,
+            ]);
+        }
+        return [extp.map((e) => transform(e, 'EPSG:3857', 'EPSG:4326'))];
+    }
+}
+
 /*
  * Public API Surface of maps
  */
@@ -1514,5 +1606,5 @@ class TextStyleHelper {
  * Generated bundle index. Do not edit.
  */
 
-export { CancelDrawingCommand, CloseTooltipCommand, ClusterLayerComponent, ClusterLayerSettings, DrawingType, FeatureLayerComponent, FeatureLayerSettings, FeatureOutputFormat, MapClickEvent, MapLyrs, MapLyrsLabel, MapModule, MapMoveEndEvent, MapPlateComponent, MapPostboyService, MapRenderedEvent, MapSettings, MarkerModel, MarkerStyleHelper, MarkersComponent, MessageRegistratorService, OsmTileLayerComponent, PolygonModel, PolygonStyleHelper, PolygonsComponent, StartDrawingCommand, TextStyleHelper, TileLayerComponent, TileLayerSettings, TooltipComponent, TooltipSettings };
+export { CancelDrawingCommand, CloseTooltipCommand, ClusterLayerComponent, ClusterLayerSettings, DrawingType, FeatureLayerComponent, FeatureLayerSettings, FeatureOutputFormat, MapClickEvent, MapLyrs, MapLyrsLabel, MapModule, MapMoveEndEvent, MapPlateComponent, MapPostboyService, MapRenderedEvent, MapSettings, MarkerModel, MarkerStyleHelper, MarkersComponent, MessageRegistratorService, OsmTileLayerComponent, PolygonModel, PolygonStyleHelper, PolygonsComponent, StartDrawingCommand, StringifyFeatureHelper, TextStyleHelper, TileLayerComponent, TileLayerSettings, TooltipComponent, TooltipSettings };
 //# sourceMappingURL=maps-components.js.map