# Web-components

**Repository Path**: glodon/web-components

## Basic Information

- **Project Name**: Web-components
- **Description**: CIMCUBE Web-components是CIM平台前端通用组件库，依赖于广联达CIMCUBE引擎，实现对引擎功能的组件化封装，为CIM平台搭建提供开箱即用的开发体验。CIMCUBE Web-components包含普通UI组件、引擎基础组件和引擎高级组件三个部分，用户可根据实际需求选用部分或全部组件快速搭建基于广联达CIMCUBE引擎的CIM应用
- **Primary Language**: JavaScript
- **License**: MIT
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 1
- **Forks**: 0
- **Created**: 2024-03-05
- **Last Updated**: 2025-03-17

## Categories & Tags

**Categories**: Uncategorized

**Tags**: CIM, CIMCUBE

## README

<h1 align="center">
  <span style="font-family: PingFang SC;font-size: 20px;font-weight: 600;">CIMCUBE Web-components</span>
</h1>

<p align="center">
  <a href="https://www.npmjs.org/package/element-plus">
    <img src="https://img.shields.io/npm/v/element-plus.svg" />
  </a>
  <a href="https://github.com/element-plus/element-plus">
    <img src="https://img.shields.io/badge/node-%20%3E%3D%2016-47c219" />
  </a>
  <br>
</p>

<p align="center"> 一个基于cimcube.js的组件库</p>

- 💪 开箱即用的广联达CIMCUBE组件
- 🔥  完全TypeScript开发

## **项目介绍**

CIMCUBE Web-components是CIM平台前端通用组件库，依赖于广联达CIMCUBE引擎，实现对引擎功能的组件化封装，为CIM平台搭建提供开箱即用的开发体验。CIMCUBE Web-components包含普通UI组件、引擎基础组件和引擎高级组件三个部分，用户可根据实际需求选用部分或全部组件快速搭建基于广联达CIMCUBE引擎的CIM应用。

#### 普通UI组件

- button、input、 radio、switch、slider、checkbox、select、messagebox、树组件、虚拟树、面板

#### 基础组件

- 放大、缩小

#### 高级组件

- 图层树、工具栏、BIM工具栏、测量工具栏、天际线分析、可视域分析、限高分析、模型剖切、场景漫游、状态栏、模型编辑、全局设置面板、六面体操作球

## **项目架构**

![image-web-components](source/assets/web-components.png)

### **编译与运行**:hammer_and_wrench:

编译之前您需先确保环境中已安装node.js 16及以上版本，npm 2.5.3及以上版本

#### 编译步骤

在vs code中打开项目并执行 `npm run build`,项目将开始构建，构建完成后将在`dist`中生成`components.js`和`components.css`两个主要文件及其他文件，您可以在CIM前端应用中引入这两个文件便可使用该组件库。

```html
<link rel="stylesheet" href="components.css" type="text/css">
<script src="components.js"></script>
```

在开发环境中，如您想查看示例demo或基于组件库开发属于自己的组件,需要在`config`目录下的`CIMCUBEConfig.js`中配置属于您的广联达CIMCUBE引擎地址，否则示例demo可能不生效。

#### **运行环境**
Windows、macOS、Linux

#### **Getting Started**

##### 加载树组件

```js
const mockData = [{
  name: 'root',
  props1: 'root1',
  children: [{
    name: 'level one 1',
    props1: '1111',
    children: [{
      name: 'level two 1-1',
      props1: 'eeee',
      children: [{
        name: 'level three 1-1-1',
        props1: 'eeee',
        children: [{
          name: 'level four 1-1-1-1',
          props1: 'eeee',
        }]
      }]
    }, {
      name: 'level two 1-2',
      props1: 'eeee'
    }]
  }, {
    name: 'level one 2',
    props1: '2222',
    children: [{
      name: 'level two 2-1',
      props1: 'eeee'
    }, {
      name: 'level two 2-2',
      props1: 'eeee'
    }]
  }, {
    name: 'level one 3',
    props1: '3333',
    children: [{
      name: 'level two 3-1',
      props1: 'eeee'
    }, {
      name: 'level two 3-2',
      props1: 'eeee'
    }]
  }]
}]
const { CIM_SDKManager = null, CIM_UIManager, CIM_WIDGET_ID }  = window.Glodon.CIMCube.Components
const uiManager = new CIM_UIManager()
const properties = {
  data: mockData,
  key: 'name',
  label: 'name',
  parentId: 'container',
  defaultExpandKeys: ['root', 'level one 1', 'level one 3'], // 设置lazy后不生效
  defaultCheckedKeys:['level one 1', 'level one 2'], // 设置lazy后不生效
  lazy: false,
  showCheckbox: true,
  className: 'custom-tree',
  icon: (data) => {
    if (data.name === 'root') {
      return 'cim-yuanshujuguanli'
    } else {
      return 'cim-wenjian'
    }
  },
  disabled: (data) => {
    return false
  },
  nodeExpand: function(data, evt) {
    console.log('props node expand', data, evt)
  },
  nodeCollapse: function(data, evt) {
    console.log('props node collapse', data, evt)
  },
  nodeClick: (data, evt) => {
    console.log('props node click', data, evt)
  },
  nodeCheck: (checkStatus, data, checkNodes) => {
    console.log('props node check', checkStatus, data, checkNodes)
  },
  filterNodeMethod: (data) => {
    return true
  }
}
const tree = uiManager.loadComponent(CIM_WIDGET_ID.CIM_TREE, properties)
```

![image-20240305102911354](assets/image-20240305102911354.png)

##### 加载地图缩放组件

```javascript
const { CIM_SDKManager = null, CIM_UIManager, CIM_WIDGET_ID }  = window.Glodon.CIMCube.Components
const map = await CIM_SDKManager.initMap('map-container') // map-container是地图容器ID
const uiManager = new CIM_UIManager(map)
const properties = { parentId: 'toolbar' }
let zoomInCom = uiManager.loadComponent(CIM_WIDGET_ID.CIM_ZOOM_IN, properties)
let zoomOutCom = uiManager.loadComponent(CIM_WIDGET_ID.CIM_ZOOM_OUT, properties)
uiManager.loadComponent(CIM_WIDGET_ID.CIM_MODE_SWITCH, properties)
```

![image-20240305101014129](assets/image-20240305101014129.png)

##### 加载全局设置组件

```js
const { CIM_SDKManager = null, CIM_UIManager, CIM_WIDGET_ID }  = window.Glodon.CIMCube.Components
const map = await CIM_SDKManager.initMap('map-container')
const uiManager = new CIM_UIManager(map)
const properties = { parentId: 'icon-switch-toolbar' }
uiManager.loadComponent(CIM_WIDGET_ID.CIM_GLOBAL_SWITCH_PANEL, {
    terrain: {
      active: true
    },
    sunlight: {
      active: true,
    },
    fog: {
      params: {
        darkness: 0.3,
        lightAttenuation: 1,
        visualDistance: 5000
      }
    },
    change: (name, active) => {
      console.log('switch change', name, active)
    },
    beforeClose:  () => {
      console.log('close panel')
    }
  })
}

```

![image-20240305101626356](assets/image-20240305101626356.png)

其他组件的使用方法参照`test`目录下的示例

## 使用交流 :eyes:

如您在使用中有任何问题可联系广联达CIM平台:heart:感谢​您​提供​的建议:pray:

- Email：cimcube@glodon.com
- 电话：021-54582000
- QQ群: 310920326
- 地址：上海市闵行区虹桥镇申虹路666弄正荣中心2号楼

## License

MIT 许可证，详细信息请查阅LICENSE