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

改变图层列表

Browse Source
This commit is contained in:
SmileXin 2024-06-17 17:06:46 +08:00
parent ce49dfe013
commit 281de0492e
6 changed files with 1778 additions and 109 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
src/components/Header/index.js
View File

@ -9,6 +9,7 @@ import '../../index.less';
function Header (e) {
let setToken = loginStore;
let navigate = useNavigate();
// 退出登录
let logout = () => {
passwordLogout().then((e) => {
if (!e.success) {
@ -19,6 +20,7 @@ function Header (e) {
})
}
useEffect(() =>{
// 获取当前用户信息
getCurrentUser().then((e) => {
if (e.success) {
setToken.setAuthName(e.data.username);

75
src/index.less
View File

@ -145,19 +145,48 @@ body {
:where(.css-dev-only-do-not-override-9ntgx0).ant-form-horizontal .ant-form-item-label {
width: 120px;
}
.layer-data-title{
width: 100%;
padding: 10px 0;
text-align: center;
background-color: #FFFFFF;
// 内容不被选中
-webkit-user-select:none;/*谷歌 /Chrome*/
-moz-user-select:none; /*火狐/Firefox*/
-ms-user-select:none; /*IE 10+*/
user-select:none;
}
.layer-data-title span {
margin: 10px 0;
}
.layer-data-wrap {
overflow: hidden;
position: fixed;
top: 190px;
width: 220px;
z-index: 999;
width: 270px;
max-height: 450px;
margin: 2% 4.2%;
background: rgba(239,240,248,1);
box-shadow: 0px 0px 10px 0px rgba(0,0,0,0.2);
border-radius: 10px;
opacity: 1;
text-align: center;
z-index: 999;
}
#add-layer {
.layer-data-wrap:hover{
overflow-y: auto !important;
scrollbar-width: none; /* Firefox */
-ms-overflow-style: none; /* IE 10+ */
}
.layer-data-wrap:hover::-webkit-scrollbar {
display: none; /* Safari and Chrome */
}
#add-layer{
width: 100%;
text-align: center;
background-color: #FFFFFF;
}
#add-layer-button {
margin-top: 18px;
margin-bottom: 18px;
}
.ant-modal-content {
@ -173,6 +202,14 @@ body {
.ant-modal-footer {
text-align: center !important;
}
.eye{
position: absolute;
right: 10%;
}
.ant-menu-item{
// position: relative;
// left: -25px;
}
#redio-btn-color-group .radio-btn-color {
width: 30px;
height: 25px;
@ -224,13 +261,32 @@ body {
height: 30px;
border-radius: 0% !important;
}
#layer-icon{
width: 20px;
height: 20px;
position: relative;
top: 5px;
right: 5px;
}
.layer-icon2{
width: 20px !important;
height: 20px !important;
}
.layer-icon2 span {
display: inline-block;
width: 20px;
height: 20px;
position: relative;
left: -5px !important;
top: -5px !important;
}
#redio-btn-group {
width: 100%;
}
#redio-btn-group span {
display: inline-block;
width: 100%;
height: 100%;
width: 20px;
height: 20px;
position: relative;
left: -2px;
top: 6px;
@ -592,6 +648,9 @@ body {
.layer-data-wrap .ant-tree {
background: none;
}
.layer-data-wrap .menu-coat{
height: 100%;
}
.ant-tree-treenode:first-child {
margin-top: 10px;
}
@ -663,7 +722,7 @@ body {
width: 100%;
height: 100%;
position: absolute;
z-index: 9999;
z-index: 999;
}
#spin-show > span {
position: absolute;
@ -725,4 +784,4 @@ body {
}
.popup-del:hover {
color: #f57272;
}
}

7
src/pages/BaseMap/LayerData/SetLogoImagePath.js
View File

@ -2,13 +2,14 @@ function SetLogoImagePath (e) {
let fileName = e.logoImagePath;
if (fileName.substr(0, 7) == "http://" || fileName.substr(0, 6) == "https:" || fileName.substr(0, 7) == "http:\\\\") {
return (
<span>
<img src={fileName} />
<span >
<img id="layer-icon" src={fileName} />
</span>
);
} else {
console.log('fileName', fileName);
return (
<span id="redio-btn-group">
<span id="redio-btn-group" className="layer-icon2">
<span className={fileName}></span>
</span>
);

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

@ -1,20 +1,24 @@
import React from 'react';
import { Tree, Button, Modal, Form, Input, Radio, message } from 'antd';
import { Tree, Button, Modal, Form, Input, Radio, message, Menu } from 'antd';
import axios from 'axios';
import {
DownOutlined,
EyeOutlined,
EyeInvisibleOutlined,
UnderlineOutlined,
UnorderedListOutlined,
} from '@ant-design/icons';
import SetLogoImagePath from './SetLogoImagePath'
import { createLayer } from '../../../api';
import '../../../index.less';
import { label } from 'three/examples/jsm/nodes/Nodes.js';
class LayerData extends React.Component {
constructor () {
super ();
this.state = {
treeData: [],
menuData:[], //菜单数据
layerId: '',
isModalOpen: false,
addLayer: {
@ -28,7 +32,7 @@ class LayerData extends React.Component {
}
}
// 获取基础图层菜单栏
// 获取基础图层菜单栏，获取列表数据
getBasicLayerMenu = (adcode) => {
return axios.get('/api/basicMap/getBasicLayerMenu', {
params: {
@ -36,46 +40,55 @@ class LayerData extends React.Component {
}
}).then((e) => {
let basicLayeData = e.data.data;
let basicLayeList = [];
for (var i in basicLayeData) {
basicLayeList.push({
key: basicLayeData[i].id,
title : basicLayeData[i].name,
selectable: false,
children: this.getLayerList(basicLayeData[i].layerList),
// MenuData
let menuDataList = [];
for (var m in basicLayeData) {
menuDataList.push({
key: basicLayeData[m].id,
label: basicLayeData[m].name,
icon: <UnorderedListOutlined/>,
children: this.getLayerList(basicLayeData[m].layerList),
})
}
this.setState ({
treeData: basicLayeList
menuData: menuDataList,
})
});
}
// 获取图层列表
getLayerList = (layerList, i) => {
var cLayerList = [];
for (let i in layerList) {
cLayerList.push({
'key': i + '-' + layerList[i].id + '-' + new Date(),
'title': layerList[i].name + '(' + layerList[i].geoUnitAmount + ')',
'icon': ({ selected }) => (selected ? [<EyeOutlined key={new Date().getTime()} />,<SetLogoImagePath logoImagePath={layerList[i].logoImagePath} key={new Date().getTime() + 1}/>]
: [<EyeInvisibleOutlined key={new Date().getTime()} />,<SetLogoImagePath logoImagePath={layerList[i].logoImagePath} key={new Date().getTime() + 1}/>]),
'type': layerList[i].type,
'isCustomize': layerList[i].isCustomize,
// key: 0：顺序 ，1：图层id ， 2：时间 ， 3：名称 ， 4：是否为自创图层
key: i + '-' + layerList[i].id + '-' + new Date() + '-' + layerList[i].name + '(' + layerList[i].geoUnitAmount + ')' + '-' + layerList[i].isCustomize,
label: layerList[i].name + '(' + layerList[i].geoUnitAmount + ')',
// icon 分别为图标和小眼睛（是否显示该图层），后续在选择函数中修改
icon:[<SetLogoImagePath logoImagePath={layerList[i].logoImagePath} key={new Date().getTime() + 1}/>,<EyeInvisibleOutlined className='eye' key={new Date().getTime()} />],
// icon:({ selected }) => (selected ? [<EyeOutlined className='eye' key={new Date().getTime()} />,<SetLogoImagePath logoImagePath={layerList[i].logoImagePath} key={new Date().getTime() + 1}/>]
// : [<EyeInvisibleOutlined className='eye' key={new Date().getTime()} />,<SetLogoImagePath logoImagePath={layerList[i].logoImagePath} key={new Date().getTime() + 1}/>]),
typee: layerList[i].type,
isCustomize: layerList[i].isCustomize,
})
}
return cLayerList;
}
//新建点位后修改涂层数量
changeUnitAmount = (layerId) => {
let treeData = this.state.treeData;
for (let i in treeData) {
for (let j in treeData[i].children) {
if (layerId == treeData[i].children[j].key.split('-')[1]) {
treeData[i].children[j].title = 'ooo' ;
let menu = this.state.menuData;
for (let i in menu) {
for (let j in menu[i].children) {
if (layerId == menu[i].children[j].key.split('-')[1]) {
menu[i].children[j].title = 'ooo' ;
}
}
}
this.setState ({
treeData: treeData
menuData: menu
})
}
// 选中图层
@ -99,6 +112,85 @@ class LayerData extends React.Component {
this.props.getLayerShapes(layerId, info.selected);
}
}
// 选中图层
selectLayer = (e) => {
// 修改选中状态
let menuData = this.state.menuData;
this.setState({menuData:[]}) // 将图层列表的数据清空（不清空组件不更新数据）
for (let i in menuData) { // 将选中图层的小眼睛改为打开状态（重新写入数据）
for (let j in menuData[i].children) {
if (e.key === menuData[i].children[j].key) {
let iconList = menuData[i].children[j].icon[0];
menuData[i].children[j].icon = [];
menuData[i].children[j].icon.push(iconList);
menuData[i].children[j].icon.push(<EyeOutlined className='eye' key={new Date().getTime()} />);
}
}
}
// 改变选择状态并改变地图上的图层
let layerId = e.key.split('-')[1];
if (e.item.props.typee === 1 || e.item.props.typee === 4) {
this.props.getLayerPoints(layerId, true, e.item.props.typee);
} else if (e.item.props.typee === 2) {
this.props.getLayerShapes(layerId, true);
}
// 将选中图层写入选中图层列表
let selectLayerList = [];
for (let m in e.selectedKeys) {
selectLayerList.push({
// key: 0：顺序 ，1：图层id ， 2：时间 ， 3：名称 ， 4：是否为自创图层
'value' : e.selectedKeys[m].split('-')[1],
'label' : e.selectedKeys[m].split('-')[3],
'isCustomize' : e.selectedKeys[m].split('-')[4],
})
}
this.setState({
layerId: layerId,
selectLayerList: selectLayerList,
menuData: [...menuData]
})
}
// 取消选中图层
deselectlayer = (e) =>{
// 修改选中状态
let menuData = this.state.menuData;
this.setState({menuData:[]})
for (let i in menuData) {
for (let j in menuData[i].children) {
if (e.key === menuData[i].children[j].key) {
let iconList = menuData[i].children[j].icon[0];
menuData[i].children[j].icon = [];
menuData[i].children[j].icon.push(iconList);
menuData[i].children[j].icon.push(<EyeInvisibleOutlined className='eye' key={new Date().getTime()} />);
}
}
}
// 改变选择状态并改变地图上的图层
let layerId = e.key.split('-')[1];
if (e.item.props.typee === 1 || e.item.props.typee === 4) {
this.props.getLayerPoints(layerId, false, e.item.props.typee);
} else if (e.item.props.typee === 2) {
this.props.getLayerShapes(layerId, false);
}
// 将选中图层写入选中图层列表
let selectLayerList = [];
for (let m in e.selectedKeys) {
selectLayerList.push({
// key: 0：顺序 ，1：图层id ， 2：时间 ， 3：名称 ， 4：是否为自创图层
'value' : e.selectedKeys[m].split('-')[1],
'label' : e.selectedKeys[m].split('-')[3],
'isCustomize' : e.selectedKeys[m].split('-')[4],
})
}
this.setState({
layerId: layerId,
selectLayerList: selectLayerList,
menuData: [...menuData],
})
}
//弹出框事件
showModal = () => {
this.setState({
@ -107,7 +199,6 @@ class LayerData extends React.Component {
};
handleOk = (values) => {
let self = this;
let treeData = this.state.treeData
if (this.state.addLayer.id != 0) { //编辑图层
updateLayer({
id: this.state.addLayer.id,
@ -191,21 +282,48 @@ class LayerData extends React.Component {
}
})
};
//弹出框事件
// 根据已选列表变化
changeSelectStatus = () => {
for (let n in this.state.selectLayerList) {
// 修改选中状态
let menuData = this.state.menuData;
this.setState({menuData:[]})
for (let i in menuData) {
for (let j in menuData[i].children) {
if (this.state.selectLayerList[n].value === menuData[i].children[j].key.split('-')[1]) {
let iconList = menuData[i].children[j].icon[0];
menuData[i].children[j].icon = [];
menuData[i].children[j].icon.push(iconList);
menuData[i].children[j].icon.push(<EyeOutlined className='eye' key={new Date().getTime()} />);
}
}
}
this.setState({
menuData: [...menuData]
})
}
}
render() {
return (
<div className='layer-data-wrap'>
<Tree
<div className='menu-list'>
<div className={this.state.menuData.length > 0 ? 'showItem layer-data-title' : 'hideItem layer-data-title'}>
<span>图层数据</span>
</div>
<Menu
multiple
showIcon
defaultSelectedKeys={[]}
switcherIcon={<DownOutlined />}
treeData={this.state.treeData}
onSelect={this.onLayerSelect}
id='layer-data-menu'
onDeselect={this.deselectlayer}
onSelect={this.selectLayer}
items={this.state.menuData}
mode='inline'
/>
<Button type='primary' id='add-layer' className={this.state.treeData.length > 0 ? 'showItem' : 'hideItem'}
onClick={this.showModal}>新建图层</Button>
<div id='add-layer'>
<Button type='primary' id='add-layer-button' className={this.state.menuData.length > 0 ? 'showItem' : 'hideItem'}
onClick={this.showModal}>新建图层</Button>
</div>
</div>
<Modal title="新建图层" open={this.state.isModalOpen} onOk={this.handleOk} onCancel={this.handleCancel} className='edit-layer-modal'>
<Form name='base' id='edit-layer-form' onFinish={this.handleOk}>
<Form.Item label="图层名称"

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

@ -2,22 +2,26 @@ import React from 'react';
import { Select, Input, Card, Col, Row, Button, message, Modal, Spin, Form } from 'antd';
import axios from 'axios';
import LayerData from './LayerData';
// import LayerList from './LayerList';
import { AimOutlined } from '@ant-design/icons';
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 { GaodeMap ,Scene, Heatmap, PolygonLayer, Marker, MarkerLayer, Popup, MouseLocation } from '@antv/l7';
// import { DrawPoint, DrawEvent } from '@antv/l7-draw';
import icon04 from '../../assets/icon/icon04.svg'
import styles from './index.less';
const { Option } = Select;
const nullSearchLocation = () => {
message.error('坐标信息为空');
};
const nullSearchAddress = () => {
message.error('地址信息为空');
};
const errorSearchAddress = () => {
message.error('地址搜索信息异常，请联系开发人员');
};
@ -50,12 +54,13 @@ class BaseMap extends React.Component{
inputContent: '',
heatMapList: [],
loading: false,
markerLayerList: [],
markerLayerList: [], // 点位图层
isModalOpen: false,
selectLayerList: [],
pointAdd: {},
pointDrawer: null,
newPointLocation: '',
mouseLocation:{},
}
}
startLoading = () => {
@ -81,7 +86,7 @@ class BaseMap extends React.Component{
pitch: 20,
style: 'light',
center: [ 118.405285, 39.904989 ],
zoom: 3
zoom: 3,
})
});
this.setState({
@ -117,6 +122,7 @@ class BaseMap extends React.Component{
}
}).then((e) => {
let layerPointsData = e.data.data || [];
// 处理返回的数据
layerPointsData = layerPointsData.map((item) => {
item.lng = item.location.split(',')[0];
item.lat = item.location.split(',')[1];
@ -124,6 +130,7 @@ class BaseMap extends React.Component{
return item;
});
if (nodeType === 1) {
// 在地图上添加点位
this.setMarkers(layerPointsData, layerId);
} else if (nodeType === 4) {
// this.setHeatMap(layerPointsData, layerId);
@ -351,23 +358,32 @@ class BaseMap extends React.Component{
})
});
}
// 选择省
// 选择省 provinceAdcode:省编码 data:省数据
onProvinceChange = (provinceAdcode, data) => {
console.log("provinceAdcode, data:", provinceAdcode, data)
var self = this;
// 清除点位图层
let getLayers = self.state.markerLayerList;
for (let i = 0; i < getLayers.length; i++) {
self.state.map.removeMarkerLayer(getLayers[i]);
}
// 清除子组件的已选图层
this.refs.getLayerDataFun.state.selectLayerList = [];
// 清除所选市
this.onCityChange();
data && this.gotoProvince(data)
// 根据所选省获取市
this.getCityByProvince(`${provinceAdcode}`);
this.hideHeatMap();
this.setState ({
provinceAdcode: provinceAdcode ? `${provinceAdcode}` : '',
provinceLabel: data ? data.label : '',
zoom: 8,
districtList: [],//区
provinceAdcode: provinceAdcode ? `${provinceAdcode}` : '', // 省编码
provinceLabel: data ? data.label : '', // 省名称
zoom: 8, // 缩放级别
cityAdcode:'',//选中的市
cityLabel: '',
districtList: [],//区
districtAdcode: '',
})
}
@ -378,6 +394,7 @@ class BaseMap extends React.Component{
provinceAdcode: provinceAdcode
}
}).then((e) => {
console.log("e:", e)
let cityData = e.data.data;
let cityList = [];
for (var i in cityData) {
@ -385,30 +402,33 @@ class BaseMap extends React.Component{
'value': cityData[i].cityAdcode,
'label': cityData[i].cityName,
'zoom': 10,
// 'len': cityData[i].centerCoordinate.split(',')[0],
'len': cityData[i].centerCoordinate && cityData[i].centerCoordinate.split(',')[0],
'lat': cityData[i].centerCoordinate && cityData[i].centerCoordinate.split(',')[1],
})
}
// console.log("cityList:", cityList)
this.setState ({
cityList: cityList
})
});
}
//选择市
//选择市 cityAdcode:市编码 data:市数据
onCityChange = (cityAdcode,data) => {
var self = this;
self.startLoading();
// 清除点位图层
let getLayers = self.state.markerLayerList;
for (let i = 0; i < getLayers.length; i++) {
self.state.map.removeMarkerLayer(getLayers[i]);
}
// 根据所选市获取区
this.getDistrictByCity(`${cityAdcode}`);
this.refs.getLayerDataFun.getBasicLayerMenu(`${cityAdcode}`).then(() => {
self.stopLoading();
});
data && this.gotoCity(data);
this.hideHeatMap();
this.setState ({
cityAdcode: cityAdcode ? `${cityAdcode}` : '',
cityLabel: data ? data.label : '',
@ -475,32 +495,43 @@ class BaseMap extends React.Component{
})
}
}
// 地图搜索
onSearchMap = () => {
// 0地址 1经纬度
if(this.state.inputExplainKey === 1){
// 判断经纬度是否为空
let location = this.state.inputContent
let data = {
'zoom': 8,
'len': location.split(',')[0],
'lat': location.split(',')[1],
if(location === "" || location === null){
nullSearchLocation();
return false;
}else{
let data = {
'zoom': 8,
'len': location.split(',')[0],
'lat': location.split(',')[1],
}
this.gotoCity(data)
let icon = "https://webapi.amap.com/theme/v1.3/markers/n/mark_b.png";
let searchPointMarker = new Marker().setLnglat({lng: location.split(',')[0], lat: location.split(',')[1]});
this.state.map.addMarker(searchPointMarker);
successSearchAddress();
}
this.gotoCity(data)
let icon = "https://webapi.amap.com/theme/v1.3/markers/n/mark_b.png";
let searchPointMarker = new Marker().setLnglat({lng: location.split(',')[0], lat: location.split(',')[1]});
this.state.map.addMarker(searchPointMarker);
successSearchAddress();
}else{
// 判断地址是否为空
let address = this.state.inputContent
if(address === "" ||address === null){
nullSearchAddress();
return false;
}else{
address = this.state.provinceLabel + this.state.cityLabel + address;
console.log("address:", address)
return axios.get('/api/mapCommon/getPointByAddress', {
params: {
address: address
}
}).then((e) => {
let coordinate = e.data.data;
console.log("coordinate:", coordinate.location)
if(coordinate === ""||coordinate === null){
errorSearchAddress();
}else{
@ -520,6 +551,7 @@ class BaseMap extends React.Component{
}
}
// 点位创建
enableDrawPoint = () => {
if (this.state.cityAdcode == '' && this.state.districtAdcode == '') {
message.error('请至少选择行政区域至城市再进行点位创建');
@ -535,36 +567,93 @@ class BaseMap extends React.Component{
message.error('请至少选中一个个人图层');
return false;
}
this.state.map.addImage(
'dingwei',
'https://gw.alipayobjects.com/mdn/rms_3bf4aa/afts/img/A*JL46TZ_iYB0AAAAAAAAAAAAAARQnAQ',
);
const drawer = new DrawPoint(this.state.map, {
style: {
point: {
normal: {
shape: 'dingwei',
size: 8,
},
hover: {
shape: 'dingwei',
size: 10,
},
active: {
shape: 'dingwei',
size: 10,
},
}
}
});
drawer.enable();
drawer.on(DrawEvent.Add, (newPoint) => {
this.showModal(newPoint.geometry.coordinates.toString());
});
// 关闭地图双击放大
this.state.map.setMapStatus({
doubleClickZoom: false
})
// 鼠标变十字
// document.getElementsByClassName("l7-scene")[0].style.cursor = 'crosshair';
// console.log('sence:', getElementsByClassName('l7-scene') );
// 获取点击时鼠标的地图坐标
const mouseLocation = new MouseLocation();
this.state.map.addControl(mouseLocation);
this.setState({
pointDrawer: drawer,
// pointDrawer: drawer,
selectLayerList: selectLayerList,
mouseLocation: mouseLocation,
});
// 开启地图的事件监听，双击添加，右键取消
// 双击事件
this.state.map.on('dblclick', this.dblclickEvent);
// 右键事件
this.state.map.on('contextmenu', this.contextmenuEvent);
// this.state.map.addImage(
// 'dingwei',
// 'https://gw.alipayobjects.com/mdn/rms_3bf4aa/afts/img/A*JL46TZ_iYB0AAAAAAAAAAAAAARQnAQ',
// );
// const drawer = new DrawPoint(this.state.map, {
// style: {
// point: {
// normal: {
// shape: 'dingwei',
// size: 8,
// },
// hover: {
// shape: 'dingwei',
// size: 10,
// },
// active: {
// shape: 'dingwei',
// size: 10,
// },
// }
// },
// });
// drawer.enable();
// drawer.on(DrawEvent.Add, (newPoint) => {
// console.log('newPoint:', newPoint.geometry.coordinates.toString());
// this.showModal(newPoint.geometry.coordinates.toString());
// });
}
// 地图鼠标双击事件
dblclickEvent = (e) => {
// 开启双击地图放大
this.state.map.setMapStatus({
doubleClickZoom: true
})
// 添加点位
this.showModal(this.state.mouseLocation.location.toString());
// 鼠标取消十字
// 删除右键事件监听
this.state.map.off('contextmenu', this.contextmenuEvent);
// 删除鼠标经纬度组件
this.state.map.removeControl(this.state.mouseLocation);
this.state.mouseLocation = {};
}
// 地图右键事件
contextmenuEvent = (e) => {
// 开启双击地图放大
this.state.map.setMapStatus({
doubleClickZoom: true
})
// 鼠标取消十字
// 删除鼠标经纬度组件
this.state.map.removeControl(this.state.mouseLocation);
this.state.mouseLocation = {};
// 删除双击事件监听
this.state.map.off('dblclick', this.dblclickEvent);
// 删除右键事件监听
this.state.map.off('contextmenu', this.contextmenuEvent);
}
//弹出框事件
@ -584,6 +673,9 @@ class BaseMap extends React.Component{
// newPointLocation: newPointLocation,
// });
// });
// 关闭双击事件监听事件
this.state.map.off('dblclick', this.dblclickEvent);
this.setState({
isModalOpen: true,
newPointLocation: newPointLocation,
@ -600,8 +692,8 @@ class BaseMap extends React.Component{
"location": this.state.newPointLocation,
"provinceAdcode": this.state.provinceAdcode,
}).then((e) => {
this.state.pointDrawer.removeActiveFeature();
this.state.pointDrawer.disable();
// this.state.pointDrawer.removeActiveFeature();
// this.state.pointDrawer.disable();
let layerId = this.state.pointAdd.layerId;
if (e.success) {
message.success('点位创建成功!');
@ -611,6 +703,7 @@ class BaseMap extends React.Component{
}, 1000);//true新增，1点
let filter = this.state.districtAdcode || this.state.cityAdcode;
this.refs.getLayerDataFun.getBasicLayerMenu(filter)
this.refs.getLayerDataFun.changeSelectStatus();
this.setState({
isModalOpen: false,
pointAdd: {},
@ -621,8 +714,8 @@ class BaseMap extends React.Component{
})
};
handleCancel = () => {
this.state.pointDrawer.removeActiveFeature();
this.state.pointDrawer.disable();
// this.state.pointDrawer.removeActiveFeature();
// this.state.pointDrawer.disable();
this.setState({
isModalOpen: false,
pointAdd: {},
@ -684,7 +777,12 @@ class BaseMap extends React.Component{
<Col span={12}>
<Input.Group compact style={{display:"inline"}}>
<label className={styles.labelForm}>行政区域：</label>
<Select style={{width: 120, marginLeft: 18}} onChange={this.onProvinceChange} options={this.state.provinceList} value={this.state.provinceAdcode} allowClear/>
<Select
style={{width: 120, marginLeft: 18}}
onChange={this.onProvinceChange}
options={this.state.provinceList}
value={this.state.provinceAdcode}
allowClear/>
<Select style={{width: 120, marginLeft: 18}} onChange={this.onCityChange} options={this.state.cityList} value={this.state.cityAdcode} allowClear/>
<Select style={{width: 120, marginLeft: 18}} onChange={this.onDistrictChange} options={this.state.districtList} value={this.state.districtAdcode} allowClear/>
</Input.Group>
@ -698,7 +796,10 @@ class BaseMap extends React.Component{
<Option value="0">地址</Option>
<Option value="1">经纬度</Option>
</Select>
<Input id="tipinput" style={{width: '60%', height: 32, marginLeft: 18}} placeholder={this.state.inputExplainValue} value={this.state.inputContent} onChange={(e)=>{
<Input id="tipinput" style={{width: '60%', height: 32, marginLeft: 18}}
placeholder={this.state.inputExplainValue}
value={this.state.inputContent}
onChange={(e)=>{
this.setState({
inputContent: e.target.value
})
@ -714,12 +815,21 @@ class BaseMap extends React.Component{
</Row>
</Card>
{/* 图层数据显示 */}
<LayerData ref="getLayerDataFun" adcode={{cityAdcode: this.state.cityAdcode, districtAdcode: this.state.districtAdcode}}
getLayerPoints = {this.getLayerPoints} getLayerShapes = {this.getLayerShapes}/>
<LayerData
ref="getLayerDataFun"
adcode={{cityAdcode: this.state.cityAdcode, districtAdcode: this.state.districtAdcode}}
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'>
<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} onFinishFailed={this.onFinishFailed}>
<Form.Item label="选择自定义图层"
rules={[
@ -728,7 +838,10 @@ class BaseMap extends React.Component{
message: '请输入图层名称!',
}
]}>
<Select name='name' value={this.state.pointAdd.layerId} options={this.state.selectLayerList} onChange={this.onLayerNameChange} allowClear>
<Select name='name' value={this.state.pointAdd.layerId}
options={this.state.selectLayerList}
onChange={this.onLayerNameChange}
allowClear>
</Select>
</Form.Item>
<Form.Item label="点位名称"
@ -739,7 +852,9 @@ class BaseMap extends React.Component{
}
]}
>
<Input name='note' value={this.state.pointAdd.name} onChange={this.onPointAddNameChange}/>
<Input name='note'
value={this.state.pointAdd.name}
onChange={this.onPointAddNameChange}/>
</Form.Item>
<Form.Item label="点位地址"
rules={[

1388
yarn.lock
View File

File diff suppressed because it is too large Load Diff