Browse Source

地图弹框数据展示

dev
巴林闲侠 1 year ago
parent
commit
a23a08ff9e
  1. 62
      web/client/src/sections/quanju/containers/public/olMap.js

62
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>
})
}

Loading…
Cancel
Save