|
|
@ -4,93 +4,94 @@ import request from 'superagent' |
|
|
|
import { OlMapRequest } from '$utils' |
|
|
|
|
|
|
|
const OlMap = (props) => { |
|
|
|
const { dispatch, actions, user } = props |
|
|
|
const { dispatch, actions, user, olMapArcgisHost, olMapGeoDataHost } = props |
|
|
|
const [olMapOpenData, setOlMapOpenData] = useState([]) |
|
|
|
useEffect(() => { |
|
|
|
let config = { |
|
|
|
layerName: 'nanchang', |
|
|
|
center: [116.08706, 28.602018], // 中心坐标
|
|
|
|
zoom: 10, // 缩放
|
|
|
|
minZoom: 8, |
|
|
|
maxZoom: 21, |
|
|
|
isMoveSelect: false, // 鼠标滑过是否选中
|
|
|
|
projection: 'EPSG:4326' // 坐标系
|
|
|
|
} |
|
|
|
let arcgisUrls = { |
|
|
|
nanchang: { |
|
|
|
url: 'http://36.2.6.33:6080/arcgis/rest/services/PBDT/nachang/MapServer', |
|
|
|
}, |
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
}, []) |
|
|
|
|
|
|
|
useEffect(() => { |
|
|
|
console.log(olMapGeoDataHost); |
|
|
|
if (olMapGeoDataHost) { |
|
|
|
let config = { |
|
|
|
layerName: 'nanchang', |
|
|
|
center: [116.08706, 28.602018], // 中心坐标
|
|
|
|
zoom: 10, // 缩放
|
|
|
|
minZoom: 8, |
|
|
|
maxZoom: 21, |
|
|
|
isMoveSelect: false, // 鼠标滑过是否选中
|
|
|
|
projection: 'EPSG:4326' // 坐标系
|
|
|
|
} |
|
|
|
let arcgisUrls = { |
|
|
|
nanchang: { |
|
|
|
url: `${olMapArcgisHost || 'http://36.2.6.33:6080'}/arcgis/rest/services/PBDT/nachang/MapServer`, |
|
|
|
}, |
|
|
|
} |
|
|
|
|
|
|
|
let option = { |
|
|
|
target: 'olMap', // 元素ID
|
|
|
|
config: config, |
|
|
|
arcgisUrls, // 动态底图图层
|
|
|
|
onEvent: { |
|
|
|
// 选中回调
|
|
|
|
onSelectClick: function (p) { console.log(p) }, |
|
|
|
// 鼠标滑过回调
|
|
|
|
onPointerMove: function (p) { console.log(p) }, |
|
|
|
let option = { |
|
|
|
target: 'olMap', // 元素ID
|
|
|
|
config: config, |
|
|
|
arcgisUrls, // 动态底图图层
|
|
|
|
onEvent: { |
|
|
|
// 选中回调
|
|
|
|
onSelectClick: function (p) { |
|
|
|
// console.log(p)
|
|
|
|
}, |
|
|
|
// 鼠标滑过回调
|
|
|
|
onPointerMove: function (p) { |
|
|
|
// console.log(p)
|
|
|
|
}, |
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
|
let olMapTool = new OlMapTool(option) |
|
|
|
olMapTool.map.on('dblclick', function (p) { |
|
|
|
console.log(p) |
|
|
|
}) |
|
|
|
olMapTool.map.on('singleclick', function (p) { |
|
|
|
console.log("singleclick", p) |
|
|
|
let olMapTool = new OlMapTool(option) |
|
|
|
olMapTool.map.on('dblclick', function (p) { |
|
|
|
// console.log(p)
|
|
|
|
}) |
|
|
|
olMapTool.map.on('singleclick', function (p) { |
|
|
|
|
|
|
|
olMapTool.closeOverlay('clickOpen') |
|
|
|
olMapTool.removeGeometryLayer('geometry0') |
|
|
|
olMapTool.closeOverlay('clickOpen') |
|
|
|
olMapTool.removeGeometryLayer('geometry0') |
|
|
|
|
|
|
|
request.post('http://36.2.6.32:8811/geoserver-pg/rest/bufferSearch') |
|
|
|
.type('form') |
|
|
|
.send({ |
|
|
|
params: `{"layerName":"view_by_line","pageSize":10,"pageNum":1,"filter":"","isReturnGeometry":"true","spatialRel":"INTERSECTS","orderByFields":" sort1, sort2, lxbm, sxxfx, qdzh asc", "spatialFilter":"point(${p.coordinate[0]} ${p.coordinate[1]})","distance":20}` |
|
|
|
}) |
|
|
|
.then(res => { |
|
|
|
console.log(res); |
|
|
|
if (res.status == 200 && res.body && res.body.code == 1) { |
|
|
|
const data = res.body.data |
|
|
|
const { datalist } = data |
|
|
|
let index = 0 |
|
|
|
for (let d of datalist.list) { |
|
|
|
olMapTool.addGeometryJMLayer({ |
|
|
|
features: [ |
|
|
|
{ |
|
|
|
geometry: d.shape, |
|
|
|
geometryType: 'LineString', |
|
|
|
// geometryType: 'Point',
|
|
|
|
}, |
|
|
|
], |
|
|
|
style: { stroke: { width: 10, color: '#9933FF' } }, |
|
|
|
selectStyle: { stroke: { width: 5, color: '#9933FF' } }, |
|
|
|
layerName: 'geometry' + index++ |
|
|
|
}); |
|
|
|
const config = { |
|
|
|
id: 'clickOpen', |
|
|
|
offset: [0, 25], // 偏移
|
|
|
|
position: p.coordinate, // 坐标
|
|
|
|
autoPan: true, |
|
|
|
autoPanMargin: 100, |
|
|
|
positioning: 'top-right' |
|
|
|
request.post(`${olMapGeoDataHost || 'http://36.2.6.32:8811'}/geoserver-pg/rest/bufferSearch`) |
|
|
|
.type('form') |
|
|
|
.send({ |
|
|
|
params: `{"layerName":"view_by_line","pageSize":10,"pageNum":1,"filter":"","isReturnGeometry":"true","spatialRel":"INTERSECTS","orderByFields":" sort1, sort2, lxbm, sxxfx, qdzh asc", "spatialFilter":"point(${p.coordinate[0]} ${p.coordinate[1]})","distance":20}` |
|
|
|
}) |
|
|
|
.then(res => { |
|
|
|
if (res.status == 200 && res.body && res.body.code == 1) { |
|
|
|
const data = res.body.data |
|
|
|
const { datalist } = data |
|
|
|
let index = 0 |
|
|
|
for (let d of datalist.list) { |
|
|
|
olMapTool.addGeometryJMLayer({ |
|
|
|
features: [ |
|
|
|
{ |
|
|
|
geometry: d.shape, |
|
|
|
geometryType: 'LineString', |
|
|
|
// geometryType: 'Point',
|
|
|
|
}, |
|
|
|
], |
|
|
|
style: { stroke: { width: 10, color: '#9933FF' } }, |
|
|
|
selectStyle: { stroke: { width: 5, color: '#9933FF' } }, |
|
|
|
layerName: 'geometry' + index++ |
|
|
|
}); |
|
|
|
const config = { |
|
|
|
id: 'clickOpen', |
|
|
|
offset: [0, 25], // 偏移
|
|
|
|
position: p.coordinate, // 坐标
|
|
|
|
autoPan: true, |
|
|
|
autoPanMargin: 100, |
|
|
|
positioning: 'top-right' |
|
|
|
} |
|
|
|
setOlMapOpenData([{ k: Math.random() }]) |
|
|
|
olMapTool.addOverlay('clickOpen', config) |
|
|
|
break |
|
|
|
} |
|
|
|
setOlMapOpenData([{ k: Math.random() }]) |
|
|
|
olMapTool.addOverlay('clickOpen', config) |
|
|
|
break |
|
|
|
} |
|
|
|
} |
|
|
|
}) |
|
|
|
|
|
|
|
}) |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
}, []) |
|
|
|
}) |
|
|
|
}) |
|
|
|
} |
|
|
|
}, [olMapGeoDataHost]) |
|
|
|
|
|
|
|
return ( |
|
|
|
<div id="olMap" style={{ position: 'absolute', height: '100%', width: "100%" }}> |
|
|
@ -109,8 +110,8 @@ 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: 120 }}>1</div> |
|
|
|
<div style={{ flex: 1 }}>: {s.k}</div> */} |
|
|
|
</div> |
|
|
|
}) |
|
|
|
} |
|
|
@ -125,6 +126,8 @@ function mapStateToProps (state) { |
|
|
|
return { |
|
|
|
user: auth.user, |
|
|
|
actions: global.actions, |
|
|
|
olMapArcgisHost: global.olMapArcgisHost, |
|
|
|
olMapGeoDataHost: global.olMapGeoDataHost, |
|
|
|
}; |
|
|
|
} |
|
|
|
|
|
|
|