ROOF-RENDERER

安装 roofRenderer 插件

npm install gcl-roof-renderer

引用方式

import { RoofRenderer } from 'gcl-roof-renderer'

使用方式

// 初始化渲染器
const roofRenderer = new RoofRenderer(rendererOptions)
// 渲染屋顶
roofRenderer.render()

// 展开/收起
roofRenderer.toggleExpand(isExpand)

类型说明

// 初始化参数配置
type RoofRenderOptions = {
  element: HTMLElement // 渲染节点
  width: number // 画布宽度
  height: number // 画布高度
  roof: RoofOptions // 屋顶配置信息
  column: ColumnOptions // 立柱配置信息
  beam: BeamOptions // 斜梁配置信息
  crossbar: CrossbarOptions // 横梁配置信息
  panel: PanelOptions // 光伏板组件配置信息
  layout: LayoutOptions // 排布方式配置信息
  onPanelClick: Function // 光伏板组件点击事件
}

// 屋顶配置信息
type RoofOptions = {
  type: number // 1: 平屋顶 2: 斜屋顶
  width: number // 屋顶宽度 东西长
  length: number // 屋顶长度 南北长
  height: number // 屋顶高度
}

// 立柱配置信息
type ColumnOptions = {
  width: number // 立柱宽度
  height: number // 立柱长度
  gapList: Array<number> // 立柱间距
  heightList: Array<number> // 立柱高度
  northGapList: Array<number> // 立柱间距（北屋顶）
  northHeightList: Array<number> // 立柱高度（南屋顶）
}

// 斜梁（榀）配置信息
type BeamOptions = {
  width: number // 斜梁宽度
  height: number // 斜梁高度
  gap: number // 斜梁间距
}

// 横梁配置信息
type CrossbarOptions = {
  width: number // 横梁宽度
  height: number // 横梁高度
}

// 光伏组件配置信息
type PanelOptions = {
  width: number // 宽度
  length: number // 长度
  height: number // 高度
}

// 排布方式配置信息
type LayoutOptions = {
  rows: number // 排布行数
  angle: number // 倾角
  horizontal: Array<number> // 横排的序号列表
  northRows: number // 排布行数（北屋顶）
  northNorizontal: Array<number> // 横排的序号列表（北屋顶）
  northAngle: number // 倾角（北屋顶）
  westSouthPoint: Array<number> // 西南原点
  eastNorthPoint: Array<number> // 东北原点
}