CustomModel 定制模型

向场景视图中添加三维模型

支持坐标，旋转，缩放和贴地属性

方法

批量/单个添加模型

• 方法名：add

• 参数说明：

  // 方法
  add(params: CustomModelOptions | Array<CustomModelOptions>): this
  
  // CustomModelOptions 参数说明
  export type CustomModelOptions = {
    coordinate?: Array<number>; // 坐标
    rotation?: Array<number>; // 旋转
    scale?: Array<number>; // 缩放
    clampToGround?: boolean;// 是否贴地
    style?:number;//风格 0-19
    helmetColor?:Array<number>;//头盔颜色[r,g,b,a]
    clothColor?:Array<number>;//衣服颜色[r,g,b,a]
    markerOffset?: Array<number>;// 文字图片相对与人物模型左右偏移设置 [0,0]
    marker?: {   // 图标相关属性设置，如果不设置只显示 文本
      size?: Array<number>; // 图标大小，默认值 [24,24]
      url?: string; // 图标地址或者图片 base64 字符格式
      bgColor?: string | Array<number>; // 图标背景色
      range?: Array<number>; // 图标可见范围，这是与相机的 armDistance 进行比较的,默认值 [100.0,200000.0]
      visibility?: string; // 是否可见，值为 "visible/hidden"
    };
    label?: { // 文本相关属性设置，如果不设置只显示 图标
      text?: string;  // 文本内容
      bgColor?: string | Array<number>; // 文本背景颜色
      fontColor?: string | Array<number>; // 文本字体颜色
      fontOutlineColor?: string | Array<number>; // 文本字体轮廓颜色
      fontOutlineSize?: number; // 文本字体轮廓大小
      fontSize?: number; // 字体大小
      range?: Array<number>; // 文本可见范围，这是与相机的 armDistance 进行比较的,默认值 [100.0,100000.0]
      visibility?: string;  // 是否可见，值为 "visible/hidden"
    };
  };
  

  

• 示例参考：

async function addCustomModel(count: number = 10) {
  const infos: Array<any> = [];
  const customInfo = {
          groupId: `test-group`,
          coordinate: coordinate.map((c, i) => {
            return i !== 2 ? c : 100
          }),
          scale: [200, 200, 200],
          clampToGround: true
        }
        infos.push(customInfo)
      }
    viewer.customModel.add(infos)
}

批量/单个移动模型

@qpaas/dt-api@0.2.13^

• 方法名：move
• 参数说明：

// 方法
move(params: CustomModelOptions | Array<CustomModelOptions>): this

• 示例参考：

viewer.customModel.move({
  id: 'testmove',
  coordinate: coordinates[i % coordinates.length],
  scale: [1, 1, 1],
  clampToGround: true,
  building: coordinates[0][3],
  floor: coordinates[0][4]
});

全部模型移除

• 移除三维场景中已添加的模型
• 方法名：clear
• 参数说明：

/**
 * 清除全部模型
 * @returns
 */
clear(): this

• 示例参考：

viewer.customModel.clear();

根据分组id完成模型移除

• 根据分组 id 移除三维场景中已添加的模型
• 方法名：clearByGroup
• 参数说明：

/**
 * 传入groupId(单个或数组)清除线
 * @param groupId
 * @returns
 */
clearByGroup(groupId: string | Array<string>): this

• 示例参考：

viewer.customModel.clearByGroup(['testlayer']);

根据id完成模型移除

• 根据 id 移除三维场景中已添加的模型
• 方法名： clearById
• 参数说明：

 /**
 * 传入id(单个或数组)清除模型
 * @param id
 * @returns
 */
clearById(id: string | Array<string>): this

• 示例参考：

viewer.customModel.clearById(['testlayer']);

设置全部模型可见性

• 设置全部模型的显示/隐藏
• 方法名：setVisible
• 参数说明：

/**
 * 设置全部可见性
 * @param visible
 * @returns
 */
setVisible(visible = true): this

传入groupId(单个或数组)设置模型可见性

• 根据 groupId 设置对应模型的显示/隐藏
• 方法名：setVisibleByGroup
• 参数说明：

/**
 * 传入groupId(单个或数组)设置可见性
 * @param groupId
 * @param visible
 * @returns
 */
setVisibleByGroup(groupId: string | Array<string>, visible = true): this

• 示例参考：

viewer.customModel.setVisibleByGroup(groupId, false);

传入id(单个或数组)设置模型可见性

• 根据 id 设置对应模型的显示/隐藏
• 方法名：setVisibleByIds
• 参数说明：

/**
 * 传入id(单个或数组)设置可见性
 * @param id
 * @param visible
 * @returns
 */
setVisibleByIds(id: string | Array<string>, visible = true): this

• 示例参考：

viewer.customModel.setVisibleByIds(id, false);

模型事件

• 目前支持三维场景中已添加模型的点击事件
• 方法名：on/off
• 参数说明：

/**
 * 开启事件监听
 * @param type
 * @param callback
 * @param context
 * @returns
 */
on(type: CustomModelEventType, callback, context) {
  return this._customModelEvent.on(type, callback, context);
}

/**
 * 关闭事件监听
 * @param type
 * @param callback
 * @param context
 * @returns
 */
off(type: CustomModelEventType, callback, context): boolean {
  return this._customModelEvent.off(type, callback, context);
}

// CustomModelEventType 参数说明
export class CustomModelEventType {
  static Click = 'click' as const;
}

• 示例参考：

viewer.customModel.on(CustomModelEventType.Click, (res) => {
  console.log(res, 'CustomModelEventType.Click====');
});

• 回调的数据格式说明:

{
  "eventName": "OnCustomModelClick",
  "datas": {
    "id": "test",
    "coordinate": [121.982819, 40.733833, 10.0],
    "rotation": [0, 0, 0],
    "scale": [1,1,1],
    "clampToGround": true
"
  }
}

示例

模型风格设置

async function addCustomModel(count: number = 10) {
  const infos: Array<any> = [];
  const customInfo = {
    groupId: `test-group`,
    coordinate: coordinate.map((c, i) => {
      return i !== 2 ? c : 100
    }),
    scale: [200, 200, 200],
    clampToGround: true,
    style: Math.floor(Math.random()*10)
  }
  infos.push(customInfo)
}
viewer.customModel.add(infos)
}

模型颜色设置

async function addCustomModel(count: number = 10) {
  const infos: Array<any> = [];
  const customInfo = {
    groupId: `test-group`,
    coordinate: coordinate.map((c, i) => {
      return i !== 2 ? c : 100
    }),
    scale: [200, 200, 200],
    clampToGround: true,
    helmetColor: [1, 1, 1, 1],
    clothColor: [1, 1, 1, 1]
  }
  infos.push(customInfo)
}
viewer.customModel.add(infos)
}