点位创建优化

src/components/Header/index.js

@@ -21,7 +21,7 @@ function Header (e) {
   useEffect(() =>{
     getCurrentUser().then((e) => {
         const d = e.data;
-        token.username = d.username;
+        token.username = d && d.username;
     })
   })
   

src/pages/BaseMap/LayerData/index.js

@@ -23,6 +23,7 @@ class LayerData extends React.Component {
                 name: '',
                 note: '',
             },
+            selectLayerList: [],
         }
     }
 
@@ -63,9 +64,18 @@ class LayerData extends React.Component {
     }
     // 选中图层
     onLayerSelect = (selectedKeys, info) => {
+        let selectLayerList = [];
         let layerId = info.node.key.split('-')[1];
+        for (let i in info.selectedNodes) {
+            selectLayerList.push({
+                'value': info.selectedNodes[i].key.split('-')[1],
+                'label': info.selectedNodes[i].title,
+                'selected': true,
+            })
+        }
         this.setState({
-            layerId: layerId
+            layerId: layerId,
+            selectLayerList: selectLayerList,
         })
         if (info.node.type === 1 || info.node.type === 4) {
             this.props.getLayerPoints(layerId, info.selected, info.node.type);

src/pages/BaseMap/index.js

@@ -349,14 +349,10 @@ class BaseMap extends React.Component{
     // 选择省
     onProvinceChange = (provinceAdcode, data) => {
         var self = this;
-        let getLayers = this.state.map.getLayers();
+        let getLayers = self.state.markerLayerList;
-        // let getOverlays = this.state.map.getAllOverlays();
         for (let i = 0; i < getLayers.length; i++) {
-            if (getLayers[i].CLASS_NAME === 'AMap.LabelsLayer') {
+            self.state.map.removeMarkerLayer(getLayers[i]);
-                self.state.map.remove(getLayers[i]);
-            } 
         }
-        // this.state.map.remove(getOverlays);
         data && this.gotoProvince(data)
         this.getCityByProvince(`${provinceAdcode}`);
         this.hideHeatMap();
@@ -396,15 +392,11 @@ 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();
+        let getLayers = self.state.markerLayerList;
         for (let i = 0; i < getLayers.length; i++) {
-            if (getLayers[i].CLASS_NAME === 'AMap.LabelsLayer') {
+            self.state.map.removeMarkerLayer(getLayers[i]);
-                self.state.map.remove(getLayers[i]);
-            } 
         }
-        // this.state.map.remove(getOverlays);
         this.getDistrictByCity(`${cityAdcode}`);
         this.refs.getLayerDataFun.getBasicLayerMenu(`${cityAdcode}`).then(() => {
             self.stopLoading();
@@ -446,13 +438,10 @@ class BaseMap extends React.Component{
     //选择区
     onDistrictChange = (provinceAdcode,data) => {
         var self = this;
-        let getLayers = this.state.map.getLayers();
+        self.startLoading();
-        self.startLoading()
+        let getLayers = self.state.markerLayerList;
-        // let getOverlays = this.state.map.getAllOverlays();
         for (let i = 0; i < getLayers.length; i++) {
-            if (getLayers[i].CLASS_NAME === 'AMap.LabelsLayer') {
+            self.state.map.removeMarkerLayer(getLayers[i]);
-                self.state.map.remove(getLayers[i]);
-            } 
         }
         // this.state.map.remove(getOverlays);
         this.refs.getLayerDataFun.getBasicLayerMenu(`${provinceAdcode}`).then(() => {
@@ -527,6 +516,15 @@ class BaseMap extends React.Component{
     }
 
     enableDrawPoint = () => {
+        if (this.state.cityAdcode == '' && this.state.districtAdcode == '') {
+            message.error('请至少选择行政区域至城市再进行点位创建');
+            return false;
+        }
+        let selectLayerList = this.refs.getLayerDataFun.state.selectLayerList;
+        if (selectLayerList.length == 0) {
+            message.error('请至少选中一个图层');
+            return false;
+        }
         this.state.map.addImage(
             'dingwei',
             'https://gw.alipayobjects.com/mdn/rms_3bf4aa/afts/img/A*JL46TZ_iYB0AAAAAAAAAAAAAARQnAQ',
@@ -555,25 +553,30 @@ class BaseMap extends React.Component{
         });
         this.setState({
             pointDrawer: drawer,
+            selectLayerList: selectLayerList,
         });
     }
     
     //弹出框事件
     showModal = (newPointLocation) => {
-        queryUserLayers().then((e) => {
+        // queryUserLayers().then((e) => {
-            let data = e.data;
+        //     let data = e.data;
-            let selectLayerList = [];
+        //     let selectLayerList = [];
-            for (var i in data) {
+        //     for (var i in data) {
-                selectLayerList.push({
+        //         selectLayerList.push({
-                    'value': data[i].id,
+        //             'value': data[i].id,
-                    'label': data[i].name,
+        //             'label': data[i].name,
-                })
+        //         })
-            }
+        //     }
-            this.setState({
+        //     this.setState({
-                isModalOpen: true,
+        //         isModalOpen: true,
-                selectLayerList: selectLayerList,
+        //         selectLayerList: selectLayerList,
-                newPointLocation: newPointLocation,
+        //         newPointLocation: newPointLocation,
-            });
+        //     });
+        // });
+        this.setState({
+            isModalOpen: true,
+            newPointLocation: newPointLocation,
         });
     };
     handleOk = (values) => {
@@ -587,10 +590,12 @@ class BaseMap extends React.Component{
             "location": this.state.newPointLocation,
             "provinceAdcode": this.state.provinceAdcode,
         }).then((e) => {
+            this.state.pointDrawer.disable();
             if (e.success) {
                 message.success(e.message || '成功!');
                 this.setState({
-                    isModalOpen: false
+                    isModalOpen: false,
+                    pointAdd: {},
                 });
             } else {
                 message.error(e.message || '失败！');
@@ -600,7 +605,8 @@ class BaseMap extends React.Component{
     handleCancel = () => {
         this.state.pointDrawer.disable();
         this.setState({
-            isModalOpen: false
+            isModalOpen: false,
+            pointAdd: {},
         });
     };
     onLayerNameChange = (e) => {
@@ -644,6 +650,10 @@ class BaseMap extends React.Component{
         })
     }
 
+    onFinishFailed = (errorInfo) => {
+        console.log('Failed:', errorInfo);
+    }
+
     render(){   
         return (
             <div className={styles.basseMap} id='base_map'>
@@ -688,8 +698,9 @@ class BaseMap extends React.Component{
                 <LayerData ref="getLayerDataFun" getLayerPoints = {this.getLayerPoints} getLayerShapes = {this.getLayerShapes}/>
                 <div className={styles.btnRightWrap}>
                     <Button type="primary" className={styles.btnRight} onClick={this.enableDrawPoint}>点位创建</Button>
+                    {/* <Button type='primary' danger className={styles.btnRight} onClick={() => this.state.pointDrawer?.disable()}>停止创建</Button> */}
                     <Modal title="点位创建" open={this.state.isModalOpen} onOk={this.handleOk} onCancel={this.handleCancel} className='add-point-modal'>
-                        <Form name='base' id='add-point-form' onFinish={this.handleOk}>
+                        <Form name='base' id='add-point-form' onFinish={this.handleOk} onFinishFailed={this.onFinishFailed}>
                             <Form.Item label="选择自定义图层"
                             rules={[
                                 {
@@ -700,10 +711,24 @@ class BaseMap extends React.Component{
                                 <Select name='name' value={this.state.pointAdd.layerId} options={this.state.selectLayerList} onChange={this.onLayerNameChange} allowClear>
                                 </Select>
                             </Form.Item>
-                            <Form.Item label="点位名称">
+                            <Form.Item label="点位名称"
+                                rules={[
+                                    {
+                                        required: true,
+                                        message: '请输入点位名称!',
+                                    }
+                                ]}
+                            >
                                 <Input name='note' value={this.state.pointAdd.name} onChange={this.onPointAddNameChange}/>
                             </Form.Item>
-                            <Form.Item label="点位地址">
+                            <Form.Item label="点位地址"
+                                rules={[
+                                    {
+                                        required: true,
+                                        message: '请输入点位地址!',
+                                    }
+                                ]}
+                            >
                                 <Input name='note' value={this.state.pointAdd.address} onChange={this.onPointAddAddressChange}/>
                             </Form.Item>
                             <Form.Item label="图层备注">