新增图层优化，loading

src/index.less

@@ -113,9 +113,12 @@ body {
     background: url(./assets/images/modal_bg.png) no-repeat;
     background-size: cover;
   }
-  .ant-modal-header {
+  .edit-layer-modal .ant-modal-header {
     background: none;
   }
+  #edit-layer-form {
+    margin-top: 36px;
+  }
   .ant-modal-footer {
     text-align: center !important;
   }
@@ -207,3 +210,18 @@ body {
     background: url(./assets//icon/logout_big.png) no-repeat;
     background-size: cover;
   }
+  .ant-pro-global-header-right-content {
+    display: none !important;
+  }
+  #spin-show {
+    width: 100%;
+    height: 100%;
+    position: absolute;
+    z-index: 9999;
+  }
+  #spin-show > span {
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50% -50%);
+  }

src/pages/BaseMap/LayerData/index.js

@@ -155,7 +155,7 @@ class LayerData extends React.Component {
                 <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 name='base' id='edit-layer-form' onFinish={this.handleOk}>
                         <Form.Item label="图层名称"
                         rules={[
                             {
@@ -179,7 +179,8 @@ class LayerData extends React.Component {
                             </Radio.Group>
                         </Form.Item>
                         <Form.Item label="图层备注">
-                            <Input.TextArea name='note' value={this.state.addLayer.note} onChange={this.onLayerNoteChange}/>
+                            <Input.TextArea name='note' value={this.state.addLayer.note} onChange={this.onLayerNoteChange} 
+                            style={{height: '120px'}}/>
                         </Form.Item>
                     </Form>
                 </Modal>

src/pages/BaseMap/index.js

@@ -1,5 +1,5 @@
 import React from 'react';
-import { Select, Input, Card, Col, Row, Button, message, Modal } from 'antd';
+import { Select, Input, Card, Col, Row, Button, message, Modal, Spin } from 'antd';
 import axios from 'axios';
 import LayerData from './LayerData';
 import { AimOutlined } from '@ant-design/icons';
@@ -50,8 +50,19 @@ class BaseMap extends React.Component{
             inputExplainValue: "请输入地址详情信息",
             inputContent: '',
             heatMapList: [],
+            loading: false,
         }
     }
+    startLoading = () => {
+        this.setState({
+            loading: true,
+        });
+    }
+    stopLoading = () => {
+        this.setState({
+            loading: false,
+        });
+    }
     // 钩子，打开执行
     componentDidMount = () => {
         this.getAllProvince();
@@ -84,6 +95,7 @@ class BaseMap extends React.Component{
     // 获取图层明细点位数据/热力图数据
     getLayerPoints = (layerId, selected, nodeType) => {
         if (selected) {
+            this.startLoading();
             return axios.get('/api/basicMap/getLayerPoints', {
                 params: {
                     adcode: this.state.districtAdcode || this.state.cityAdcode || this.state.provinceAdcode,
@@ -102,6 +114,8 @@ class BaseMap extends React.Component{
                 } else if (nodeType === 4) {
                     this.setHeatMap(layerPointsData, layerId);
                 }
+            }).then(() => {
+                this.stopLoading();
             });
         } else {
             let self = this;
@@ -124,13 +138,12 @@ class BaseMap extends React.Component{
         }
     }
     // 在地图上设置点位 【经度，纬度】
-    setMarkers = (data, layerId) => {debugger
+    setMarkers = (data, layerId) => {
         let self = this;
         let map = this.state.map;
         let LabelsData = data || [];
         let logoImage = data.length > 0 && data[0].logoImage;
-        // map.addImage('icon', logoImage);
-        map.addImage( 'blueIcon',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})
@@ -141,7 +154,7 @@ class BaseMap extends React.Component{
                     y: 'lat',
                 }
             })
-            .shape('blueIcon')
+            .shape('yellowIcon')
             .size(20)
             // .color('mag', mag => {
             //     return mag > 4.5 ? '#5B8FF9' : '#5CCEA1';
@@ -364,6 +377,7 @@ class BaseMap extends React.Component{
     onCityChange = (cityAdcode,data) => {
         var self = this;
         let getLayers = this.state.map.getLayers();
+        self.startLoading();
         // let getOverlays = this.state.map.getAllOverlays();
         for (let i = 0; i < getLayers.length; i++) {
             if (getLayers[i].CLASS_NAME === 'AMap.LabelsLayer') {
@@ -372,7 +386,9 @@ class BaseMap extends React.Component{
         }
         // this.state.map.remove(getOverlays);
         this.getDistrictByCity(`${cityAdcode}`);
-        this.refs.getLayerDataFun.getBasicLayerMenu(`${cityAdcode}`);
+        this.refs.getLayerDataFun.getBasicLayerMenu(`${cityAdcode}`).then(() => {
+            self.stopLoading();
+        });
         data && this.gotoCity(data);
         this.hideHeatMap();
     
@@ -411,6 +427,7 @@ class BaseMap extends React.Component{
     onDistrictChange = (provinceAdcode,data) => {
         var self = this;
         let getLayers = this.state.map.getLayers();
+        self.startLoading()
         // let getOverlays = this.state.map.getAllOverlays();
         for (let i = 0; i < getLayers.length; i++) {
             if (getLayers[i].CLASS_NAME === 'AMap.LabelsLayer') {
@@ -418,7 +435,9 @@ class BaseMap extends React.Component{
             } 
         }
         // this.state.map.remove(getOverlays);
-        this.refs.getLayerDataFun.getBasicLayerMenu(`${provinceAdcode}`);
+        this.refs.getLayerDataFun.getBasicLayerMenu(`${provinceAdcode}`).then(() => {
+            self.stopLoading();
+        });
         data && this.gotoCity(data);
         this.hideHeatMap();
         this.setState({
@@ -494,6 +513,7 @@ class BaseMap extends React.Component{
     render(){   
         return (
             <div className={styles.basseMap} id='base_map'>
+                <Spin id='spin-show' size='large' spinning={this.state.loading}></Spin>
                 <Header></Header>
                 {/* 筛选框 */}
                 <Card className={styles.selectWrap} bordered={false}>