@ -1,11 +1,16 @@
import React , { useEffect , useState } from 'react' ;
import { connect } from 'react-redux' ;
import request from 'superagent'
import Hua from '../footer/leadership/centerleft/hudong'
import moment from 'moment' ;
import { OlMapRequest } from '$utils'
const OlMap = ( props ) => {
const { dispatch , actions , user , olMapArcgisHost , olMapGeoDataHost } = props
const { dispatch , actions , user , olMapArcgisHost , olMapGeoDataHost , patrolList , roadProjectList } = props
const [ olMapOpenData , setOlMapOpenData ] = useState ( [ ] )
const [ olMap , setOlMap ] = useState ( )
const [ pointItem , setPointItem ] = useState ( { } )
useEffect ( ( ) => {
} , [ ] )
@ -48,7 +53,9 @@ const OlMap = (props) => {
} )
olMapTool . map . on ( 'singleclick' , function ( p ) {
setOlMapOpenData ( [ ] )
setPointItem ( { } )
olMapTool . closeOverlay ( 'clickOpen' )
olMapTool . closeOverlay ( 'pointClickOpen' )
olMapTool . removeGeometryLayer ( 'geometry0' )
request . post ( ` ${ olMapGeoDataHost || 'http://36.2.6.32:8811' } /geoserver-pg/rest/bufferSearch ` )
@ -136,9 +143,120 @@ const OlMap = (props) => {
}
} )
} )
setOlMap ( olMapTool )
}
} , [ olMapGeoDataHost ] )
useEffect ( ( ) => {
if ( patrolList . length && olMap ) {
patrolList . forEach ( ( d , index ) => {
console . log ( d , index ) ;
olMap . addGeometryLayer ( {
features : [
{
name : 'patrolPoint' ,
attributes : {
callbackParams : {
type : 'patrolPoint' ,
id : d . id ,
} ,
callback : ( p ) => {
setPointItem ( d )
olMap . addOverlay ( 'pointClickOpen' , {
id : 'pointClickOpen' ,
offset : [ 0 , 25 ] , // 偏移
position : [ d . longitude , d . latitude ] , // 坐标
autoPan : true ,
autoPanMargin : 100 ,
positioning : 'top-right'
} )
}
} ,
geometry : [ d . longitude , d . latitude ] ,
geometryType : 'Point' ,
} ,
] ,
style : {
icon : {
src : '/assets/images/worker.png' ,
// anchor: [0.5, 1],
scale : 0.08 , // 图标引用
} ,
// stroke: { width: 1, color: '#ffff00' },
// circle: {
// radius: 12, // 直径
// fill: '#ff0000', // 颜色
// stroke: { width: 1, color: '#ffff00' },
// },
} ,
selectStyle : {
icon : {
src : '/assets/images/worker.png' ,
// anchor: [0.5, 1],
scale : 0.08 , // 图标引用
} ,
// circle: {
// radius: 16, // 直径
// fill: '#ff0000', // 颜色
// stroke: { width: 2, color: '#ffff00' },
// },
// stroke: { width: 2, color: '#ffff00' },
} ,
layerName : 'geometry_patrol_' + index
} ) ;
} ) ;
}
} , [ patrolList , olMap ] )
useEffect ( ( ) => {
if ( roadProjectList . length && olMap ) {
roadProjectList . forEach ( ( d , index ) => {
olMap . addGeometryLayer ( {
features : [
{
name : 'roadPoint' ,
attributes : {
callbackParams : {
type : 'roadPoint' ,
id : d . id ,
} ,
callback : ( p ) => {
setPointItem ( d )
olMap . addOverlay ( 'pointClickOpen' , {
id : 'pointClickOpen' ,
offset : [ 0 , 25 ] , // 偏移
position : [ d . longitude , d . latitude ] , // 坐标
// position: [115.944220000000, 28.545380000000],
autoPan : true ,
autoPanMargin : 100 ,
positioning : 'top-right'
} )
}
} ,
geometry : [ d . longitude , d . latitude ] ,
// geometry: [115.944220000000, 28.545380000000],
geometryType : 'Point' ,
} ,
] ,
style : {
icon : {
src : '/assets/images/worker.png' ,
scale : 0.08 , // 图标引用
} ,
} ,
selectStyle : {
icon : {
src : '/assets/images/worker.png' ,
scale : 0.08 , // 图标引用
} ,
} ,
layerName : 'geometry_road_' + index
} ) ;
} ) ;
}
} , [ roadProjectList , olMap ] )
const isRoadProject = pointItem . report_type == 'road'
return (
< div id = "olMap" style = { { position : 'absolute' , height : '100%' , width : "100%" } } >
< div slot = "overlays" style = { { display : 'none' , } } >
@ -171,6 +289,118 @@ const OlMap = (props) => {
}
< / d i v >
< / d i v >
< div slot = "overlays" style = { { display : 'none' , } } >
< div id = "pointClickOpen" style = { {
width : "400px" , zIndex : 100 , right : "24%" , marginTop : "0" , top : "25%" , backgroundImage : ` url(../../../../../assets/images/leadership/beijinglan.png) ` , backgroundPosition : 'center' ,
backgroundSize : '100% 100%' ,
padding : '24px' ,
backgroundRepeat : 'no-repeat' ,
} } >
{ /* <img src='/assets/images/leadership/beijinglan.png' style={{ width: "100%", height: "100%" }} /> */ }
< div style = { { display : "flex" , } } >
< div style = { { width : "50%" , height : "100%" , } } >
{
pointItem . id ?
< Hua shuzu = { [ {
"imgs" : pointItem . conserve_after_pic ?
pointItem . conserve_after_pic [ 0 ] : ""
} , {
"imgs" : pointItem . conserve_before_pic ?
pointItem . conserve_before_pic [ 0 ] : ""
} , {
"imgs" : pointItem . conserve_underway_pic ?
pointItem . conserve_underway_pic [ 0 ] : ""
} ] } / >
: ''
}
< / d i v >
< div style = { { width : "50%" , left : "50%" , } } >
< p style = { { marginTop : "20px" , color : "#FFFFFF" , fontSize : "16px" , fontFamily : "YouSheBiaoTiHei" } } >
{
isRoadProject ?
pointItem . user_name || '--'
:
< >
{
pointItem . road_section_start ? pointItem . road_section_start : ""
} {
pointItem . road_section_start && pointItem . road_section_end ? "——" : ""
} {
pointItem . road_section_end ? pointItem . road_section_end : ""
} {
pointItem . road_section_start || pointItem . road_section_end ? "" : "--"
}
< / >
}
< / p >
< p style = { { color : "rgba(216,240,255,0.8)" , fontSize : "14px" , fontFamily : "PingFangSC-Regular, PingFang SC" } } >
{
isRoadProject ? '上报内容' : '养护内容'
}
< span style = { { color : "#EEF4FF" , marginLeft : "30px" , fontFamily : " PingFangSC-Medium, PingFang SC" , overflowWrap : 'break-word' } } >
{
pointItem . content ? pointItem . content : "--"
}
< / s p a n >
< / p >
{
isRoadProject ? '' :
< p style = { { color : "rgba(216,240,255,0.8)" , fontSize : "14px" , fontFamily : "PingFangSC-Regular, PingFang SC" } } >
负责人
< span style = { { color : "#EEF4FF" , marginLeft : "45px" , fontFamily : " PingFangSC-Medium, PingFang SC" } } >
{
pointItem . user_name ? pointItem . user_name : "--"
}
< / s p a n >
< / p >
}
< p style = { { color : "rgba(216,240,255,0.8)" , fontSize : "14px" , fontFamily : "PingFangSC-Regular, PingFang SC" } } >
日期
< span style = { { color : "#EEF4FF" , marginLeft : "60px" , fontFamily : " PingFangSC-Medium, PingFang SC" } } >
{
pointItem . time ? moment ( pointItem . time ) . format ( "YYYY-MM-DD" ) : "--"
}
< / s p a n >
< / p >
< / d i v >
< / d i v >
{
isRoadProject && pointItem . project ?
< div style = { { paddingTop : 24 } } >
{ [ {
n : '项目名称' ,
k : 'entryName' ,
} , {
n : '项目规模(公里)' ,
k : 'projectMileage' ,
} , {
n : '项目投资(万元)' ,
k : 'investment' ,
} , {
n : '开工时间' ,
k : 'startTime' ,
} , ] . map ( s => {
return (
< p style = { { color : "rgba(216,240,255,0.8)" , fontSize : "14px" , fontFamily : "PingFangSC-Regular, PingFang SC" } } >
{ s . n }
< span style = { { color : "#EEF4FF" , marginLeft : "45px" , fontFamily : " PingFangSC-Medium, PingFang SC" } } >
{
s . k == 'startTime' ?
pointItem . project [ s . k ] ? moment ( pointItem . project [ s . k ] ) . format ( "YYYY-MM-DD" ) : "--"
:
pointItem . project [ s . k ] || "--"
}
< / s p a n >
< / p >
)
} ) }
< / d i v >
: ''
}
< / d i v >
< / d i v >
< / d i v >
)
}
