CIMCUBE Web-components

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

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)

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)

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')
    }
  })
}