Skip to content

创建海量图片点

  • 支持独立事件绑定
  • 可见范围内有50万点位有轻微卡顿
typescript
 const image = createImageCollection()
 image.add(options)

可配置参数

typescript
 type ImageCollectionOptions = {
  /** add方法参数 */
  addOptions: {
    id?: string;
    /** 位置 */
    position: Point3d | [number, number, number?];
    /** 显示消失 */
    show?: boolean;
    /** 图片地址 */
    img: string | HTMLCanvasElement | ((time: JulianDate, result: object) => string | HTMLCanvasElement);
    /** 旋转角度,只针对图片 */
    rotation?: number;
    /** 宽度 */
    width?: number;
    /** 高度  */
    height?: number;
    /** 缩放大小 */
    scale?: number;
    /** 是否绝对定位  */
    absolute?: boolean;
    /** 垂直对齐方式 */
    verticalOrigin?: 'center' | 'bottom' | 'top';
    /** 水平对齐方式 */
    horizontalOrigin?: 'center' | 'left' | 'right';
    /** 近距离 */
    near?: number;
    /** 远距离 */
    far?: number;
    /** 近距离缩放 */
    nearScale?: number;
    /** 远距离缩放 */
    farScale?: number;
    /** 是否以米为单位 */
    sizeInMeters?: boolean;
    /** 偏移量 */
    offset?: [number, number];
    /** 颜色 */
    color?: MapColor;
    /** label偏移量 */
    labelOffset?: [number, number];
    property?: Record<string | symbol, any>;
  };
};

标签

typescript
const image = createImageCollection()
        image.label.setHtml('<div>label标签</div>')  
        image.on('mouseMove', (ev, mark, even) => {
          console.log(even)
          if (mark === 'in') {
            ev[0].label.show = true
          } else {
            ev[0].label.show = false
          }
        })

image-20240618112959672

配置