|
|
|
@ -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) { |
|
|
|
@ -425,34 +434,35 @@ const OlMap = (props) => { |
|
|
|
|
|
|
|
useEffect(() => { |
|
|
|
if (busLine && olMap && tab == 'operation') { |
|
|
|
olMap.addGeometryLayer({ |
|
|
|
features: [ |
|
|
|
{ |
|
|
|
name: 'busLine', |
|
|
|
attributes: { |
|
|
|
}, |
|
|
|
geometry: busLine.map(b => { |
|
|
|
return [b.pointLng, b.pointLat] |
|
|
|
}), |
|
|
|
// geometry: [115.944220000000, 28.545380000000],
|
|
|
|
geometryType: 'LineString', |
|
|
|
style: { stroke: { width: 5, color: '#9933FF' } }, |
|
|
|
selectStyle: { stroke: { width: 8, color: '#9933FF' } }, |
|
|
|
}, |
|
|
|
], |
|
|
|
style: { stroke: { width: 5, color: '#9933FF' } }, |
|
|
|
selectStyle: { stroke: { width: 8, color: '#9933FF' } }, |
|
|
|
layerName: 'geometry_bus_line' |
|
|
|
}); |
|
|
|
if (busLine.length) { |
|
|
|
olMap.closeOverlay('clickOpen') |
|
|
|
busRunData.forEach((d, index) => { |
|
|
|
olMap.removeGeometryLayer('geometry_bus_' + index) |
|
|
|
}) |
|
|
|
olMap.addGeometryLayer({ |
|
|
|
features: [ |
|
|
|
{ |
|
|
|
name: 'busLine', |
|
|
|
attributes: { |
|
|
|
}, |
|
|
|
geometry: busLine.map(b => { |
|
|
|
return [b.pointLng, b.pointLat] |
|
|
|
}), |
|
|
|
// geometry: [115.944220000000, 28.545380000000],
|
|
|
|
geometryType: 'LineString', |
|
|
|
style: { stroke: { width: 5, color: '#9933FF' } }, |
|
|
|
selectStyle: { stroke: { width: 8, color: '#9933FF' } }, |
|
|
|
}, |
|
|
|
], |
|
|
|
style: { stroke: { width: 5, color: '#9933FF' } }, |
|
|
|
selectStyle: { stroke: { width: 8, color: '#9933FF' } }, |
|
|
|
layerName: 'geometry_bus_line' |
|
|
|
}); |
|
|
|
olMap.setCenter([ |
|
|
|
(busLine[0].pointLng + busLine[busLine.length - 1].pointLng) / 2, |
|
|
|
(busLine[0].pointLat + busLine[busLine.length - 1].pointLat) / 2 |
|
|
|
]) |
|
|
|
busRunData.forEach((d, index) => { |
|
|
|
olMap.removeGeometryLayer('geometry_bus_' + index) |
|
|
|
}) |
|
|
|
|
|
|
|
} else { |
|
|
|
drawBusRunPoint() |
|
|
|
} |
|
|
|
@ -461,6 +471,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 +731,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 +739,7 @@ function mapStateToProps (state) { |
|
|
|
olMapGeoDataHost: global.olMapGeoDataHost, |
|
|
|
busRunTime: busRunTime.data || [], |
|
|
|
busLine: busLine.data || [], |
|
|
|
projectList: projectList.data || [] |
|
|
|
}; |
|
|
|
} |
|
|
|
|
|
|
|
|
