点位创建

package.json

@@ -15,7 +15,9 @@
     "@ant-design/icons": "^4.7.0",
     "@ant-design/pro-components": "^2.0.1",
     "@antv/l7": "^2.12.0",
+    "@antv/l7-draw": "^3.1.0",
     "@antv/l7-maps": "^2.12.0",
+    "@antv/l7plot": "^0.5.7",
     "@umijs/max": "^4.0.40",
     "antd": "^5.0.0",
     "axios": "^1.3.5",

src/pages/BaseMap/index.js

@@ -7,6 +7,7 @@ import Header from '../../components/Header/index.js';
 import { createPoint, queryUserLayers } from '../../api';
 
 import { GaodeMap ,Scene, Heatmap, PolygonLayer, Marker, MarkerLayer, Popup } from '@antv/l7';
+import { DrawPoint, DrawEvent } from '@antv/l7-draw';
 
 import styles from './index.less';
 
@@ -51,9 +52,9 @@ class BaseMap extends React.Component{
             markerLayerList: [],
             isModalOpen: false,
             selectLayerList: [],
-            pointAdd: {
-                
-            },
+            pointAdd: {},
+            pointDrawer: null,
+            newPointLocation: '',
         }
     }
     startLoading = () => {
@@ -82,8 +83,16 @@ class BaseMap extends React.Component{
                 zoom: 3
             })
         });
+        const drawer = new DrawPoint(scene, {});
+        let newPointLocation = '';
+        drawer.disable();
+        drawer.on(DrawEvent.Add, (newPoint) => {
+            newPointLocation = newPoint.geometry.coordinates.toString();
+            this.showModal(newPointLocation);
+        })
         this.setState({
-            map: scene
+            map: scene,
+            pointDrawer: drawer,
         });
     }
 
@@ -97,7 +106,7 @@ class BaseMap extends React.Component{
 
     //根据cityname、adcode、citycode设置地图位置
     gotoCity = (data) => {
-        this.state.map.removeAllMarkers();
+        this.state.map.removeAllMarkers && this.state.map.removeAllMarkers();
         let zoom = data.zoom || 10;
         let lng = data.len || 116.405285;
         let lat = data.lat || 39.904989;
@@ -524,9 +533,14 @@ class BaseMap extends React.Component{
             }
         }
     }
+
+    enableDrawPoint = () => {
+        this.state.pointDrawer.enable();
+    }
+    
     //弹出框事件
-    showModal = () => {
-        queryUserLayers().then((e) => {debugger
+    showModal = (newPointLocation) => {
+        queryUserLayers().then((e) => {
             let data = e.data;
             let selectLayerList = [];
             for (var i in data) {
@@ -538,6 +552,7 @@ class BaseMap extends React.Component{
             this.setState({
                 isModalOpen: true,
                 selectLayerList: selectLayerList,
+                newPointLocation: newPointLocation,
             });
         });
     };
@@ -548,12 +563,9 @@ class BaseMap extends React.Component{
             "note": this.state.pointAdd.note,
             "address": this.state.pointAdd.address,
             "cityAdcode": this.state.cityAdcode,
-            // "cityName": "string",
             "districtAdcode": this.state.districtAdcode,
-            // "districtName": "string",
-            // "location": "string",
+            "location": this.state.newPointLocation,
             "provinceAdcode": this.state.provinceAdcode,
-            // "provinceName": "string",
         }).then((e) => {
             if (e.success) {
                 message.success(e.message || '成功!');
@@ -566,6 +578,7 @@ class BaseMap extends React.Component{
         })
     };
     handleCancel = () => {
+        this.state.pointDrawer.disable();
         this.setState({
             isModalOpen: false
         });
@@ -573,7 +586,7 @@ class BaseMap extends React.Component{
     onLayerNameChange = (e) => {
         this.setState({
             pointAdd: {
-                "layerId": this.state.pointAdd.layerId,
+                "layerId": e,
                 "name": this.state.pointAdd.name,
                 "note": this.state.pointAdd.note,
                 "address": this.state.pointAdd.address,
@@ -584,7 +597,7 @@ class BaseMap extends React.Component{
         this.setState({
             pointAdd: {
                 "layerId": this.state.pointAdd.layerId,
-                "name": this.state.pointAdd.name,
+                "name": e.currentTarget.value,
                 "note": this.state.pointAdd.note,
                 "address": this.state.pointAdd.address,
             },
@@ -596,7 +609,7 @@ class BaseMap extends React.Component{
                 "layerId": this.state.pointAdd.layerId,
                 "name": this.state.pointAdd.name,
                 "note": this.state.pointAdd.note,
-                "address": this.state.pointAdd.address,
+                "address": e.currentTarget.value,
             },
         })
     }
@@ -605,7 +618,7 @@ class BaseMap extends React.Component{
             pointAdd: {
                 "layerId": this.state.pointAdd.layerId,
                 "name": this.state.pointAdd.name,
-                "note": this.state.pointAdd.note,
+                "note": e.currentTarget.value,
                 "address": this.state.pointAdd.address,
             },
         })
@@ -654,7 +667,7 @@ 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.showModal}>点位创建</Button>
+                    <Button type="primary" className={styles.btnRight} onClick={this.enableDrawPoint}>点位创建</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="选择自定义图层"