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

src/components/AddTagsForm.js

+import React from 'react';
+import { Button, Card, Form, Input,Select } from 'antd';
+import { connect } from 'dva';
+
+const FormItem = Form.Item;
+
+class AddTagsForm extends React.Component {
+  constructor(props) {
+    super(props);
+    this.state = {
+
+    };
+  }
+  handleSubmit = (e) => {
+    e.preventDefault();
+    this.props.form.validateFields((err, values) => {
+
+    });
+  };
+  render() {
+    const { getFieldDecorator  } = this.props.form;
+
+    return(
+      <Card
+        title="标签登记"
+        headStyle={{textAlign: "Center"}}
+        style={{width: 350}}
+      >
+        <Form onSubmit={this.handleSubmit}>
+          <FormItem label="标签类型">
+            {
+              getFieldDecorator('TagType',{
+                rules: [
+                  {
+                    required: true,
+                    whitespace: true,
+                  },
+                  ]
+              })(<Select />)
+            }
+          </FormItem>
+          <FormItem label="标签名称">
+            {
+              getFieldDecorator('TagName',{
+                rules: [
+                  {
+                    required: true,
+                    whitespace: true,
+                  },
+                ]
+              })(<Input />)
+            }
+          </FormItem>
+          <FormItem label="标签描述">
+            {
+              getFieldDecorator('TagDescription',{
+
+              })(<Input />)
+            }
+          </FormItem>
+          <FormItem label="标签位置">
+            {
+              getFieldDecorator('TagPosition',{
+                rules: [
+                  {
+                    required: true,
+                    whitespace: true,
+                  },
+                ]
+              })(<Input />)
+            }
+          </FormItem>
+          <FormItem label="标签图标">
+            {
+              getFieldDecorator('TagIcon',{
+
+              })(<Select />)
+            }
+          </FormItem>
+          <FormItem>
+            <Button type="primary" htmlType="submit">Search</Button>
+            <Button type="primary">取消</Button>
+          </FormItem>
+        </Form>
+      </Card>
+    );
+  }
+}
+// 这里的写法一定要记清楚，不是Form.create(<AddTagsForm/>);写错之后无比的蛋疼
+const AddTagForm =Form.create()(AddTagsForm);
+export default connect()(AddTagForm);

src/routes/IndexPage.css

@@ -50,6 +50,14 @@ ul,li,button{
   margin:0;
   padding:0;
 }
+.tagsForm {
+  width: 500px;
+  height: auto;
+  position: relative;
+  z-index: 9999;
+  float: right;
+
+}
 
 
 

src/routes/IndexPage.js

@@ -7,15 +7,17 @@ import SetModelColor from 'SetModelColor';
 import SetClickMode from 'SetClickMode';
 import { Button, Menu, Icon, Tooltip } from 'antd';
 import  '../utils/OnClickPosition';
+import AddTagForm from '../components/AddTagsForm';
 
 const filesurl= '../../public/model/house1/house1List.json';
-const SubMenu = Menu.SubMenu;
-const MenuItemGroup = Menu.ItemGroup;
 
 class IndexPage extends React.Component{
   constructor(props) {
     super(props);
-    this.state = {liVisible: false};
+    this.state = {
+      liVisible: false,
+      num: -1,
+    };
   }
   SetModelColor = () => {
     SetModelColor('testtag1',0,0,255);
@@ -30,15 +32,19 @@ class IndexPage extends React.Component{
     SetClickMode(0);
     AddModel(filesurl, 'testtag1');
   }
-  ModelSettingMenuClick = (liVisible) => {
+  ModelSettingMenuClick = (liVisible,num) => {
     console.info(liVisible);
     if (liVisible === true) {
 
       this.setState({ liVisible: false });
-    } else {
 
+    } else {
       this.setState({ liVisible: true });
     }
+    this.setState({ num: num });
+  };
+  // 添加标签 pos 是变迁
+  AddPositionFlag = () => {
 
   };
 
@@ -51,24 +57,70 @@ class IndexPage extends React.Component{
               <li>
               <Tooltip title="模型颜色设置">
                 <Button type="primary" onClick={this.SetModelColor}>
-                  <Icon type="mail"></Icon>
+                  <Icon type="mail"/>
                 </Button>
               </Tooltip>
               </li>
               <li>
                 <Tooltip title="模型设置">
-                  <Button type="primary"  onClick={this.ModelSettingMenuClick.bind(undefined,this.state.liVisible)}>模型设置</Button>
+                  <Button type="primary" onClick={this.ModelSettingMenuClick.bind(undefined,this.state.liVisible,1)}>
+                    <Icon type="mail"/>
+                  </Button>
                 </Tooltip>
                 {
-                  this.state.liVisible&&<ul className={styles.clearfix}>
+                  this.state.num === 1 && this.state.liVisible && <ul className={styles.clearfix}>
+                    <li>
+                      <Tooltip title="显示模型">
+                        <Button type="primary">
+                          <Icon type="mail"/>
+                        </Button>
+                      </Tooltip>
+                    </li>
+                    <li>
+                      <Tooltip title="隐藏模型">
+                        <Button type="primary">
+                          <Icon type="mail"/>
+                        </Button>
+                      </Tooltip>
+                    </li>
+                    <li>
+                      <Tooltip title="模型半透明">
+                        <Button type="primary">
+                          <Icon type="mail"/>
+                        </Button>
+                      </Tooltip>
+                    </li>
                     <li>
-                      <Button type="primary">查看模式</Button>
+                      <Tooltip title="模型半透明恢复">
+                        <Button type="primary">
+                          <Icon type="mail"/>
+                        </Button>
+                      </Tooltip>
                     </li>
+                  </ul>
+                }
+              </li>
+              <li>
+                <Tooltip title="标签管理">
+                  <Button type="primary" onClick={this.ModelSettingMenuClick.bind(undefined,this.state.liVisible,2)}>
+                    <Icon type="mail"/>
+                  </Button>
+                </Tooltip>
+                {
+                  this.state.num === 2 && this.state.liVisible && <ul className={styles.clearfix}>
                     <li>
-                      <Button type="primary">坐标拾取模式</Button>
+                      <Tooltip title="添加标签" placement="right">
+                        <Button type="primary" onClick={this.AddPositionFlag}>
+                          <Icon type="pushpin"/>
+                        </Button>
+                      </Tooltip>
                     </li>
                     <li>
-                      <Button type="primary" onClick={this.SetClickMode.bind(undefined,'2')}>ID拾取模式</Button>
+                      <Tooltip title="显示所有标签">
+                        <Button type="primary"  placement="right">
+                          <Icon type="flag"/>
+                        </Button>
+                      </Tooltip>
                     </li>
                   </ul>
                 }
@@ -76,6 +128,11 @@ class IndexPage extends React.Component{
             </ul>
           </div>
         </div>
+        {
+          <div className={styles.tagsForm}>
+            <AddTagForm/>
+          </div>
+        }
         <div id="webglContainer" className={styles.webglContainer1}/>
       </div>
     );