bbj-screen-widget 2.4.74 → 2.4.76

package/fesm2015/bbj-screen-widget.js

@@ -15221,7 +15221,7 @@ TyphoonAreaLayerComponent = __decorate([
 ], TyphoonAreaLayerComponent);
 
 const EARTH_RADIUS$1 = 6371393;
-const ɵ0$c = { type: 'string', title: 'ID' };
+const ɵ0$c = { type: 'string', title: 'ID' }, ɵ1$c = { type: 'string', title: 'ID' };
 let BaiduFenceComponent = class BaiduFenceComponent extends BaseLayer {
     constructor(parent, zone, message) {
         super(parent, zone);
@@ -15257,6 +15257,7 @@ let BaiduFenceComponent = class BaiduFenceComponent extends BaseLayer {
             },
         ];
         this.create = new EventEmitter();
+        this.update = new EventEmitter();
         this.editData = [];
         this.stopEdit$ = new Subject();
     }
@@ -15292,7 +15293,10 @@ let BaiduFenceComponent = class BaiduFenceComponent extends BaseLayer {
     }
     updateData() {
         const data = [];
-        this.data.forEach((r) => {
+        for (const r of this.data) {
+            if (r.id && r.id === this.editId) {
+                continue;
+            }
             if (r.type === 'circle') {
                 if (!r.radius || !r.lnglat) {
                     return;
@@ -15305,7 +15309,7 @@ let BaiduFenceComponent = class BaiduFenceComponent extends BaseLayer {
                 // 转换中心点纬度为弧度
                 const centerLatRad = (centerLat * Math.PI) / 180;
                 // 存储轨迹点的数组
-                const trajectory = [];
+                const coordinates = [];
                 // 遍历 0~360°，生成等间隔的点
                 for (let i = 0; i < pointsCount; i++) {
                     // 计算当前点的方位角（弧度）：从0°到360°，均分pointsCount份
@@ -15317,12 +15321,12 @@ let BaiduFenceComponent = class BaiduFenceComponent extends BaseLayer {
                     const newLat = centerLat + (deltaLatRad * 180) / Math.PI;
                     const newLng = centerLng + (deltaLngRad * 180) / Math.PI;
                     // 添加到轨迹数组（保留6位小数，经纬度常规精度）
-                    trajectory.push([parseFloat(newLng.toFixed(6)), parseFloat(newLat.toFixed(6))]);
+                    coordinates.push([parseFloat(newLng.toFixed(6)), parseFloat(newLat.toFixed(6))]);
                 }
                 data.push({
                     geometry: {
                         type: 'Polygon',
-                        coordinates: [trajectory],
+                        coordinates: [coordinates],
                     },
                 });
             }
@@ -15339,26 +15343,28 @@ let BaiduFenceComponent = class BaiduFenceComponent extends BaseLayer {
                     return [+lnglat[0], +lnglat[1]];
                 }));
                 data.push({
+                    id: r.id,
                     geometry: {
                         type: 'Polygon',
                         coordinates: coordinates,
                     },
                 });
             }
-        });
+        }
         this.layer.setData(data);
     }
-    startDraw(type) {
+    createScene() {
         return __awaiter(this, void 0, void 0, function* () {
-            const { DrawScene, PolygonDraw, CircleDraw, OperateEventType } = yield import('bmap-draw');
+            const { DrawScene, OperateEventType } = yield import('bmap-draw');
             if (!this.scene) {
                 this.scene = new DrawScene(this.parent.map, { noLimit: true });
                 this.scene.addEventListener(OperateEventType.COMPLETE, (e) => {
                     console.log(e);
+                    let data;
                     if (e.target.overlay.radius) {
                         const radius = e.target.overlay.radius;
                         const lnglat = e.target.overlay.latLng;
-                        const data = {
+                        data = {
                             type: 'circle',
                             lnglat: `${lnglat.lng},${lnglat.lat}`,
                             radius: radius,
@@ -15367,14 +15373,12 @@ let BaiduFenceComponent = class BaiduFenceComponent extends BaseLayer {
                         //   this.parent.map.removeOverlay(r);
                         // });
                         this.create.emit(data);
-                        this.editOverlay = null;
                     }
                     else {
                         const points = e.target.overlay.getPoints();
                         if (!this.data) {
                             this.data = [];
                         }
-                        let data;
                         if (points.length && Array.isArray(points[0])) {
                             data = {
                                 type: 'polygon',
@@ -15384,20 +15388,55 @@ let BaiduFenceComponent = class BaiduFenceComponent extends BaseLayer {
                         else {
                             data = {
                                 type: 'polygon',
-                                lnglat: points.map((p) => `${p.latLng.lng},${p.latLng.lat}`).join(';'),
+                                lnglat: points
+                                    .map((p) => {
+                                    let latLng = p.latLng;
+                                    if (!latLng) {
+                                        const [lng, lat] = this.parent.map.mercatorToLnglat(p.lng, p.lat);
+                                        return `${lng},${lat}`;
+                                    }
+                                    else {
+                                        return `${latLng.lng},${latLng.lat}`;
+                                    }
+                                })
+                                    .join(';'),
                             };
                         }
+                    }
+                    this.editOverlay = null;
+                    this.parent.map.removeOverlay(e.target.overlay);
+                    if (this.editId) {
+                        data.id = this.editId;
+                        const index = this.data.findIndex((r) => r.id === this.editId);
+                        if (index !== -1) {
+                            this.data[index] = data;
+                        }
+                        this.editId = null;
+                        this.updateData();
+                    }
+                    else {
+                        this.data.push(data);
+                        this.updateData();
                         this.create.emit(data);
                     }
                 });
                 this.scene.addEventListener(OperateEventType.CANCEL, (e) => {
-                    console.log(e);
                     if (this.editOverlay) {
                         this.parent.map.removeOverlay(this.editOverlay);
                         this.editOverlay = null;
                     }
+                    if (this.editId) {
+                        this.editId = null;
+                        this.updateData();
+                    }
                 });
             }
+        });
+    }
+    startDraw(type) {
+        return __awaiter(this, void 0, void 0, function* () {
+            this.createScene();
+            const { PolygonDraw, CircleDraw } = yield import('bmap-draw');
             switch (type) {
                 case 'polygon':
                     if (!this.polygon) {
@@ -15490,10 +15529,42 @@ let BaiduFenceComponent = class BaiduFenceComponent extends BaseLayer {
         // }
         // this.editData = null;
     }
+    editPolygon(boundaries) {
+        return __awaiter(this, void 0, void 0, function* () {
+            const { PolygonEdit } = yield import('bmap-draw');
+            this.stopDraw();
+            if (!this.polygonEdit) {
+                this.polygonEdit = new PolygonEdit(this.scene);
+            }
+            const points = boundaries.map((boundary) => boundary.split(';').map((p) => {
+                const [lng, lat] = p.split(',');
+                return new BMapGL.Point(Number(lng), Number(lat));
+            }));
+            const overlay = new BMapGL.Polygon(points, this.getOptions());
+            console.log(overlay);
+            this.editOverlay = overlay;
+            this.parent.map.addOverlay(overlay);
+            this.parent.map.setViewport([].concat.apply([], points));
+            this.polygonEdit.edit(overlay);
+        });
+    }
+    editCircle(lng, lat, r) {
+        return __awaiter(this, void 0, void 0, function* () {
+            const { CircleEdit } = yield import('bmap-draw');
+            if (!this.circleEdit) {
+                this.circleEdit = new CircleEdit(this.scene);
+            }
+            const center = new BMapGL.Point(lng, lat);
+            this.moveCircleToView(lng, lat, r);
+            const overlay = new BMapGL.Circle(center, r, this.getOptions());
+            this.editOverlay = overlay;
+            this.parent.map.addOverlay(overlay);
+            this.circleEdit.open(overlay);
+        });
+    }
     search() {
         return __awaiter(this, void 0, void 0, function* () {
             // 如果正在绘制多边形围栏，获取地名边界并绘制
-            const { PolygonEdit } = yield import('bmap-draw');
             if (this.areaName) {
                 const boundary = new BMapGL.Boundary();
                 // 百度地图 Geocoder.getLocation 回调签名：(results, status)
@@ -15501,20 +15572,7 @@ let BaiduFenceComponent = class BaiduFenceComponent extends BaseLayer {
                     console.log('边界坐标数组：', results);
                     // 检查状态是否成功
                     if (results && results.boundaries && results.boundaries.length) {
-                        this.stopDraw();
-                        if (!this.polygonEdit) {
-                            this.polygonEdit = new PolygonEdit(this.scene);
-                        }
-                        const points = results.boundaries.map((boundary) => boundary.split(';').map((p) => {
-                            const [lng, lat] = p.split(',');
-                            return new BMapGL.Point(Number(lng), Number(lat));
-                        }));
-                        const overlay = new BMapGL.Polygon(points, this.getOptions());
-                        console.log(overlay);
-                        this.editOverlay = overlay;
-                        this.parent.map.addOverlay(overlay);
-                        this.parent.map.setViewport([].concat.apply([], points));
-                        this.polygonEdit.edit(overlay);
+                        this.editPolygon(results.boundaries);
                     }
                     else {
                         this.message.error('行政区域不存在');
@@ -15536,15 +15594,7 @@ let BaiduFenceComponent = class BaiduFenceComponent extends BaseLayer {
                 console.log(e);
                 // 如果正在绘制圆形围栏
                 if (this.circle) {
-                    if (!this.circleEdit) {
-                        this.circleEdit = new CircleEdit(this.scene);
-                    }
-                    const center = new BMapGL.Point(value.location.lng, value.location.lat);
-                    this.parent.map.centerAndZoom(center, 16);
-                    const overlay = new BMapGL.Circle(center, 300, this.getOptions());
-                    this.editOverlay = overlay;
-                    this.parent.map.addOverlay(overlay);
-                    this.circleEdit.open(overlay);
+                    this.editCircle(value.location.lng, value.location.lat, 300);
                     this.searchText = null;
                 }
             });
@@ -15560,27 +15610,7 @@ let BaiduFenceComponent = class BaiduFenceComponent extends BaseLayer {
         }
         if (data.type === 'circle') {
             const [lng, lat] = data.lnglat.split(',');
-            const centerLng = Number(lng);
-            const centerLat = Number(lat);
-            const radius = Number(data.radius);
-            // 转换中心点纬度为弧度
-            const centerLatRad = (centerLat * Math.PI) / 180;
-            // 计算经度方向的偏移（弧度）
-            const deltaLngRad = radius / (EARTH_RADIUS$1 * Math.cos(centerLatRad));
-            // 计算纬度方向的偏移（弧度）
-            const deltaLatRad = radius / EARTH_RADIUS$1;
-            // 转换为角度偏移
-            const deltaLng = (deltaLngRad * 180) / Math.PI;
-            const deltaLat = (deltaLatRad * 180) / Math.PI;
-            // 计算圆形的四个边界点（上、下、左、右）
-            const points = [
-                new BMapGL.Point(centerLng, centerLat + deltaLat),
-                new BMapGL.Point(centerLng, centerLat - deltaLat),
-                new BMapGL.Point(centerLng - deltaLng, centerLat),
-                new BMapGL.Point(centerLng + deltaLng, centerLat),
-            ];
-            // 使用 setViewport 方法调整视图，使整个圆形可见
-            this.parent.map.setViewport(points);
+            this.moveCircleToView(Number(lng), Number(lat), Number(data.radius));
         }
         else {
             this.parent.map.setViewport(data.lnglat.split(/[;\n\r]+/).map((p) => {
@@ -15589,11 +15619,62 @@ let BaiduFenceComponent = class BaiduFenceComponent extends BaseLayer {
             }));
         }
     }
+    moveCircleToView(lng, lat, r) {
+        const centerLng = Number(lng);
+        const centerLat = Number(lat);
+        const radius = Number(r);
+        // 转换中心点纬度为弧度
+        const centerLatRad = (centerLat * Math.PI) / 180;
+        // 计算经度方向的偏移（弧度）
+        const deltaLngRad = radius / (EARTH_RADIUS$1 * Math.cos(centerLatRad));
+        // 计算纬度方向的偏移（弧度）
+        const deltaLatRad = radius / EARTH_RADIUS$1;
+        // 转换为角度偏移
+        const deltaLng = (deltaLngRad * 180) / Math.PI;
+        const deltaLat = (deltaLatRad * 180) / Math.PI;
+        // 计算圆形的四个边界点（上、下、左、右）
+        const points = [
+            new BMapGL.Point(centerLng, centerLat + deltaLat),
+            new BMapGL.Point(centerLng, centerLat - deltaLat),
+            new BMapGL.Point(centerLng - deltaLng, centerLat),
+            new BMapGL.Point(centerLng + deltaLng, centerLat),
+        ];
+        // 使用 setViewport 方法调整视图，使整个圆形可见
+        this.parent.map.setViewport(points);
+    }
+    edit(id) {
+        return __awaiter(this, void 0, void 0, function* () {
+            if (!this.data) {
+                console.log('没有数据');
+                return;
+            }
+            const item = this.data.find((item) => item.id === id);
+            if (!item) {
+                console.log('找不到id', id);
+                return;
+            }
+            if (!item.lnglat) {
+                console.log('没有经纬度', item);
+                return;
+            }
+            this.createScene();
+            switch (item.type) {
+                case 'circle':
+                    const [lng, lat] = item.lnglat.split(',');
+                    yield this.editCircle(Number(lng), Number(lat), Number(item.radius));
+                    break;
+                default:
+                    yield this.editPolygon(item.lnglat.split('\r'));
+            }
+            this.editId = id;
+            this.updateData();
+        });
+    }
 };
 BaiduFenceComponent.decorators = [
     { type: Component, args: [{
                 selector: 'sc-baidu-fence',
-                template: "<ng-container *ngIf=\"showDrawButton\">\n  <button nz-button (click)=\"startDraw('polygon')\">\u7ED8\u5236\u591A\u8FB9\u5F62</button>\n  <button nz-button (click)=\"startDraw('circle')\">\u7ED8\u5236\u5706\u5F62</button>\n  <button nz-button (click)=\"stopDraw()\">\u7ED3\u675F\u7ED8\u5236</button>\n  <button nz-button (click)=\"moveToView('1')\">\u79FB\u52A8\u5230\u4E2D\u5FC31</button>\n  <button nz-button (click)=\"moveToView('2')\">\u79FB\u52A8\u5230\u4E2D\u5FC32</button>\n</ng-container>\n<input\n  nz-input\n  [ngClass]=\"{ hidden: !circle?.isOpen }\"\n  #suggest\n  type=\"text\"\n  [(ngModel)]=\"searchText\"\n  placeholder=\"\u8BF7\u8F93\u5165\u4E2D\u5FC3\u70B9\u4F4D\u7F6E\"\n  class=\"input\"\n/>\n<ng-container *ngIf=\"polygon?.isOpen\">\n  <input nz-input type=\"text\" placeholder=\"\u8BF7\u8F93\u5165\u884C\u653F\u533A\u540D\u79F0\" [(ngModel)]=\"areaName\" class=\"input\" />\n  <button nz-button (click)=\"search()\" style=\"margin-left: 12px\">\u786E\u8BA4</button>\n</ng-container>\n<!-- <input type=\"text\" placeholder=\"\u8BF7\u8F93\u5165\u5730\u70B9\" [(ngModel)]=\"searchText\" />\n<button nz-button (click)=\"search()\">\u67E5\u8BE2</button> -->\n",
+                template: "<ng-container *ngIf=\"showDrawButton\">\n  <button nz-button (click)=\"startDraw('polygon')\">\u7ED8\u5236\u591A\u8FB9\u5F62</button>\n  <button nz-button (click)=\"startDraw('circle')\">\u7ED8\u5236\u5706\u5F62</button>\n  <button nz-button (click)=\"stopDraw()\">\u7ED3\u675F\u7ED8\u5236</button>\n  <!-- <button nz-button (click)=\"edit('1')\">\u7F16\u8F91</button>\n  <button nz-button (click)=\"edit('2')\">\u7F16\u8F912</button> -->\n</ng-container>\n<input\n  nz-input\n  [ngClass]=\"{ hidden: !circle?.isOpen }\"\n  #suggest\n  type=\"text\"\n  [(ngModel)]=\"searchText\"\n  placeholder=\"\u8BF7\u8F93\u5165\u4E2D\u5FC3\u70B9\u4F4D\u7F6E\"\n  class=\"input\"\n/>\n<ng-container *ngIf=\"polygon?.isOpen\">\n  <input nz-input type=\"text\" placeholder=\"\u8BF7\u8F93\u5165\u884C\u653F\u533A\u540D\u79F0\" [(ngModel)]=\"areaName\" class=\"input\" />\n  <button nz-button (click)=\"search()\" style=\"margin-left: 12px\">\u786E\u8BA4</button>\n</ng-container>\n<!-- <input type=\"text\" placeholder=\"\u8BF7\u8F93\u5165\u5730\u70B9\" [(ngModel)]=\"searchText\" />\n<button nz-button (click)=\"search()\">\u67E5\u8BE2</button> -->\n",
                 styles: [":host{position:absolute;display:block;left:0;top:0;z-index:100;padding:12px;pointer-events:auto}button{transition:none}.hidden{display:none}.input{width:300px;margin-left:12px}"]
             },] }
 ];
@@ -15657,6 +15738,19 @@ __decorate([
     }),
     __metadata("design:type", Object)
 ], BaiduFenceComponent.prototype, "create", void 0);
+__decorate([
+    Event('编辑围栏', {
+        params: {
+            properties: {
+                id: ɵ1$c,
+                type: { type: 'string', title: '围栏类型' },
+                lnglat: { type: 'string', title: '经纬度' },
+                radius: { type: 'number', title: '半径' },
+            },
+        },
+    }),
+    __metadata("design:type", Object)
+], BaiduFenceComponent.prototype, "update", void 0);
 __decorate([
     Method('开始绘制'),
     __param(0, Param('类型', {
@@ -15683,6 +15777,13 @@ __decorate([
     __metadata("design:paramtypes", [String]),
     __metadata("design:returntype", void 0)
 ], BaiduFenceComponent.prototype, "moveToView", null);
+__decorate([
+    Method('编辑'),
+    __param(0, Param('id')),
+    __metadata("design:type", Function),
+    __metadata("design:paramtypes", [String]),
+    __metadata("design:returntype", Promise)
+], BaiduFenceComponent.prototype, "edit", null);
 BaiduFenceComponent = __decorate([
     Widget('电子围栏', {
         group: 'component',
@@ -15754,17 +15855,36 @@ let BaiduLushuComponent = class BaiduLushuComponent {
             return;
         }
         const landmarkPois = [];
-        const arrPois = this.data.map((item) => {
+        const arrPois = [];
+        let lastPoint = null;
+        let lastLandmark = null;
+        for (const item of this.data) {
+            const lng = Number(item.lng);
+            const lat = Number(item.lat);
+            // 去掉重复的点，重复的点会导致乱跳
+            if (lastPoint && lastPoint.lng === lng && lastPoint.lat === lat) {
+                if (lastLandmark && item.pauseTime) {
+                    lastLandmark.pauseTime += Number(item.pauseTime);
+                }
+                continue;
+            }
+            const point = new BMapGL.Point(lng, lat);
+            arrPois.push(point);
+            lastPoint = point;
             if (item.landmark || item.pauseTime) {
-                landmarkPois.push({
-                    lng: Number(item.lng),
-                    lat: Number(item.lat),
+                const landmark = {
+                    lng,
+                    lat,
                     html: item.landmark || this.defaultContent,
                     pauseTime: item.pauseTime ? Number(item.pauseTime) : 0,
-                });
+                };
+                landmarkPois.push(landmark);
+                lastLandmark = landmark;
             }
-            return new BMapGL.Point(item.lng, item.lat);
-        });
+            else {
+                lastLandmark = null;
+            }
+        }
         if (this.showPolyline) {
             this.polyline = new BMapGL.Polyline(arrPois, { strokeColor: this.polylineColor });
             this.parent.map.addOverlay(this.polyline);
@@ -15802,11 +15922,13 @@ let BaiduLushuComponent = class BaiduLushuComponent {
     }
     clear() {
         if (this.lushu) {
+            this.lushu.stop();
             this.lushu.clear();
             this.lushu = null;
         }
         if (this.polyline) {
             this.parent.map.removeOverlay(this.polyline);
+            this.polyline = null;
         }
     }
     setSpeed(speed) {
@@ -15895,6 +16017,7 @@ __decorate([
 ], BaiduLushuComponent.prototype, "pause", null);
 __decorate([
     Method('设置速度'),
+    __param(0, Param('速度')),
     __metadata("design:type", Function),
     __metadata("design:paramtypes", [Number]),
     __metadata("design:returntype", void 0)
@@ -19977,7 +20100,7 @@ BaseLayer$1.ctorParameters = () => [
     { type: NgZone }
 ];
 
-const ɵ0$e = { type: 'string', title: 'id' }, ɵ1$c = { type: 'string', title: 'id' }, ɵ2$a = { type: 'string', title: 'id' };
+const ɵ0$e = { type: 'string', title: 'id' }, ɵ1$d = { type: 'string', title: 'id' }, ɵ2$a = { type: 'string', title: 'id' };
 let TiandituMarkerComponent = class TiandituMarkerComponent extends BaseLayer$1 {
     constructor(parent, zone, fileUrlService, nzContextMenuService) {
         super(parent, zone);
@@ -20596,7 +20719,7 @@ __decorate([
     Event('选中值改变', {
         params: {
             properties: {
-                id: ɵ1$c,
+                id: ɵ1$d,
                 address: { type: 'string', title: '地点' },
                 lng: { type: 'number', title: '经度' },
                 lat: { type: 'number', title: '纬度' },