#添加了toolBar，就是操作bim 模型的工具栏。费了我好大的功夫。慢慢摸索吧

src/routes/IndexPage.css

 
 .webglContainer1{
-  height: 85%;
+  position: absolute;
+  top: 0;
+  left: 0;
+  height: 100%;
   width:100%;
 }
 .all{
-  height: 100%;
 }
-.title{
-  text-align: center;
-  font-size: 26px;
+.floatDiv {
+  margin-top: 30px;
+  float: left;
+  position: relative;
+  text-align: left;
+  left: 50%;
+  z-index: 9999;
+}
+.toolBar {
+  position: relative;
+  left: -50%;
+  z-index: 9999;
+}
+.menuUl {
+  margin: 0 auto;
+}
+.menuUl li {
+  list-style: none;/* 设置li 样式，不带小点点*/
+  float:left;
+  width: 50px;
+}
+.menuUl ul {
+  display:-moz-inline-block;
+}
+.menuUl ul li {
 
+  list-style:none;
+}
+.clearfix:before,.clearfix:after{
+  display:table;
+  content:'';
 }
+.clearfix:after{
+  clear:both;/*在所有元素的父元素上加伪类*/
+}
+.clearfix{
+  *zoom:1;
+}
+ul,li,button{
+  margin:0;
+  padding:0;
+}
+
+
+
+
 

src/routes/IndexPage.js

@@ -5,7 +5,7 @@ import EngineInit from 'EngineInit';
 import AddModel from 'AddModel';
 import SetModelColor from 'SetModelColor';
 import SetClickMode from 'SetClickMode';
-import { Button, Menu, Affix, Icon, Tooltip } from 'antd';
+import { Button, Menu, Icon, Tooltip } from 'antd';
 import  '../utils/OnClickPosition';
 
 const filesurl= '../../public/model/house1/house1List.json';
@@ -13,6 +13,10 @@ const SubMenu = Menu.SubMenu;
 const MenuItemGroup = Menu.ItemGroup;
 
 class IndexPage extends React.Component{
+  constructor(props) {
+    super(props);
+    this.state = {liVisible: false};
+  }
   SetModelColor = () => {
     SetModelColor('testtag1',0,0,255);
   };
@@ -22,31 +26,58 @@ class IndexPage extends React.Component{
 
   componentDidMount() {
     //初始化画布
-     EngineInit("webglContainer");
-     SetClickMode(0);
-     AddModel(filesurl, 'testtag1');
-
+    EngineInit("webglContainer");
+    SetClickMode(0);
+    AddModel(filesurl, 'testtag1');
   }
+  ModelSettingMenuClick = (liVisible) => {
+    console.info(liVisible);
+    if (liVisible === true) {
+
+      this.setState({ liVisible: false });
+    } else {
+
+      this.setState({ liVisible: true });
+    }
+
+  };
 
   render() {
     return (
       <div className={ styles.all }>
-          <div className={styles.title}><label>BiM 测试平台</label></div>
-
-          <div id="webglContainer" className={styles.webglContainer1} ref={(node) => { this.container = node; }}>
+        <div className={styles.floatDiv}>
+          <div className={styles.toolBar}>
+            <ul className={`${styles.menuUl} ${styles.clearfix}`}>
+              <li>
               <Tooltip title="模型颜色设置">
                 <Button type="primary" onClick={this.SetModelColor}>
                   <Icon type="mail"></Icon>
                 </Button>
               </Tooltip>
-              <Button type="primary" onClick={this.SetClickMode.bind(undefined,'0')}>查看模式</Button>
-              <Button type="primary" onClick={this.SetClickMode.bind(undefined,'1')}>坐标拾取模式</Button>
-              <Button type="primary" onClick={this.SetClickMode.bind(undefined,'2')}>ID拾取模式</Button>
+              </li>
+              <li>
+                <Tooltip title="模型设置">
+                  <Button type="primary"  onClick={this.ModelSettingMenuClick.bind(undefined,this.state.liVisible)}>模型设置</Button>
+                </Tooltip>
+                {
+                  this.state.liVisible&&<ul className={styles.clearfix}>
+                    <li>
+                      <Button type="primary">查看模式</Button>
+                    </li>
+                    <li>
+                      <Button type="primary">坐标拾取模式</Button>
+                    </li>
+                    <li>
+                      <Button type="primary" onClick={this.SetClickMode.bind(undefined,'2')}>ID拾取模式</Button>
+                    </li>
+                  </ul>
+                }
+              </li>
+            </ul>
           </div>
-
-
+        </div>
+        <div id="webglContainer" className={styles.webglContainer1}/>
       </div>
-
     );
   }
 }