feat:删除点位

src/api/index.js

@@ -56,6 +56,14 @@ export function getLayerPointsApi( params ) {
   });
 }
 
+// 获取地图单位的数据详细
+export function getDetailByIdApi( params ) {
+  return request('/api/basicMap/getDetailById', {
+    method: 'GET',
+    params: params
+  });
+}
+
 // 获取大盘统计数据
 export function getDashboardData() {
   return request('/api/dashboard/getDashboardData', {

src/pages/BaseMap/index.js

@@ -1,17 +1,21 @@
 import React from 'react';
-import { Select, Input, Card, Col, Row, Button, message, Modal, Spin, Form } from 'antd';
+import { Select, Input, Card, Col, Row, Button, message, Modal, Spin, Form, Alert, Space } from 'antd';
+import {ExclamationCircleFilled } from '@ant-design/icons';
 import LayerData from './LayerData';
 // import LayerList from './LayerList';
 import { AimOutlined } from '@ant-design/icons';
 import Header from '../../components/Header/index.js';
-import { createPoint, queryUserLayers, getLayerPointsApi, getAllProvinceApi, getCityByProvinceApi, getDistrictByCityApi, getLayerShapesApi, getPointByAddressApi } from '../../api';
+import { createPoint, getDetailByIdApi, queryUserLayers, getLayerPointsApi, getAllProvinceApi, getCityByProvinceApi, getDistrictByCityApi, getLayerShapesApi, getPointByAddressApi, deletePoint } from '../../api';
 import Pop from './pop'
 
 import { GaodeMap ,Scene, Heatmap, PolygonLayer, Marker, MarkerLayer, Popup, MouseLocation, CanvasLayer } from '@antv/l7';
+const { confirm } = Modal;
 // import { DrawPoint, DrawEvent } from '@antv/l7-draw';
 import icon04 from '../../assets/icon/icon04.svg'
 
 import styles from './index.less';
+import pop from './pop';
+import { remove } from 'react-cookies';
 
 const { Option } = Select;
 
@@ -56,13 +60,20 @@ class BaseMap extends React.Component{
             loading: false,
             markerLayerList: [], // 点位图层
             isModalOpen: false,
+            isEditModalOpen: false,
+            editPointId: '',
             selectLayerList: [],
             pointAdd: {},
+            pointEdit:{},
             pointDrawer: null,
             newPointLocation: '',
             mouseLocation:{},
             disabled: false,
             popParameter: {},
+            isAlertOpen: false,
+            deletePointId: '',
+            pop: null,
+            removeMarker: null,
         }
     }
     startLoading = () => {
@@ -128,8 +139,6 @@ class BaseMap extends React.Component{
                     item.value = 15;
                     return item;
                 });
-                console.log('layerPointsData', layerPointsData);
-
                 if (nodeType === 1) {
                     // 在地图上添加点位
                     this.setMarkers(layerPointsData, layerId);
@@ -165,7 +174,7 @@ class BaseMap extends React.Component{
         let map = this.state.map;
         let LabelsData = data || [];
         let markerLayer = new MarkerLayer({name: layerId});
-        let el, popup, marker, icon;
+        let el, popup, marker, icon, popHtml;
         // 设置地图上的点位（图标）
         for (let i = 0; i < LabelsData.length; i++) {
             el = document.createElement('label');
@@ -186,40 +195,123 @@ class BaseMap extends React.Component{
             // 设置弹框（点击事件）
             marker.on('click', (e) => {
                 // 获取弹框内的html
-                this.setState({popParameter: LabelsData[i]});
+                this.setState({popParameter: LabelsData[i]},() => {
-                let popHtml = document.getElementById('custom-pop');
+                    popHtml = document.getElementById('custom-pop');
-                document.getElementById('marker' + i).style.width = '32px';
+                    popup = new Popup({
-                document.getElementById('marker' + i).style.height = '32px';
+                        offsets: [0, 30],
-                popup = new Popup({
+                        closeOnClick: true,
-                    offsets: [0, 30],
+                        autoClose: true,
-                    closeOnClick: true,
+                    })
-                    autoClose: true,
+                    .setLnglat(e.lngLat)
-                })
+                    .setHTML(popHtml.innerHTML)
-                .setLnglat(e.lngLat)
+                    document.getElementById('marker' + i).style.width = '32px';
-                .setHTML(popHtml.innerHTML)
+                    document.getElementById('marker' + i).style.height = '32px';
-                // console.log('edit-button', document.getElementsByClassName('edit-button')[0]);
+                    // 给弹框添加事件
-                popup.on('hide', () => {
+                    popup.on('hide', () => {
-                    document.getElementById('marker' + i).style.width = '26px';
+                        document.getElementById('marker' + i).style.width = '26px';
-                    document.getElementById('marker' + i).style.height = '26px';
+                        document.getElementById('marker' + i).style.height = '26px';
+                    });
+                    this.setState({pop: popup})
+                    popup.on('open', () => {
+                        // 编辑按钮
+                        document.getElementsByClassName('edit-button')[0].onclick = () => {
+                            // getDetailByIdApi({id:LabelsData[i].pointId,layerId:LabelsData[i].belongLayerId}).then((e) => {
+                            //     if (e.success) {
+                            //         console.log('获取点位详情成功',e);
+                            //     }else{
+                            //         alert('获取点位详情失败');
+                            //         console.log('获取点位详情失败',e);
+                            //     }
+                            // })
+                            if (this.state.cityAdcode == '' && this.state.districtAdcode == '') {
+                                message.error('请至少选择行政区域至城市再进行点位创建');
+                                return false;
+                            }
+                            let selectLayerList = this.refs.getLayerDataFun.state.selectLayerList;
+                            selectLayerList = selectLayerList.filter((item) => {
+                                if (item.isCustomize == 1) {
+                                    return item;
+                                }
+                            })
+                            if (selectLayerList.length == 0) {
+                                message.error('请至少选中一个个人图层');
+                                return false;
+                            };
+                            this.setState({
+                                selectLayerList:selectLayerList,
+                                pointEdit: 
+                                {
+                                    pointId: LabelsData[i].pointId.toString(),
+                                    layerId: LabelsData[i].belongLayerId,
+                                    name: LabelsData[i].pointName,
+                                    // note: LabelsData[i].note,
+                                    address: LabelsData[i].address,
+                                },
+                                isEditModalOpen: true 
+                            })
+                        };
+                        // 删除按钮
+                        document.getElementsByClassName('delete-button')[0].onclick = () => {
+                            confirm({
+                                icon: <ExclamationCircleFilled />,
+                                title: '警告',
+                                content: '是否确定删除点位，删除后信息将无法恢复',
+                                onCancel(){
+                                },
+                                // 确定删除
+                                onOk(){
+                                    self.deleteChannel();
+                                },
+                            });
+                        };
+                    });
+                    this.state.map.addPopup(popup);
                 });
-                popup.on('open', () => {
-                    document.getElementsByClassName('edit-button')[0].onclick = () => {console.log('edit-button')};
-                });
-                this.state.map.addPopup(popup);
-            });
 
+            });
             markerLayer.addMarker(marker);
         }
         this.setState({
             markerLayerList: [...this.state.markerLayerList, markerLayer],
+            removeMarker: marker,
         })
         this.state.map.addMarkerLayer(markerLayer);
     }
 
-    hidePop = (pop) => {
+
-        // pop.hide();
+    // 删除按钮
+    deleteChannel = () => {
+        this.startLoading();
+        this.state.pop.hide();
+        self = this;
+        let layerId = this.state.popParameter.belongLayerId; 
+        deletePoint({id: this.state.popParameter.pointId}).then((e) => {
+            if(e.success){
+                message.success('点位删除成功!');
+                setTimeout(() => {
+                    // 重新获取点位
+                    self.refs.getLayerDataFun.changeUnitAmount(layerId);
+                    let filter = this.state.districtAdcode || this.state.cityAdcode;
+                    self.refs.getLayerDataFun.getBasicLayerMenu(filter);
+                    this.getLayerPoints(layerId, true, 1);
+                    self.stopLoading();
+                }, 500);
+                this.getLayerPoints(layerId, false, 1);
+                
+            }else{
+                message.error('点位删除失败！');
+            }
+        });
+        this.setState({ 
+            pop: null,
+            popParameter: {},
+         });
     }
    
+
+
+
+
     // 在地图上设置热力图 【经度，纬度】
     // setHeatMap = (data, layerId) => {
     //     let self = this;
@@ -382,6 +474,7 @@ class BaseMap extends React.Component{
         }
         // 清除子组件的已选图层
         this.refs.getLayerDataFun.state.selectLayerList = [];
+        this.refs.getLayerDataFun.state.selectLayerIdList = [];
         // 清除所选市
         this.onCityChange();
         
@@ -429,6 +522,7 @@ class BaseMap extends React.Component{
         for (let i = 0; i < getLayers.length; i++) {
             self.state.map.removeMarkerLayer(getLayers[i]);
         }
+        this.refs.getLayerDataFun.state.selectLayerIdList = [];
         // 根据所选市获取区
         this.getDistrictByCity(`${cityAdcode}`);
         this.refs.getLayerDataFun.getBasicLayerMenu(`${cityAdcode}`).then(() => {
@@ -471,6 +565,7 @@ class BaseMap extends React.Component{
         for (let i = 0; i < getLayers.length; i++) {
             self.state.map.removeMarkerLayer(getLayers[i]);
         }
+        this.refs.getLayerDataFun.state.selectLayerIdList = [];
         // this.state.map.remove(getOverlays);
         this.refs.getLayerDataFun.getBasicLayerMenu(`${provinceAdcode}`).then(() => {
             self.stopLoading();
@@ -674,7 +769,36 @@ class BaseMap extends React.Component{
             newPointLocation: newPointLocation,
         });
     };
+     // 修改按钮
+     editChannel = () => {
+        this.startLoading();
+        self = this;
+        self.state.pop.hide();
+        let popParameter = {
+            "layerId": this.state.pointEdit.layerId,
+            "name": this.state.pointEdit.name,
+            // "note": this.state.pointEdit.note,
+            "address": this.state.pointEdit.address,
+            "cityAdcode": this.state.cityAdcode,
+            "districtAdcode": this.state.districtAdcode,
+            "location": this.state.popParameter.location,
+            "provinceAdcode": this.state.provinceAdcode,
+        };
+        setTimeout(() => {
+            // 重新获取点位
+            self.getLayerPoints(self.state.popParameter.layerId, true, 1);
+            self.getLayerPoints(self.state.pointEdit.layerId, true, 1);
+            self.stopLoading();
+        }, 500);
+        self.getLayerPoints(self.state.popParameter.layerId, false, 1);
+        self.getLayerPoints(self.state.pointEdit.layerId, false, 1);
+        self.setState({
+            isEditModalOpen: false,
+            pop : null,
+        });
+     }
     handleOk = (values) => {
+        this.startLoading();
          // 开启双击地图放大
          this.state.map.setMapStatus({
             doubleClickZoom: true
@@ -694,7 +818,8 @@ class BaseMap extends React.Component{
                 message.success('点位创建成功!');
                 setTimeout(() => {
                     this.getLayerPoints(layerId, true, 1);
-                    this.refs.getLayerDataFun.changeUnitAmount(this.state.pointAdd.layerId);
+                    this.stopLoading();
+                    // this.refs.getLayerDataFun.changeUnitAmount(this.state.pointAdd.layerId);
                 }, 1000);//true新增，1点
                 let filter = this.state.districtAdcode || this.state.cityAdcode;
                 this.refs.getLayerDataFun.getBasicLayerMenu(filter)
@@ -720,6 +845,12 @@ class BaseMap extends React.Component{
             pointAdd: {},
         });
     };
+    handleEditCancel = () => {
+        this.setState({
+            isEditModalOpen: false,
+            pointEdit: {},
+        });
+    };
     onLayerNameChange = (e) => {
         this.setState({
             pointAdd: {
@@ -730,6 +861,16 @@ class BaseMap extends React.Component{
             },
         })
     }
+    onEditLayerNameChange = (e) => {
+        this.setState({
+            pointEdit: {
+                "layerId": e,
+                "name": this.state.pointEdit.name,
+                "note": this.state.pointEdit.note,
+                "address": this.state.pointEdit.address,
+            },
+        })
+    }
     onPointAddNameChange = (e) => {
         this.setState({
             pointAdd: {
@@ -740,6 +881,16 @@ class BaseMap extends React.Component{
             },
         })
     }
+    onEditPointAddNameChange = (e) => {
+        this.setState({
+            pointEdit: {
+                "layerId": this.state.pointEdit.layerId,
+                "name": e.currentTarget.value,
+                "note": this.state.pointEdit.note,
+                "address": this.state.pointEdit.address,
+            },
+        })
+    }
     onPointAddAddressChange = (e) => {
         this.setState({
             pointAdd: {
@@ -750,6 +901,16 @@ class BaseMap extends React.Component{
             },
         })
     }
+    onEditPointAddAddressChange = (e) => {
+        this.setState({
+            pointEdit: {
+                "layerId": this.state.pointEdit.layerId,
+                "name": this.state.pointEdit.name,
+                "note": this.state.pointEdit.note,
+                "address": e.currentTarget.value,
+            },
+        })
+    }
     onLayerNoteChange = (e) => {
         this.setState({
             pointAdd: {
@@ -760,6 +921,16 @@ class BaseMap extends React.Component{
             },
         })
     }
+    onEditLayerNoteChange = (e) => {
+        this.setState({
+            pointEdit: {
+                "layerId": this.state.pointEdit.layerId,
+                "name": this.state.pointEdit.name,
+                "note": e.currentTarget.value,
+                "address": this.state.pointEdit.address,
+            },
+        })
+    }
 
     onFinishFailed = (errorInfo) => {
         console.log('Failed:', errorInfo);
@@ -871,6 +1042,61 @@ class BaseMap extends React.Component{
                             </Form.Item>
                         </Form>
                     </Modal>
+                    <Modal title="点位修改" 
+                    open={this.state.isEditModalOpen} 
+                    onOk={this.editChannel} 
+                    onCancel={this.handleEditCancel} 
+                    className='add-point-modal'
+                    >
+                        <Form name='base' id='add-point-form' onFinish={this.editChannel} onFinishFailed={this.onFinishFailed}>
+                            <Form.Item label="选择自定义图层"
+                            rules={[
+                                {
+                                    required: true,
+                                    message: '请输入图层名称!',
+                                }
+                            ]}>
+                                <Select name='name' 
+                                // value={this.state.pointEdit.layerId} 
+                                defaultValue={() => {
+                                    return this.state.selectLayerList.map((item) => {
+                                        if (item.value == this.state.pointEdit.layerId.toString()) {
+                                            return item;
+                                        }
+                                    });
+                                }}
+                                options={this.state.selectLayerList} 
+                                onChange={this.onEditLayerNameChange} 
+                                allowClear>
+                                </Select>
+                            </Form.Item>
+                            <Form.Item label="点位名称"
+                                rules={[
+                                    {
+                                        required: true,
+                                        message: '请输入点位名称!',
+                                    }
+                                ]}
+                            >
+                                <Input name='note' 
+                                value={this.state.pointEdit.name} 
+                                onChange={this.onEditPointAddNameChange}/>
+                            </Form.Item>
+                            <Form.Item label="点位地址"
+                                rules={[
+                                    {
+                                        required: true,
+                                        message: '请输入点位地址!',
+                                    }
+                                ]}
+                            >
+                                <Input name='note' value={this.state.pointEdit.address} onChange={this.onEditPointAddAddressChange}/>
+                            </Form.Item>
+                            <Form.Item label="图层备注">
+                                <Input name='note' value={this.state.pointEdit.note} onChange={this.onEditLayerNoteChange}/>
+                            </Form.Item>
+                        </Form>
+                    </Modal>
                     <Button disabled className={styles.btnRight}>点位导入</Button>
                 </div>
                 {/* 地图 */}
@@ -878,10 +1104,8 @@ class BaseMap extends React.Component{
                     <div style={{width: '100%', height: '100vh'}} id="container" />
                 </div>
                 <div className='hideItem'>
-                <Pop popParameter={this.state.popParameter} className='hideItem'></Pop>
+                    <Pop popParameter={this.state.popParameter} className='hideItem'></Pop>
-
                 </div>
-
             </div>
         )
     }

src/pages/BaseMap/pop.js

@@ -5,13 +5,6 @@ import '../../index.less';
 
 
 function pop(e){
-    const [isAlertOpen, setIsAlertOpen] = useState(false);
-    
-    function deleteChannel(){
-        console.log('delete');
-    }
-
-
     let memoContent = null;  
     if(e.popParameter.memo == undefined || e.popParameter.memo == null || e.popParameter.memo == ''){
         
@@ -39,102 +32,10 @@ function pop(e){
                     className="delete-button"
                 >删除</Button>
             </div>
-            <Alert 
+            
-                message="删除后不可恢复，是否确认删除？"
-                type="warning" 
-                showIcon
-                className={isAlertOpen ? 'delete-alert' : 'delete-alert hideItem'}
-                action={        
-                    <Space direction="vertical" >
-                        <Button size="small" type="primary">
-                         Accept
-                        </Button>
-                        <Button size="small" danger ghost>
-                         Decline
-                        </Button>
-                    </Space>}
-            />
         </div>
         </>
     )
 }
 
 export default pop;
-
- {/* import { Alert, Button, Space } from "antd";
-import {deletePoint} from '../../api'
-import React, { useState } from "react";
-
-
-class pop extends React.Component{
-    constructor(props){
-        super(props);
-        this.state = {
-            isAlertOpen: false,
-            memoContent: null,
-            popParameter:{},
-        }
-    }
-
-
-    componentDidMount = () => {
-        console.log('pop',popParameter);
-        // if(popParameter.memo == undefined || popParameter.memo == null || e.popParameter.memo == ''){
-        
-        // }else{
-        //     memoContent = <div class="popup-memo">备注：{memoContent}</div>;
-        // }
-    }
-
-    clicks = () => {
-        console.log('click');
-    }
-
-    
-    render(){
-        return(
-            <>
-            {/* <div id='custom-pop' >
-            <button onClick={this.clicks}>button</button>
-    
-                <div className="popup-coat">
-                    <div className="popup-title">
-                        <span className="popup-title-border"></span>
-                        详情信息
-                    </div>
-                    <div className="popup-name">名称：{popParameter.pointName}</div>
-                    <div className="popup-address">地址：{popParameter.address || ''}</div>
-                    {memoContent}
-                </div>
-                <div className="button-div">
-                    <Button type="link" 
-                        className="edit-button"
-                        >编辑</Button>
-                    <Button type="link" 
-                        danger 
-                        className="delete-button"
-                    >删除</Button>
-                </div>
-                <Alert 
-                    message="删除后不可恢复，是否确认删除？"
-                    type="warning" 
-                    showIcon
-                    className={this.isAlertOpen ? 'delete-alert' : 'delete-alert hideItem'}
-                    action={        
-                        <Space direction="vertical" >
-                            <Button size="small" type="primary">
-                             Accept
-                            </Button>
-                            <Button size="small" danger ghost>
-                             Decline
-                            </Button>
-                        </Space>}
-                />
-            </div> */}
-//             </>
-//         )
-//     }
-
-// }
-
-// export default pop;*/}