创建海量图片点
- 支持独立事件绑定
- 可见范围内有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
}
})
