sx/map
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat:删除点位

Browse Source
This commit is contained in:
SmileXin 2024-06-21 03:31:01 +08:00
parent 4abe7c1ae5
commit 79f38bf628
3 changed files with 264 additions and 131 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
src/api/index.js
View File

@ -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', {

286
src/pages/BaseMap/index.js
View File

@ -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,39 +195,122 @@ class BaseMap extends React.Component{
// 设置弹框（点击事件）
marker.on('click', (e) => {
// 获取弹框内的html
this.setState({popParameter: LabelsData[i]});
let popHtml = document.getElementById('custom-pop');
document.getElementById('marker' + i).style.width = '32px';
document.getElementById('marker' + i).style.height = '32px';
popup = new Popup({
offsets: [0, 30],
closeOnClick: true,
autoClose: true,
})
.setLnglat(e.lngLat)
.setHTML(popHtml.innerHTML)
// console.log('edit-button', document.getElementsByClassName('edit-button')[0]);
popup.on('hide', () => {
document.getElementById('marker' + i).style.width = '26px';
document.getElementById('marker' + i).style.height = '26px';
this.setState({popParameter: LabelsData[i]},() => {
popHtml = document.getElementById('custom-pop');
popup = new Popup({
offsets: [0, 30],
closeOnClick: true,
autoClose: true,
})
.setLnglat(e.lngLat)
.setHTML(popHtml.innerHTML)
document.getElementById('marker' + i).style.width = '32px';
document.getElementById('marker' + i).style.height = '32px';
// 给弹框添加事件
popup.on('hide', () => {
document.getElementById('marker' + i).style.width = '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) => {
@ -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>
)
}

101
src/pages/BaseMap/pop.js
View File

@ -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;*/}