|
|
|
@ -1,8 +1,8 @@ |
|
|
|
import React, { useEffect, useState } from 'react'; |
|
|
|
import { connect } from 'react-redux'; |
|
|
|
import { render } from 'react-dom'; |
|
|
|
import { Row, Col, Modal, Form, Input, Select } from 'antd'; |
|
|
|
import { heatmapData } from '../constant/index' |
|
|
|
import { Row, Col, Modal, Form, Input, Select, Button } from 'antd'; |
|
|
|
import FireAddForm from '../components/alarm-add' |
|
|
|
import './gis.less' |
|
|
|
const MAPDOMID = 'fs-amap-container-fire'; |
|
|
|
const LOCATION_MAP_ID = 'location_map_id'; |
|
|
|
@ -67,7 +67,6 @@ function Map(props) { |
|
|
|
setDelay(false) |
|
|
|
}, 1000); |
|
|
|
map && renderAlarms() |
|
|
|
loca && renderHeapLayer() |
|
|
|
}); |
|
|
|
|
|
|
|
map.on('click', (e) => { |
|
|
|
@ -129,222 +128,6 @@ function Map(props) { |
|
|
|
|
|
|
|
}, [locationVisible]) |
|
|
|
|
|
|
|
const renderMarkers = () => { |
|
|
|
map.clearMap(); |
|
|
|
map.setZoom(10.3) |
|
|
|
map.setCenter([116.054664, 28.538966]) |
|
|
|
map.setPitch(22.9) |
|
|
|
map.setRotation(1.7000) |
|
|
|
if (loca && heatmap) loca.remove(heatmap) |
|
|
|
if (tab == 'person') { |
|
|
|
|
|
|
|
var geo = new Loca.GeoJSONSource({ |
|
|
|
data: heatmapData |
|
|
|
}); |
|
|
|
|
|
|
|
heatmap = new Loca.HeatMapLayer({ |
|
|
|
// loca,
|
|
|
|
zIndex: 10, |
|
|
|
opacity: 1, |
|
|
|
visible: true, |
|
|
|
zooms: [2, 22], |
|
|
|
}); |
|
|
|
|
|
|
|
heatmap.setSource(geo, { |
|
|
|
radius: 20, |
|
|
|
unit: 'px', |
|
|
|
height: 10, |
|
|
|
// radius: 10,
|
|
|
|
// unit: 'px',
|
|
|
|
// height: 10,
|
|
|
|
gradient: { |
|
|
|
0.1: 'rgba(50,48,118,1)', |
|
|
|
0.2: 'rgba(127,60,255,1)', |
|
|
|
0.4: 'rgba(166,53,219,1)', |
|
|
|
0.6: 'rgba(254,64,95,1)', |
|
|
|
0.8: 'rgba(255,98,4,1)', |
|
|
|
1: 'rgba(236,220,79,1)', |
|
|
|
}, |
|
|
|
value: function (index, feature) { |
|
|
|
return feature.properties.count; |
|
|
|
}, |
|
|
|
min: 0, |
|
|
|
max: 10, //4.6
|
|
|
|
heightBezier: [0, .53, .37, .98], |
|
|
|
}); |
|
|
|
loca.add(heatmap); |
|
|
|
|
|
|
|
map.on('click', (e) => { |
|
|
|
const feat = heatmap.queryFeature(e.pixel.toArray()); |
|
|
|
const random = Math.random() |
|
|
|
if (feat) { |
|
|
|
let infowindow = new AMap.InfoWindow({ |
|
|
|
isCustom: true, //使用自定义窗体
|
|
|
|
content: `<div id="map-content" class="gis-infowindow">
|
|
|
|
<div style="height:${330}px;" id="contentidheatmap${random}"></div></div>`, |
|
|
|
offset: new AMap.Pixel(133, 260) |
|
|
|
}); |
|
|
|
|
|
|
|
let position = map.getCenter(); |
|
|
|
infowindow.open(map, position); |
|
|
|
setTimeout(() => { |
|
|
|
if (document.getElementById(`contentidheatmap${random}`)) { |
|
|
|
render(<div> |
|
|
|
<div className='gis_exit' onClick={() => { |
|
|
|
map.clearInfoWindow(); |
|
|
|
}} /> |
|
|
|
<div className='gis_item'> |
|
|
|
<span className='gis_title'>小区名称</span> |
|
|
|
<span className='gis_text'>小区名称</span> |
|
|
|
</div> |
|
|
|
<div className='gis_item'> |
|
|
|
<span className='gis_title'>人口</span> |
|
|
|
<span className='gis_text'>2344人</span> |
|
|
|
</div> |
|
|
|
<div className='gis_item'> |
|
|
|
<span className='gis_title'>新生儿</span> |
|
|
|
<span className='gis_text'>23人</span> |
|
|
|
</div> |
|
|
|
<div className='gis_item'> |
|
|
|
<span className='gis_title'>老人</span> |
|
|
|
<span className='gis_text'>342人</span> |
|
|
|
</div> |
|
|
|
</div>, |
|
|
|
document.getElementById(`contentidheatmap${random}`)); |
|
|
|
} |
|
|
|
}, 50) |
|
|
|
|
|
|
|
} |
|
|
|
}); |
|
|
|
} else { |
|
|
|
//初始层级 zoom14以下显示聚合点
|
|
|
|
const data = [ |
|
|
|
{ lng: 116.117906, lat: 28.678096, type: 'home', name: '廉租房1', kind: 'markergreen' }, |
|
|
|
{ lng: 116.195238, lat: 28.842114, type: 'home', name: '廉租房2', kind: 'markerblue' }, |
|
|
|
{ lng: 116.037227, lat: 28.558811, type: 'home', name: '廉租房3', kind: 'markeryellow' }, |
|
|
|
{ lng: 115.925856, lat: 28.558811, type: 'home', name: '廉租房4', kind: 'markergreen' }, |
|
|
|
{ lng: 115.989847, lat: 28.484411, type: 'home', name: '廉租房5', kind: 'markergreen' }, |
|
|
|
|
|
|
|
{ lng: 116.054664, lat: 28.538966, type: 'device', name: '廉租房1', kind: 'markergreen' }, |
|
|
|
{ lng: 116.074711, lat: 28.746745, type: 'device', name: '廉租房2', kind: 'markerblue' }, |
|
|
|
{ lng: 116.111632, lat: 28.56532, type: 'device', name: '廉租房3', kind: 'markeryellow' }, |
|
|
|
{ lng: 115.978519, lat: 28.56532, type: 'device', name: '廉租房4', kind: 'markergreen' }, |
|
|
|
{ lng: 115.95792, lat: 28.417395, type: 'device', name: '廉租房5', kind: 'markergreen' }, |
|
|
|
] |
|
|
|
|
|
|
|
//zoom14以上显示详情
|
|
|
|
const databig = [ |
|
|
|
{ lng: 115.924246, lat: 28.554835, type: 'device', name: '廉租房1', kind: 'markergreenbig' }, |
|
|
|
{ lng: 115.921495, lat: 28.553053, type: 'device', name: '廉租房2', kind: 'markerbluebig' }, |
|
|
|
{ lng: 115.919115, lat: 28.557256, type: 'device', name: '廉租房3', kind: 'markeryellowbig' }, |
|
|
|
] |
|
|
|
//初始点位显示
|
|
|
|
data.filter(s => s.type == tab).map((x, index) => { |
|
|
|
var marker = new AMap.Marker({ |
|
|
|
position: new AMap.LngLat(x.lng, x.lat), |
|
|
|
// 将一张图片的地址设置为 icon
|
|
|
|
icon: '/assets/images/homepage/communtity/' + x.kind + '.png', |
|
|
|
// 设置了 icon 以后，设置 icon 的偏移量，以 icon 的 [center bottom] 为原点
|
|
|
|
offset: new AMap.Pixel(-13, -30), |
|
|
|
zooms: [3, 14], |
|
|
|
}); |
|
|
|
marker.setTitle(x.name); |
|
|
|
map.add(marker); |
|
|
|
marker.on('click', () => { |
|
|
|
map.setZoom(17.4) |
|
|
|
map.setCenter([115.922069, 28.554867]) |
|
|
|
map.setPitch(47.30) |
|
|
|
map.setRotation(1.7000) |
|
|
|
}) |
|
|
|
}) |
|
|
|
//下钻点位显示
|
|
|
|
databig.map((x, index) => { |
|
|
|
var marker = new AMap.Marker({ |
|
|
|
position: new AMap.LngLat(x.lng, x.lat), |
|
|
|
// 将一张图片的地址设置为 icon
|
|
|
|
icon: '/assets/images/homepage/communtity/' + x.kind + '.png', |
|
|
|
// 设置了 icon 以后，设置 icon 的偏移量，以 icon 的 [center bottom] 为原点
|
|
|
|
offset: new AMap.Pixel(-13, -30), |
|
|
|
zooms: [15, 19], |
|
|
|
}); |
|
|
|
marker.setTitle(x.name); |
|
|
|
map.add(marker); |
|
|
|
|
|
|
|
let infowindow = new AMap.InfoWindow({ |
|
|
|
isCustom: true, //使用自定义窗体
|
|
|
|
content: `<div id="map-content" class="gis-infowindow">
|
|
|
|
<div style="height:${360}px;" id="contentid${x.name}"></div></div>`, |
|
|
|
offset: new AMap.Pixel(233, 260) |
|
|
|
}); |
|
|
|
|
|
|
|
marker.on('click', () => { |
|
|
|
let position = marker.getPosition ? marker.getPosition() : marker.getCenter(); |
|
|
|
infowindow.open(map, position); |
|
|
|
map.setCenter(position) |
|
|
|
setTimeout(() => { |
|
|
|
if (document.getElementById(`contentid${x.name}`)) { |
|
|
|
render(<div> |
|
|
|
<div className='gis_exit' onClick={() => { |
|
|
|
map.setCenter([115.922069, 28.554867]) |
|
|
|
map.clearInfoWindow(); |
|
|
|
}} /> |
|
|
|
<div className='gis_item'> |
|
|
|
<span className='gis_title'>小区名称</span> |
|
|
|
<span className='gis_text'>{x.name}</span> |
|
|
|
</div> |
|
|
|
<div className='gis_item'> |
|
|
|
<span className='gis_title'>人流量</span> |
|
|
|
<span className='gis_text'>123次</span> |
|
|
|
<span className='gis_title' style={{ marginLeft: 20 }}>房龄</span> |
|
|
|
<span className='gis_text'>9年</span> |
|
|
|
</div> |
|
|
|
<div className='gis_item'> |
|
|
|
<span className='gis_title'>租赁中房屋</span> |
|
|
|
<span className='gis_text'>165套</span> |
|
|
|
</div> |
|
|
|
<div className='gis_item'> |
|
|
|
<span className='gis_title'>网格员</span> |
|
|
|
<span className='gis_text'>张三</span> |
|
|
|
</div> |
|
|
|
<div className='gis_item'> |
|
|
|
<span className='gis_title'>手机号码</span> |
|
|
|
<span className='gis_text'>15765845845</span> |
|
|
|
</div> |
|
|
|
</div>, |
|
|
|
document.getElementById(`contentid${x.name}`)); |
|
|
|
} |
|
|
|
}, 50) |
|
|
|
}) |
|
|
|
}) |
|
|
|
|
|
|
|
if (tab == 'device') { |
|
|
|
const data = [ |
|
|
|
{ lng: 115.921895, lat: 28.556351, type: 'device', name: '廉租房1', kind: 'devicemarker' }, |
|
|
|
{ lng: 115.920839, lat: 28.555323, type: 'device', name: '廉租房2', kind: 'devicemarker' }, |
|
|
|
{ lng: 115.918329, lat: 28.55445, type: 'device', name: '廉租房3', kind: 'devicemarker' }, |
|
|
|
{ lng: 115.919309, lat: 28.553166, type: 'device', name: '廉租房1', kind: 'devicemarker' }, |
|
|
|
{ lng: 115.921585, lat: 28.553925, type: 'device', name: '廉租房2', kind: 'devicemarker' }, |
|
|
|
{ lng: 115.92565, lat: 28.556996, type: 'device', name: '廉租房3', kind: 'devicemarker' }, |
|
|
|
{ lng: 115.922671, lat: 28.558769, type: 'device', name: '廉租房1', kind: 'devicemarker' }, |
|
|
|
] |
|
|
|
|
|
|
|
data.filter(s => s.type == tab).map((x, index) => { |
|
|
|
var marker = new AMap.Marker({ |
|
|
|
position: new AMap.LngLat(x.lng, x.lat), |
|
|
|
// 将一张图片的地址设置为 icon
|
|
|
|
icon: '/assets/images/homepage/communtity/' + x.kind + '.png', |
|
|
|
// 设置了 icon 以后，设置 icon 的偏移量，以 icon 的 [center bottom] 为原点
|
|
|
|
offset: new AMap.Pixel(-13, -30), |
|
|
|
zooms: [15, 19], |
|
|
|
}); |
|
|
|
marker.setTitle(x.name); |
|
|
|
map.add(marker); |
|
|
|
}) |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
} |
|
|
|
|
|
|
|
const renderAlarms = () => { |
|
|
|
// map.clearMap();
|
|
|
|
const alarms = [ |
|
|
|
@ -409,43 +192,6 @@ function Map(props) { |
|
|
|
}) |
|
|
|
} |
|
|
|
|
|
|
|
const renderHeapLayer = () => { |
|
|
|
var geo = new Loca.GeoJSONSource({ |
|
|
|
data: heatmapData |
|
|
|
}); |
|
|
|
|
|
|
|
heatmap = new Loca.HeatMapLayer({ |
|
|
|
// loca,
|
|
|
|
zIndex: 60, |
|
|
|
opacity: 1, |
|
|
|
visible: true, |
|
|
|
zooms: [2, 22], |
|
|
|
}); |
|
|
|
|
|
|
|
heatmap.setSource(geo, { |
|
|
|
radius: 50, |
|
|
|
unit: 'px', |
|
|
|
height: 10, |
|
|
|
// radius: 10,
|
|
|
|
// unit: 'px',
|
|
|
|
// height: 10,
|
|
|
|
gradient: { |
|
|
|
0.1: 'rgba(50,48,118,1)', |
|
|
|
0.2: 'rgba(127,60,255,1)', |
|
|
|
0.4: 'rgba(166,53,219,1)', |
|
|
|
0.6: 'rgba(254,64,95,1)', |
|
|
|
0.8: 'rgba(255,98,4,1)', |
|
|
|
1: 'rgba(236,220,79,1)', |
|
|
|
}, |
|
|
|
value: function (index, feature) { |
|
|
|
return feature.properties.count; |
|
|
|
}, |
|
|
|
min: 0, |
|
|
|
max: 10, //4.6
|
|
|
|
heightBezier: [0, .53, .37, .98], |
|
|
|
}); |
|
|
|
loca.add(heatmap); |
|
|
|
} |
|
|
|
|
|
|
|
const renderAlarmInfowindow = (x) => { |
|
|
|
return x && render(<div> |
|
|
|
@ -497,15 +243,17 @@ function Map(props) { |
|
|
|
wrapperCol: { span: 12 }, |
|
|
|
}; |
|
|
|
|
|
|
|
const [form] = Form.useForm(); |
|
|
|
const renderInfowindow = () => { |
|
|
|
return <div className='report_container'> |
|
|
|
<div className='gis_exit' onClick={() => { setVisible(false) }} /> |
|
|
|
<Form |
|
|
|
form={form} |
|
|
|
{...layout} |
|
|
|
name="control-hooks" |
|
|
|
style={{ maxWidth: 600 }} |
|
|
|
> |
|
|
|
<Form.Item name="时间" label="时间"> |
|
|
|
<Form.Item name="createTime" label="时间" rules={[{ required: true, message: '请选择时间!' }]} > |
|
|
|
<Select placeholder="请选择事件时间" > </Select> |
|
|
|
</Form.Item> |
|
|
|
<Form.Item onFocus={() => { |
|
|
|
@ -517,22 +265,24 @@ function Map(props) { |
|
|
|
onClick={() => { setLocationVisible(true) }} |
|
|
|
style={{ color: 'rgba(89, 153, 200, 1)', paddingLeft: 12 }}>请选择事件地点</div> |
|
|
|
</Form.Item> |
|
|
|
<Form.Item name="场所" label="场所" > |
|
|
|
<Form.Item name="场所" label="场所" rules={[{ required: true, message: '请选择场所!' }]}> |
|
|
|
<Select placeholder="请选择事件场所" > </Select> |
|
|
|
</Form.Item> |
|
|
|
<Form.Item name="燃烧物质" label="燃烧物质" > |
|
|
|
<Form.Item name="燃烧物质" label="燃烧物质" rules={[{ required: true, message: '请选择燃烧物质!' }]}> |
|
|
|
<Select placeholder="请选择事件燃烧物质" > </Select> |
|
|
|
</Form.Item> |
|
|
|
<Form.Item name="危险等级" label="危险等级" > |
|
|
|
<Form.Item name="危险等级" label="危险等级" rules={[{ required: true, message: '请选择危险等级!' }]} > |
|
|
|
<Select placeholder="请选择事件危险等级" > </Select> |
|
|
|
</Form.Item> |
|
|
|
</Form> |
|
|
|
|
|
|
|
<div className='flex-row flex-content-around'> |
|
|
|
<div className='cancel_button'>取消</div> |
|
|
|
<div className='report_button'>上报</div> |
|
|
|
<div className='cancel_button' onClick={() => { setVisible(false) }}>取消</div> |
|
|
|
<div onClick={() => { form?.submit() }} className='report_button'>上报</div> |
|
|
|
</div> |
|
|
|
|
|
|
|
</Form> |
|
|
|
|
|
|
|
|
|
|
|
</div > |
|
|
|
} |
|
|
|
|
|
|
|
@ -600,20 +350,13 @@ function Map(props) { |
|
|
|
<div className='gis-top'></div> |
|
|
|
<div className='gis-bottom'></div> |
|
|
|
|
|
|
|
<Modal |
|
|
|
maskClosable={false} |
|
|
|
wrapClassName="custom-modal" |
|
|
|
{/* 新增告警 */} |
|
|
|
<FireAddForm |
|
|
|
visible={visible} |
|
|
|
closable={false} |
|
|
|
width="360px" |
|
|
|
centered |
|
|
|
footer={null} |
|
|
|
bodyStyle={{}} |
|
|
|
destroyOnClose |
|
|
|
> |
|
|
|
{renderInfowindow()} |
|
|
|
</Modal> |
|
|
|
onCancel={() => setVisible(false)} |
|
|
|
/> |
|
|
|
|
|
|
|
{/* 位置选点 */} |
|
|
|
<Modal |
|
|
|
maskClosable={false} |
|
|
|
wrapClassName="custom-modal" |
|
|
|
|
