BIM图形使用说明

安装:

npm install bim-viewer-vue

使用方法:

import * as bimer from 'bim-viewer-vue'

组件参数传递:

<bim-viewer 
:viewerData='viewerData'
:authKey='authKey'
:authCode='authCode'
:isShowBuiding='true/false'
:nodeId='nodeId'
:bimType='bimType'
:scenario='scenario'
:direction='direction'
:modelPath='modelPath'
:stepLoadConfig="stepLoadConfig"
:latAndLong="latAndLong"
/>

参数传入

viewToken 调用后台接口获取, *号为必传参数, 否则会报错

  * viewerData:
  {
    viewToken: 'e69ddb9711704c52aae6e390439c0f87'
  }
  * authKey: 'P92_ZHYQ'
  * authCode: '576BF57681FCBC4760......'
  // 是否显示楼层筛选组件
  isShowBuiding: true/false  
  // 根据节点id匹配楼层
  nodeId: 'CN_EC_33_001_HXHYQ' 
  // 1 只有全景图 2 只有BIM模型  3 全景和BIM模型 4 显示简化后的模型并加载bim模型 不传默认只显示bim模型
  bimType: '1' || '2' || '3' || '4' 
  // 当前模型code 根据这个code来确定显示哪个全景图
  scenario: 'CN_EC_33_001_HXHYQ' 
  // 楼层选择器的显示方式 true/横向 false/竖向
  direction: true/false 
  // 静态模型加载配置
  loadingConfig：      
    {
        // 简化后的模型静态资源路径
        modelPath： '',  
        // 模型初始化后的视角远近
        cameraPos: {z: 1000},  
        // 模型是否自动旋转
        controlParams： {autoRotate： true},  
        // 是否启动模型透明
        enableModelTransparent： true,  
    }
  // 分步加载配置
stepLoadConfig:
    {
        // 分片加载集成模型步数. 用于优化模型加载至100%卡顿. 当模型较大时,可适当提高集成模型分步加载次数
      loadCount: 3,
        // 当前模型是否为集成模型, 如果是集成模型,则会进行分步加载
        modelType: true,  
        // 所需加载的构件类型
        // 'overall' 加载所有的构件
        // 'label' 加载对应的单个模型文件
        // 'floor' 加载对应的楼层
        loadCode: 'overall' || 'lable' || 'floor',  
        // 楼层id
        floorId: null,
        // 构件ID的数组
        elementIdList: null
    }
// 51VR默认配置
  latAndLong: 
  {
    // 初始纬度，介于-π/2和π/2之间。
      lat: 0,
      // 初始经度，介于0和2π之间。
      long: 0
    }

模型加载状态:

模型加载完成后会$emit('modelLoadState', true) 说明模型已经加载完成

模型API调用:

bimer.viewerApi.方法名

Bimer api枚举:

模型状态设置:

获取当前view state

bimer.viewerApi.getCurrentState()

设置view state

setState (modelState)

设置右上角小模型 ture 显示,false隐藏

viewHouse('true')

设置 结构树 ture 显示,false隐藏

structureTree('true')

设置初始化视角

viewHome()

获取模型角度

getCameraStatus()

根据当前模型的nodeId隐藏其余构件

@ param { String } nodeId 
urlByParameter(nodeId)

删除模型 / 停止加载模型

removeModel()

剖切 => 适应到模型

adaptToModel()

剖切 => 重置

resetToModel()

获取当前模型视角

@ return { Object } 当前视角的对象
getCameraStatus()

设置模型当前视角

@ params { Object } cameraState 模型视角的对象
setCameraStatus(cameraState)

模型构件设置:

根据构件改颜色,同时支持多个

@ param { Array } ids  构件ID数组
@ param { Array } colors 构件颜色数组
overrideComponents (ids, colors)

显示所有被隐藏的构件

showAllComponents()

根据构件id显示构件

@ param { Array } ids  构件ID数组
showComponents (ids)

在集成模型下 传入构件的elementId 先显示对应的楼栋

@param { String } element 集成模型的构件ID
showBuild (element)

根据构件ID,隔离

@ param { Array } ids  构件ID数组
isolateComponentsById (ids)

清除隔离

clearIsolation()

清除构件选中状态

clearSelectedComponents()

获取选中的构件id

getElementsProperty ()

放大选中构件

@ param { Array } ids  构件ID数组
zoomToSelectedComponents (ids)

隐藏所有构件

hideAllComponents()

显示所有构件

showAllComponents()

模型标签设置:

批量添加三维标签

@param { Array } params 三维标签的参数数组 其余参数与set3DMarker方法一致
set3DMarkers (params, clickCallBack, cb)

添加三维标签

 * @param {obj} element 引线标签的参数 element.equipCode、element.worldPosition 必传其一
 * @param {FN} click 引线标签的点击方法
 * @param {FN} cb 引线标签生成后的回调方法
可配置参数 element: {
  iconUrl  // 图片路径,不传为默认图片
  tips, // 三维标签名称,不传为''
  size, // 三维标签大小, 不传为30
  equipCode, // 设备ID
  worldPosition, // 构件坐标
}
set3DMarker(params, clickCallBack, cb)

删除所有三维标签

del3DMakerAll()

根据id删除三维标签

@param { String } id 三维标签的id
del3DMakerById(id)

隐藏所有三维标签

hidenAllMaker()

根据ID隐藏三维标签

@ param { Array } ids  构件ID数组
hideMarkerById (ids)

根据ids显示三维标签

@ param { Array } ids  构件ID数组
showItemsById(ids)

添加引线标签

 * @param {obj} element 引线标签的参数 element.equipCode.worldPosition 必传其一
 * @param {string} dom   document的字符串
 * @param {FN} click 引线标签的点击方法
 * @param {FN} cb 引线标签生成后的回调方法
 
可配置参数: element: {
  elementId, // 构件id
  worldPosition, // 构件坐标
}
addExtLeadLabel (element, dom, click, cb)

根据ID删除引线标签

@param {String} id  引线标签的id
removeLabel(id)

删除所有引线标签

removeAllLabel()

隐藏所有引线标签

hideAllItems()

显示所有引线标签

showAllItems()

根据id隐藏引线标签

@param { Array } ids 引线标签的id数组
hideItemsById(ids)

获取所有引线标签

getAllItems()

创建轨迹

 * @param {Array} elements  设备ID数组
 * @param {String} color  颜色 [255, 255, 255]
 * @param {String} width 宽度
 * @param {FN} cb  完成后的回调方法
 * @return {String} 完成后的回调方法会返回当前轨迹的name。 name用于删除当前轨迹
 drawLine(elements, color, width, cb)

删除轨迹

 * @param {String || Array} name 可传入多个轨迹标签返回的name数组。实现批量删除
 removeDrawLine (name)

初始化设置标签设备

 * @param {Object} params  params.equipType ['IGS_002_018', 'IGS_002_017', 'PSS_006_002']
 *               params.eventType 事件类型 '1' || '2' 
 *               没有参数 可以传一个空对象
 * @param {FN} labelClick 引线标签的点击事件
 * @param {fn} callBack 完成后的回调方法
 setLabel(params, labelClick, callBack)

点击引线标签进入子模型,并隐藏其他引线标签

@param {Obj} labelData 点击引线标签返回的对象
labelClickToModel(labelData)

根据fileID查找在引线标签中查找楼栋信息

@param {fileId} String
fileIdToLabelData (fileId)

锁定Y轴旋转角度

@param {Array} angle 要限制的角度数组 推荐写法: [Math.PI / 12, Math.PI / 2] (15°, 90°)
lockAxis(angle)

解除锁定Y轴旋转角度

unLockAxis(angle)

根据ID冻结构件

@param {Array} ids 需要冻结的构件id
deactivateComponentsById(ids)

恢复所有构件至激活状态

activateAllComponents()

业务场景相关:

停车场设置

@param {string} nodeId   节点ID
setParkingColor(nodeId)

添加点击构件事件, 点击构件,查询停车场构件详情(调用此方法须先传入nodeId参数)

查询返回的结果this.$emit('parkingData', result)

addSelectedListener()

移除点击构件查询停车场构件详情的事件

removeSelectedListener()

添加构件点击事件,点击构件,会返回构件的相关信息

查询返回的结果this.$emit('elementData', result) addElementClick()

移除返回构件的相关信息事件

removeElementClick()

根据elementID查找当前楼层 并隐藏其余楼层构件

@param {String} elementId 构件ID
@returns {Boolean} true
floorElementIds(elementId)

获取大于或者小于当前楼层的其他楼层构件ID信息

 * @param { String }  elementId 当前楼层构件ID
 * @param { String }  equipmentId 当前构件的设备id
 * @param { Boolean }  containThis 是否包含当前楼层
 * @param { Number } requestDataType 请求数据类型 （0：获取当前楼层之下其他楼层构建数据；1：获取当前楼层之上其他楼层构建数据）
 * @return { Array } 匹配到的楼层Name
  elementByFloorElement(elementId, equipmentId, requestDataType = 0)

模型空间相关:

匹配房间并切换视点

 @param {String} floorId 楼层id
 @param {String} elementId 构件ID,
 @param {Object} params 非必传参数 
          params.sectioning 判断当前模型是否进行剖切 默认值为false 进行剖切  true为不进行剖切
        params.roomColor  设置房间颜色 非必传 16进制色值 例: '#ff0000'
zoomMathRoom = (floorId, elementId, params)

通过传入构件id 查找当前空间x,y,z轴

@param {String} element 构建id
@return {Object} 返回xyz轴对象
elementIdToRoomPoint(element)

根据id清除对应的空间

@param {Array} objectIds 要删除的空间ID数组
clearRoomsById(objectIds)

清除所有空间

clearAllRooms()