bbj-screen-widget 2.4.61 → 2.4.62

package/src/lib/custom-baidu-map/baidu-polyline-layer/baidu-polyline-layer.component.spec.ts

@@ -0,0 +1,25 @@
+import { ComponentFixture, TestBed, waitForAsync } from '@angular/core/testing';
+
+import { BaiduPolylineLayerComponent } from './baidu-polyline-layer.component';
+
+describe('BaiduPolylineLayerComponent', () => {
+  let component: BaiduPolylineLayerComponent;
+  let fixture: ComponentFixture<BaiduPolylineLayerComponent>;
+
+  beforeEach(waitForAsync(() => {
+    TestBed.configureTestingModule({
+      declarations: [ BaiduPolylineLayerComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(BaiduPolylineLayerComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

package/src/lib/custom-baidu-map/baidu-polyline-layer/baidu-polyline-layer.component.ts

@@ -0,0 +1,248 @@
+import { Component, forwardRef, Inject, NgZone, OnChanges, OnDestroy, OnInit } from '@angular/core';
+import { SFArrayWidgetSchema } from '@delon/form';
+import { Data, Property, Widget } from 'bbj-widget-base';
+import { BaseLayer } from '../base-layer';
+import { CustomBaiduMapComponent } from '../custom-baidu-map.component';
+
+declare const mapvgl;
+
+@Component({
+  selector: 'sc-baidu-polyline-layer',
+  templateUrl: './baidu-polyline-layer.component.html',
+  styleUrls: ['./baidu-polyline-layer.component.less'],
+})
+@Widget('折线层', {
+  group: 'component',
+  image: '',
+  icon: '',
+  hidden: true,
+})
+export class BaiduPolylineLayerComponent extends BaseLayer implements OnInit, OnDestroy, OnChanges {
+  @Property('线条宽度', {
+    ui: { widget: 'myRange', min: 1, max: 40, step: 1 },
+  })
+  strokeWeight = 4;
+  @Property('线条颜色', {
+    type: 'string',
+    ui: {
+      widget: 'myColor',
+    },
+  })
+  strokeColor = 'rgba(242,213,173,1)';
+  @Property('线条类型', {
+    ui: { widget: 'select' },
+    enum: [
+      { label: '实线', value: 'solid' },
+      { label: '虚线', value: 'dashed' },
+    ],
+  })
+  strokeStyle = 'solid';
+  @Property('虚线间隔', { type: 'number', ui: { visibleIf: { strokeStyle: ['solid'] } } })
+  dashInterval = 10;
+  @Property('动画')
+  animation: boolean;
+  @Property('动画线段长度', {
+    type: 'number',
+    ui: { widget: 'number', visibleIf: { animation: [true] } },
+  })
+  interval = 0.1;
+  @Property('动画循环时间', { type: 'number', ui: { widget: 'number', visibleIf: { animation: [true] } } })
+  duration = 2;
+  @Property('拖尾长度', { type: 'number', ui: { widget: 'number', visibleIf: { animation: [true] } } })
+  trailLength = 0.5;
+  @Property('图层', {
+    type: 'array',
+    maxItems: 10,
+    items: {
+      type: 'object',
+      properties: {
+        layer: {
+          type: 'string',
+          title: '图层',
+        },
+        color: {
+          type: 'string',
+          title: '颜色',
+          ui: { widget: 'myColor' },
+        },
+      },
+      required: [],
+    },
+    ui: { grid: { arraySpan: 24 }, spanControl: 24 } as SFArrayWidgetSchema,
+  })
+  layerOptions = [];
+  @Data({
+    properties: {
+      layer: { type: 'string', title: '图层' },
+      lng: { type: 'number', title: '经度' },
+      lat: { type: 'number', title: '纬度' },
+      group: { type: 'string', title: '线编号' },
+    },
+  })
+  _data: any[] = [
+    {
+      group: 'x',
+      lng: '120.7',
+      lat: '28',
+    },
+    {
+      group: 'x',
+      lng: '120.71',
+      lat: '28.01',
+    },
+    {
+      group: 'x',
+      lng: '120.79',
+      lat: '28.1',
+    },
+    {
+      group: 'y',
+      lng: '120.72',
+      lat: '28.02',
+    },
+    {
+      group: 'y',
+      lng: '120.73',
+      lat: '28.03',
+    },
+    {
+      group: 'y',
+      lng: '120.81',
+      lat: '28.12',
+    },
+  ];
+  id: string;
+  // layer: any;
+  layerMap: any = {};
+
+  constructor(protected parent: CustomBaiduMapComponent, protected zone: NgZone) {
+    super(parent, zone);
+  }
+
+  // ngOnChanges() {
+  //   this.parent.childInit({
+  //     id: this.id,
+  //     strokeWeight: this.strokeWeight,
+  //     strokeColor: this.strokeColor,
+  //     strokeStyle: this.strokeStyle,
+  //     type: 'polyline',
+  //     item: this._data,
+  //   });
+  // }
+
+  // ngOnInit(): void {}
+
+  // ngOnDestroy(): void {
+  //   this.parent.deleteChild(this.id);
+  // }
+
+  updateData(): void {
+    const dataMap = {};
+
+    const layerLineMap = {};
+    this._data.forEach((record) => {
+      let layer = record.layer;
+      if (!this.layerMap[layer]) {
+        layer = '';
+      }
+      let data = dataMap[layer];
+      let lineMap = layerLineMap[layer];
+      if (!data) {
+        data = [];
+        lineMap = {};
+        dataMap[layer] = data;
+        layerLineMap[layer] = lineMap;
+      }
+      let group = record.group;
+      if (group == null) {
+        group = '';
+      }
+      let line = lineMap[group];
+      if (line == null) {
+        line = {
+          geometry: {
+            type: 'LineString',
+            coordinates: [],
+          },
+        };
+        lineMap[group] = line;
+        data.push(line);
+      }
+
+      line.geometry.coordinates.push([record.lng, record.lat]);
+    });
+    Object.keys(this.layerMap).forEach((key) => {
+      const layer = this.layerMap[key];
+      const data = dataMap[key] || [];
+      layer.setData(data);
+    });
+  }
+
+  createLayers(): any[] {
+    const layers = [];
+    this.layerMap = {};
+    const defaultLayer = this.createLayer();
+    this.layerMap[''] = defaultLayer;
+    layers.push(defaultLayer);
+    if (this.layerOptions?.length) {
+      this.layerOptions.forEach((options) => {
+        if (options.layer) {
+          const layer = this.createLayer(options);
+          this.layerMap[options.layer] = layer;
+          layers.push(layer);
+        }
+      });
+    }
+    return layers;
+    // const options: any = {
+    //   color: this.strokeColor,
+    //   width: this.strokeWeight,
+    //   lineCap: 'round',
+    //   animation: this.animation,
+    //   interval: this.interval,
+    //   duration: this.duration,
+    //   trailLength: this.trailLength,
+    //   style: 'arrow',
+    //   styleOptions: {
+    //     color: '#fff',
+    //     width: 10,
+    //   },
+    //   // blend: 'lighter'
+    // };
+    // if (this.strokeStyle === 'dashed') {
+    //   const dashInterval = this.dashInterval || 10;
+    //   options.dashArray = [dashInterval, dashInterval];
+    // }
+    // this.layer = new mapvgl.LineLayer(options);
+    // return [this.layer];
+  }
+
+  createLayer(layerOptions?: any) {
+    const options: any = {
+      color: this.strokeColor,
+      width: this.strokeWeight,
+      lineCap: 'round',
+      animation: this.animation,
+      interval: this.interval,
+      duration: this.duration,
+      trailLength: this.trailLength,
+      // style: 'arrow',
+      // styleOptions: {
+      //   color: '#fff',
+      //   width: 10,
+      // },
+      blend: 'lighter'
+    };
+    if (layerOptions) {
+      if (layerOptions.color) {
+        options.color = layerOptions.color;
+      }
+    }
+    if (this.strokeStyle === 'dashed') {
+      const dashInterval = this.dashInterval || 10;
+      options.dashArray = [dashInterval, dashInterval];
+    }
+    const layer = new mapvgl.LineLayer(options);
+    return layer;
+  }
+}

package/src/lib/custom-baidu-map/base-layer.ts

@@ -0,0 +1,50 @@
+import { Inject, forwardRef, NgZone, OnInit, OnChanges, OnDestroy, Directive, SimpleChanges } from '@angular/core';
+import { CustomBaiduMapComponent } from './custom-baidu-map.component';
+
+@Directive()
+export abstract class BaseLayer implements OnInit, OnDestroy, OnChanges {
+  inited: boolean;
+  layers = [];
+  constructor(protected parent: CustomBaiduMapComponent, protected zone: NgZone) {}
+  ngOnInit(): void {
+    this.zone.runOutsideAngular(() => {
+      this.updateLayers();
+    });
+  }
+
+  ngOnChanges(changes:SimpleChanges) {
+    if (this.inited) {
+      this.zone.runOutsideAngular(() => {
+        this.updateData();
+      });
+    }
+  }
+
+  ngOnDestroy(): void {
+    this.removeLayers();
+  }
+
+  async updateLayers() {
+    await this.parent.init$;
+    this.removeLayers();
+    this.layers = this.createLayers();
+    this.layers.forEach((layer) => {
+      this.parent.addLayer(layer);
+    });
+    this.inited = true;
+    this.updateData();
+  }
+
+  removeLayers() {
+    if (this.layers.length) {
+      this.layers.forEach((layer) => {
+        this.parent.removeLayer(layer);
+      });
+      this.layers = [];
+    }
+  }
+
+  abstract updateData(): void;
+
+  abstract createLayers(): any[];
+}

package/src/lib/custom-baidu-map/custom-baidu-map.component.html

@@ -0,0 +1,15 @@
+<ng-template *ngFor="let child of children" widget-host [widget]="child"></ng-template>
+
+<!-- {{children|json}} -->
+<!-- <div class="map-container" [ngStyle]="containerStyle"> -->
+<div #container class="map"></div>
+<nz-radio-group
+  *ngIf="showMapTypeRadio"
+  class="map-type-radio"
+  [(ngModel)]="mapTypeValue"
+  (ngModelChange)="mapTypeChange($event)"
+  nzButtonStyle="solid"
+>
+  <label *ngFor="let item of mapTypeEnum" nz-radio-button [nzValue]="item.value">{{ item.label }}</label>
+</nz-radio-group>
+<!-- </div> -->

package/src/lib/custom-baidu-map/custom-baidu-map.component.less

@@ -0,0 +1,69 @@
+:host {
+  display: block;
+  height: 100%;
+  width: 100%;
+  overflow: hidden;
+  transform-origin: 0 0;
+  z-index: 0;
+  pointer-events: none;
+  > * {
+    pointer-events: auto;
+  }
+}
+
+// .map-container {
+//   height: 100%;
+//   width: 100%;
+//   z-index: 0; // 不加这个在vdt的堆叠布局中会把上层的组件盖住
+//   // position: initial !important;
+// }
+.map {
+  height: 100%;
+  width: 100%;
+}
+:host::ng-deep {
+  .BMap_bubble_pop {
+    background-color: var(--info-window-background, #fff) !important;
+    border-color: var(--info-window-border-color, #dddddd) !important;
+  }
+  .BMap_bubble_content {
+    color: var(--info-window-color, '#555555') !important;
+  }
+  .BMap_pop div {
+    background-color: var(--info-window-background, #fff) !important;
+  }
+  .BMap_pop > div:nth-child(8) {
+    background-color: transparent !important;
+  }
+  img[src$='/image/api/iws3.png'] {
+    display: none;
+  }
+}
+:host.hideInfoWindowTail::ng-deep {
+  .BMap_bubble_pop > img {
+    display: none;
+  }
+  .BMap_pop > div:nth-child(8) {
+    display: none;
+  }
+}
+:host.hideInfoWindowTop::ng-deep {
+  .BMap_bubble_pop {
+    transform: translate(0, 31px);
+    > img {
+      transform: translate(0, -31px);
+    }
+  }
+  .BMap_bubble_top {
+    display: none;
+  }
+}
+:host::ng-deep .anchorBL {
+  display: none;
+}
+.map-type-radio {
+  position: absolute;
+  bottom: 20px;
+  right: 20px;
+  z-index: 10;
+}

package/src/lib/custom-baidu-map/custom-baidu-map.component.spec.ts

@@ -0,0 +1,25 @@
+import { ComponentFixture, TestBed, waitForAsync } from '@angular/core/testing';
+
+import { CustomBaiduMapComponent } from './custom-baidu-map.component';
+
+describe('CustomBaiduMapComponent', () => {
+  let component: CustomBaiduMapComponent;
+  let fixture: ComponentFixture<CustomBaiduMapComponent>;
+
+  beforeEach(waitForAsync(() => {
+    TestBed.configureTestingModule({
+      declarations: [ CustomBaiduMapComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(CustomBaiduMapComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});