地图弹框数据展示

web/client/src/sections/quanju/containers/public/olMap.js

@@ -11,7 +11,6 @@ const OlMap = (props) => {
     }, [])
 
     useEffect(() => {
-        console.log(olMapGeoDataHost);
         if (olMapGeoDataHost) {
             let config = {
                 layerName: 'nanchang',
@@ -83,7 +82,54 @@ const OlMap = (props) => {
                                     autoPanMargin: 100,
                                     positioning: 'top-right'
                                 }
-                                setOlMapOpenData([{ k: Math.random() }])
+                                // 注意 现在只取第一条数据 所以能在这里请求
+                                request.post(`${olMapGeoDataHost || 'http://36.2.6.32:8811'}/geoserver-pg/rest/search`)
+                                    .type('form')
+                                    .send({
+                                        params: `{"layerName":"${d.tablename.toLowerCase()}","filter":"(roadcode = '${d.roadcode}')","spatialFilter":"","isReturnGeometry":"false","orderByFields":"roadcode, roadstart asc","spatialRel":"INTERSECTS","pageNum":1,"pageSize":1}`
+                                    })
+                                    .then(detailRes => {
+                                        if (detailRes.status == 200 && detailRes.body && detailRes.body.code == 1) {
+                                            const detailData = detailRes.body.data
+                                            const { datalist: detailDatalist } = detailData
+                                            for (let de of detailDatalist.list) {
+                                                setOlMapOpenData([{
+                                                    n: '路段编码',
+                                                    v: de['roadcode'],
+                                                }, {
+                                                    n: '路段名称',
+                                                    v: de['roadname'],
+                                                }, {
+                                                    n: '起点名称',
+                                                    v: de['f006'],
+                                                }, {
+                                                    n: '起点桩号',
+                                                    v: de['roadstart'],
+                                                }, {
+                                                    n: '止点名称',
+                                                    v: de['f010'],
+                                                }, {
+                                                    n: '止点桩号',
+                                                    v: de['roadends'],
+                                                }, {
+                                                    n: '路段里程',
+                                                    v:
+                                                        !isNaN(de['roadends']) && !isNaN(de['roadstart']) ?
+                                                            de['roadends'] - de['roadstart']
+                                                            : '-',
+                                                }, {
+                                                    n: '技术等级',
+                                                    v: de['f014'],
+                                                    map: [{ text: '高速公路', value: '1' }, { text: '一级公路', value: '2' }, { text: '二级公路', value: '3' }, { text: '三级公路', value: '4' }, { text: '四级公路', value: '5' }, { text: '等外公路', value: '6' }],
+                                                }, {
+                                                    n: '路面类型',
+                                                    v: de['f016'],
+                                                    map: [{ text: '沥青混凝土', value: '11' }, { text: '水泥混凝土', value: '12' }, { text: '沥青贯入式', value: '21' }, { text: '沥青碎石', value: '22' }, { text: '沥青表面处治', value: '23' }, { text: '砂石路面', value: '31' }, { text: '石质路面', value: '32' }, { text: '渣石路面', value: '33' }, { text: '砖铺路面', value: '34' }, { text: '砼预制块', value: '35' }, { text: '无路面', value: '36' }]
+                                                },])
+                                                break
+                                            }
+                                        }
+                                    })
                                 olMapTool.addOverlay('clickOpen', config)
                                 break
                             }
@@ -110,8 +156,16 @@ const OlMap = (props) => {
                     {
                         olMapOpenData.map(s => {
                             return <div style={{ display: 'flex' }}>
-                                {/* <div style={{ width: 120 }}>1</div>
-                                <div style={{ flex: 1 }}>: {s.k}</div> */}
+                                <div style={{ width: 100, textAlign: 'right' }}>{s.n} </div>
+                                <div style={{ flex: 1 }}>：
+                                    {
+                                        s.map ?
+                                            s.map.find(sm => sm.value == s.v)?.text
+                                            : s.v || s.v == 0 ?
+                                                s.v
+                                                : '-'
+                                    }
+                                </div>
                             </div>
                         })
                     }