bbj-screen-widget 2.4.44 → 2.4.46

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

@@ -0,0 +1,636 @@
+import { HttpClient } from '@angular/common/http';
+import {
+  ChangeDetectionStrategy,
+  ChangeDetectorRef,
+  Component,
+  ElementRef,
+  EventEmitter,
+  forwardRef,
+  HostBinding,
+  HostListener,
+  Inject,
+  NgZone,
+  OnChanges,
+  OnDestroy,
+  OnInit,
+  Optional,
+  SimpleChanges,
+  ViewChild,
+} from '@angular/core';
+import { Subject } from 'rxjs';
+import { take, takeUntil } from 'rxjs/operators';
+import { ScaleSubject, TemplateUtil, WidgetRef } from 'bbj-widget-base';
+import { Data, DataOutput, Property, Widget, Event } from 'bbj-widget-base';
+import { BaiduMapService } from 'bbj-screen-widget/core';
+
+// declare const BMap;
+declare const BMapGL: any;
+// declare const BMapGLLib;
+// declare const BMapLib;
+// declare const BMAP_ANCHOR_BOTTOM_LEFT: number;
+declare const BMAP_ANCHOR_TOP_LEFT: number;
+declare const mapvgl: any;
+declare const BMAP_SATELLITE_MAP: number;
+declare const BMAP_NORMAL_MAP: number;
+const MapTypeEnum = [
+  { label: '普通', value: 'normal' },
+  { label: '深色', value: 'dark' },
+  { label: '卫星', value: 'satellite' },
+  { label: '自定义', value: 'custom' },
+];
+@Component({
+  selector: 'sc-custom-baidu-map',
+  templateUrl: './custom-baidu-map.component.html',
+  styleUrls: ['./custom-baidu-map.component.less'],
+})
+@Widget('百度地图', {
+  group: 'component',
+  image: 'assets/img/screen/my-baidu-map.png',
+  children: [
+    {
+      title: '标记层',
+      type: 'sc-baidu-marker-layer',
+      option: {},
+      hidden: true,
+      hideChild: true,
+    },
+  ],
+  childTypes: ['sc-baidu-marker-layer', 'sc-baidu-polyline-layer', 'sc-wind-layer', 'sc-typhoon-area-layer'],
+  description: 'hasChildItem',
+} as any)
+export class CustomBaiduMapComponent implements OnInit, OnDestroy, OnChanges {
+  // @Property('字体', { ui: { widget: 'myFont' } })
+  // font: any = {
+  //   family: '',
+  //   color: '#000000',
+  //   weight: 'normal',
+  //   size: 16,
+  //   space: 0,
+  //   lineHeight: 0,
+  // };
+  @Property('地图类型', {
+    enum: MapTypeEnum,
+  })
+  mapType = 'normal';
+  mapTypeValue: string;
+  @Property('上传样式', { type: 'string', ui: { widget: 'myUploadAudio', visibleIf: { mapType: ['custom'] } } })
+  uploadStyle: string;
+  @Property('切换按钮')
+  showMapTypeRadio: boolean;
+  @Property('全景地图', { type: 'boolean' })
+  minMapShow = false;
+  @Property('显示信息', {
+    ui: { widget: 'select' },
+    enum: [
+      { label: '点击', value: 'click' },
+      { label: '悬停', value: 'mouseover' },
+    ],
+  })
+  showType = 'click';
+  @Property('信息窗背景', { ui: { widget: 'myColor' } })
+  infoWindowBackground: string;
+  @Property('信息窗字体', { ui: { widget: 'myColor' } })
+  infoWindowColor: string;
+  @Property('信息窗宽度')
+  infoWindowWidth: number;
+  @Property('信息窗高度')
+  infoWindowHeight: number;
+  @Property('信息窗模板', { ui: { widget: 'textarea' } })
+  infoWindowTemplate: string;
+  @Property('隐藏尖角')
+  @HostBinding('class.hideInfoWindowTail')
+  hideInfoWindowTail: boolean;
+  @Property('隐藏关闭按钮')
+  @HostBinding('class.hideInfoWindowTop')
+  hideInfoWindowTop: boolean;
+  @Property('地图拖动', { type: 'boolean' })
+  dragging = true;
+
+  @Property('遮罩颜色', {
+    ui: { widget: 'myColor' },
+    example: ['#ffffff', '#F5A623', '#F8E71C', '#50E3C2', '#3285FF', '#B45FFF', '#9B9B9B', null],
+  })
+  shadeColor = '#004395';
+  @Property('背景颜色', {
+    ui: { widget: 'myColor' },
+    example: ['#ffffff', '#F5A623', '#F8E71C', '#50E3C2', '#3285FF', '#B45FFF', '#9B9B9B', null],
+  })
+  mapBackColor: string;
+
+  @Property('多边线色', {
+    ui: { widget: 'myColor' },
+    example: ['#ffffff', '#F5A623', '#F8E71C', '#50E3C2', '#3285FF', '#B45FFF', '#9B9B9B', null],
+  })
+  mapCityColor = '#41b7ff';
+  @Property('地图缩放', {
+    ui: { widget: 'myRange', min: 1, max: 40, step: 1 },
+  })
+  zoom = 12;
+  // @Property('放大比例', { type: 'number' })
+  // scale = 1;
+  @Property('遮罩透明', { type: 'number' })
+  fillOpacity = 0;
+  @Property('多边线粗', { type: 'number' })
+  strokesize = 2;
+  @Property('黑夜模式', { type: 'boolean', ui: { hidden: true } })
+  nightMode = false;
+  @Property('3D视角')
+  enable3D: boolean;
+  @Property('定位控件')
+  showLocationControl: boolean;
+  @Property('初始角度', { type: 'number', ui: { visibleIf: { enable3D: [true] } } })
+  tilt = 73;
+  // @Property('中心经度', {
+  //   ui: {widget: 'myRange', min: -180, max: 180, step: 1},
+  // })
+  centerLng = 120.7;
+  // @Property('中心纬度', {
+  //   ui: {widget: 'myRange', min: -90, max: 90, step: 1},
+  // })
+  centerLat = 28;
+  @Property('显示省市', {
+    ui: {
+      widget: 'myUrlSelect',
+      allowClear: true,
+      url: '/assets/mapListItem.json',
+    },
+  })
+  cityName = null;
+  point: any;
+
+  // _data = [
+  //   {
+  //     options: {
+  //       icon: {
+  //         imageUrl: 'assets/img/screen/number-flop.png',
+  //         size: {
+  //           height: 260,
+  //           width: 250
+  //         }
+  //       }
+  //     },
+  //     point: {
+  //       lng: 120.7,   // 经度
+  //       lat: 28,    // 纬度
+  //     }
+  //   },
+  // ];
+  // 文字标注
+
+  public text: string;
+  // _children = [];
+  type: string;
+  map: any;
+  edit: boolean;
+  // markerTierClick: any;
+  // pingyang = '';
+  // ruian = '';
+  @Data({
+    properties: {
+      lng: { type: 'number', title: '经度' },
+      lat: { type: 'number', title: '纬度' },
+    },
+  })
+  _data: any[] = [{ lng: 120.7, lat: 28 }];
+  @DataOutput(['lng', 'lat'])
+  @Event('中心点改变', {
+    params: { properties: { lng: { title: '经度', type: 'number' }, lat: { title: '纬度', type: 'number' } } },
+  })
+  dataChange = new EventEmitter<any>();
+
+  @DataOutput('缩放等级')
+  @Event('缩放', {
+    params: '缩放等级',
+  })
+  zoomChange = new EventEmitter<any>();
+  @Event('地图点击', {
+    params: { properties: { lng: { title: '经度', type: 'number' }, lat: { title: '纬度', type: 'number' } } },
+  })
+  mapClick = new EventEmitter<any>();
+
+  @ViewChild('container', { static: true })
+  container: ElementRef;
+  children: any[];
+  destroy$ = new Subject();
+  destroyed: boolean;
+  // containerStyle: any = {};
+  // unloadedChildren = {};
+  overlaysMap = {};
+
+  // @HostBinding('class.hideInfoWindowTail')
+  // hideInfoWindowTail: boolean;
+
+  private inited: (map: any) => void;
+  init$ = new Promise((resolve) => {
+    this.inited = resolve;
+  });
+  view: any;
+  pickerEvent: any;
+  pickerItem: any;
+  pickerTimeout: any;
+  mapTypeEnum = MapTypeEnum.slice(0, 3);
+  darkStyle: any;
+  firstOpen: boolean;
+  firstOpenPromise: Promise<void>;
+  constructor(
+    private baiduMapService: BaiduMapService,
+    private http: HttpClient,
+    private elementRef: ElementRef,
+    private zone: NgZone,
+    @Optional() private scale$: ScaleSubject,
+    private cd: ChangeDetectorRef,
+    private widgetRef: WidgetRef,
+  ) {}
+
+  get element(): HTMLElement {
+    return this.elementRef.nativeElement;
+  }
+
+  addLayer(layer: any) {
+    if (this.view) {
+      this.view.addLayer(layer);
+    }
+  }
+
+  removeLayer(layer: any) {
+    if (this.view) {
+      this.view.removeLayer(layer);
+    }
+  }
+
+  ngOnChanges(changes: SimpleChanges): void {
+    if (changes._data && this._data[0]) {
+      this.centerLng = +this._data[0].lng;
+      this.centerLat = +this._data[0].lat;
+      this.setCenter(this.centerLng, this.centerLat);
+    }
+  }
+
+  async ngOnInit() {
+    if (this.scale$) {
+      // 这是为了解决地图缩放中心不在鼠标所在位置的问题
+      this.scale$.pipe(takeUntil(this.destroy$)).subscribe((scale) => {
+        const { x: sx, y: sy, scaleContent } = scale as any;
+        const style = this.element.style;
+        if (scaleContent === false) {
+          this.zone.onStable.pipe(take(1)).subscribe(() => {
+            const parent = this.element.parentNode as HTMLElement;
+            if (parent) {
+              const match = /translate\(([-\d.]+)px, ([-\d.]+)px\)/.exec(parent.style.transform);
+              if (match) {
+                const offsetX = parseFloat(match[1]);
+                const offsetY = parseFloat(match[2]);
+                style.transform = `translate(${-offsetX}px,${-offsetY}px)`;
+                style.height = parent.clientHeight + offsetY + 'px';
+                style.width = parent.clientWidth + offsetX + 'px';
+                style.padding = `${offsetY}px 0 0 ${offsetX}px`;
+                // this.containerStyle = {
+                //   transformOrigin: `0 0`,
+                //   transform: `translate(${-offsetX}px,${-offsetY}px)`,
+                //   height: parent.clientHeight + offsetY + 'px',
+                //   width: parent.clientWidth + offsetX + 'px',
+                //   padding: `${offsetY}px 0 0 ${offsetX}px`,
+                // };
+              }
+            }
+
+            // this.cd.markForCheck();
+          });
+        } else {
+          const { position, size } = this.widgetRef.widget as any;
+          const { x, y } = position;
+          const { width, height } = size;
+          style.transform = `translate(${-x}px,${-y}px) scale(${1 / sx},${1 / sy})`;
+          style.height = (y + height) * sy + 'px';
+          style.width = (x + width) * sx + 'px';
+          style.padding = `${y * sy}px 0 0 ${x * sx}px`;
+        }
+
+        // this.cd.markForCheck();
+      });
+    }
+    await this.initMap();
+  }
+
+  async initMap() {
+    await this.baiduMapService.loadMapGL();
+    await this.baiduMapService.loadMapVGL();
+    this.mapTypeValue = this.mapType;
+    // 兼容老的配置
+    if (this.mapType == null) {
+      if (this.uploadStyle) {
+        this.mapTypeValue = 'custom';
+      } else if (this.nightMode) {
+        this.mapTypeValue = 'dark';
+      }
+    }
+    if (!this.destroyed) {
+      this.zone.runOutsideAngular(() => {
+        this.map = new BMapGL.Map(this.container.nativeElement, { restrictCenter: false });
+        this.map.centerAndZoom(new BMapGL.Point(this.centerLng, this.centerLat), this.zoom); // 设置中心点和缩放级别
+        this.map.enableScrollWheelZoom(); // 启用滚轮进行缩放功能
+        // var dist = new BMapGL.DistrictLayer({
+        //   name: '(温州市)',
+        //   kind: 1,
+        //    fillColor: '#fff',
+        //   fillOpacity: 0.1,
+        //   strokeColor: '#daeafa',
+        //   viewport: true,
+        // });
+        // this.map.addDistrictLayer(dist);
+        this.mapTypeChange(this.mapTypeValue);
+        if (this.edit || this.dragging === false) {
+          this.map.disableDragging();
+        }
+        if (this.enable3D) {
+          this.map.setTilt(this.tilt == null ? 73 : this.tilt, { noAnimation: true });
+          this.map.setDisplayOptions({ skyColors: ['rgba(0, 0, 0, 0)'] }); // 隐藏天空
+          // const navi3DCtrl = new BMapGL.NavigationControl3D(); // 添加3D控件
+          // this.map.addControl(navi3DCtrl);
+        } else {
+          this.map.disableTilt();
+          this.map.disableRotate();
+        }
+        if (this.showLocationControl) {
+          const options = {
+            // 控件的停靠位置（可选，默认左上角）
+            anchor: BMAP_ANCHOR_TOP_LEFT,
+            // 控件基于停靠位置的偏移量（可选）
+            offset: new BMapGL.Size(20, 20),
+          };
+          let locationControl = new BMapGL.LocationControl(options);
+          // 将控件添加到地图上
+          this.map.addControl(locationControl);
+        }
+        if (this.minMapShow) {
+          const stCtrl = new BMapGL.PanoramaControl();
+          stCtrl.setOffset(new BMapGL.Size(20, 20));
+          this.map.addControl(stCtrl);
+        }
+        if (this.infoWindowBackground) {
+          this.element.style.setProperty('--info-window-background', this.infoWindowBackground);
+        }
+        if (this.infoWindowColor) {
+          this.element.style.setProperty('--info-window-color', this.infoWindowColor);
+        }
+        this.map.addEventListener('moveend', (event) => {
+          const center = this.map.getCenter();
+          this.dataChange.emit(center);
+        });
+        this.map.addEventListener('click', (event) => {
+          this.mapClick.emit(event.pointer);
+        });
+        this.map.addEventListener('zoomend', (event) => {
+          this.zoomChange.emit(this.map.getZoom());
+          this.dataChange.emit(this.map.getCenter());
+        });
+        this.view = new mapvgl.View({
+          map: this.map,
+        });
+        this.mapLoaded(this.map);
+      });
+      this.inited(this.map);
+    }
+  }
+
+  setCenter(lng: number, lat: number) {
+    if (this.map && lng && lat) {
+      const center = this.map.getCenter();
+      if (center.lng != lng || center.lat != lat) {
+        this.setCenterAndZoom(lng, lat, this.map.getZoom());
+      }
+    }
+  }
+
+  setCenterAndZoom(lng: number, lat: number, zoom: number) {
+    const center = this.map.getCenter();
+    const currentZoom = this.map.getZoom();
+    // 误差范围内不移动,防止背景抖动
+    if (zoom != currentZoom || Math.abs(lng - center.lng) > 1e-13 || Math.abs(lat - center.lat) > 1e-7) {
+      const point = new BMapGL.Point(lng, lat);
+      this.map.centerAndZoom(point, zoom, { tilt: this.map.getTilt() });
+    }
+  }
+
+  /**
+   * 根据经纬度范围设置中心和缩放等级
+   * @param minLng
+   * @param maxLng
+   * @param minLat
+   * @param maxLat
+   */
+  setRectCenterAndZoom(minLng: number, maxLng: number, minLat: number, maxLat: number) {
+    this.setCenterAndZoom((maxLng + minLng) / 2, (maxLat + minLat) / 2, this.getZoom(maxLng, minLng, maxLat, minLat));
+  }
+
+  getZoom(maxLng: number, minLng: number, maxLat: number, minLat: number) {
+    const zooms = [
+      50, 100, 200, 500, 1000, 2000, 5000, 10000, 20000, 25000, 50000, 100000, 200000, 500000, 1000000, 2000000,
+    ]; //级别18到3。
+    const pointA = new BMapGL.Point(maxLng, maxLat); // 创建点坐标A
+    const pointB = new BMapGL.Point(minLng, minLat); // 创建点坐标B
+    const distance = +this.map.getDistance(pointA, pointB).toFixed(1); //获取两点距离,保留小数点后两位
+    const i = zooms.findIndex((zoom) => zoom - distance > 0);
+    if (i === -1) {
+      return 5;
+    }
+    //之所以会多3，是因为地图范围常常是比例尺距离的10倍以上。所以级别会增加3。
+    return 18 - i + 3;
+  }
+
+  openInfoWindow(data: any, lng: number, lat: number) {
+    if (data.information || this.infoWindowTemplate) {
+      const point = new BMapGL.Point(+lng, +lat);
+      // let offsetY = -25;
+      // if (this.hideInfoWindowTail) {
+      //   offsetY = 0;
+      // }
+      let information = data.information;
+      if (this.infoWindowTemplate) {
+        information = TemplateUtil.parse(this.infoWindowTemplate, data);
+      }
+      const options = {
+        offset: new BMapGL.Size(0, 0),
+        width: this.infoWindowWidth || 0,
+        height: this.infoWindowHeight || 0,
+      };
+      const infoWindow = new BMapGL.InfoWindow(information, options);
+      // 第一次打开信息窗口后在短时间关闭或重新打开会导致click事件失效，临时解决方案是第一次打开后0.5秒内不关闭
+      if (!this.firstOpen) {
+        if (this.firstOpenPromise) {
+          this.firstOpenPromise.then(() => {
+            this.map.openInfoWindow(infoWindow, point);
+          });
+        } else {
+          this.firstOpenPromise = new Promise<void>((resolve) => {
+            setTimeout(() => {
+              this.firstOpen = true;
+              this.firstOpenPromise = null;
+              resolve();
+            }, 500);
+          });
+          this.map.openInfoWindow(infoWindow, point);
+        }
+        const rawClose = infoWindow.close;
+        infoWindow.close = () => {
+          if (this.firstOpenPromise) {
+            this.firstOpenPromise.then(() => rawClose.call(infoWindow));
+          } else {
+            rawClose.call(infoWindow);
+          }
+        };
+      } else {
+        this.map.openInfoWindow(infoWindow, point);
+      }
+      return infoWindow;
+    }
+  }
+
+  getCanvasOverlay(child: any) {
+    let canvasOverlay;
+    if (this.enable3D) {
+      const item = child.item;
+      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));
+        canvasOverlay = new BMapGL.GroundOverlay(bounds, {
+          type: 'canvas',
+          url: item.canvas,
+          opacity: 1,
+        });
+      }
+    } else {
+      const pointToPixel = (data) => {
+        const point = new BMapGL.Point(data.lng, data.lat);
+        return this.map.pointToPixel(point);
+      };
+      canvasOverlay = new BMapGL.CanvasLayer({
+        paneName: 'markerShadow',
+        update: function () {
+          var ctx = this.canvas.getContext('2d');
+          if (!ctx) {
+            return;
+          }
+          ctx.clearRect(0, 0, ctx.canvas.width, ctx.canvas.height);
+          child.update(ctx, pointToPixel);
+        },
+      });
+    }
+    return canvasOverlay;
+  }
+
+  ngOnDestroy(): void {
+    this.destroy$.next();
+    this.destroy$.complete();
+    this.destroyed = true;
+    if (this.view) {
+      this.view.destroy();
+    }
+    if (this.map) {
+      this.map.destroy();
+    }
+  }
+
+  async mapLoaded(map: any) {
+    if (this.cityName) {
+      if (this.cityName === '温州') {
+        this.cityName = 'wenzhou';
+      }
+      const json: any = await this.http.get('assets/echarts/map/json/' + this.cityName + '.json').toPromise();
+      const polygonData = [];
+      let encodeScale = json.UTF8Scale || 1024;
+      json.features.forEach(({ geometry }) => {
+        geometry.coordinates = (geometry.coordinates as any[]).forEach((coordinate, i) => {
+          if (geometry.type === 'MultiPolygon') {
+            const coordinates = (coordinate as any[]).map((points, j) => {
+              if (json.UTF8Encoding) {
+                points = this.decodePolygon(points, geometry.encodeOffsets[i][j], encodeScale);
+              }
+              return points;
+            });
+            polygonData.push(coordinates);
+          } else {
+            if (json.UTF8Encoding) {
+              coordinate = this.decodePolygon(coordinate, geometry.encodeOffsets[i], encodeScale);
+            }
+            polygonData.push([coordinate]);
+          }
+        });
+      });
+      const data = [
+        {
+          geometry: {
+            type: 'MultiPolygon',
+            coordinates: polygonData,
+          },
+        },
+      ];
+      var layer = new mapvgl.PolygonLayer({
+        lineColor: this.mapCityColor,
+        lineWidth: this.strokesize || 2,
+        fillColor: this.shadeColor,
+        data,
+        renderOrder: -2,
+      });
+      this.view.addLayer(layer);
+      if (this.mapBackColor && !this.mapBackColor.match(/rgba\(\d+,\d+,\d+,0\)/)) {
+        var maskLayer = new mapvgl.MaskLayer({
+          color: this.mapBackColor,
+          data,
+          renderOrder: -3,
+        });
+        this.view.addLayer(maskLayer);
+      }
+    }
+  }
+
+  decodePolygon(coordinate: string, encodeOffsets: number[], encodeScale: number) {
+    const result = [];
+    let prevX = encodeOffsets[0];
+    let prevY = encodeOffsets[1];
+
+    for (let i = 0; i < coordinate.length; i += 2) {
+      var x = coordinate.charCodeAt(i) - 64;
+      var y = coordinate.charCodeAt(i + 1) - 64;
+      // ZigZag decoding
+      x = (x >> 1) ^ -(x & 1);
+      y = (y >> 1) ^ -(y & 1);
+      // Delta deocding
+      x += prevX;
+      y += prevY;
+
+      prevX = x;
+      prevY = y;
+      // Dequantize
+      result.push([x / encodeScale, y / encodeScale]);
+    }
+
+    return result;
+  }
+
+  async mapTypeChange(mapType: string) {
+    switch (mapType) {
+      case 'dark':
+        if (!this.darkStyle) {
+          this.darkStyle = await this.http.get('assets/echarts/map/json/custom_map.json').toPromise();
+        }
+        this.map.setMapType(BMAP_NORMAL_MAP);
+        this.map.setMapStyleV2({ styleJson: this.darkStyle });
+        break;
+      case 'satellite':
+        this.map.setMapType(BMAP_SATELLITE_MAP);
+        break;
+      case 'custom':
+        if (this.uploadStyle) {
+          const styleJson = await this.http.get(this.uploadStyle).toPromise();
+          this.map.setMapType(BMAP_NORMAL_MAP);
+          this.map.setMapStyleV2({ styleJson });
+        }
+        break;
+      default:
+        this.map.setMapType(BMAP_NORMAL_MAP);
+        this.map.setMapStyleV2({ styleJson: null });
+    }
+  }
+}

package/src/lib/custom-baidu-map/custom-baidu-map.module.ts

@@ -0,0 +1,41 @@
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { CustomBaiduMapComponent } from './custom-baidu-map.component';
+import { WidgetBaseModule, WidgetService } from 'bbj-widget-base';
+import { WindLayerComponent } from './wind-layer/wind-layer.component';
+import { BaiduMarkerLayerComponent } from './baidu-marker-layer/baidu-marker-layer.component';
+import { BaiduPolylineLayerComponent } from './baidu-polyline-layer/baidu-polyline-layer.component';
+import { NzDropDownModule } from 'ng-zorro-antd/dropdown';
+import { NzNoAnimationModule } from 'ng-zorro-antd/core/no-animation';
+import { ScrollingModule } from '@angular/cdk/scrolling';
+import { NzRadioModule } from 'ng-zorro-antd/radio';
+import { FormsModule } from '@angular/forms';
+import { TyphoonAreaLayerComponent } from './typhoon-area-layer/typhoon-area-layer.component';
+
+@NgModule({
+  declarations: [
+    CustomBaiduMapComponent,
+    BaiduMarkerLayerComponent,
+    BaiduPolylineLayerComponent,
+    WindLayerComponent,
+    TyphoonAreaLayerComponent,
+  ],
+  imports: [
+    CommonModule,
+    WidgetBaseModule,
+    NzDropDownModule,
+    NzNoAnimationModule,
+    ScrollingModule,
+    NzRadioModule,
+    FormsModule,
+  ],
+})
+export class CustomBaiduMapModule {
+  constructor(widgetService: WidgetService) {
+    widgetService.register(CustomBaiduMapComponent, { scaleContent: false });
+    widgetService.register(BaiduMarkerLayerComponent);
+    widgetService.register(BaiduPolylineLayerComponent);
+    widgetService.register(WindLayerComponent);
+    widgetService.register(TyphoonAreaLayerComponent);
+  }
+}

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();
+  });
+});