diff --git a/src/api/index.js b/src/api/index.js
index 940b3627..546c079d 100644
--- a/src/api/index.js
+++ b/src/api/index.js
@@ -62,3 +62,29 @@ export function getAdStatisticsData( params ) {
   });
 }
 
+// 基础地图创建涂层
+export function createLayer( params ) {
+  return request('/api/basicMap/createLayer', {
+    method: 'POST',
+    params: params
+  });
+}
+
+// 基础地图修改涂层
+export function updateLayer( params ) {
+  return request('/api/basicMap/updateLayer', {
+    method: 'POST',
+    params: params
+  });
+}
+
+// 基础地图删除涂层
+export function deleteLayer( params ) {
+  return request('/api/basicMap/deleteLayer', {
+    method: 'get',
+    params: params
+  });
+}
+
+
+
diff --git a/src/assets/images/modal_bg.png b/src/assets/images/modal_bg.png
new file mode 100644
index 00000000..0e5b00c9
Binary files /dev/null and b/src/assets/images/modal_bg.png differ
diff --git a/src/assets/images/modal_bg2.png b/src/assets/images/modal_bg2.png
new file mode 100644
index 00000000..a10c8aa0
Binary files /dev/null and b/src/assets/images/modal_bg2.png differ
diff --git a/src/index.less b/src/index.less
index 99781f96..0ba60463 100644
--- a/src/index.less
+++ b/src/index.less
@@ -104,6 +104,44 @@ body {
     box-shadow: 0px 0px 10px 0px rgba(0,0,0,0.2);
     border-radius: 10px;
     opacity: 1;
+    text-align: center;
+  }
+  #add-layer {
+    margin-bottom: 18px;
+  }
+  .ant-modal-content {
+    background: url(./assets/images/modal_bg.png) no-repeat;
+    background-size: cover;
+  }
+  .ant-modal-header {
+    background: none;
+  }
+  .ant-modal-footer {
+    text-align: center !important;
+  }
+  .radio-btn {
+    width: 56px;
+    height: 56px;
+    margin-right: 40px;
+    border-radius: 0% !important;
+  }
+  #redio-btn-group .icon-01 {
+    background: url(./assets/icon/position_icon1_big.png) no-repeat center center;
+    background-size: 80%;
+  }
+  #redio-btn-group .icon-02 {
+    background: url(./assets/icon/position_icon2_big.png) no-repeat center center;
+    background-size: 80%;
+  }
+  #redio-btn-group .icon-03 {
+    background: url(./assets/icon/position_icon3_big.png) no-repeat center center;
+    background-size: 34%;
+  }
+  .showItem {
+    display: inline-block;
+  }
+  .hideItem {
+    display: none;
   }
   .layer-data-wrap .ant-tree {
     background: none;
@@ -152,6 +190,8 @@ body {
     background: #FFFFFF;
     opacity: 1;
     padding: 22px 68px;
+    position: relative;
+    z-index: 999;
   }
   .header-left {
     float: left;
diff --git a/src/pages/BaseMap/LayerData/index.js b/src/pages/BaseMap/LayerData/index.js
index a8bcf02c..0c7af8c5 100644
--- a/src/pages/BaseMap/LayerData/index.js
+++ b/src/pages/BaseMap/LayerData/index.js
@@ -1,5 +1,5 @@
 import React from 'react';
-import { Tree } from 'antd';
+import { Tree, Button, Modal, Form, Input, Radio } from 'antd';
 import axios from 'axios';
 import {
   DownOutlined,
@@ -7,6 +7,7 @@ import {
   EyeInvisibleOutlined,
 } from '@ant-design/icons';
 import SetLogoImagePath from './SetLogoImagePath'
+import { createLayer } from '../../../api';
 import '../../../index.less';
 
 class LayerData extends React.Component {
@@ -15,6 +16,13 @@ class LayerData extends React.Component {
         this.state = {
             treeData: [],
             layerId: '',
+            isModalOpen: false,
+            addLayer: {
+                id: 0,
+                logoImagePath: '',
+                name: '',
+                note: '',
+            },
         }
     }
 
@@ -65,6 +73,73 @@ class LayerData extends React.Component {
             this.props.getLayerShapes(layerId, info.selected);
         }
     }
+    //弹出框事件
+    showModal = () => {
+        this.setState({
+            isModalOpen: true
+        });
+    };
+    handleOk = (values) => {
+        if (this.state.addLayer.id != 0) { //编辑图层
+            updateLayer({
+                id: this.state.addLayer.id,
+                logoImagePath: this.state.addLayer.logoImagePath,
+                name: this.state.addLayer.name,
+                note: this.state.addLayer.note,
+            }).then((e) => {
+                this.setState({
+                    isModalOpen: false
+                });
+            })
+        } else {
+            createLayer({ //创建图层
+                id: this.state.addLayer.id,
+                logoImagePath: this.state.addLayer.logoImagePath,
+                name: this.state.addLayer.name,
+                note: this.state.addLayer.note,
+            }).then((e) => {
+                this.setState({
+                    isModalOpen: false
+                });
+            })
+        }
+    };
+    handleCancel = () => {
+        this.setState({
+            isModalOpen: false
+        });
+    };
+    onLayerNameChange = (e) => {
+        this.setState({
+            addLayer: {
+                id: this.state.addLayer.id,
+                logoImagePath: this.state.addLayer.logoImagePath,
+                note: this.state.addLayer.note,
+                name: e.target.value,
+            }
+        })
+    };
+    onLayerNoteChange = (e) => {
+        this.setState({
+            addLayer: {
+                id: this.state.addLayer.id,
+                logoImagePath: this.state.addLayer.logoImagePath,
+                name: this.state.addLayer.name,
+                note: e.target.value,
+            }
+        })
+    };
+    onLayerIogoImagePathChange = (e) => {
+        this.setState({
+            addLayer: {
+                id: this.state.addLayer.id,
+                note: this.state.addLayer.note,
+                name: this.state.addLayer.name,
+                logoImagePath: e.target.value,
+            }
+        })
+    };
+    //弹出框事件
 
     render() {
         return (
@@ -77,6 +152,37 @@ class LayerData extends React.Component {
                     treeData={this.state.treeData}
                     onSelect={this.onLayerSelect}
                 />
+                <Button type='primary' id='add-layer' className={this.state.treeData.length > 0 ? 'showItem' : 'hideItem'}
+                onClick={this.showModal}>新建图层</Button>
+                <Modal title="新建图层" open={this.state.isModalOpen} onOk={this.handleOk} onCancel={this.handleCancel} className='edit-layer-modal'>
+                    <Form name='base' onFinish={this.handleOk}>
+                        <Form.Item label="图层名称"
+                        rules={[
+                            {
+                                required: true,
+                                message: '请输入图层名称!',
+                            }
+                        ]}>
+                            <Input name='id' type='hidden' value={this.state.addLayer.id}/>
+                            <Input name='name' value={this.state.addLayer.name} onChange={this.onLayerNameChange}/>
+                        </Form.Item>
+                        <Form.Item label="图层图标" rules={[
+                            {
+                                required: true,
+                                message: '请选择图层图标!',
+                            }
+                        ]}>
+                            <Radio.Group id='redio-btn-group' onChange={this.onLayerIogoImagePathChange}>
+                                <Radio.Button name='logoImagePath' value="icon01" className='radio-btn icon-01'></Radio.Button>
+                                <Radio.Button name='logoImagePath' value="icon02" className='radio-btn icon-02'></Radio.Button>
+                                <Radio.Button name='logoImagePath' value="icon03" className='radio-btn icon-03'></Radio.Button>
+                            </Radio.Group>
+                        </Form.Item>
+                        <Form.Item label="图层备注">
+                            <Input.TextArea name='note' value={this.state.addLayer.note} onChange={this.onLayerNoteChange}/>
+                        </Form.Item>
+                    </Form>
+                </Modal>
             </div >
         );
     }
diff --git a/src/pages/BaseMap/index.js b/src/pages/BaseMap/index.js
index 26d0de35..e6e246c4 100644
--- a/src/pages/BaseMap/index.js
+++ b/src/pages/BaseMap/index.js
@@ -1,9 +1,11 @@
 import React from 'react';
-import { Select, Input, Card, Col, Row, Button, message } from 'antd';
+import { Select, Input, Card, Col, Row, Button, message, Modal } from 'antd';
 import axios from 'axios';
 import LayerData from './LayerData';
 import { AimOutlined } from '@ant-design/icons';
-import Guide from '../../components/Guide/index.ts'
+import Guide from '../../components/Guide/index.ts';
+import icon2 from '../../assets/icon/position_icon2.png';
+import Header from '../../components/Header/index.js';
 
 import { GaodeMap ,Scene, PointLayer, Heatmap, PolygonLayer } from '@antv/l7';
 
@@ -127,10 +129,10 @@ class BaseMap extends React.Component{
         let map = this.state.map;
         let LabelsData = data || [];
         let logoImage = data.length > 0 && data[0].logoImage;
-        map.addImage("icon", logoImage);
-        map.addImage( '00','https://gw.alipayobjects.com/zos/basement_prod/604b5e7f-309e-40db-b95b-4fac746c5153.svg', );
-        map.addImage('01', 'https://gw.alipayobjects.com/zos/basement_prod/30580bc9-506f-4438-8c1a-744e082054ec.svg',);
-        map.addImage( '02','https://gw.alipayobjects.com/zos/basement_prod/7aa1f460-9f9f-499f-afdf-13424aa26bbf.svg',);
+        // map.addImage('icon', logoImage);
+        map.addImage( 'blueIcon',logoImage,);
+        map.addImage('yellowIcon', icon2,);
+        map.addImage( 'greenIcon','https://gw.alipayobjects.com/zos/basement_prod/7aa1f460-9f9f-499f-afdf-13424aa26bbf.svg',);
         const pointLayer = new PointLayer({name: layerId})
             .source(LabelsData, {
                 parser: {
@@ -139,14 +141,14 @@ class BaseMap extends React.Component{
                     y: 'lat',
                 }
             })
-            .shape(logoImage)
-            .size(30)
-            .color('mag', mag => {
-                return mag > 4.5 ? '#5B8FF9' : '#5CCEA1';
-            })
+            .shape('blueIcon')
+            .size(20)
+            // .color('mag', mag => {
+            //     return mag > 4.5 ? '#5B8FF9' : '#5CCEA1';
+            // })
             .active(true)
             .style({
-                opacity: 0.6,
+                opacity: 1,
                 strokeWidth: 3
             });
         map.addLayer(pointLayer);
@@ -492,6 +494,7 @@ class BaseMap extends React.Component{
     render(){   
         return (
             <div className={styles.basseMap} id='base_map'>
+                <Header></Header>
                 {/* 筛选框 */}
                 <Card className={styles.selectWrap} bordered={false}>
                     <Row>
@@ -529,6 +532,10 @@ class BaseMap extends React.Component{
                 </Card>
                 {/* 图层数据显示 */}
                 <LayerData ref="getLayerDataFun" getLayerPoints = {this.getLayerPoints} getLayerShapes = {this.getLayerShapes}/>
+                <div className={styles.btnRightWrap}>
+                    <Button type="primary" className={styles.btnRight}>点位创建</Button>
+                    <Button type="primary" className={styles.btnRight}>点位导入</Button>
+                </div>
                 {/* 地图 */}
                 <div className={styles.mapWrap}>
                     <div style={{width: '100%', height: '100vh'}} id="container" />
diff --git a/src/pages/BaseMap/index.less b/src/pages/BaseMap/index.less
index 6259e8a9..77569c70 100644
--- a/src/pages/BaseMap/index.less
+++ b/src/pages/BaseMap/index.less
@@ -5,13 +5,25 @@
   box-shadow: 0px 0px 10px 0px rgba(0,0,0,0.2);
   border-radius: 10px 10px 10px 10px;
   opacity: 1;
-  margin: 5%;
+  margin: 3% 5%;
   position: absolute;
   z-index: 99;
-  width: 86%;
+  width: 90%;
 }
 .labelForm {
   height: 32px;
   line-height: 32px;
   z-index: 99;
 }
+// 右侧按钮
+.btnRightWrap {
+  position: absolute;
+  right: 5%;
+  top: 240px;
+  z-index: 99;
+  width: 100px;
+  text-align: center;
+}
+.btnRight {
+  margin-bottom: 26px;
+}