diff --git a/package.json b/package.json index 36dbe9f3..ea3fd373 100644 --- a/package.json +++ b/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", diff --git a/src/pages/BaseMap/index.js b/src/pages/BaseMap/index.js index 7ae7ed57..aecf1e95 100644 --- a/src/pages/BaseMap/index.js +++ b/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{ {/* 图层数据显示 */}
- +