@baidumap/mapv-three 1.0.0

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

@@ -0,0 +1,184 @@
+/**
+ * 聚合点，它能够汇总一组点要素，统计数据，利用聚合统计得到的数据信息，
+ * 结合其他的可视化元素可以展示更丰富的效果。
+ *
+ * @category Objects
+ * @example
+ * ```javascript
+ * const cluster = engine.add(new mapvthree.ClusterPoint({
+ *     cluster: {
+ *         radius: 100,
+ *         maxZoom: 18,
+ *         minZoom: 5
+ *     },
+ *     icon: {
+ *         width: 30,
+ *         height: 30,
+ *         mapSrc: 'path/to/icon.png'
+ *     },
+ *     label: {
+ *         fontSize: 14,
+ *         width: 90,
+ *         height: 40,
+ *         fillStyle: '#ffffff',
+ *         background: 'website_assets/images/speed-panel.png',
+ *     }
+ * }));
+ * // 指定聚合源数据
+ * let dataSource = mapvthree.GeoJSONDataSource.fromGeoJSON(data);
+ * cluster.dataSource = dataSource;
+ * ```
+ * @example
+ * ```javascript
+ * // 添加自定义聚合组件
+ * cluster.addComponent(new mapvthree.Text({
+ *     fontSize: 14,
+ *     fillStyle: '#ffffff',
+ * }));
+ * // 设置聚合数据数据源属性
+ * cluster.clusterDataSource.defineAttribute('text', () => {
+ *     return '自定义聚合组件';
+ * });
+ * ```
+ */
+export class ClusterPoint extends PointGroup {
+    /**
+     * 构造函数
+     * @param {Object} parameters 传入参数对象
+     * @param {Object} [parameters.cluster] 聚合配置
+     * @param {number} [parameters.cluster.maxZoom=18] 生成聚合数据的最大缩放级别, 默认18
+     * @param {number} [parameters.cluster.minZoom=5] 生成聚合数据的最小缩放级别, 默认5
+     * @param {number} [parameters.cluster.radius=50] 聚合半径, 单位px, 默认50px
+     * @param {Object} [parameters.icon] 图标配置
+     * @param {number} [parameters.icon.width=30] 图标宽度, 默认30px
+     * @param {number} [parameters.icon.height=30] 图标高度, 默认30px
+     * @param {string} [parameters.icon.mapSrc] 图标图片地址
+     * @param {Object} [parameters.label] 标签配置
+     * @param {string} [parameters.label.fillStyle='#ccc'] 文字颜色, 默认#ccc
+     * @param {number} [parameters.label.fontSize=16] 文字大小, 默认16px
+     * @param {boolean} [parameters.label.flat=false] 是否平面化显示, 默认false
+    */
+    constructor(parameters?: {
+        cluster?: {
+            maxZoom?: number | undefined;
+            minZoom?: number | undefined;
+            radius?: number | undefined;
+        } | undefined;
+        icon?: {
+            width?: number | undefined;
+            height?: number | undefined;
+            mapSrc?: string | undefined;
+        } | undefined;
+        label?: {
+            fillStyle?: string | undefined;
+            fontSize?: number | undefined;
+            flat?: boolean | undefined;
+        } | undefined;
+    });
+    /** @private */ private _ready;
+    /** @private */ private _cluster;
+    /** @private */ private _clusterDataSource;
+    /** @private */ private _icon;
+    /** @private */ private _label;
+    /** @private */ private _minUpdateInterval;
+    /**
+     * @private
+    */
+    private _lastUpdateTime;
+    /**
+     * @private
+    */
+    private _updateTimeoutHandler;
+    /** @private */
+    private _clusterData;
+    parameters: {
+        cluster?: {
+            maxZoom?: number | undefined;
+            minZoom?: number | undefined;
+            radius?: number | undefined;
+        } | undefined;
+        icon?: {
+            width?: number | undefined;
+            height?: number | undefined;
+            mapSrc?: string | undefined;
+        } | undefined;
+        label?: {
+            fillStyle?: string | undefined;
+            fontSize?: number | undefined;
+            flat?: boolean | undefined;
+        } | undefined;
+    };
+    cachedData: any;
+    getChildDataSource(): GeoJSONDataSource;
+    /** @protected */
+    protected getEntityByIndex(index: any): {
+        index: any;
+        value: import("../../../index").DataItem | undefined;
+        itemIndex: number;
+        pairs: {};
+    } | undefined;
+    /** @internal */
+    _updateRenderingData: () => void;
+    /**
+     * 更新最短的时间间隔, 最小为16ms
+     * @param {number} value
+     */
+    set minUpdateInterval(value: number);
+    /**
+     * 更新最短的时间间隔, 单位ms, 默认300ms
+     * @return {number}
+     */
+    get minUpdateInterval(): number;
+    /**
+     * cluster聚合点的数据源, 聚合部件的子数据源
+     * @type {GeoJSONDataSource}
+     * @readonly
+     * @example
+     * ```javascript
+     * const clusterDataSource = clusterPoint.clusterDataSource;
+     * clusterDataSource.defineAttribute('text');
+     * ```
+     */
+    readonly get clusterDataSource(): GeoJSONDataSource;
+    /**
+     * 当前聚合后的数据
+     * @type {Array}
+     * @readonly
+     * @example
+     * ```javascript
+     * const data = clusterPoint.clusterData;
+     * console.log('当前聚合点数量:', data.length);
+     * ```
+     *
+     * ```json
+     * [
+     *     // 非聚合数据
+     *     {
+     *         type: 'Feature',
+     *         geometry: {
+     *             coordinates: [119, 36],
+     *         },
+     *         properties: {
+     *             count: 9,
+     *         }
+     *     },
+     *     // 聚合数据
+     *     {
+     *         type: 'Feature',
+     *         geometry: {
+     *             coordinates: [120, 36],
+     *         },
+     *         properties: {
+     *             cluster: true, // 是否聚合
+     *             cluster_id: 1, // 聚合数据id
+     *             point_count: 10, // 聚合数据量
+     *         }
+     *     },
+     * ]
+     *
+     * ```
+    */
+    readonly get clusterData(): any[];
+}
+import { PointGroup } from './PointGroup';
+import { GeoJSONDataSource } from '../../../threemap/dataSource/GeoJSONDataSource';

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

@@ -0,0 +1,4 @@
+export class CustomMesh {
+    defineMaterialProxyProperties: (properties?: any[]) => void;
+    raycast(raycaster: any, intersects: any): void;
+}

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

@@ -0,0 +1,87 @@
+/**
+ * DOM点对象，用于在地图上添加基于DOM的自定义信息窗口。可以结合事件绑定实现弹窗组件等功能。
+ *
+ * @category Objects
+ * @example
+ * ```javascript
+ * // 创建一个基础的DomPoints
+ * const domPoints = engine.add(new mapvthree.DomPoints({
+ *     offset: [-270, -200]
+ * }));
+ *
+ * // 自定义渲染函数, 创建dom元素
+ * domPoints.renderItem = (value) => {
+ *     const node = document.createElement('div');
+ *     node.className = 'custom-point';
+ *     node.innerHTML = `
+ *         <div class="title">${value.attributes.name}</div>
+ *         <div class="content">${value.attributes.description}</div>
+ *     `;
+ *     return node;
+ * };
+ *
+ * // 设置数据源
+ * const data = mapvthree.GeoJSONDataSource.fromGeoJSON([
+ *     {
+ *         type: 'Feature',
+ *         geometry: {
+ *             type: 'Point',
+ *             coordinates: [116.404, 39.915]
+ *         },
+ *         properties: {
+ *             name: '位置1',
+ *             description: '这是位置1的描述'
+ *         }
+ *     }
+ * ]);
+ * domPoints.dataSource = data;
+ * ```
+ */
+export class DomPoints extends GeoObject {
+    /**
+     * @readonly
+     * 是否为DomPoints类型
+     */
+    readonly isDomPoints: true;
+    /**
+     * @readonly
+     * 是否渲染视椎体外的物体，为false时需要渲染
+     */
+    readonly frustumCulled: false;
+    /** @private */
+    private _visible;
+    points: any[];
+    nodes: any[];
+    offset: number[];
+    /**
+     * 用于生成dom节点, 若需要自定义dom元素，需要覆盖此方法
+     * @returns {HTMLElement} dom节点
+     * @param {Object} value 数据源中的数据项
+     * @example
+     * ```javascript
+     * domPoints.renderItem = (value) => {
+     *     const node = document.createElement('div');
+     *     node.className = 'custom-point';
+     *     node.innerHTML = `
+     *         <div class="title">${value.attributes.name}</div>
+     *         <div class="content">${value.attributes.description}</div>
+     *     `;
+     *     return node;
+     * };
+     * ```
+     */
+    renderItem(value: Object): HTMLElement;
+    /**
+     * @protected
+     * 根据当前object的位置来计算node的偏移
+     */
+    protected onBeforeScenePrepareRenderHook: (engine: any, scene: any, camera: any) => void;
+    container: any;
+    clone(): any;
+    /**
+     * node节点是否可见
+     */
+    set visible(value: boolean);
+    get visible(): boolean;
+}
+import { GeoObject } from '../GeoObject';

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

@@ -0,0 +1,70 @@
+/**
+ * EffectModelPoint类继承自GeoObject类，支持加载自定义模型作为点类数据可视化，
+ * 并提供一些大小和动画配置参数，以实现理想的动画效果。
+ * 注意：动画效果需要在处理画引擎时设置rendering.enableAnimationLoop为true
+ * ```js
+ * const effectModelPoint = engine.add(new mapvthree.EffectModelPoint({
+ *     normalize: true,
+ *     rotateToZUp: true,
+ *     keepSize: true,
+ *     animationRotate: true,
+ *     animationJump: true,
+ *     animationJumpHeight: 100
+ * }));
+ * effetcModelPoint.model = gltf.scene;
+ * effetcModelPoint.size = 30;
+ * ```
+ * ![](media://effectmodel_point.png)
+ */
+export class EffectModelPoint extends GeoObject {
+    /**
+     * 构造函数
+     * @param {{normalize?: boolean, rotateToZUp?: boolean, keepSize?: boolean,
+     * animationRotate?: boolean, animationJump?: boolean, animationRotatePeriod?: number,
+     * animationJumpPeriod?: number, animationJumpHeight?: number}} parameters 传入参数对象
+     * @param {string} parameters.normalize 是否归一化模型大小
+     * @param {number} parameters.rotateToZUp 将模型调整至z轴朝上
+     * @param {number} parameters.keepSize 是否保持大小
+     * @param {number} parameters.animationRotate 是否旋转
+     * @param {number} parameters.animationRotatePeriod 旋转一周的时间
+     * @param {number} parameters.animationJump 是否跳跃
+     * @param {number} parameters.animationJumpPeriod 跳跃一次的时间周期
+     * @param {number} parameters.animationJumpHeight 跳跃高度
+     */
+    constructor(parameters: {
+        normalize?: boolean;
+        rotateToZUp?: boolean;
+        keepSize?: boolean;
+        animationRotate?: boolean;
+        animationJump?: boolean;
+        animationRotatePeriod?: number;
+        animationJumpPeriod?: number;
+        animationJumpHeight?: number;
+    });
+    /** @private */ private _model;
+    /** @private */ private _normalize;
+    /** @private */ private _rotateToZUp;
+    /** @private */ private _keepSize;
+    /** @private */ private _size;
+    /** @private */ private _size3;
+    /** @private */ private _useSize3;
+    /** @private */ private _height;
+    /** @private */ private _animationRotate;
+    /** @private */ private _animationRotatePeriod;
+    /** @private */ private _animationJump;
+    /** @private */ private _animationJumpPeriod;
+    /** @private */ private _animationJumpHeight;
+    isEventEntitySupported: boolean;
+    /** @private */
+    private _updateModel;
+    /** @private */
+    private _cleanOldMesh;
+    /** @private */
+    private _defineChildrenMaterialProperty;
+    /**
+     * effectModelPoint绑定的模型,默认为null
+     */
+    set model(value: any);
+    get model(): any;
+}
+import { GeoObject } from '../GeoObject';

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

@@ -0,0 +1,57 @@
+/**
+ * 扇形
+ * ```js
+ * const point = engine.add(new mapvthree.FanPoint({
+ *     color: 'rgba(250, 90, 50, 1)',
+ *     size: 50,
+ *     type: 'Fan',
+ * }));
+ * let data = mapvthree.GeoJSONDataSource.fromGeoJSON(data);
+ * point.dataSource = data;
+ * ```
+ * ![](media://fan.png)
+ */
+export class FanPoint extends GeoInstancedPointMesh {
+    /**
+     * 构造函数
+     * @param {{color?: string, opacity?: number, size?: number, height?: number, speed?: number,
+     * type?: string, segmentAngle?: number, sideColor?: string}} parameters 传入参数对象
+     * @param {string} parameters.color 扇形颜色
+     * @param {number} parameters.opacity 透明度整体系数，默认1
+     * @param {number} parameters.size 扇形尺寸
+     * @param {number} parameters.height 扇形高度
+     * @param {number} parameters.speed 动画速度
+     * @param {string} parameters.type 扫描类型，Fan扇形，Radar雷达式，RadarLayered分层雷达式，RadarSpread圆形扩散式
+     * @param {number} parameters.segmentAngle 雷达的扇形弧度值，仅在type为Radar时有效
+     * @param {string} parameters.sideColor 最外圈底色，仅在type为RadarLayered时有效
+     */
+    constructor(parameters: {
+        color?: string;
+        opacity?: number;
+        size?: number;
+        height?: number;
+        speed?: number;
+        type?: string;
+        segmentAngle?: number;
+        sideColor?: string;
+    });
+    /** 扇形颜色 */ color: any;
+    /** 透明度整体系数 */ opacity: any;
+    /** 扇形尺寸 */ size: any;
+    /** 扇形高度 */ height: any;
+    /** 动画速度 */ speed: any;
+    /** 扫描类型，Fan扇形，Radar雷达式，RadarLayered分层雷达式，RadarSpread圆形扩散式 */ type: any;
+    /** 雷达的扇形弧度值，仅在type为Radar时有效 */ segmentAngle: any;
+    /** 最外圈底色，仅在type为RadarLayered时有效 */ sideColor: any;
+    parameters: {
+        color?: string;
+        opacity?: number;
+        size?: number;
+        height?: number;
+        speed?: number;
+        type?: string;
+        segmentAngle?: number;
+        sideColor?: string;
+    };
+}
+import { GeoInstancedPointMesh } from './GeoInstancedPointMesh';

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

@@ -0,0 +1,4 @@
+export class GeoInstancedPointMesh extends GeoInstancedMesh {
+    isInstancedPointMesh: boolean;
+}
+import { GeoInstancedMesh } from '../GeoInstancedMesh';

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

@@ -0,0 +1,149 @@
+/**
+ * 图标渲染对象，用于在地图上绘制图标标记。支持自定义图片、大小、颜色和动画效果。
+ * 主要特性：
+ * - 支持自定义图标图片
+ * - 支持固定像素大小或随图缩放
+ * - 支持颜色调整和透明度
+ * - 支持平面贴地或面向屏幕展示
+ * - 支持跳动动画效果
+ *
+ * @category Objects
+ * @example
+ * ```javascript
+ * // 创建一个基础图标
+ * const icon = engine.add(new mapvthree.Icon({
+ *     mapSrc: 'path/to/icon.png',
+ *     width: 32,
+ *     height: 32,
+ *     keepSize: true,
+ *     vertexIcons: true
+ * }));
+ *
+ * // 设置数据源
+ * let data = mapvthree.GeoJSONDataSource.fromGeoJSON(pointData);
+ * data.defineAttribute('icon', 'icon');  // 如果使用 vertexIcons
+ * icon.dataSource = data;
+ * ```
+ * ![](media://icon.png)
+ */
+export class Icon extends GeoMesh {
+    /**
+     * 创建图标渲染对象
+     * @param {Object} parameters 配置参数
+     * @param {string} [parameters.mapSrc] 图标图片URL
+     * @param {boolean} [parameters.vertexIcons=false] 是否通过数据携带图标URL, 默认false
+     * @param {boolean} [parameters.vertexColors=false] 是否通过数据携带颜色, 默认false
+     * @param {number} [parameters.width=12] 图标宽度, 默认12
+     * @param {number} [parameters.height=12] 图标高度, 默认12
+     * @param {Array<number>} [parameters.offset=[0,0]] 图标偏移量, 默认[0,0]
+     * @param {boolean} [parameters.transparent=true] 是否启用透明, 默认true
+     * @param {number} [parameters.opacity=1] 整体透明度, 默认1
+     * @param {boolean} [parameters.keepSize=true] 是否保持像素大小, 默认true
+     * @param {boolean} [parameters.flat=false] 是否贴地显示, 默认false
+     * @param {string} [parameters.color] 图标颜色
+     * @param {number} [parameters.rotateZ=0] 旋转弧度(0~2π)，仅在flat为true时生效
+     * @param {boolean} [parameters.animationJump=false] 是否启用跳动动画, 默认false
+     * @param {number} [parameters.jumpHeight=20] 跳动高度, 默认20
+     * @param {number} [parameters.jumpSpeed=1] 跳动速度, 默认1
+     */
+    constructor(parameters: {
+        mapSrc?: string | undefined;
+        vertexIcons?: boolean | undefined;
+        vertexColors?: boolean | undefined;
+        width?: number | undefined;
+        height?: number | undefined;
+        offset?: number[] | undefined;
+        transparent?: boolean | undefined;
+        opacity?: number | undefined;
+        keepSize?: boolean | undefined;
+        flat?: boolean | undefined;
+        color?: string | undefined;
+        rotateZ?: number | undefined;
+        animationJump?: boolean | undefined;
+        jumpHeight?: number | undefined;
+        jumpSpeed?: number | undefined;
+    });
+    /** @protected */ protected isEventEntitySupported: boolean;
+    /** @private */ private _padding;
+    /** @private */ private oldMapTextureRes;
+    /** @protected */ protected texture: any;
+    /** @protected */ protected geometry: any;
+    /** @protected */ protected material: any;
+    /** @protected */ protected canvas: HTMLCanvasElement;
+    /** @protected */ protected ctx: CanvasRenderingContext2D | null;
+    /** @protected */ protected iconUrlHash: Map<any, any>;
+    /** @protected */ protected boxHash: Map<any, any>;
+    /** @protected */ protected gap: number[];
+    parameters: {
+        mapSrc?: string | undefined;
+        vertexIcons?: boolean | undefined;
+        vertexColors?: boolean | undefined;
+        width?: number | undefined;
+        height?: number | undefined;
+        offset?: number[] | undefined;
+        transparent?: boolean | undefined;
+        opacity?: number | undefined;
+        keepSize?: boolean | undefined;
+        flat?: boolean | undefined;
+        color?: string | undefined;
+        rotateZ?: number | undefined;
+        animationJump?: boolean | undefined;
+        jumpHeight?: number | undefined;
+        jumpSpeed?: number | undefined;
+    };
+    boxes: any[];
+    boxSize: any;
+    /** @internal */
+    getDefaultParams(): {
+        width: number;
+        height: number;
+    };
+    collisionTest(data: any): {
+        width: any;
+        height: any;
+    };
+    createTexture(): Map<any, any> | {
+        texture: any;
+        iconUrlHash: Map<any, any>;
+    };
+    /** @protected */
+    protected _updateData(): Promise<void>;
+    originCenter: any;
+    /**
+     * @internal
+     * 根据数据获取整张纹理以及相应的uv
+     * @param {*} data 点数据
+     * @param {*} texturePropName icon字段
+     * @param {*} width 图片宽
+     * @param {*} height 图片高
+     * @returns {object} 纹理
+     */
+    getTextureAndHash: (data: any, texturePropName: any, width: any, height: any, isDataChanged: any) => object;
+    /** @protected */
+    protected getEntityByIndex(index: any): {
+        index: any;
+        value: any;
+        itemIndex: any;
+        pairs: {};
+    };
+    /**
+     * @internal
+     * 设置图标雪碧图的内边距
+     * @param {Array<number>} value 内边距数组 [x, y]
+     * @example
+    * ```javascript
+    * const icon = new mapvthree.Icon({
+    *     mapSrc: 'icon.png'
+    * });
+    * icon.padding = [2, 2]; // 设置2像素的内边距
+    * ```
+    */
+    set padding(value: Array<number>);
+    get padding(): Array<number>;
+    getVertexPosition(index: any, target: any): any;
+    getPixelSize(position: any): any;
+    /** @protected */
+    protected getEntityIndexByFace(faceIndex: any, pointIndex: any): any;
+    _computeIntersections: any;
+}
+import { GeoMesh } from '../GeoMesh';

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

@@ -0,0 +1,84 @@
+/**
+ * 图标，绘制的类型是Point
+ * ```js
+ * const text = engine.add(new mapvthree.IconPoint({
+ *     color: 'rgba(0, 0, 0, 0)',
+ *     vertexSizes: true,
+ *     vertexIcons: true,
+ * }));
+ * let data = mapvthree.GeoJSONDataSource.fromGeoJSON(data);
+ * data.defineAttribute('size', 'size').defineAttribute('icon', 'icon');
+ * text.dataSource = data;
+ * ```
+ * ![](media://iconpoint.png)
+ */
+export class IconPoint extends GeoPoints {
+    /**
+     * 构造函数
+     * @param {{
+     * color?: string, vertexColors?: boolean, opacity?: number,
+     * size?: number, vertexSizes?: boolean, mapSrc?: string, vertexIcons?: boolean}} parameters 传入参数对象
+     * @param {string} parameters.color 点颜色
+     * @param {boolean} parameters.vertexColors 是否通过数据携带颜色配置
+     * @param {number} parameters.size 点尺寸
+     * @param {boolean} parameters.vertexSizes 是否通过数据携带尺寸配置
+     * @param {string} parameters.mapSrc 图标的url路径
+     * @param {boolean} parameters.vertexIcons 是否通过数据携带图标url配置
+     * @param {boolean} parameter.transparent 是否透明
+     * @param {number} parameters.opacity 透明度整体系数，默认1
+     */
+    constructor(parameters: {
+        color?: string;
+        vertexColors?: boolean;
+        opacity?: number;
+        size?: number;
+        vertexSizes?: boolean;
+        mapSrc?: string;
+        vertexIcons?: boolean;
+    });
+    /** @private */ private canvas;
+    /** @private */ private ctx;
+    /** @private */ private oldMapTextureRes;
+    /** @protected */ protected geometry: any;
+    /** @protected */ protected material: any;
+    /** @protected */ protected iconUrlHash: Map<any, any>;
+    /** @protected */ protected boxHash: Map<any, any>;
+    /** @protected */ protected gap: number[];
+    /** 点颜色 */ color: any;
+    /** 是否通过数据携带颜色配置 */ vertexColors: any;
+    /** 点尺寸 */ size: any;
+    /** 是否通过数据携带尺寸配置 */ vertexSizes: any;
+    /** 图标的url路径 */ mapSrc: any;
+    /** 是否通过数据携带图标url配置 */ vertexIcons: any;
+    /** 透明度整体系数 */ opacity: any;
+    parameters: {
+        color?: string;
+        vertexColors?: boolean;
+        opacity?: number;
+        size?: number;
+        vertexSizes?: boolean;
+        mapSrc?: string;
+        vertexIcons?: boolean;
+    };
+    texture: any;
+    boxes: any[];
+    boxSize: any;
+    collisionTest(data: any): {
+        width: number;
+        height: number;
+    };
+    /** @internal */
+    _updateData(): Promise<void>;
+    createTexture(): any;
+    /**
+     * @internal
+     * 根据数据获取整张纹理以及相应的uv
+     * @param {*} data 点数据
+     * @param {*} texturePropName icon字段
+     * @param {*} size 点尺寸
+     * @returns {object} 纹理
+     */
+    getTextureAndHash: (data: any, texturePropName: any, width: any, height: any, isDataChanged: any) => object;
+    clone(): any;
+}
+import { GeoPoints } from '../GeoPoints';