diff --git a/web/client/src/sections/quanju/containers/public/olMap.js b/web/client/src/sections/quanju/containers/public/olMap.js index 721ebc81..002d5dfa 100644 --- a/web/client/src/sections/quanju/containers/public/olMap.js +++ b/web/client/src/sections/quanju/containers/public/olMap.js @@ -4,6 +4,7 @@ import request from 'superagent' import Hua from '../footer/leadership/centerleft/hudong' import moment from 'moment'; import { OlMapRequest } from '$utils' +import { useRef } from 'react'; export const busWillRun = [ { text: '非运营', value: '0' }, @@ -17,16 +18,25 @@ export const busWillRun = [ { text: '检车', value: '8' }, ] +const codeMap = { + x: 'gpsxd', + y: 'gpsyd', + c: 'gpscd', +} const OlMap = (props) => { - const { dispatch, actions, user, olMapArcgisHost, olMapGeoDataHost, patrolList, roadProjectList, tab, busRunTime, busLine } = props + const { dispatch, actions, user, olMapArcgisHost, olMapGeoDataHost, patrolList, roadProjectList, tab, busRunTime, busLine, projectList } = props const [olMapOpenData, setOlMapOpenData] = useState([]) const [olMap, setOlMap] = useState() + const [curClickCoordinate, setCurClickCoordinate] = useState([]) const [pointItem, setPointItem] = useState({}) // const [busRunData, setBusRunData] = useState([]) + // + const curTab = useRef(tab) useEffect(() => { + curTab.current = tab setOlMapOpenData([]) setPointItem({}) if (olMap) { @@ -79,6 +89,10 @@ const OlMap = (props) => { olMapTool.closeOverlay('pointClickOpen') olMapTool.removeGeometryLayer('geometry0') + setCurClickCoordinate(p.coordinate) + if (curTab.current == 'build') { + return + } // 请求路线坐标 request.post(`${olMapGeoDataHost || 'http://36.2.6.32:8811'}/geoserver-pg/rest/bufferSearch`) .type('form') @@ -201,11 +215,6 @@ const OlMap = (props) => { }) // 请求路线坐标 if (d.code_road) { - let codeMap = { - x: 'gpsxd', - y: 'gpsyd', - c: 'gpscd', - } let roadCodeStart = d.code_road[0] let layerName = codeMap[roadCodeStart.toLowerCase()] if (layerName) { @@ -461,6 +470,103 @@ const OlMap = (props) => { } }, [busLine, olMap, tab]) + useEffect(async () => { + if (olMap) { + if (tab == 'build') { + const roadRes = await Promise.all(projectList.map((d, index) => { + let roadCodeStart = d.roadCodeStart ? d.roadCodeStart[0] : 'N' + let layerName = codeMap[roadCodeStart.toLowerCase()] + if (layerName) { + return request.post(`${olMapGeoDataHost || 'http://36.2.6.32:8811'}/geoserver-pg/rest/search`) + .type('form') + .send({ + params: `{"layerName":"${layerName}","filter":"(roadcode = '${d.roadCodeStart}')","spatialFilter":"","isReturnGeometry":"true","orderByFields":"roadcode, roadstart asc","spatialRel":"INTERSECTS","pageNum":1,"pageSize":99}` + }) + } else { + return new Promise(resolve => setTimeout(() => resolve(), 0)); + } + })) + + let renderIndex = 0 + for (let res of roadRes) { + if (res) { + if (res.status == 200 && res.body && res.body.code == 1) { + const data = res.body.data + const { datalist } = data + if (datalist?.list?.length) { + let dataIndex = 0 + for (let d of datalist.list) { + const corData = projectList[renderIndex] + olMap.addGeometryJMLayer({ + features: [ + { + geometry: d.shape, + geometryType: 'LineString', + // geometryType: 'Point', + attributes: { + callbackParams: {}, + callback: (p, x) => { + let extent = p?.selected[0]?.values_?.geometry?.flatCoordinates + let coordinate = [] + if (extent && extent.length) { + let coordinateIndex = Math.ceil((extent.length - 1) / 2) + if (coordinateIndex % 2) { + coordinateIndex -= 1 + } + coordinate = [extent[coordinateIndex], extent[coordinate + 1]] + } + if (coordinate.length) { + setOlMapOpenData([{ + n: '项目名称', + v: corData.entryName + }, { + n: '项目规模(公里)', + v: corData.projectMileage + }, { + n: '项目投资(万元)', + v: corData.investment + }, { + n: '业主单位', + v: corData.buildUnit, + }, { + n: '施工单位', + v: corData.constructionUnit + }, { + n: '开工日期', + v: corData.startTime ? moment(corData.startTime).format('YYYY-MM-DD') : '' + },]) + olMap.addOverlay('clickOpen', { + id: 'clickOpen', + offset: [0, 4], // 偏移 + position: coordinate, // 坐标 + // position: [115.944220000000, 28.545380000000], + autoPan: true, + autoPanMargin: 100, + positioning: 'top-right' + }) + } + } + }, + }, + ], + style: { stroke: { width: 5, color: '#9933FF' } }, + selectStyle: { stroke: { width: 8, color: '#9933FF' } }, + layerName: 'geometry_build_road_' + renderIndex + }); + } + } + } + } + renderIndex++ + } + } else { + projectList.forEach((d, index) => { + olMap.removeGeometryLayer('geometry_build_road_' + index) + }) + } + } + }, [projectList, olMap, tab]) + const isRoadProject = pointItem.report_type == 'road' // const isBusPoint = pointItem.busNoChar return ( @@ -624,7 +730,7 @@ const OlMap = (props) => { } function mapStateToProps (state) { - const { auth, global, busRunTime, busLine } = state; + const { auth, global, busRunTime, busLine, projectList } = state; return { user: auth.user, actions: global.actions, @@ -632,6 +738,7 @@ function mapStateToProps (state) { olMapGeoDataHost: global.olMapGeoDataHost, busRunTime: busRunTime.data || [], busLine: busLine.data || [], + projectList: projectList.data || [] }; }