|
|
|
@ -17,8 +17,8 @@ const tabs = [ |
|
|
|
{ name: '应急避难场所', tab: 'yjbns', className: 'emergency_button' }, |
|
|
|
] |
|
|
|
|
|
|
|
function Map (props) { |
|
|
|
const { dispatch, actions, emergencyList, propTab,setLongitudeLatitude } = props; |
|
|
|
function Map(props) { |
|
|
|
const { dispatch, actions, emergencyList, propTab, setLongitudeLatitude } = props; |
|
|
|
const [delay, setDelay] = useState(true) |
|
|
|
const [tab, setTab] = useState('xfyjwz') |
|
|
|
const [visible, setVisible] = useState(false) |
|
|
|
@ -60,13 +60,13 @@ function Map (props) { |
|
|
|
} |
|
|
|
|
|
|
|
useEffect(() => { |
|
|
|
if (!delay && alarmList?.length > 0 && emergencyList['xfjy']) { |
|
|
|
if (!delay && (alarmList?.length > 0 || emergencyList['xfjy'])) { |
|
|
|
map.clearMap() |
|
|
|
map && renderMarkers() |
|
|
|
map && renderAlarms() |
|
|
|
setMapInitFit() |
|
|
|
} |
|
|
|
}, [delay, alarmList, emergencyList]) |
|
|
|
}, [delay, alarmList, emergencyList, propTab]) |
|
|
|
|
|
|
|
const renderMarkers = () => { |
|
|
|
const data = emergencyList['xfjy'] |
|
|
|
@ -219,11 +219,8 @@ function Map (props) { |
|
|
|
if (result.routes && result.routes.length) { |
|
|
|
// 绘制第一条路线，也可以按需求绘制其它几条路线
|
|
|
|
drawRoute(result.routes[0]) |
|
|
|
props.routeCallback({ routes: result.routes[0] }) |
|
|
|
|
|
|
|
props.alarmOk({ |
|
|
|
alarmInfo: { ...alarmInfo, routes: result.routes[0] }, |
|
|
|
rescueInfo: rescueInfo |
|
|
|
}) |
|
|
|
} |
|
|
|
} else { |
|
|
|
} |
|
|
|
@ -231,7 +228,7 @@ function Map (props) { |
|
|
|
// driving.clear() //清除路线
|
|
|
|
} |
|
|
|
|
|
|
|
function drawRoute (route) { |
|
|
|
function drawRoute(route) { |
|
|
|
var path = parseRouteToPath(route) |
|
|
|
|
|
|
|
var routeLine = new AMap.Polyline({ |
|
|
|
@ -256,13 +253,13 @@ function Map (props) { |
|
|
|
} |
|
|
|
|
|
|
|
//计算两点距离
|
|
|
|
function computeDis (p1, p2) { |
|
|
|
function computeDis(p1, p2) { |
|
|
|
return Math.round(p1.distance(p2)); |
|
|
|
} |
|
|
|
|
|
|
|
// 解析DrivingRoute对象，构造成AMap.Polyline的path参数需要的格式
|
|
|
|
// DrivingResult对象结构参考文档 https://lbs.amap.com/api/javascript-api/reference/route-search#m_DriveRoute
|
|
|
|
function parseRouteToPath (route) { |
|
|
|
function parseRouteToPath(route) { |
|
|
|
var path = [] |
|
|
|
for (var i = 0, l = route.steps.length; i < l; i++) { |
|
|
|
var step = route.steps[i] |
|
|
|
@ -300,24 +297,33 @@ function Map (props) { |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
|
|
|
|
<div className='alarm_confirm'> |
|
|
|
<div className='hande_button' |
|
|
|
onClick={() => { |
|
|
|
map.clearInfoWindow(); |
|
|
|
if (emergencyList['xfjy']?.length > 0) { |
|
|
|
const list = emergencyList['xfjy'].sort((b, a) => computeDis( |
|
|
|
new AMap.LngLat(x.longitude, x.latitude), |
|
|
|
new AMap.LngLat(b.location?.split(',')[0], b.location?.split(',')[1]) |
|
|
|
) - computeDis( |
|
|
|
new AMap.LngLat(x.longitude, x.latitude), |
|
|
|
new AMap.LngLat(a.location?.split(',')[0], a.location?.split(',')[1]) |
|
|
|
)) |
|
|
|
const location = list[0]?.location |
|
|
|
drawDrivings([x.longitude, x.latitude], location.split(','), x, list[0]) |
|
|
|
} |
|
|
|
}} |
|
|
|
>一键护航</div> |
|
|
|
</div> |
|
|
|
{ |
|
|
|
propTab == 'overview' && <div className='alarm_confirm'> |
|
|
|
<div className='hande_button' |
|
|
|
onClick={() => { |
|
|
|
map.clearInfoWindow(); |
|
|
|
if (emergencyList['xfjy']?.length > 0) { |
|
|
|
const list = emergencyList['xfjy'].sort((b, a) => computeDis( |
|
|
|
new AMap.LngLat(x.longitude, x.latitude), |
|
|
|
new AMap.LngLat(b.location?.split(',')[0], b.location?.split(',')[1]) |
|
|
|
) - computeDis( |
|
|
|
new AMap.LngLat(x.longitude, x.latitude), |
|
|
|
new AMap.LngLat(a.location?.split(',')[0], a.location?.split(',')[1]) |
|
|
|
)) |
|
|
|
const location = list[0]?.location |
|
|
|
drawDrivings([x.longitude, x.latitude], location.split(','), x, list[0]) |
|
|
|
|
|
|
|
props.alarmOk({ |
|
|
|
alarmInfo: { ...x }, |
|
|
|
rescueInfo: list[0] |
|
|
|
}) |
|
|
|
setTimeout(() => { |
|
|
|
drawDrivings([x.longitude, x.latitude], location.split(','), x, list[0]) |
|
|
|
}, 200); |
|
|
|
} |
|
|
|
}} |
|
|
|
>一键护航</div> |
|
|
|
</div>} |
|
|
|
</div>, |
|
|
|
document.getElementById(`alarmcontentid${x.location}`)); |
|
|
|
} |
|
|
|
|
