bbj-screen-widget 2.4.60 → 2.4.62

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

@@ -0,0 +1,689 @@
+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];
+      }
+    }
+  }
+}