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

新增图层

Browse Source
This commit is contained in:
licuizhu 2023-10-25 22:47:42 +08:00
parent 7d42cc22a3
commit 08775d8685
7 changed files with 206 additions and 15 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

26
src/api/index.js
View File

@ -62,3 +62,29 @@ export function getAdStatisticsData( params ) {
});
}
// 基础地图创建涂层
export function createLayer( params ) {
return request('/api/basicMap/createLayer', {
method: 'POST',
params: params
});
}
// 基础地图修改涂层
export function updateLayer( params ) {
return request('/api/basicMap/updateLayer', {
method: 'POST',
params: params
});
}
// 基础地图删除涂层
export function deleteLayer( params ) {
return request('/api/basicMap/deleteLayer', {
method: 'get',
params: params
});
}

BIN
src/assets/images/modal_bg.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 208 KiB

BIN
src/assets/images/modal_bg2.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.2 MiB

40
src/index.less
View File

@ -104,6 +104,44 @@ body {
box-shadow: 0px 0px 10px 0px rgba(0,0,0,0.2);
border-radius: 10px;
opacity: 1;
text-align: center;
}
#add-layer {
margin-bottom: 18px;
}
.ant-modal-content {
background: url(./assets/images/modal_bg.png) no-repeat;
background-size: cover;
}
.ant-modal-header {
background: none;
}
.ant-modal-footer {
text-align: center !important;
}
.radio-btn {
width: 56px;
height: 56px;
margin-right: 40px;
border-radius: 0% !important;
}
#redio-btn-group .icon-01 {
background: url(./assets/icon/position_icon1_big.png) no-repeat center center;
background-size: 80%;
}
#redio-btn-group .icon-02 {
background: url(./assets/icon/position_icon2_big.png) no-repeat center center;
background-size: 80%;
}
#redio-btn-group .icon-03 {
background: url(./assets/icon/position_icon3_big.png) no-repeat center center;
background-size: 34%;
}
.showItem {
display: inline-block;
}
.hideItem {
display: none;
}
.layer-data-wrap .ant-tree {
background: none;
@ -152,6 +190,8 @@ body {
background: #FFFFFF;
opacity: 1;
padding: 22px 68px;
position: relative;
z-index: 999;
}
.header-left {
float: left;

108
src/pages/BaseMap/LayerData/index.js
View File

@ -1,5 +1,5 @@
import React from 'react';
import { Tree } from 'antd';
import { Tree, Button, Modal, Form, Input, Radio } from 'antd';
import axios from 'axios';
import {
DownOutlined,
@ -7,6 +7,7 @@ import {
EyeInvisibleOutlined,
} from '@ant-design/icons';
import SetLogoImagePath from './SetLogoImagePath'
import { createLayer } from '../../../api';
import '../../../index.less';
class LayerData extends React.Component {
@ -15,6 +16,13 @@ class LayerData extends React.Component {
this.state = {
treeData: [],
layerId: '',
isModalOpen: false,
addLayer: {
id: 0,
logoImagePath: '',
name: '',
note: '',
},
}
}
@ -65,6 +73,73 @@ class LayerData extends React.Component {
this.props.getLayerShapes(layerId, info.selected);
}
}
//弹出框事件
showModal = () => {
this.setState({
isModalOpen: true
});
};
handleOk = (values) => {
if (this.state.addLayer.id != 0) { //编辑图层
updateLayer({
id: this.state.addLayer.id,
logoImagePath: this.state.addLayer.logoImagePath,
name: this.state.addLayer.name,
note: this.state.addLayer.note,
}).then((e) => {
this.setState({
isModalOpen: false
});
})
} else {
createLayer({ //创建图层
id: this.state.addLayer.id,
logoImagePath: this.state.addLayer.logoImagePath,
name: this.state.addLayer.name,
note: this.state.addLayer.note,
}).then((e) => {
this.setState({
isModalOpen: false
});
})
}
};
handleCancel = () => {
this.setState({
isModalOpen: false
});
};
onLayerNameChange = (e) => {
this.setState({
addLayer: {
id: this.state.addLayer.id,
logoImagePath: this.state.addLayer.logoImagePath,
note: this.state.addLayer.note,
name: e.target.value,
}
})
};
onLayerNoteChange = (e) => {
this.setState({
addLayer: {
id: this.state.addLayer.id,
logoImagePath: this.state.addLayer.logoImagePath,
name: this.state.addLayer.name,
note: e.target.value,
}
})
};
onLayerIogoImagePathChange = (e) => {
this.setState({
addLayer: {
id: this.state.addLayer.id,
note: this.state.addLayer.note,
name: this.state.addLayer.name,
logoImagePath: e.target.value,
}
})
};
//弹出框事件
render() {
return (
@ -77,6 +152,37 @@ class LayerData extends React.Component {
treeData={this.state.treeData}
onSelect={this.onLayerSelect}
/>
<Button type='primary' id='add-layer' className={this.state.treeData.length > 0 ? 'showItem' : 'hideItem'}
onClick={this.showModal}>新建图层</Button>
<Modal title="新建图层" open={this.state.isModalOpen} onOk={this.handleOk} onCancel={this.handleCancel} className='edit-layer-modal'>
<Form name='base' onFinish={this.handleOk}>
<Form.Item label="图层名称"
rules={[
{
required: true,
message: '请输入图层名称!',
}
]}>
<Input name='id' type='hidden' value={this.state.addLayer.id}/>
<Input name='name' value={this.state.addLayer.name} onChange={this.onLayerNameChange}/>
</Form.Item>
<Form.Item label="图层图标" rules={[
{
required: true,
message: '请选择图层图标!',
}
]}>
<Radio.Group id='redio-btn-group' onChange={this.onLayerIogoImagePathChange}>
<Radio.Button name='logoImagePath' value="icon01" className='radio-btn icon-01'></Radio.Button>
<Radio.Button name='logoImagePath' value="icon02" className='radio-btn icon-02'></Radio.Button>
<Radio.Button name='logoImagePath' value="icon03" className='radio-btn icon-03'></Radio.Button>
</Radio.Group>
</Form.Item>
<Form.Item label="图层备注">
<Input.TextArea name='note' value={this.state.addLayer.note} onChange={this.onLayerNoteChange}/>
</Form.Item>
</Form>
</Modal>
</div >
);
}

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

@ -1,9 +1,11 @@
import React from 'react';
import { Select, Input, Card, Col, Row, Button, message } from 'antd';
import { Select, Input, Card, Col, Row, Button, message, Modal } from 'antd';
import axios from 'axios';
import LayerData from './LayerData';
import { AimOutlined } from '@ant-design/icons';
import Guide from '../../components/Guide/index.ts'
import Guide from '../../components/Guide/index.ts';
import icon2 from '../../assets/icon/position_icon2.png';
import Header from '../../components/Header/index.js';
import { GaodeMap ,Scene, PointLayer, Heatmap, PolygonLayer } from '@antv/l7';
@ -127,10 +129,10 @@ class BaseMap extends React.Component{
let map = this.state.map;
let LabelsData = data || [];
let logoImage = data.length > 0 && data[0].logoImage;
map.addImage("icon", logoImage);
map.addImage( '00','https://gw.alipayobjects.com/zos/basement_prod/604b5e7f-309e-40db-b95b-4fac746c5153.svg', );
map.addImage('01', 'https://gw.alipayobjects.com/zos/basement_prod/30580bc9-506f-4438-8c1a-744e082054ec.svg',);
map.addImage( '02','https://gw.alipayobjects.com/zos/basement_prod/7aa1f460-9f9f-499f-afdf-13424aa26bbf.svg',);
// map.addImage('icon', logoImage);
map.addImage( 'blueIcon',logoImage,);
map.addImage('yellowIcon', icon2,);
map.addImage( 'greenIcon','https://gw.alipayobjects.com/zos/basement_prod/7aa1f460-9f9f-499f-afdf-13424aa26bbf.svg',);
const pointLayer = new PointLayer({name: layerId})
.source(LabelsData, {
parser: {
@ -139,14 +141,14 @@ class BaseMap extends React.Component{
y: 'lat',
}
})
.shape(logoImage)
.size(30)
.color('mag', mag => {
return mag > 4.5 ? '#5B8FF9' : '#5CCEA1';
})
.shape('blueIcon')
.size(20)
// .color('mag', mag => {
// return mag > 4.5 ? '#5B8FF9' : '#5CCEA1';
// })
.active(true)
.style({
opacity: 0.6,
opacity: 1,
strokeWidth: 3
});
map.addLayer(pointLayer);
@ -492,6 +494,7 @@ class BaseMap extends React.Component{
render(){
return (
<div className={styles.basseMap} id='base_map'>
<Header></Header>
{/* 筛选框 */}
<Card className={styles.selectWrap} bordered={false}>
<Row>
@ -529,6 +532,10 @@ class BaseMap extends React.Component{
</Card>
{/* 图层数据显示 */}
<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}>点位导入</Button>
</div>
{/* 地图 */}
<div className={styles.mapWrap}>
<div style={{width: '100%', height: '100vh'}} id="container" />

16
src/pages/BaseMap/index.less
View File

@ -5,13 +5,25 @@
box-shadow: 0px 0px 10px 0px rgba(0,0,0,0.2);
border-radius: 10px 10px 10px 10px;
opacity: 1;
margin: 5%;
margin: 3% 5%;
position: absolute;
z-index: 99;
width: 86%;
width: 90%;
}
.labelForm {
height: 32px;
line-height: 32px;
z-index: 99;
}
// 右侧按钮
.btnRightWrap {
position: absolute;
right: 5%;
top: 240px;
z-index: 99;
width: 100px;
text-align: center;
}
.btnRight {
margin-bottom: 26px;
}