点位创建优化
This commit is contained in:
licuizhu
parent
b2b5bc22b6
commit
b90fba0ac8
@ -21,7 +21,7 @@ function Header (e) {
|
||||
useEffect(() =>{
|
||||
getCurrentUser().then((e) => {
|
||||
const d = e.data;
|
||||
token.username = d.username;
|
||||
token.username = d && d.username;
|
||||
})
|
||||
})
|
||||
|
||||
|
||||
@ -23,6 +23,7 @@ class LayerData extends React.Component {
|
||||
name: '',
|
||||
note: '',
|
||||
},
|
||||
selectLayerList: [],
|
||||
}
|
||||
}
|
||||
|
||||
@ -63,9 +64,18 @@ class LayerData extends React.Component {
|
||||
}
|
||||
// 选中图层
|
||||
onLayerSelect = (selectedKeys, info) => {
|
||||
let selectLayerList = [];
|
||||
let layerId = info.node.key.split('-')[1];
|
||||
for (let i in info.selectedNodes) {
|
||||
selectLayerList.push({
|
||||
'value': info.selectedNodes[i].key.split('-')[1],
|
||||
'label': info.selectedNodes[i].title,
|
||||
'selected': true,
|
||||
})
|
||||
}
|
||||
this.setState({
|
||||
layerId: layerId
|
||||
layerId: layerId,
|
||||
selectLayerList: selectLayerList,
|
||||
})
|
||||
if (info.node.type === 1 || info.node.type === 4) {
|
||||
this.props.getLayerPoints(layerId, info.selected, info.node.type);
|
||||
|
||||
@ -349,14 +349,10 @@ class BaseMap extends React.Component{
|
||||
// 选择省
|
||||
onProvinceChange = (provinceAdcode, data) => {
|
||||
var self = this;
|
||||
let getLayers = this.state.map.getLayers();
|
||||
// let getOverlays = this.state.map.getAllOverlays();
|
||||
let getLayers = self.state.markerLayerList;
|
||||
for (let i = 0; i < getLayers.length; i++) {
|
||||
if (getLayers[i].CLASS_NAME === 'AMap.LabelsLayer') {
|
||||
self.state.map.remove(getLayers[i]);
|
||||
}
|
||||
self.state.map.removeMarkerLayer(getLayers[i]);
|
||||
}
|
||||
// this.state.map.remove(getOverlays);
|
||||
data && this.gotoProvince(data)
|
||||
this.getCityByProvince(`${provinceAdcode}`);
|
||||
this.hideHeatMap();
|
||||
@ -396,15 +392,11 @@ class BaseMap extends React.Component{
|
||||
//选择市
|
||||
onCityChange = (cityAdcode,data) => {
|
||||
var self = this;
|
||||
let getLayers = this.state.map.getLayers();
|
||||
self.startLoading();
|
||||
// let getOverlays = this.state.map.getAllOverlays();
|
||||
let getLayers = self.state.markerLayerList;
|
||||
for (let i = 0; i < getLayers.length; i++) {
|
||||
if (getLayers[i].CLASS_NAME === 'AMap.LabelsLayer') {
|
||||
self.state.map.remove(getLayers[i]);
|
||||
}
|
||||
self.state.map.removeMarkerLayer(getLayers[i]);
|
||||
}
|
||||
// this.state.map.remove(getOverlays);
|
||||
this.getDistrictByCity(`${cityAdcode}`);
|
||||
this.refs.getLayerDataFun.getBasicLayerMenu(`${cityAdcode}`).then(() => {
|
||||
self.stopLoading();
|
||||
@ -446,13 +438,10 @@ class BaseMap extends React.Component{
|
||||
//选择区
|
||||
onDistrictChange = (provinceAdcode,data) => {
|
||||
var self = this;
|
||||
let getLayers = this.state.map.getLayers();
|
||||
self.startLoading()
|
||||
// let getOverlays = this.state.map.getAllOverlays();
|
||||
self.startLoading();
|
||||
let getLayers = self.state.markerLayerList;
|
||||
for (let i = 0; i < getLayers.length; i++) {
|
||||
if (getLayers[i].CLASS_NAME === 'AMap.LabelsLayer') {
|
||||
self.state.map.remove(getLayers[i]);
|
||||
}
|
||||
self.state.map.removeMarkerLayer(getLayers[i]);
|
||||
}
|
||||
// this.state.map.remove(getOverlays);
|
||||
this.refs.getLayerDataFun.getBasicLayerMenu(`${provinceAdcode}`).then(() => {
|
||||
@ -527,6 +516,15 @@ class BaseMap extends React.Component{
|
||||
}
|
||||
|
||||
enableDrawPoint = () => {
|
||||
if (this.state.cityAdcode == '' && this.state.districtAdcode == '') {
|
||||
message.error('请至少选择行政区域至城市再进行点位创建');
|
||||
return false;
|
||||
}
|
||||
let selectLayerList = this.refs.getLayerDataFun.state.selectLayerList;
|
||||
if (selectLayerList.length == 0) {
|
||||
message.error('请至少选中一个图层');
|
||||
return false;
|
||||
}
|
||||
this.state.map.addImage(
|
||||
'dingwei',
|
||||
'https://gw.alipayobjects.com/mdn/rms_3bf4aa/afts/img/A*JL46TZ_iYB0AAAAAAAAAAAAAARQnAQ',
|
||||
@ -555,25 +553,30 @@ class BaseMap extends React.Component{
|
||||
});
|
||||
this.setState({
|
||||
pointDrawer: drawer,
|
||||
selectLayerList: selectLayerList,
|
||||
});
|
||||
}
|
||||
|
||||
//弹出框事件
|
||||
showModal = (newPointLocation) => {
|
||||
queryUserLayers().then((e) => {
|
||||
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,
|
||||
newPointLocation: newPointLocation,
|
||||
});
|
||||
// queryUserLayers().then((e) => {
|
||||
// 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,
|
||||
// newPointLocation: newPointLocation,
|
||||
// });
|
||||
// });
|
||||
this.setState({
|
||||
isModalOpen: true,
|
||||
newPointLocation: newPointLocation,
|
||||
});
|
||||
};
|
||||
handleOk = (values) => {
|
||||
@ -587,10 +590,12 @@ class BaseMap extends React.Component{
|
||||
"location": this.state.newPointLocation,
|
||||
"provinceAdcode": this.state.provinceAdcode,
|
||||
}).then((e) => {
|
||||
this.state.pointDrawer.disable();
|
||||
if (e.success) {
|
||||
message.success(e.message || '成功!');
|
||||
this.setState({
|
||||
isModalOpen: false
|
||||
isModalOpen: false,
|
||||
pointAdd: {},
|
||||
});
|
||||
} else {
|
||||
message.error(e.message || '失败！');
|
||||
@ -600,7 +605,8 @@ class BaseMap extends React.Component{
|
||||
handleCancel = () => {
|
||||
this.state.pointDrawer.disable();
|
||||
this.setState({
|
||||
isModalOpen: false
|
||||
isModalOpen: false,
|
||||
pointAdd: {},
|
||||
});
|
||||
};
|
||||
onLayerNameChange = (e) => {
|
||||
@ -644,6 +650,10 @@ class BaseMap extends React.Component{
|
||||
})
|
||||
}
|
||||
|
||||
onFinishFailed = (errorInfo) => {
|
||||
console.log('Failed:', errorInfo);
|
||||
}
|
||||
|
||||
render(){
|
||||
return (
|
||||
<div className={styles.basseMap} id='base_map'>
|
||||
@ -688,8 +698,9 @@ 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.enableDrawPoint}>点位创建</Button>
|
||||
{/* <Button type='primary' danger className={styles.btnRight} onClick={() => this.state.pointDrawer?.disable()}>停止创建</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 name='base' id='add-point-form' onFinish={this.handleOk} onFinishFailed={this.onFinishFailed}>
|
||||
<Form.Item label="选择自定义图层"
|
||||
rules={[
|
||||
{
|
||||
@ -700,10 +711,24 @@ class BaseMap extends React.Component{
|
||||
<Select name='name' value={this.state.pointAdd.layerId} options={this.state.selectLayerList} onChange={this.onLayerNameChange} allowClear>
|
||||
</Select>
|
||||
</Form.Item>
|
||||
<Form.Item label="点位名称">
|
||||
<Form.Item label="点位名称"
|
||||
rules={[
|
||||
{
|
||||
required: true,
|
||||
message: '请输入点位名称!',
|
||||
}
|
||||
]}
|
||||
>
|
||||
<Input name='note' value={this.state.pointAdd.name} onChange={this.onPointAddNameChange}/>
|
||||
</Form.Item>
|
||||
<Form.Item label="点位地址">
|
||||
<Form.Item label="点位地址"
|
||||
rules={[
|
||||
{
|
||||
required: true,
|
||||
message: '请输入点位地址!',
|
||||
}
|
||||
]}
|
||||
>
|
||||
<Input name='note' value={this.state.pointAdd.address} onChange={this.onPointAddAddressChange}/>
|
||||
</Form.Item>
|
||||
<Form.Item label="图层备注">
|
||||
|
||||
Loading…
Reference in New Issue
Block a user