建设项目路线GIS部署并响应点击

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 || []
     };
 }