@baidumap/mapv-three 1.0.0

package/dist/types/threejs/objects/point/Label.d.ts

@@ -0,0 +1,365 @@
+export type LabelMeshParameters = {
+    /**
+     * - icon texture
+     */
+    spriteTexture?: Texture;
+    /**
+     * - 文字是否贴地
+     */
+    flat?: boolean | undefined;
+    /**
+     * - 是否在后处理中绘制
+     */
+    isRenderInPostprocess: boolean;
+};
+/**
+ * @category Objects
+ * @description 标签对象，用于在地图上渲染文本标签、图标标签或两者结合, 支持自定义样式。 `Label`组件一般用于批量管理大量标签数据, 比如整体显隐控制, 对于少量的标签加载和管理推荐使用{@link RenderingLabel}。
+ * @example 文本标签
+ * ```javascript
+ * // 创建一个文本标签
+ * const textLabel = engine.add(new mapvthree.Label({
+ *     type: 'text',
+ *     textSize: 16,
+ *     textFillStyle: 'rgb(255, 8, 8)', // 字体颜色
+ *     textStrokeStyle: 'rgba(0, 0, 0, 1)', // 边框颜色
+ *     textStrokeWidth: 2, // 边框宽度
+ * }))
+ * const data = mapvthree.GeoJSONDataSource.fromGeoJSON([
+ *  {
+ *      type: 'Feature',
+ *      geometry: {
+ *          type: 'Point',
+ *          coordinates: [116.404, 39.915]
+ *      },
+ *      properties: {
+ *          text: '北京市',
+ *      }
+ *  }]);
+ * data.defineAttribute('text', 'text');
+ * textLabel.dataSource = data;
+ * ```
+ * @example 图标标签
+ * ```javascript
+ * // 创建一个图标标签
+ * const iconLabel = engine.add(new mapvthree.Label({
+ *     type: 'icon',
+ *     vertexIcons: true,
+ *     iconWidth: 40,
+ *     iconHeight: 40,
+ * }));
+ * // 设置数据源
+ * const data = mapvthree.GeoJSONDataSource.fromGeoJSON([
+ *  {
+ *      type: 'Feature',
+ *      geometry: {
+ *          type: 'Point',
+ *          coordinates: [116.404, 39.915]
+ *      },
+ *      properties: {
+ *          icon: 'path/icon.png',
+ *      }
+ *  }
+ * ]);
+ * // 设置数据源
+ * data.defineAttribute('icon', 'icon');
+ * iconLabel.dataSource = data;
+ * ```
+ *
+ * @example 图标文字组合标签
+ * ```javascript
+ * // 创建一个图标和文字组合标签
+ * const abel = engine.add(new mapvthree.Label({
+ *     type: 'icontext',
+ *     vertexIcons: true,
+ *     textSize: 16,
+ *     textFillStyle: 'rgb(255, 8, 8)', // 字体颜色
+ *     textStrokeStyle: 'rgba(0, 0, 0, 1)', // 边框颜色
+ *     textStrokeWidth: 2, // 边框宽度
+ *     iconWidth: 40,
+ *     iconHeight: 40,
+ * }));
+ * // 设置数据源
+ * const data = mapvthree.GeoJSONDataSource.fromGeoJSON([
+ *  {
+ *      type: 'Feature',
+ *      geometry: {
+ *          type: 'Point',
+ *          coordinates: [116.404, 39.915]
+ *      },
+ *      properties: {
+ *          icon: 'path/icon.png',
+ *      }
+ *  }
+ * ]);
+ * // 设置数据源
+ * data.defineAttribute('icon', 'icon');
+ * data.defineAttribute('text', 'text');
+ * label.dataSource = data;
+ * ```
+ * @description `Label`组件的样式可以通过初始化参数整体控制, 也支持丰富的自定义样式配置(在传入数据中携带)
+ * @example 自定义样式
+ * ```javascript
+ * // 整体控制样式，在初始化时设置
+ * const label = engine.add(new mapvthree.Label({
+ *     type: 'icontext',
+ *     vertexIcons: true,
+ *     textSize: 16,
+ *     textFillStyle: 'rgb(255, 8, 8)', // 字体颜色
+ *     textStrokeStyle: 'rgba(0, 0, 0, 1)', // 边框颜色
+ *     textStrokeWidth: 2, // 边框宽度
+ *     iconWidth: 40,
+ *     iconHeight: 40,
+ * }));
+ * // 自定义样式，在传入数据中设置
+ * const data = mapvthree.GeoJSONDataSource.fromGeoJSON([
+ *  {
+ *      type: 'Feature',
+ *      geometry: {
+ *          type: 'Point',
+ *          coordinates: [116.404, 39.915]
+ *      },
+ *      properties: {
+ *          icon: 'path/icon.png',
+ *          iconSize: [40, 40],
+ *          text: '北京市',
+ *          textSize: 16,
+ *          textAnchor: 'center',
+ *          textFillStyle: 'rgb(255, 8, 8)', // 字体颜色
+ *          textStrokeStyle: 'rgba(0, 0, 0, 1)', // 边框颜色
+ *          textStrokeWidth: 2, // 边框宽度
+ *          textOffset: [0, 0],
+ *          rotateZ: 0, // 旋转角度
+ *      }
+ * }
+ * ]);
+ * // 支持的自定义数据配置
+ * // 图标相关
+ * data.defineAttribute('icon', 'icon'); // 图标路径
+ * data.defineAttribute('iconSize', 'iconSize'); // 图标尺寸
+ * // 文字相关
+ * data.defineAttribute('text', 'text'); // 文字内容
+ * data.defineAttribute('textSize', 'textSize'); // 文字大小
+ * data.defineAttribute('textFillStyle', 'textFillStyle'); // 文字颜色
+ * data.defineAttribute('textStrokeStyle', 'textStrokeStyle'); // 文字边框颜色
+ * data.defineAttribute('textStrokeWidth', 'textStrokeWidth'); // 文字边框宽度
+ * data.defineAttribute('textOffset', 'textOffset'); // 文字偏移
+ * data.defineAttribute('textAnchor', 'textAnchor'); // 文字对齐方式
+ * // 其他
+ * data.defineAttribute('rotateZ', 'rotateZ'); // 旋转角度
+ * ```
+ */
+export class Label extends GeoMesh {
+    /**
+     * 构造函数
+     * @param {Object} parameters 配置参数
+     * @param {Boolean} [parameters.vertexIcons=false] 数据中是否携带icon(url资源), 默认为false
+     * @param {Boolean} [parameters.flat=false] 是否贴地, 默认为false
+     * @param {String} [parameters.type='icon'] 绘制类型,支持'icon'｜'text'｜'icontext'
+     * @param {Boolean} [parameters.enableFade=false] 是否启用淡入淡出效果, 默认为false, 若要启用淡入淡出效果, 数据中需要指定id
+     * @param {Number} [parameters.textSize=16] 文字大小, 默认16
+     * @param {String} [parameters.textFamily='sans-serif'] 文字字体
+     * @param {String|Array} [parameters.textFillStyle=[255,255,255]] 文字颜色, 默认[255,255,255]
+     * @param {String|Array} [parameters.textStrokeStyle=[0,0,0]] 文字描边颜色, 默认[0,0,0]
+     * @param {Number} [parameters.textStrokeWidth=0] 文字描边宽度, 默认0
+     * @param {String} [parameters.textAnchor='center'] 文字锚点, 支持'left'|'right'|'top'|'bottom'|'top-left'|'top-right'|'bottom-left'|'bottom-right', 默认'center'
+     * @param {Array} [parameters.textOffset=[0,0]] 文字偏移, 默认[0,0]
+     * @param {String} [parameters.textWeight='400'] 文字粗细, 默认'400'
+     * @param {Array} [parameters.textPadding=[0,0]] 文字内边距, 默认[0,0]
+     * @param {Number} [parameters.iconWidth=40] 图标宽度, 默认40
+     * @param {Number} [parameters.iconHeight=40] 图标高度, 默认40
+     * @param {Number} [parameters.rotateZ=0] 旋转角度, 默认0
+     * @param {String} [parameters.textAlign='center'] 文本对齐方式,支持'left'|'right'|'center', 默认'center'
+     * @param {String} [parameters.mapSrc] 图标url
+     * @param {Boolean} [parameters.transparent=false] 是否透明
+     * @param {Array} [parameters.pixelOffset] 像素偏移, 默认[0,0]
+     * @param {Array} [parameters.positionOffset] 坐标偏移, 默认[0,0]
+    */
+    constructor(parameters?: {
+        vertexIcons?: boolean | undefined;
+        flat?: boolean | undefined;
+        type?: string | undefined;
+        enableFade?: boolean | undefined;
+        textSize?: number | undefined;
+        textFamily?: string | undefined;
+        textFillStyle?: string | any[] | undefined;
+        textStrokeStyle?: string | any[] | undefined;
+        textStrokeWidth?: number | undefined;
+        textAnchor?: string | undefined;
+        textOffset?: any[] | undefined;
+        textWeight?: string | undefined;
+        textPadding?: any[] | undefined;
+        iconWidth?: number | undefined;
+        iconHeight?: number | undefined;
+        rotateZ?: number | undefined;
+        textAlign?: string | undefined;
+        mapSrc?: string | undefined;
+        transparent?: boolean | undefined;
+        pixelOffset?: any[] | undefined;
+        positionOffset?: any[] | undefined;
+    });
+    /**
+     * @type {LabelMeshParameters}
+     */
+    parameters: LabelMeshParameters;
+    /**
+     * @type {Texture}
+     */
+    spriteTexture: Texture;
+    /**
+     * @type {Texture}
+     */
+    textTexture: Texture;
+    /** @private */
+    private _maxChar;
+    /** @private */
+    private _version;
+    /** @private */ private oldMapTextureRes;
+    /** @protected */ protected iconUrlHash: LRUCache;
+    /** @protected */ protected boxHash: Map<any, any>;
+    /** @protected */ protected gap: number[];
+    /** @protected */ protected geometry: any;
+    /** @protected */ protected material: any;
+    /** @protected */ protected canvas: HTMLCanvasElement;
+    /** @protected */ protected ctx: CanvasRenderingContext2D | null;
+    /** @protected */ protected cachedTextData: any[];
+    /** @private */ private _collisionBoxCache;
+    /** @private */ private isRenderInPostprocess;
+    /**
+     * @private
+     */
+    /** @private */
+    private _bufferDataOffset;
+    /**
+     * @private
+     */
+    private _bufferData;
+    vertexIcons: boolean | undefined;
+    flat: any;
+    symbolType: any;
+    _enableFade: any;
+    _enableFadeFilter: any;
+    _textSize: any;
+    _textFamily: any;
+    _textFillStyle: any[];
+    _textStrokeStyle: any[];
+    _textStrokeWidth: any;
+    _textAnchor: any;
+    _textOffset: any;
+    _textWeight: any;
+    _rotateZ: any;
+    _textPadding: any;
+    textAlign: any;
+    _iconWidth: any;
+    _iconHeight: any;
+    _offset: any;
+    _fadeData: FadeData;
+    fontAtalasManager: FontAtlasManager;
+    iconCanvas: HTMLCanvasElement | undefined;
+    iconCtx: CanvasRenderingContext2D | null | undefined;
+    boxes: any[];
+    collisionTest(data: any): any;
+    computeBoundingBox(data: any): {
+        width: any;
+        height: any;
+        tolerance: any;
+        offsetX?: undefined;
+        offsetY?: undefined;
+        textBox?: undefined;
+    } | {
+        width: number;
+        height: number;
+        offsetX: number;
+        offsetY: number;
+        textBox: {
+            width: number;
+            height: number;
+            wrappedText: any;
+            widthList: any;
+        };
+        tolerance: any;
+        wrappedText: any;
+        widthList: any;
+    } | {
+        width: number;
+        height: number;
+        offsetX: number;
+        offsetY: number;
+        textBox: {
+            width: number;
+            height: number;
+            wrappedText: any;
+            widthList: any;
+        };
+        tolerance: any;
+    } | undefined;
+    _getTextIconOffset(textBox: any, anchor: any, iconWidth: any, iconHeight: any): {
+        width: number;
+        height: number;
+        offsetX: number;
+        offsetY: number;
+    };
+    _getTextOrIconOffset(anchor: any, width: any, height: any): {
+        offsetX: number;
+        offsetY: number;
+    };
+    packBuffer(data: any): void;
+    _commitBuffer(): void;
+    updateIconDataItem(data: any, indexOffset: any): any;
+    packIconAndTextBuffer(datas: any, indexOffset?: number): number | undefined;
+    packIconBuffer(iconDatas: any, indexOffset?: number): number | undefined;
+    updateIconHash(iconDatas: any): Promise<void>;
+    updateTextSprite(renderedData: any): Promise<void>;
+    getTextureAndHash(data: any, texturePropName: any, width: any, height: any, isDataChanged: any): any;
+    updateIconSprite(): Map<any, any>;
+    updateTextTexture(characterSet: any): Promise<void>;
+    _fontSettings: {
+        fontSize: number;
+        buffer: number;
+        radius: number;
+        fontFamily: any;
+        fontWeight: string;
+        characterSet: any;
+        sdf: boolean;
+    } | undefined;
+    packTextBuffer(textData: any, indexOffset?: number): number | undefined;
+    updateTextDataItem(data: any, indexOffset: any): any;
+    packRotateZ(rotateZ: any): void;
+    packRotationMatrix(position: any): void;
+    packPosition(position: any): void;
+    packFade(data: any): void;
+    packOffset(offsetX: any, offsetY: any): void;
+    packWH(frameWidth: any, frameHeight: any, iconSize: any, fontSize: any): void;
+    packTypeAndPIndex(type: any): void;
+    packIconStyle(opacity?: number): void;
+    packIconUV(iconUV: any): void;
+    packTextStyle(data: any): void;
+    packTextWh(data: any, iconFrame: any): void;
+    packTextUV(iconFrame: any): void;
+    /** @private */
+    private packTextOffset;
+    _calculateRotation(viewMatrix: any, instanceMatrix: any, rotateZ: any): number;
+    _calculateTransform(position: any, outputMatrix: any): any;
+    /**
+     * @private
+     */
+    private _getTextBox;
+    _calculateWidths(arrays: any): any;
+    _processTextLayout(text: any, lineHeight: any): {
+        char: string;
+        width: number;
+        height: any;
+        offsetX: number;
+        offsetY: number;
+    }[][];
+    _applyRotateZ(charBoxes: any, rotateZ: any, rotationMatrix: any): any;
+    onBeforeScenePrepareRenderHook(engine: any, scene: any, camera: any): void;
+    _clearBufferDataOffset(): void;
+    getStrictStyleId(data: any): string;
+    set enableFade(value: any);
+    get enableFade(): any;
+}
+import { GeoMesh } from '../GeoMesh';
+import { LRUCache } from '../../../util/LRUCache';
+import { FadeData } from '../FadeData';
+import { FontAtlasManager } from '../text/font-atlas-manager';

package/dist/types/threejs/objects/point/PointGroup.d.ts

@@ -0,0 +1,35 @@
+export class PointGroup extends GeoObject {
+    /**
+     * 是否支持返回的事件参数中携带entity实体数据
+     */
+    isEventEntitySupported: boolean;
+    /**
+     * 添加GeoObject类型的部件
+     * @param {GeoObject} object 添加的对象
+     * @returns {GeoObject} 添加的对象
+     * @example
+     * ```javascript
+     * const icon = new Icon({
+     *     width: 30,
+     *     height: 30,
+     *     mapSrc: 'marker.png'
+     * });
+     * pointGroup.addComponent(icon);
+     * ```
+     */
+    addComponent(object: GeoObject): GeoObject;
+    /**
+     * 移除部件
+     * @param {GeoObject} object 要移除的地理对象
+     * @example
+     * ```javascript
+     * const icon = new Icon();
+     * pointGroup.addComponent(icon);
+     * // ... 其他操作 ...
+     * pointGroup.removeComponent(icon); // 移除之前添加的图标组件
+     * ```
+    */
+    removeComponent(object: GeoObject): void;
+    getChildDataSource(child: any): DataSource;
+}
+import { GeoObject } from '../GeoObject';

package/dist/types/threejs/objects/point/ShapePoint.d.ts

@@ -0,0 +1,12 @@
+/**
+ * 暂时有bug
+ */
+export class ShapePoint extends GeoInstancedMesh {
+    constructor(parameters: any);
+    parameters: any;
+    /** @internal */
+    getDefaultParams(): {
+        shapeType: string;
+    };
+}
+import { GeoInstancedMesh } from '../GeoInstancedMesh';

package/dist/types/threejs/objects/point/SimplePoint.d.ts

@@ -0,0 +1,108 @@
+/**
+ * 点对象，用于在地图上绘制基础的点标记。支持自定义颜色、大小等特性。
+ *
+ * @category Objects
+ * @example
+ * ```javascript
+ * // 创建一个基础点对象
+ * const point = engine.add(new mapvthree.SimplePoint({
+ *     color: 'rgba(250, 90, 50, 1)',
+ *     size: 50,
+ *     opacity: 0.8,
+ *     vertexColors: true,
+ *     vertexSizes: true,
+ * }));
+ *
+ * // 设置数据源
+ * const data = mapvthree.GeoJSONDataSource.fromGeoJSON([{
+ *     type: 'Feature',
+ *     geometry: {
+ *         type: 'Point',
+ *         coordinates: [116.404, 39.915]
+ *     },
+ *     properties: {
+ *         color: '#ff0000',
+ *         size: 30
+ *     }
+ * }]);
+ *
+ * // 定义color和size属性映射
+ * data.defineAttribute('color', 'color');
+ * data.defineAttribute('size', 'size');
+ * point.dataSource = data;
+ * ```
+ */
+export class SimplePoint extends GeoPoints {
+    /**
+     * 构造函数
+     * @param {Object} parameters 配置参数
+     * @param {string|THREE.Color} [parameters.color] 点颜色，默认0xffff00
+     * @param {boolean} [parameters.vertexColors=false] 是否启用数据驱动的颜色配置，默认false
+     * @param {number} [parameters.size] 点大小，默认30
+     * @param {boolean} [parameters.transparent=false] 是否启用透明，默认false
+     * @param {boolean} [parameters.vertexSizes=false] 是否启用数据驱动的大小配置，默认false
+     * @param {number} [parameters.opacity=1] 透明度，默认1
+     */
+    constructor(parameters: {
+        color?: string | THREE.Color;
+        vertexColors?: boolean | undefined;
+        size?: number | undefined;
+        transparent?: boolean | undefined;
+        vertexSizes?: boolean | undefined;
+        opacity?: number | undefined;
+    });
+    /** @protected */ protected geometry: any;
+    /** @protected */ protected material: any;
+    /**
+     * 点颜色
+     * @type {string}
+     * @example
+     * ```javascript
+     * point.color = 'rgba(250, 90, 50, 1)';
+     * ```
+    */
+    color: string;
+    /**
+     * 是否启用数据驱动的颜色配置
+     * @type {boolean}
+     * @default false
+     * @example
+     * ```javascript
+     * point.vertexColors = true;
+     * ```
+    */
+    vertexColors: boolean;
+    /**
+     * 是否启用数据驱动的大小配置
+     * @type {boolean}
+     * @default false
+     * @example
+     * ```javascript
+     * point.vertexSizes = true;
+     * ```
+    */
+    vertexSizes: boolean;
+    /**
+     * 不透明度, 若想实现半透明效果, 需要`transparent`设置为`true`
+     * @type {number}
+     * @default 1
+     * @example
+     * ```javascript
+     * point.opacity = 0.8;
+     * ```
+    */
+    opacity: number;
+    parameters: {
+        color?: string | THREE.Color;
+        vertexColors?: boolean | undefined;
+        size?: number | undefined;
+        transparent?: boolean | undefined;
+        vertexSizes?: boolean | undefined;
+        opacity?: number | undefined;
+    };
+    collisionTest(data: any): {
+        width: any;
+        height: any;
+    };
+}
+import { GeoPoints } from '../GeoPoints';

package/dist/types/threejs/objects/point/Spark.d.ts

@@ -0,0 +1,69 @@
+/**
+ * 烟花，它继承自GeoLine类，通过该类可以可以利用配置产生绚烂的烟花效果
+ * ```js
+ * const spark = engine.add(new mapvthree.Spark({
+ *     color: 0xff0cc0, // 烟花颜色
+ *     height: 200, // 烟花高度
+ *     speed: 0.1, // 动画速度
+ *     idle: 500, // 动画的间隔时间
+ *     tailLength: 80, // 动画拖尾长度
+ *     emissive: new Color(0x0000ff)
+ * }));
+ * ```
+ * ![](media://spark.png)
+ */
+export class Spark extends GeoLine {
+    /**
+     * @param {{
+     * color?: string, vertexColors?: boolean,
+     * height?: number, vertexHeights?: boolean, speed?: number, tailLength?: number,
+     * idle?: number, emissive?: string,opacity?: number,
+     * }} parameters 传入参数对象
+     * @param {string} parameters.color 烟花颜色
+     * @param {boolean} parameters.vertexColors 是否通过数据携带颜色配置
+     * @param {number} parameters.height 烟花高度
+     * @param {boolean} parameters.vertexHeights 是否通过数据携带高度配置
+     * @param {number} parameters.speed 动画速度
+     * @param {number} parameters.tailLength 动画拖尾长度
+     * @param {number} parameters.idle 动画的间隔时间，单位：毫秒
+     * @param {string} parameters.emissive 自发光
+     * @param {number} parameters.opacity 不透明度
+     */
+    constructor(parameters: {
+        color?: string;
+        vertexColors?: boolean;
+        height?: number;
+        vertexHeights?: boolean;
+        speed?: number;
+        tailLength?: number;
+        idle?: number;
+        emissive?: string;
+        opacity?: number;
+    });
+    /** @protected */ protected geometry: any;
+    /** @protected */ protected material: any;
+    /** 烟花颜色 */ color: any;
+    /** 是否通过数据携带颜色配置 */ vertexColors: any;
+    /** 烟花高度 */ height: any;
+    /** 是否通过数据携带高度配置 */ vertexHeights: any;
+    /** 动画速度 */ speed: any;
+    /** 动画拖尾长度 */ tailLength: any;
+    /** 动画的间隔时间，单位：毫秒 */ idle: any;
+    /** 自发光 */ emissive: any;
+    parameters: {
+        color?: string;
+        vertexColors?: boolean;
+        height?: number;
+        vertexHeights?: boolean;
+        speed?: number;
+        tailLength?: number;
+        idle?: number;
+        emissive?: string;
+        opacity?: number;
+    };
+    /** @internal */
+    getDefaultParams(): {
+        height: number;
+    };
+}
+import { GeoLine } from '../GeoLine';

package/dist/types/threejs/objects/point/SpecialPoint.d.ts

@@ -0,0 +1,39 @@
+/**
+ * 扇形
+ * ```js
+ * const point = engine.add(new mapvthree.FanPoint({
+ *     color: 'rgba(250, 90, 50, 1)',
+ *     size: 50,
+ * }));
+ * let data = mapvthree.GeoJSONDataSource.fromGeoJSON(data);
+ * point.dataSource = data;
+ * ```
+ * ![](media://fan.png)
+ */
+export class SpecialPoint extends GeoInstancedMesh {
+    /**
+     * 构造函数
+     * @param {{color?: string, opacity?: number, size?: number, height?: number}} parameters 传入参数对象
+     * @param {string} parameters.color 扇形颜色
+     * @param {number} parameters.opacity 透明度整体系数，默认1
+     * @param {number} parameters.size 扇形尺寸
+     * @param {number} parameters.height 扇形高度
+     */
+    constructor(parameters: {
+        color?: string;
+        opacity?: number;
+        size?: number;
+        height?: number;
+    });
+    /** 扇形颜色 */ color: any;
+    /** 透明度整体系数 */ opacity: any;
+    /** 扇形尺寸 */ size: any;
+    /** 扇形高度 */ height: any;
+    parameters: {
+        color?: string;
+        opacity?: number;
+        size?: number;
+        height?: number;
+    };
+}
+import { GeoInstancedMesh } from '../GeoInstancedMesh';