点位创建

src/api/index.js

@@ -87,12 +87,36 @@ export function deleteLayer( params ) {
 }
 
 // 基础地图删除点位
-export function deletePoint( params ) {debugger
+export function deletePoint( params ) {
   return request('/api/basicMap/deletePoint', {
     method: 'get',
     params: params
   });
 }
 
+// 基础地图点位新增
+export function createPoint( params ) {
+  return request('/api/basicMap/createPoint', {
+    method: 'get',
+    params: params
+  });
+}
+
+// 获取基础图层菜单栏
+export function getBasicLayerMenu( params ) {
+  return request('/api/basicMap/createPoint', {
+    method: 'get',
+    params: params
+  });
+}
+
+// 通过用户名获取自定义图层列表
+export function queryUserLayers() {
+  return request('/api/user/queryUserLayers', {
+    method: 'get',
+  });
+}
+
+
 
 

src/index.less

@@ -142,6 +142,9 @@ body {
     padding-inline: 0;
 }
 /* LayerData */
+:where(.css-dev-only-do-not-override-9ntgx0).ant-form-horizontal .ant-form-item-label {
+  width: 120px;
+}
 .layer-data-wrap {
     position: fixed;
     top: 190px;
@@ -161,7 +164,7 @@ body {
     background: url(./assets/images/modal_bg.png) no-repeat;
     background-size: cover;
   }
-  .edit-layer-modal .ant-modal-header {
+  .ant-modal-root .ant-modal-header {
     background: none;
   }
   #edit-layer-form {

src/pages/BaseMap/index.js

@@ -1,9 +1,10 @@
 import React from 'react';
-import { Select, Input, Card, Col, Row, Button, message, Modal, Spin } from 'antd';
+import { Select, Input, Card, Col, Row, Button, message, Modal, Spin, Form } from 'antd';
 import axios from 'axios';
 import LayerData from './LayerData';
 import { AimOutlined } from '@ant-design/icons';
 import Header from '../../components/Header/index.js';
+import { createPoint, queryUserLayers } from '../../api';
 
 import { GaodeMap ,Scene, Heatmap, PolygonLayer, Marker, MarkerLayer, Popup } from '@antv/l7';
 
@@ -47,7 +48,12 @@ class BaseMap extends React.Component{
             inputContent: '',
             heatMapList: [],
             loading: false,
-            markerLayerList: []
+            markerLayerList: [],
+            isModalOpen: false,
+            selectLayerList: [],
+            pointAdd: {
+                
+            },
         }
     }
     startLoading = () => {
@@ -518,6 +524,92 @@ class BaseMap extends React.Component{
             }
         }
     }
+    //弹出框事件
+    showModal = () => {
+        queryUserLayers().then((e) => {debugger
+            let data = e.data;
+            let selectLayerList = [];
+            for (var i in data) {
+                selectLayerList.push({
+                    'value': data[i].id,
+                    'label': data[i].name,
+                })
+            }
+            this.setState({
+                isModalOpen: true,
+                selectLayerList: selectLayerList,
+            });
+        });
+    };
+    handleOk = (values) => {
+        createPoint({ //创建图层
+            "layerId": this.state.pointAdd.layerId,
+            "name": this.state.pointAdd.name,
+            "note": this.state.pointAdd.note,
+            "address": this.state.pointAdd.address,
+            "cityAdcode": this.state.cityAdcode,
+            // "cityName": "string",
+            "districtAdcode": this.state.districtAdcode,
+            // "districtName": "string",
+            // "location": "string",
+            "provinceAdcode": this.state.provinceAdcode,
+            // "provinceName": "string",
+        }).then((e) => {
+            if (e.success) {
+                message.success(e.message || '成功!');
+                this.setState({
+                    isModalOpen: false
+                });
+            } else {
+                message.error(e.message || '失败！');
+            }
+        })
+    };
+    handleCancel = () => {
+        this.setState({
+            isModalOpen: false
+        });
+    };
+    onLayerNameChange = (e) => {
+        this.setState({
+            pointAdd: {
+                "layerId": this.state.pointAdd.layerId,
+                "name": this.state.pointAdd.name,
+                "note": this.state.pointAdd.note,
+                "address": this.state.pointAdd.address,
+            },
+        })
+    }
+    onPointAddNameChange = (e) => {
+        this.setState({
+            pointAdd: {
+                "layerId": this.state.pointAdd.layerId,
+                "name": this.state.pointAdd.name,
+                "note": this.state.pointAdd.note,
+                "address": this.state.pointAdd.address,
+            },
+        })
+    }
+    onPointAddAddressChange = (e) => {
+        this.setState({
+            pointAdd: {
+                "layerId": this.state.pointAdd.layerId,
+                "name": this.state.pointAdd.name,
+                "note": this.state.pointAdd.note,
+                "address": this.state.pointAdd.address,
+            },
+        })
+    }
+    onLayerNoteChange = (e) => {
+        this.setState({
+            pointAdd: {
+                "layerId": this.state.pointAdd.layerId,
+                "name": this.state.pointAdd.name,
+                "note": this.state.pointAdd.note,
+                "address": this.state.pointAdd.address,
+            },
+        })
+    }
 
     render(){   
         return (
@@ -562,7 +654,30 @@ class BaseMap extends React.Component{
                 {/* 图层数据显示 */}
                 <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} onClick={this.showModal}>点位创建</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.Item label="选择自定义图层"
+                            rules={[
+                                {
+                                    required: true,
+                                    message: '请输入图层名称!',
+                                }
+                            ]}>
+                                <Select name='name' value={this.state.pointAdd.layerId} options={this.state.selectLayerList} onChange={this.onLayerNameChange} allowClear>
+                                </Select>
+                            </Form.Item>
+                            <Form.Item label="点位名称">
+                                <Input name='note' value={this.state.pointAdd.name} onChange={this.onPointAddNameChange}/>
+                            </Form.Item>
+                            <Form.Item label="点位地址">
+                                <Input name='note' value={this.state.pointAdd.address} onChange={this.onPointAddAddressChange}/>
+                            </Form.Item>
+                            <Form.Item label="图层备注">
+                                <Input name='note' value={this.state.pointAdd.note} onChange={this.onLayerNoteChange}/>
+                            </Form.Item>
+                        </Form>
+                    </Modal>
                     <Button disabled className={styles.btnRight}>点位导入</Button>
                 </div>
                 {/* 地图 */}