bbj-screen-widget 2.4.62 → 2.4.63

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

@@ -1,689 +0,0 @@
-import {
-  Component,
-  EventEmitter,
-  forwardRef,
-  Inject,
-  NgZone,
-  OnChanges,
-  OnDestroy,
-  OnInit,
-  SimpleChanges,
-  ViewChild,
-} from '@angular/core';
-import { Data, DataOutput, Property, Widget, Event, DataInput } from 'bbj-widget-base';
-import { ParentContainerComponent } from '../../parent-container/parent-container.component';
-import { SFArrayWidgetSchema } from '@delon/form';
-import { getFontStyle } from '../../shared/util/style.util';
-import { CustomBaiduMapComponent } from '../custom-baidu-map.component';
-import { BaseLayer } from '../base-layer';
-import { FileUrlService } from '../../shared/service/file-url.service';
-import { NzContextMenuService } from 'ng-zorro-antd/dropdown';
-import { ScrollDispatcher } from '@angular/cdk/scrolling';
-import { getUUID } from '../../shared/util/base.util';
-import { Subject } from 'rxjs';
-import { takeUntil } from 'rxjs/operators';
-
-declare const mapvgl;
-
-@Component({
-  selector: 'sc-baidu-marker-layer',
-  templateUrl: './baidu-marker-layer.component.html',
-  styleUrls: ['./baidu-marker-layer.component.less'],
-  providers: [ScrollDispatcher], // 防止虚拟滚到导致浮层关闭
-})
-@Widget('标记层', {
-  group: 'component',
-  image: '',
-  icon: '',
-  hidden: true,
-})
-export class BaiduMarkerLayerComponent extends BaseLayer implements OnInit, OnDestroy, OnChanges {
-  @Property('', { min: 1, ui: { widget: 'myPicture', spanLabel: 0, spanControl: 24 } })
-  iconUrl = 'assets/img/screen/marker.png';
-  @Property('图标宽', { type: 'number' })
-  iconWidth = 25;
-  @Property('图标高', { type: 'number' })
-  iconHeight = 38.25;
-  @Property('图标偏移x', { type: 'number' })
-  iconOffsetX = 0;
-  @Property('图标偏移y', { type: 'number' })
-  iconOffsetY = -19.125;
-  // @Property('分组', {type: 'string'})
-  // group = '';
-
-  @Property('移至中心')
-  toCenter: boolean = false;
-  @Property('点聚合')
-  enableMarkerClusterer: boolean = false;
-  @Property('聚合最小直径', { type: 'number', ui: { visibleIf: { enableMarkerClusterer: [true] } } })
-  clusterMinSize = 25;
-  @Property('聚合最大直径', { type: 'number', ui: { visibleIf: { enableMarkerClusterer: [true] } } })
-  clusterMaxSize = 40;
-  @Property('聚合字体', { ui: { widget: 'myFont' } })
-  clusterFont: any = {
-    color: '#ffffff',
-    size: 16,
-  };
-  @Property('聚合颜色', {
-    ui: {
-      widget: 'seriesColor',
-      visibleIf: { enableMarkerClusterer: [true] },
-    },
-  })
-  clusterGradient: string[];
-  @Property('聚合最大级别', { type: 'number', ui: { visibleIf: { enableMarkerClusterer: [true] } } })
-  clusterMaxZoom = 4;
-  @Property('显示标签', { ui: { visibleIf: { enableMarkerClusterer: [false] } } })
-  showLabel: boolean;
-  @Property('标签显示缩放等级', { ui: { visibleIf: { showLabel: [true] } } })
-  showLabelMinZoom: number;
-  // @Property('标签底色', { ui: { widget: 'myColor', visibleIf: { showLabel: [true] } } })
-  // labelBackground: string;
-  @Property('标签字体', { ui: { widget: 'myFont', visibleIf: { showLabel: [true] } } })
-  labelFont: any = {
-    family: '',
-    color: '#000000',
-    weight: 'normal',
-    size: 16,
-    space: 0,
-    lineHeight: 0,
-  };
-  @Property('描边颜色', {
-    ui: {
-      widget: 'myColor',
-    },
-  })
-  stroke: string;
-  @Property('描边粗细', { type: 'integer' })
-  strokeWidth: number;
-  @Property('阴影', { ui: { widget: 'myShadow' } })
-  shadow: any = { color: '', X: 0, Y: 0, Z: 0 };
-  @Property('标签偏移x', { ui: { widget: 'number', visibleIf: { showLabel: [true] } } })
-  labelOffsetX: number;
-  @Property('标签偏移y', { ui: { widget: 'number', visibleIf: { showLabel: [true] } } })
-  labelOffsetY: number;
-  @Property('选中放大')
-  enlargeOnSelect: boolean;
-  @Property('选中时放大倍数', { type: 'number' })
-  selectedSize = 1.5;
-  @Property('选中时地图缩放', { type: 'number' })
-  selectedMapZoom: number;
-  @Property('点击空白取消选中', { type: 'boolean', default: true })
-  unselectOnClickBlank = true;
-  @Property('标记分组', {
-    type: 'array',
-    title: '标记分组',
-    maxItems: 10,
-    items: {
-      type: 'object',
-      properties: {
-        group: {
-          type: 'string',
-          title: '分组',
-        },
-        type: {
-          title: '类型',
-          type: 'string',
-          enum: [
-            {
-              label: '图标',
-              value: 'icon',
-            },
-            {
-              label: '圆点',
-              value: 'circle',
-            },
-            {
-              label: '正方形',
-              value: 'square',
-            },
-            {
-              label: '波纹',
-              value: 'wave',
-            },
-            {
-              label: '扩散',
-              value: 'bubble',
-            },
-          ],
-          default: 'icon',
-        },
-        color: {
-          type: 'string',
-          title: '颜色',
-          ui: { widget: 'myColor', visibleIf: { type: ['circle', 'square'] } },
-        },
-        size: {
-          type: 'number',
-          title: '尺寸',
-          ui: { visibleIf: { type: ['circle', 'square', 'wave', 'bubble'] } },
-        },
-        imageUrl: {
-          type: 'string',
-          title: '图片',
-          ui: {
-            widget: 'myPicture',
-            visibleIf: { type: ['icon'] },
-          },
-        },
-        width: {
-          type: 'number',
-          title: '宽度',
-          default: 19,
-          ui: { visibleIf: { type: ['icon'] } },
-        },
-        height: {
-          type: 'number',
-          title: '高度',
-          default: 25,
-          ui: { visibleIf: { type: ['icon'] } },
-        },
-        XOffset: {
-          type: 'number',
-          title: 'X轴偏移',
-          ui: { visibleIf: { type: ['icon'] } },
-        },
-        YOffset: {
-          type: 'number',
-          title: 'Y轴偏移',
-          ui: { visibleIf: { type: ['icon'] } },
-        },
-        enableMarkerClusterer: {
-          type: 'boolean',
-          title: '是否聚合',
-          ui: { visibleIf: { type: ['icon'] } },
-        },
-      },
-      required: [],
-    },
-    ui: { grid: { arraySpan: 24 }, spanControl: 24 } as SFArrayWidgetSchema,
-  })
-  groups = [];
-  @Data({
-    properties: {
-      id: { type: 'string', title: 'id' },
-      address: { type: 'string', title: '地点' },
-      information: { type: 'string', title: '信息' },
-      group: { type: 'string', title: '标记分组' },
-      lng: { type: 'number', title: '经度' },
-      lat: { type: 'number', title: '纬度' },
-      icon: { type: 'string', title: '图标' },
-    },
-  })
-  _data: any[] = [
-    {
-      id: '1',
-      address: '',
-      information: '暂无信息',
-      group: '',
-      lng: '120.7',
-      lat: '28',
-    },
-  ];
-  // id: string;
-  @DataOutput(['id', 'address', 'lng', 'lat'])
-  @Event('选中值改变', {
-    params: {
-      properties: {
-        id: { type: 'string', title: 'id' },
-        address: { type: 'string', title: '地点' },
-        lng: { type: 'number', title: '经度' },
-        lat: { type: 'number', title: '纬度' },
-      },
-    },
-  })
-  makerClick = new EventEmitter();
-  @DataInput('选中id')
-  selectedId: string;
-  @Event('点击', {
-    params: {
-      properties: {
-        id: { type: 'string', title: 'id' },
-        address: { type: 'string', title: '地点' },
-        lng: { type: 'number', title: '经度' },
-        lat: { type: 'number', title: '纬度' },
-      },
-    },
-  })
-  onClick = new EventEmitter();
-
-  layers = [];
-  inited: boolean;
-  // defaultLayer: any;
-  layerMap = {};
-  clickData: any;
-  clickTimeout: any;
-  @ViewChild('menu')
-  menu: any;
-  subMarkers: any[];
-  dataMap = {};
-  groupData: {};
-  lastSelect: any;
-  currentSelectedId: string;
-  textLayer: any;
-  destroy$ = new Subject();
-  constructor(
-    protected parent: CustomBaiduMapComponent,
-    protected zone: NgZone,
-    private fileUrlService: FileUrlService,
-    private nzContextMenuService: NzContextMenuService,
-  ) {
-    super(parent, zone);
-  }
-
-  ngOnInit(): void {
-    super.ngOnInit();
-    if (this.showLabel && this.showLabelMinZoom != null) {
-      this.parent.zoomChange.pipe(takeUntil(this.destroy$)).subscribe((zoom) => {
-        this.updateTextVisible(zoom);
-      });
-    }
-  }
-
-  ngOnChanges(changes: SimpleChanges) {
-    if (this.inited) {
-      if (changes._data) {
-        this.zone.runOutsideAngular(() => {
-          this.updateData();
-        });
-      }
-      if (changes.selectedId) {
-        if (this.selectedId != this.currentSelectedId) {
-          this.select(this.selectedId, { move: true });
-        }
-      }
-    }
-  }
-
-  ngOnDestroy(): void {
-    super.ngOnDestroy();
-    this.destroy$.next();
-    this.destroy$.complete();
-  }
-
-  createLayers(): any[] {
-    const layers = [];
-    this.layerMap = {};
-    const defaultLayer = this.createLayer();
-    this.layerMap[''] = defaultLayer;
-    layers.push(defaultLayer);
-    if (this.groups?.length) {
-      this.groups.forEach((group) => {
-        if (group.group) {
-          const layer = this.createLayer(group);
-          this.layerMap[group.group] = layer;
-          layers.push(layer);
-        }
-      });
-    }
-    if (!this.enableMarkerClusterer && this.showLabel) {
-      const textOptions = {
-        ...this.getTextOptions(this.labelFont),
-        // color: '#fff',
-        // fontFamily: 'Microsoft Yahei',
-        // fontSize: 14,
-        flat: false,
-        collides: true,
-        offset: [this.labelOffsetX || 0, this.labelOffsetY || 0],
-        stroke: {
-          color: this.stroke,
-        },
-        padding: [2, 2],
-        margin: [0, 0],
-      };
-      if (this.stroke && this.stroke !== 'rgba(0,0,0,0)') {
-        textOptions.stroke = { color: this.stroke };
-      }
-      if (this.strokeWidth) {
-        textOptions.lineWidth = this.strokeWidth;
-      }
-      if (this.shadow) {
-        textOptions.shadow = {
-          color: this.shadow.color,
-          blur: this.shadow.Z,
-          offsetX: this.shadow.X,
-          offsetY: this.shadow.Y,
-        };
-      }
-      this.textLayer = new mapvgl.TextLayer(textOptions);
-      if (this.showLabelMinZoom != null) {
-        this.parent.init$.then(() => {
-          const zoom = this.parent.map.getZoom();
-          this.updateTextVisible(zoom);
-        });
-      }
-      layers.push(this.textLayer);
-    }
-    return layers;
-  }
-
-  createLayer(group?: any) {
-    let layer: any;
-    const type = group?.type;
-    if (type === 'circle' || type === 'square') {
-      const options = {
-        shape: type,
-        color: group?.color || 'rgba(50, 50, 200, 1)',
-        size: group?.size || 10,
-      };
-      this.addPickEvent(options);
-      layer = new mapvgl.PointLayer(options);
-    } else if (type === 'bubble' || type === 'wave') {
-      const options = {
-        type,
-        color: group?.color || 'rgba(255, 0, 0, 1)',
-        size: group?.size || 10,
-        duration: 1,
-        trail: 1,
-      };
-      this.addPickEvent(options);
-      layer = new mapvgl.CircleLayer(options);
-    } else {
-      const iconOptions = this.getIconOptions(group);
-      if (this.enableMarkerClusterer || group?.enableMarkerClusterer) {
-        const options: any = {
-          iconOptions,
-          textOptions: this.getTextOptions(this.clusterFont),
-          minSize: this.clusterMinSize || 25,
-          maxSize: this.clusterMaxSize || 40,
-        };
-        if (this.clusterGradient?.length) {
-          const gradient: any = {};
-          gradient[0] = this.clusterGradient[0];
-          this.clusterGradient.slice(1).forEach((g, i) => {
-            gradient[(i + 1) / this.clusterGradient.length] = g;
-          });
-          options.gradient = gradient;
-        }
-        if (this.clusterMaxZoom != null) {
-          options.maxZoom = this.clusterMaxZoom;
-        }
-        this.addPickEvent(options);
-        layer = new mapvgl.ClusterLayer(options);
-      } else {
-        this.addPickEvent(iconOptions);
-        layer = new mapvgl.IconLayer(iconOptions);
-      }
-    }
-    return layer;
-  }
-
-  updateTextVisible(zoom?: number) {
-    if (this.textLayer) {
-      if (zoom >= this.showLabelMinZoom) {
-        this.textLayer.show();
-      } else {
-        this.textLayer.hide();
-      }
-    }
-  }
-
-  updateData() {
-    this.dataMap = {};
-    if (this.toCenter && this._data.length > 0) {
-      let maxLng = -180;
-      let minLng = 180;
-      let maxLat = -90;
-      let minLat = 90;
-      this._data.forEach((res) => {
-        maxLng = Math.max(maxLng, res.lng);
-        minLng = Math.min(minLng, res.lng);
-        maxLat = Math.max(maxLat, res.lat);
-        minLat = Math.min(minLat, res.lat);
-      });
-      this.parent.setRectCenterAndZoom(minLng, maxLng, minLat, maxLat);
-    }
-    const groupData = {};
-    this.groupData = groupData;
-    const textData = [];
-    const groups = Object.keys(this.layerMap);
-    groups.forEach((group) => {
-      groupData[group] = [];
-    });
-    // const defaultData = [];
-    this._data.forEach((record) => {
-      let groupName = record.group;
-      if (groupName == null || this.layerMap[groupName] == null) {
-        groupName = '';
-      }
-      let id = record.id_value || record.id;
-      if (id == null || id == '') {
-        id = getUUID();
-      }
-      const item: any = {
-        geometry: {
-          type: 'Point',
-          coordinates: [record.lng, record.lat],
-        },
-        properties: {
-          text: record.address,
-          id,
-          group: groupName,
-          raw: record,
-        },
-      };
-      // MapVGL的bug，ClusterLayer的iconOptions无效，只能通过properties设置
-
-      const layer = this.layerMap[groupName];
-      if (layer != null && layer instanceof mapvgl.ClusterLayer) {
-        const options = layer.getOptions();
-        if (options.iconOptions) {
-          const { height, width, offset, icon } = options.iconOptions;
-          item.properties = { height, width, offset, icon, ...item.properties };
-        }
-      }
-      if (record.icon) {
-        item.properties.icon = this.fileUrlService.getUrl(record.icon);
-      }
-      // if (this.selectedId && this.selectedId == id) {
-      //   this.updateSize(item, 1.5);
-      //   this.lastSelect = item;
-      // }
-      groupData[groupName].push(item);
-      this.dataMap[item.properties.id] = item;
-      if (this.textLayer) {
-        textData.push(item);
-      }
-    });
-    if (this.selectedId) {
-      this.select(this.selectedId, { move: this.selectedId != this.currentSelectedId, resetLayer: false, force: true });
-    }
-    groups.forEach((group) => {
-      const layer = this.layerMap[group];
-      const data = groupData[group];
-      layer.setData(data);
-    });
-    if (this.textLayer) {
-      this.textLayer.setData(textData);
-    }
-  }
-
-  getIconOptions(group: any) {
-    let icon = this.iconUrl || 'assets/img/screen/marker.png';
-    let height = this.iconHeight || 38.25;
-    let width = this.iconWidth || 25;
-    let offsetX = this.iconOffsetX == null ? 0 : this.iconOffsetX;
-    let offsetY = this.iconOffsetY == null ? -height / 2 : this.iconOffsetY;
-    if (group && group.imageUrl) {
-      icon = this.fileUrlService.getUrl(group.imageUrl);
-      width = group.width || width;
-      height = group.height || height;
-      offsetX = group.XOffset != null ? group.XOffset : 0;
-      offsetY = group.YOffset != null ? group.YOffset : -height / 2;
-    }
-    const iconOptions: any = {
-      icon,
-      width,
-      height,
-      offset: [offsetX, offsetY],
-    };
-    return iconOptions;
-  }
-
-  getTextOptions(font: any) {
-    const textOptions: any = {};
-    if (font) {
-      if (font.size) textOptions.fontSize = font.size;
-      if (font.family) textOptions.fontFamily = font.family;
-      if (font.color) textOptions.color = font.color;
-      // switch (font.weight) {
-      //   case 'lighter':
-      //     textOptions.lineWidth = 1;
-      //     break;
-      //   case 'normal':
-      //     textOptions.lineWidth = 2;
-      //     break;
-      //   case 'bold':
-      //     textOptions.lineWidth = 3;
-      //     break;
-      //   case 'bolder':
-      //     textOptions.lineWidth = 4;
-      //     break;
-      // }
-    }
-    return textOptions;
-  }
-
-  addPickEvent(options: any) {
-    options.enablePicked = true;
-    options.onClick = ({ dataItem }) => {
-      // 每个图层都会触发一次click事件，如果每个图层都没有点中标记点，传出null
-      if (dataItem) {
-        this.clickData = dataItem;
-      }
-      if (this.unselectOnClickBlank !== false && this.clickTimeout == null) {
-        this.clickTimeout = setTimeout(() => {
-          if (this.clickData == null) {
-            this.selectedId = null;
-            this.select(null);
-          }
-          this.clickTimeout = null;
-          this.clickData = null;
-          this.subMarkers = null;
-        });
-      }
-      if (dataItem) {
-        if (dataItem.type === 'Feature') {
-          const coordinates = dataItem.geometry.coordinates;
-          this.parent.setCenterAndZoom(coordinates[0], coordinates[1], this.parent.map.getZoom() + 2);
-        } else {
-          const data = dataItem.properties.raw;
-          if (data) {
-            this.selectedId = dataItem.properties.id;
-            this.select(dataItem.properties.id);
-            this.zone.run(() => {
-              this.onClick.emit({ ...data, id: data.id_value || data.id });
-            });
-          }
-        }
-      }
-    };
-    if (this.parent.showType === 'mouseover') {
-      let infoWindow = null;
-      let infoWindowData = null;
-      options.onMousemove = ({ dataItem }) => {
-        const data = dataItem != null ? dataItem.properties.raw : null;
-        if (infoWindow != null && infoWindowData != data) {
-          infoWindow.close();
-          infoWindow = null;
-        }
-        if (data && data.information && infoWindow == null) {
-          infoWindowData = data;
-          infoWindow = this.parent.openInfoWindow(data, data.lng, data.lat);
-        }
-      };
-    }
-  }
-
-  select(id: any, options: { move?: boolean; resetLayer?: boolean; force?: boolean } = {}) {
-    if (id != this.currentSelectedId || options.force) {
-      let item: any;
-      if (id != null && id !== '') {
-        item = this.dataMap[id];
-        // 如果找不到数据，可能是数据还没加载，等数据加载了再执行
-        if (item == null) {
-          return;
-        }
-      }
-      this.currentSelectedId = id;
-      let lastSelectGroup: string;
-      let currentSelectGroup: string;
-      let selectedData: any;
-      if (this.lastSelect) {
-        lastSelectGroup = this.lastSelect.properties.group;
-        this.updateSize(this.lastSelect, 1);
-        this.lastSelect = null;
-      }
-      if (item) {
-        currentSelectGroup = item.properties.group;
-        this.updateSize(item, this.selectedSize ?? 1.5);
-        this.lastSelect = item;
-        selectedData = item.properties.raw;
-        if (options.move) {
-          const layer = this.layerMap[currentSelectGroup];
-          let zoom = this.parent.map.getZoom();
-          if (this.selectedMapZoom) {
-            zoom = this.selectedMapZoom;
-          } else if (
-            layer instanceof mapvgl.ClusterLayer &&
-            this.clusterMaxZoom != null &&
-            Math.floor(zoom) <= this.clusterMaxZoom
-          ) {
-            zoom = this.clusterMaxZoom + 2;
-          }
-          this.parent.setCenterAndZoom(selectedData.lng, selectedData.lat, zoom);
-        }
-
-        if (selectedData.information && this.parent.showType !== 'mouseover') {
-          // 防止其他图层将信息窗口关闭
-          setTimeout(() => {
-            this.parent.openInfoWindow(selectedData, selectedData.lng, selectedData.lat);
-          });
-        }
-      } else {
-        selectedData = {};
-      }
-      if (options.resetLayer !== false) {
-        if (currentSelectGroup != null) {
-          this.resetLayerData(currentSelectGroup);
-        }
-        if (lastSelectGroup != null && lastSelectGroup !== currentSelectGroup) {
-          this.resetLayerData(lastSelectGroup);
-        }
-      }
-      // 如果选中的id找不到对应数据,可能是数据还没加载，
-      if (id == null || item != null) {
-        this.zone.run(() => {
-          this.makerClick.emit({ ...selectedData, id: selectedData.id_value || selectedData.id });
-        });
-      }
-    }
-  }
-
-  resetLayerData(group: string) {
-    const layer = this.layerMap[group];
-    const data = this.groupData[group];
-    if (layer && data) {
-      layer.setData(data);
-    }
-  }
-
-  updateSize(item: any, scale: number) {
-    if (item && this.enlargeOnSelect) {
-      const layer = this.layerMap[item.properties.group];
-      let options: any;
-
-      if (layer instanceof mapvgl.ClusterLayer) {
-        options = layer.getOptions().iconOptions;
-      } else {
-        options = layer.getOptions();
-      }
-      const { height, width, offset } = options;
-      item.properties.height = height * scale;
-      item.properties.width = width * scale;
-      if (item.properties.offset) {
-        item.properties.offset = [offset[0] * scale, offset[1] * scale];
-      }
-    }
-  }
-}