diff --git a/src/components/Header/index.js b/src/components/Header/index.js index de483ecb..668dc5b8 100644 --- a/src/components/Header/index.js +++ b/src/components/Header/index.js @@ -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); diff --git a/src/index.less b/src/index.less index 47adb714..6fbe6c10 100644 --- a/src/index.less +++ b/src/index.less @@ -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; -} \ No newline at end of file +} diff --git a/src/pages/BaseMap/LayerData/SetLogoImagePath.js b/src/pages/BaseMap/LayerData/SetLogoImagePath.js index 193ff77c..9e1a5224 100644 --- a/src/pages/BaseMap/LayerData/SetLogoImagePath.js +++ b/src/pages/BaseMap/LayerData/SetLogoImagePath.js @@ -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 ( - - + + ); } else { + console.log('fileName', fileName); return ( - + ); diff --git a/src/pages/BaseMap/LayerData/index.js b/src/pages/BaseMap/LayerData/index.js index fb10c97c..0bcfda5e 100644 --- a/src/pages/BaseMap/LayerData/index.js +++ b/src/pages/BaseMap/LayerData/index.js @@ -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: , + 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 ? [,] - : [,]), - '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:[,], + // icon:({ selected }) => (selected ? [,] + // : [,]), + 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(); + } + } + } + + // 改变选择状态并改变地图上的图层 + 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(); + } + } + } + // 改变选择状态并改变地图上的图层 + 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(); + } + } + } + this.setState({ + menuData: [...menuData] + }) + } + } render() { return (
- +
0 ? 'showItem layer-data-title' : 'hideItem layer-data-title'}> + 图层数据 +
+ } - treeData={this.state.treeData} - onSelect={this.onLayerSelect} + id='layer-data-menu' + onDeselect={this.deselectlayer} + onSelect={this.selectLayer} + items={this.state.menuData} + mode='inline' /> - +
+ +
+
{ + 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{ - @@ -698,7 +796,10 @@ class BaseMap extends React.Component{ - { + { this.setState({ inputContent: e.target.value }) @@ -714,12 +815,21 @@ class BaseMap extends React.Component{ {/* 图层数据显示 */} - +
{/* */} - + - - +