Skip to content

创建海量label

  • 支持独立事件绑定
  • 可见范围内有30万点有轻微卡顿

例:

typescript
 const labels = _3umap.createLabelCollection()
 labels.add(option)

可配置参数

typescript
 type LabelCollectionOptions = {
  addOptions: {
    id?: string;
    position: [number, number, number?] | Point3d;
    /** 显示消失 */
    show?: boolean;
    /** 文字内容 */
    text?: string;
    /** 文字大小 */
    fontSize?: number;
    /** 字体颜色 */
    fontColor?: MapColor;
    /** 背景填充颜色 */
    fillColor?: MapColor;
    /** 是否显示背景 */
    showBackground?: boolean;
    /** 内边距 */
    padding?: [number, number];
    /** 缩放 */
    scale?: number;
    /** 填充样式 */
    style?: 'fill' | 'outline' | 'fill_and_outline';
    /** 描边大小 */
    outlineWidth?: number;
    /** 描边颜色 */
    outlineColor?: MapColor;
    /** 垂直对齐方式 */
    verticalOrigin?: 'center' | 'bottom' | 'top';
    /** 水平对齐方式 */
    horizontalOrigin?: 'center' | 'left' | 'right';
    /** 偏移量 */
    offset?: [number, number];
    /** 近距离 */
    near?: number;
    /** 远距离 */
    far?: number;
    /** 近距离缩放 */
    nearScale?: number;
    /** 远距离缩放 */
    farScale?: number;
    /** 是否绝对定位  */
    absolute?: boolean;
    labelOffset?: [number, number];
    property?: Record<string | symbol, any>;
  };
};

标签

typescript
 const label = _3umap.createLabelCollection()
    label.label.setHtml('<div>label标签</div>') 
    label.on('click', (ev, mark, even) => {
      if (mark === 'in') {
        ev[0].label.show = true
      } else {
        ev[0].label.show = false
      }
    })

image-20240618153528968

配置