bbj-screen-widget 2.4.61 → 2.4.62

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

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

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

@@ -0,0 +1,99 @@
+import { Component, NgZone, OnInit } from '@angular/core';
+import { Data, Property, Widget } from 'bbj-widget-base';
+import { BaseLayer } from '../base-layer';
+import { CustomBaiduMapComponent } from '../custom-baidu-map.component';
+
+declare const mapvgl;
+const EARTH_RADIUS = 6371.393;
+
+@Component({
+  selector: 'sc-typhoon-area-layer',
+  templateUrl: './typhoon-area-layer.component.html',
+  styleUrls: ['./typhoon-area-layer.component.less'],
+})
+@Widget('风圈', {
+  group: 'component',
+  hidden: true,
+})
+export class TyphoonAreaLayerComponent extends BaseLayer implements OnInit {
+  @Property('描边颜色', { ui: { widget: 'myColor' } })
+  lineColor = 'rgba(238,160,29,0.8)';
+  @Property('描边宽度', { type: 'number' })
+  lineWidth = 2;
+  @Property('填充颜色', { ui: { widget: 'myColor' } })
+  fillColor = 'rgba(238,160,29,0.3)';
+  @Data({
+    properties: {
+      lng: { type: 'number', title: '中心经度' },
+      lat: { type: 'number', title: '中心纬度' },
+      nw: { type: 'number', title: '西北半径' },
+      ne: { type: 'number', title: '东北半径' },
+      sw: { type: 'number', title: '西南半径' },
+      se: { type: 'number', title: '东南半径' },
+    },
+  })
+  data: any[] = [
+    {
+      lng: 144.7,
+      lat: 38.9,
+      nw: 50,
+      ne: 100,
+      sw: 150,
+      se: 200,
+    },
+  ];
+  layer: any;
+  constructor(protected parent: CustomBaiduMapComponent, protected zone: NgZone) {
+    super(parent, zone);
+  }
+
+  createLayers(): any[] {
+    this.layer = new mapvgl.PolygonLayer({
+      lineColor: this.lineColor,
+      lineWidth: this.lineWidth,
+      fillColor: this.fillColor,
+      renderOrder: -1,
+    });
+    return [this.layer];
+  }
+
+  updateData(): void {
+    const data = [];
+    this.data.forEach((r) => {
+      var kk = this.getTF([+r.lng, +r.lat], +r.ne, +r.se, +r.sw, +r.nw);
+      data.push({
+        geometry: {
+          type: 'Polygon',
+          coordinates: [kk],
+        },
+      });
+    });
+    this.layer.setData(data);
+  }
+
+  getTF(lat, ne, se, sw, nw) {
+    // 求出方位半径方向上弧形经纬度
+    const getPoints = (center, cradius, startAngle) => {
+      // l=EARTH_RADIUS*dy/180*Math.PI
+      const radius = (cradius * 180) / EARTH_RADIUS / Math.PI;
+      // let radius = cradius / 90;
+      let pointNum = 90;
+      let endAngle = startAngle + Math.PI / 2;
+      let points = [];
+      for (var i = 0; i <= pointNum; i++) {
+        const angle = startAngle + ((endAngle - startAngle) * i) / pointNum;
+        const x = center[0] + (radius * Math.cos(angle)) / Math.abs(Math.cos((center[1] * Math.PI) / 180));
+        const y = center[1] + radius * Math.sin(angle);
+        points.push([x, y]);
+      }
+      return points;
+    };
+
+    let r7Ne = getPoints(lat, ne, 0);
+    let r7Nw = getPoints(lat, nw, Math.PI / 2);
+    let r7Sw = getPoints(lat, sw, Math.PI);
+    let r7Se = getPoints(lat, se, (Math.PI * 3) / 2);
+
+    return [...r7Ne, ...r7Nw, ...r7Sw, ...r7Se];
+  }
+}

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

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

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

@@ -0,0 +1,404 @@
+import { Component, OnChanges, OnDestroy, OnInit } from '@angular/core';
+import { SFArrayWidgetSchema } from '@delon/form';
+import { Data, Property, Widget } from 'bbj-widget-base';
+import { CustomBaiduMapComponent } from '../custom-baidu-map.component';
+declare const BMapGL;
+
+@Component({
+  selector: 'sc-wind-layer',
+  templateUrl: './wind-layer.component.html',
+  styleUrls: ['./wind-layer.component.less'],
+})
+@Widget('台风层', {
+  group: 'component',
+  image: '',
+  icon: '',
+  hidden: true,
+})
+export class WindLayerComponent implements OnInit, OnChanges, OnDestroy {
+  @Property('清晰度', { type: 'number' })
+  sharpness = 1000;
+  @Property('标记分组', {
+    type: 'array',
+    title: '标记分组',
+    maxItems: 10,
+    items: {
+      type: 'object',
+      properties: {
+        group: {
+          type: 'string',
+          title: '分组',
+        },
+        color: {
+          type: 'string',
+          title: '颜色',
+          ui: { widget: 'myColor' },
+        },
+        borderColor: {
+          type: 'string',
+          title: '线条颜色',
+          ui: { widget: 'myColor' },
+        },
+        borderWidth: {
+          type: 'number',
+          title: '线条粗细',
+        },
+        shadowColor: {
+          type: 'string',
+          title: '阴影颜色',
+          ui: { widget: 'myColor' },
+        },
+        image: {
+          type: 'string',
+          title: '中心图片',
+          ui: { widget: 'myUpload' },
+        },
+      },
+    },
+    ui: { grid: { arraySpan: 24 }, spanControl: 24 } as SFArrayWidgetSchema,
+  })
+  groups: any = [
+    {
+      group: '3',
+      color: 'rgba(62,194,35,0.4)',
+      borderColor: '#60db91',
+      borderWidth: 1,
+      shadowColor: 'rgba(96,219,145,0.2)',
+    },
+    {
+      group: '2',
+      color: 'rgba(255,101,41,0.4)',
+      borderColor: '#ff7b48',
+      borderWidth: 1,
+      shadowColor: 'rgba(255,166,51,0.2)',
+    },
+    {
+      group: '1',
+      color: 'rgba(243,68,68,0.4)',
+      borderColor: '#ff3355',
+      borderWidth: 1,
+      shadowColor: 'rgba(255,51,85,0.2)',
+      image: '/assets/img/screen/typhoon.png',
+    },
+  ];
+  @Data({
+    properties: {
+      lng: { type: 'number', title: '经度' },
+      lat: { type: 'number', title: '纬度' },
+      r: { type: 'number', title: '半径' },
+      group: { type: 'string', title: '分组' },
+    },
+  })
+  data: any[] = [
+    {
+      lng: 121.3,
+      lat: 27.4,
+      group: '3',
+      r: 160,
+    },
+    {
+      lng: 119.5,
+      lat: 29.97,
+      group: '3',
+      r: 160,
+    },
+    {
+      lng: 120.52,
+      lat: 33.93,
+      group: '3',
+      r: 75,
+    },
+    {
+      lng: 121.3,
+      lat: 27.4,
+      group: '2',
+      r: 80,
+    },
+    {
+      lng: 119.5,
+      lat: 29.97,
+      group: '2',
+      r: 80,
+    },
+    {
+      lng: 120.52,
+      lat: 33.93,
+      group: '2',
+      r: 50,
+    },
+    {
+      lng: 121.3,
+      lat: 27.4,
+      group: '1',
+      r: 40,
+    },
+    {
+      lng: 119.5,
+      lat: 29.97,
+      group: '1',
+      r: 40,
+    },
+    {
+      lng: 120.52,
+      lat: 33.93,
+      group: '1',
+      r: 25,
+    },
+  ];
+  id: string;
+  canvasOverlay: any;
+  constructor(private parent: CustomBaiduMapComponent) {}
+
+  ngOnInit(): void {}
+
+  async ngOnChanges() {
+    this.updateOverlay();
+    // if ((this.parent as any).enable3D) {
+
+    // } else {
+    //   this.parent.childInit({
+    //     id: this.id,
+    //     type: 'canvas',
+    //     update: this.updateCanvas,
+    //   });
+    // }
+  }
+
+  async updateOverlay() {
+    await this.parent.init$;
+    this.remove();
+    const canvas = this.getCanvas();
+    this.addCanvasOverlay(canvas);
+  }
+
+  addCanvasOverlay(item: any) {
+    if (item) {
+      var pStart = new BMapGL.Point(item.start.lng, item.start.lat);
+      var pEnd = new BMapGL.Point(item.end.lng, item.end.lat);
+      var bounds = new BMapGL.Bounds(
+        new BMapGL.Point(pStart.lng, pEnd.lat),
+        new BMapGL.Point(pEnd.lng, pStart.lat),
+      );
+      this.canvasOverlay = new BMapGL.GroundOverlay(bounds, {
+        type: 'canvas',
+        url: item.canvas,
+        opacity: 1,
+      });
+      this.parent.map.addOverlay(this.canvasOverlay);
+    }
+    // return canvasOverlay;
+  }
+
+  ngOnDestroy(): void {
+    this.remove();
+    // this.parent.deleteChild(this.id);
+  }
+
+  remove() {
+    if (this.canvasOverlay) {
+      this.parent.map.removeOverlay(this.canvasOverlay);
+      this.canvasOverlay = null;
+    }
+  }
+
+  getCanvas() {
+    // const images = {};
+    // if (this.groups?.length) {
+    //   for (const group of this.groups) {
+    //     if (group.image) {
+    //       images[group.image] = await this.loadImage(group.image);
+    //     }
+    //   }
+    // }
+    // console.log(this.data);
+    if (this.data && this.data.length >= 3) {
+      let startLng = 180;
+      let startLat = 90;
+      let endLng = -180;
+      let endLat = -90;
+      const data = this.data.map((record) => {
+        const r = (+record.r * 180) / Math.PI / 6371.393;
+        startLng = Math.min(startLng, +record.lng - r);
+        startLat = Math.min(startLat, +record.lat - r);
+        endLng = Math.max(endLng, +record.lng + r);
+        endLat = Math.max(endLat, +record.lat + r);
+        return { ...record, r };
+      });
+      const sharpness = this.sharpness || 1000;
+      const multiple = Math.min(sharpness / (endLng - startLng), sharpness / (endLat - startLat));
+      const c = document.createElement('canvas');
+      c.width = Math.round((endLng - startLng) * multiple);
+      c.height = Math.round((endLat - startLat) * multiple);
+      const groups = {};
+      data.forEach((record) => {
+        const group = record.group;
+        if (group) {
+          let points: any[] = groups[group];
+          if (!points) {
+            points = [];
+            groups[group] = points;
+          }
+          points.push({
+            x: (+record.lng - startLng) * multiple,
+            y: (endLat - +record.lat) * multiple,
+            r: record.r * multiple,
+          });
+        }
+      });
+      this.groups.forEach((group) => {
+        const points = groups[group.group];
+        if (points?.length >= 3) {
+          const ctx = c.getContext('2d');
+          const p1 = points[0];
+          const p2 = points[Math.floor(points.length / 2)];
+          const p3 = points[points.length - 1];
+          var gnt = ctx.createRadialGradient(p1.x, p1.y, 0, p1.x, p1.y, p1.r);
+          // gnt.addColorStop(1, 'green');
+          // gnt.addColorStop(0, 'green');
+          gnt.addColorStop(1, group.shadowColor || 'green');
+          gnt.addColorStop(0, 'rgba(0,0,0,0)');
+          ctx.fillStyle = gnt;
+          ctx.beginPath();
+          ctx.arc(p1.x, p1.y, p1.r, 0, Math.PI * 2, true);
+          ctx.closePath();
+          ctx.fill();
+          const getTangency = (p1, p2) => {
+            const l = Math.sqrt(Math.pow(p2.x - p1.x, 2) + Math.pow(p2.y - p1.y, 2));
+            return { x: p2.x + (p2.r * (p1.y - p2.y)) / l, y: p2.y + (p2.r * (p2.x - p1.x)) / l };
+          };
+          ctx.beginPath();
+          let start = Math.atan((p2.x - p1.x) / (p1.y - p2.y));
+          ctx.arc(p1.x, p1.y, p1.r, start - Math.PI, start, false);
+          let t = getTangency(p1, p2);
+          // ctx.lineTo(t.x, t.y);
+          let t2 = getTangency(p2, p3);
+          ctx.quadraticCurveTo(t.x, t.y, t2.x, t2.y);
+          // ctx.lineTo(t.x, t.y);
+          start = Math.atan((p3.x - p2.x) / (p2.y - p3.y));
+          ctx.arc(p3.x, p3.y, p3.r, start, start + Math.PI, true);
+          t = getTangency(p3, p2);
+          t2 = getTangency(p2, p1);
+          ctx.quadraticCurveTo(t.x, t.y, t2.x, t2.y);
+          // ctx.lineTo(t.x, t.y);
+          ctx.closePath();
+          ctx.fillStyle = group.color || 'green';
+          ctx.fill();
+          ctx.lineWidth = group.borderWidth || 1;
+          ctx.beginPath();
+          ctx.arc(p1.x, p1.y, p1.r, 0, Math.PI * 2, true);
+          ctx.closePath();
+          ctx.strokeStyle = group.borderColor || 'green';
+          ctx.stroke();
+          // if (group.image && images[group.image]) {
+          //   const imageSize = p1.r * 0.8;
+          //   ctx.drawImage(images[group.image], p1.x - imageSize, p1.y - imageSize, imageSize * 2, imageSize * 2);
+          // }
+        }
+      });
+      // const points = this.data.map((record) => {
+      //   return {
+      //     x: (+record.lng - startLng) * multiple,
+      //     y: (endLat - +record.lat) * multiple,
+      //     r: record.r * multiple,
+      //   };
+      // });
+      // c.toBlob((blob)=>{
+      //   FileSaver.saveAs(blob,'typhoon.png')
+      // })
+
+      return {
+        start: {
+          lng: startLng,
+          lat: startLat,
+        },
+        end: {
+          lng: endLng,
+          lat: endLat,
+        },
+        canvas: c,
+      };
+    }
+  }
+
+  // updateCanvas = (ctx: CanvasRenderingContext2D, pointToPixel: Function) => {
+  //   if (this.data && this.data.length >= 3) {
+  //     const data = this.data.map((record) => {
+  //       const r = (+record.r * 180) / Math.PI / 6371.393;
+  //       return { lat: +record.lat, lng: +record.lng, r, group: record.group };
+  //     });
+
+  //     const groups = {};
+  //     data.forEach((record) => {
+  //       const group = record.group;
+  //       if (group) {
+  //         let points: any[] = groups[group];
+  //         if (!points) {
+  //           points = [];
+  //           groups[group] = points;
+  //         }
+  //         const pixel = pointToPixel(record);
+  //         const pixel2 = pointToPixel({ lat: record.lat, lng: record.lng + record.r });
+  //         points.push({
+  //           x: pixel.x,
+  //           y: pixel.y,
+  //           r: pixel2.x - pixel.x,
+  //         });
+  //       }
+  //     });
+  //     this.groups.forEach((group) => {
+  //       const points = groups[group.group];
+  //       if (points?.length >= 3) {
+  //         const p1 = points[0];
+  //         const p2 = points[Math.floor(points.length / 2)];
+  //         const p3 = points[points.length - 1];
+  //         var gnt = ctx.createRadialGradient(p1.x, p1.y, 0, p1.x, p1.y, p1.r);
+
+  //         gnt.addColorStop(1, group.shadowColor || 'green');
+  //         gnt.addColorStop(0, 'rgba(0,0,0,0)');
+  //         ctx.fillStyle = gnt;
+  //         ctx.beginPath();
+  //         ctx.arc(p1.x, p1.y, p1.r, 0, Math.PI * 2, true);
+  //         ctx.closePath();
+  //         ctx.fill();
+  //         const getTangency = (p1, p2) => {
+  //           const l = Math.sqrt(Math.pow(p2.x - p1.x, 2) + Math.pow(p2.y - p1.y, 2));
+  //           return { x: p2.x + (p2.r * (p1.y - p2.y)) / l, y: p2.y + (p2.r * (p2.x - p1.x)) / l };
+  //         };
+  //         ctx.beginPath();
+  //         let start = Math.atan((p2.x - p1.x) / (p1.y - p2.y));
+  //         ctx.arc(p1.x, p1.y, p1.r, start - Math.PI, start, false);
+  //         let t = getTangency(p1, p2);
+  //         let t2 = getTangency(p2, p3);
+  //         ctx.quadraticCurveTo(t.x, t.y, t2.x, t2.y);
+  //         start = Math.atan((p3.x - p2.x) / (p2.y - p3.y));
+  //         ctx.arc(p3.x, p3.y, p3.r, start, start + Math.PI, true);
+  //         t = getTangency(p3, p2);
+  //         t2 = getTangency(p2, p1);
+  //         ctx.quadraticCurveTo(t.x, t.y, t2.x, t2.y);
+  //         ctx.closePath();
+  //         ctx.fillStyle = group.color || 'green';
+  //         ctx.fill();
+  //         ctx.lineWidth = group.borderWidth || 1;
+  //         ctx.beginPath();
+  //         ctx.arc(p1.x, p1.y, p1.r, 0, Math.PI * 2, true);
+  //         ctx.closePath();
+  //         ctx.strokeStyle = group.borderColor || 'green';
+  //         ctx.stroke();
+  //       }
+  //     });
+  //   }
+  // };
+
+  // loadImage(url: string): Promise<HTMLElement> {
+  //   return new Promise((resolve, reject) => {
+  //     const image = new Image();
+  //     image.src = url;
+  //     image.onload = () => {
+  //       resolve(image);
+  //     };
+  //     image.onerror = (e) => {
+  //       resolve(null);
+  //     };
+  //   });
+  // }
+}

package/src/lib/data-map/data-map.component.html

@@ -0,0 +1,9 @@
+<div id="dataMap" style="width: 100%; height: 100%">
+  <div
+    echarts
+    [options]="chartOption"
+    class="demo-chart"
+    style="width: 100%; height: 100%"
+    [initOpts]="{ renderer: 'svg' }"
+  ></div>
+</div>

package/src/lib/data-map/data-map.component.spec.ts

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

package/src/lib/data-map/data-map.component.ts

@@ -0,0 +1,105 @@
+import { Component, OnInit } from '@angular/core';
+import {Data, Property, Widget} from 'bbj-widget-base';
+import {HttpClient} from '@angular/common/http'
+import * as echarts from 'echarts';
+
+@Component({
+  selector: 'sc-data-map',
+  templateUrl: './data-map.component.html',
+  styleUrls: ['./data-map.component.less']
+})
+@Widget('数据地图', {
+  group: 'component',
+  image: 'assets/img/screen/2dmap.png',
+})
+export class DataMapComponent implements OnInit {
+  @Property('字体', { ui: { widget: 'myFont' } })
+  font: any = {
+    family: '',
+    color: '#000000',
+    weight: 'normal',
+    size: 16,
+    space: 0,
+    lineHeight: 0,
+  };
+  @Property('告警值', { type: 'number'})
+  _alarm=100;
+  @Property('告警颜色',{ui:{widget: 'myColor', example:['#D0021B','#F5A623','#F8E71C','#50E3C2','#3285FF','#B45FFF','#9B9B9B','#333333']}})
+  _alarmColor = '#D0021B';
+  @Property('正常颜色',{ui:{widget: 'myColor', example:['#D0021B','#F5A623','#F8E71C','#50E3C2','#3285FF','#B45FFF','#9B9B9B','#333333']}})
+  _normalColor = '#3285FF';
+  @Property('高亮背景',{ui:{widget: 'myColor', example:['#D0021B','#F5A623','#F8E71C','#50E3C2','#3285FF','#B45FFF','#9B9B9B','#333333']}})
+  _areaColor = '#FF0000';
+  @Data({
+    properties: {
+      name: {type: 'string', title: '地点'},
+      value: {type: 'number', title: '值'},
+    },
+  })
+  _data: any[] = [
+    {name: '龙湾区', value: 100},
+    {name: '永嘉县', value: 45},
+    {name: '瑞安市', value: 200},
+    {name: '洞头县', value: 99},
+    {name: '鹿城区', value: 1},
+    {name: '瓯海区', value: 1},
+    {name: '乐清市', value: 1},
+    {name: '文成县', value: 1},
+    {name: '平阳县', value: 1},
+    {name: '泰顺县', value: 1},
+    {name: '苍南县', value: 1},
+  ];
+  chartOption: any;
+  constructor(private http: HttpClient) { }
+
+  ngOnInit() {
+    this.http.get('/assets/echarts/map/json/wenzhou.json').toPromise()
+      .then(data => {
+        echarts.registerMap('wenzhou', data);
+        this.chartOption = {
+          tooltip: {
+            trigger: 'item',
+            formatter: '{b}<br/>{c} (p / km2)'
+          },
+          visualMap: {
+            type: 'piecewise',
+            pieces: [
+              {gte: this._alarm,color:this._alarmColor}, // 不指定 max，表示 max 为无限大（Infinity）。
+              {gte: 0, lt: this._alarm,color:this._normalColor},
+            ],
+            show:false,
+          },
+          series: [
+            {
+              name: '浙江',
+              type: 'map',
+              mapType: 'wenzhou', // 自定义扩展图表类型
+              label: {
+                show: true,
+                normal: {
+                  textStyle: {
+                    fontSize: this.font.size,
+                    fontWeight: this.font.weight,
+                    color: this.font.color,
+                    fontFamily : this.font.family,
+                    lineHeight : this.font.lineHeight,
+                  }
+                }
+              },
+              itemStyle:{
+                normal:{label:{show:true}},
+                emphasis:{
+                  label:{show:true},
+                  areaColor: this._areaColor,
+                  // borderColor:'red'
+                }
+              },
+              data:this._data,
+            }
+          ]
+        };
+      })
+
+  }
+
+}