|
|
@ -17,7 +17,7 @@ const MARKER_IMG_NAME = { |
|
|
markeryellow: '廉租房', |
|
|
markeryellow: '廉租房', |
|
|
} |
|
|
} |
|
|
function Map(props) { |
|
|
function Map(props) { |
|
|
const { trendData, waterLevelAlarms } = props; |
|
|
const { trendData, waterLevelAlarms, emergencyList } = props; |
|
|
const [delay, setDelay] = useState(true) |
|
|
const [delay, setDelay] = useState(true) |
|
|
const [tab, setTab] = useState('overview') |
|
|
const [tab, setTab] = useState('overview') |
|
|
|
|
|
|
|
|
@ -82,70 +82,6 @@ function Map(props) { |
|
|
// }, 1000);
|
|
|
// }, 1000);
|
|
|
}; |
|
|
}; |
|
|
|
|
|
|
|
|
const createText = () => { |
|
|
|
|
|
var text = new AMap.Text({ |
|
|
|
|
|
text: '南昌县', |
|
|
|
|
|
anchor: 'center', // 设置文本标记锚点
|
|
|
|
|
|
draggable: false, |
|
|
|
|
|
// cursor: 'pointer',
|
|
|
|
|
|
zooms: [3, 11], |
|
|
|
|
|
style: { |
|
|
|
|
|
'padding': '.75rem 1.25rem', |
|
|
|
|
|
'margin-bottom': '1rem', |
|
|
|
|
|
'border-radius': '.25rem', |
|
|
|
|
|
'background-color': 'rgba(238,77,90,0.001)', |
|
|
|
|
|
'width': '8rem', |
|
|
|
|
|
'border-width': 0, |
|
|
|
|
|
//'box-shadow': '0 2px 6px 0 rgba(255, 255, 255, .1)',
|
|
|
|
|
|
'text-align': 'center', |
|
|
|
|
|
'font-size': '14px', |
|
|
|
|
|
'color': '#AFEFFF', |
|
|
|
|
|
'opacity': 1, |
|
|
|
|
|
// 'font-weight': 'bold'
|
|
|
|
|
|
}, |
|
|
|
|
|
position: [115.934664, 28.538966] |
|
|
|
|
|
}); |
|
|
|
|
|
text.setMap(map); |
|
|
|
|
|
|
|
|
|
|
|
} |
|
|
|
|
|
const drawBounds = () => { |
|
|
|
|
|
let district = null; |
|
|
|
|
|
let polygons = []; |
|
|
|
|
|
//加载行政区划插件
|
|
|
|
|
|
if (!district) { |
|
|
|
|
|
//实例化DistrictSearch
|
|
|
|
|
|
let opts = { |
|
|
|
|
|
subdistrict: 0, //获取边界不需要返回下级行政区
|
|
|
|
|
|
extensions: 'all', //返回行政区边界坐标组等具体信息
|
|
|
|
|
|
level: 'district' //查询行政级别为 市
|
|
|
|
|
|
}; |
|
|
|
|
|
district = new AMap.DistrictSearch(opts); |
|
|
|
|
|
} |
|
|
|
|
|
//行政区查询
|
|
|
|
|
|
district.setLevel('district') |
|
|
|
|
|
district.search('南昌县', function (status, result) { |
|
|
|
|
|
map.remove(polygons)//清除上次结果
|
|
|
|
|
|
polygons = []; |
|
|
|
|
|
let bounds = result.districtList[0].boundaries; |
|
|
|
|
|
if (bounds) { |
|
|
|
|
|
for (let i = 0, l = bounds.length; i < l; i++) { |
|
|
|
|
|
//生成行政区划polygon
|
|
|
|
|
|
let polygon = new AMap.Polygon({ |
|
|
|
|
|
strokeWeight: 1, |
|
|
|
|
|
path: bounds[i], |
|
|
|
|
|
fillOpacity: 0.4, |
|
|
|
|
|
fillColor: '#1F2F4D', |
|
|
|
|
|
strokeColor: '#DE7B35', |
|
|
|
|
|
fillOpacity: 0.35, //填充透明度
|
|
|
|
|
|
}); |
|
|
|
|
|
polygons.push(polygon); |
|
|
|
|
|
} |
|
|
|
|
|
} |
|
|
|
|
|
map.add(polygons) |
|
|
|
|
|
// map.setFitView(polygons);//视口自适应
|
|
|
|
|
|
}); |
|
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
// 初始化GIS 组件销毁清空定时器
|
|
|
// 初始化GIS 组件销毁清空定时器
|
|
|
useEffect(() => { |
|
|
useEffect(() => { |
|
|
loadMap(); |
|
|
loadMap(); |
|
|
@ -429,145 +365,18 @@ function Map(props) { |
|
|
{ name: '实时监测', tab: 'overview' }, |
|
|
{ name: '实时监测', tab: 'overview' }, |
|
|
{ name: '应急抢险', tab: 'emergency' } |
|
|
{ name: '应急抢险', tab: 'emergency' } |
|
|
] : [ |
|
|
] : [ |
|
|
{ name: '应急机构', tab: 'yjjg', className: 'emergency_button' }, |
|
|
{ name: '应急物资', tab: 'yjwz', className: 'emergency_button' }, |
|
|
{ name: '应急队伍', tab: 'yjdw', className: 'emergency_button' }, |
|
|
{ name: '消防救援', tab: 'xfjy', className: 'emergency_button' }, |
|
|
{ name: '应急专家', tab: 'yjzj', className: 'emergency_button' }, |
|
|
{ name: '人民武装部', tab: 'rmwzb', className: 'emergency_button' }, |
|
|
{ name: '医疗机构', tab: 'yljg', className: 'emergency_button' }, |
|
|
{ name: '医疗救援', tab: 'yljy', className: 'emergency_button' }, |
|
|
{ name: '避难场所', tab: 'bncs', className: 'emergency_button' }, |
|
|
{ name: '应急避难场所', tab: 'yjbns', className: 'emergency_button' }, |
|
|
] |
|
|
] |
|
|
|
|
|
|
|
|
const renderLayer = () => { |
|
|
|
|
|
if (!loca) return; |
|
|
|
|
|
const dataSource = trendData; |
|
|
|
|
|
|
|
|
|
|
|
if (gridLayer && loca) loca.remove(gridLayer) |
|
|
|
|
|
|
|
|
|
|
|
let data = [] |
|
|
|
|
|
dataSource.map(x => { |
|
|
|
|
|
data.push({ |
|
|
|
|
|
"type": "Feature", "properties": { "time": 1534296083, x }, |
|
|
|
|
|
"geometry": { "coordinates": [x.lng, x.lat], "type": "Point", x } |
|
|
|
|
|
}) |
|
|
|
|
|
}) |
|
|
|
|
|
var geo = new Loca.GeoJSONSource({ |
|
|
|
|
|
data: { |
|
|
|
|
|
"features": data, "type": "FeatureCollection" |
|
|
|
|
|
} |
|
|
|
|
|
}); |
|
|
|
|
|
|
|
|
|
|
|
gridLayer = new Loca.GridLayer({ |
|
|
|
|
|
// loca,
|
|
|
|
|
|
zIndex: 10, |
|
|
|
|
|
opacity: 1, |
|
|
|
|
|
visible: true, |
|
|
|
|
|
zooms: [2, 22], |
|
|
|
|
|
acceptLight: true, |
|
|
|
|
|
// shinniness: 0,
|
|
|
|
|
|
// cullface: 'none',
|
|
|
|
|
|
// depth: true,
|
|
|
|
|
|
// hasSide: true,
|
|
|
|
|
|
}); |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
var colors = ['#FAE200', '#D27E37', '#C53634', '#C12B6E', '#A92E9A', '#67238A', '#211A50', '#18244E'].reverse(); |
|
|
|
|
|
var heights = [100, 200, 400, 600, 800, 1400, 1800, 4000]; |
|
|
|
|
|
gridLayer.setSource(geo); |
|
|
|
|
|
gridLayer.setStyle({ |
|
|
|
|
|
unit: 'meter', |
|
|
|
|
|
radius: 200, |
|
|
|
|
|
gap: 0, |
|
|
|
|
|
altitude: 100, |
|
|
|
|
|
// height: function (index, feature) {
|
|
|
|
|
|
// return 6000
|
|
|
|
|
|
|
|
|
|
|
|
// },
|
|
|
|
|
|
// topColor: function (index, feature) {
|
|
|
|
|
|
// console.log(feature)
|
|
|
|
|
|
// return 'red'
|
|
|
|
|
|
// },
|
|
|
|
|
|
// sideColor: function (index, feature) {
|
|
|
|
|
|
// return 'red'
|
|
|
|
|
|
// }
|
|
|
|
|
|
height: function (index, feature) { |
|
|
|
|
|
const baseHeigh = 1200 |
|
|
|
|
|
return feature.coordinates[0].properties.x.waterLevel > 30 ? baseHeigh * 14 : |
|
|
|
|
|
feature.coordinates[0].properties.x.waterLevel > 25 ? baseHeigh * 13 : |
|
|
|
|
|
feature.coordinates[0].properties.x.waterLevel > 20 ? baseHeigh * 12 : |
|
|
|
|
|
feature.coordinates[0].properties.x.waterLevel > 15 ? baseHeigh * 11 : |
|
|
|
|
|
feature.coordinates[0].properties.x.waterLevel > 10 ? baseHeigh * 10 : |
|
|
|
|
|
feature.coordinates[0].properties.x.waterLevel > 0 ? baseHeigh * 9 : 0 |
|
|
|
|
|
|
|
|
|
|
|
}, |
|
|
|
|
|
topColor: function (index, feature) { |
|
|
|
|
|
return feature.coordinates[0].properties.x.waterLevel > Number(feature.coordinates[0].properties.x.alert) ? 'rgba(255,136,140,1)' : 'rgba(117,154,206,1)' |
|
|
|
|
|
}, |
|
|
|
|
|
sideColor: function (index, feature) { |
|
|
|
|
|
return feature.coordinates[0].properties.x.waterLevel > Number(feature.coordinates[0].properties.x.alert) ? 'rgba(255,136,140,1)' : 'rgba(117,154,206,1)' |
|
|
|
|
|
}, |
|
|
|
|
|
sideTopColor: function (index, feature) { |
|
|
|
|
|
return feature.coordinates[0].properties.x.waterLevel > Number(feature.coordinates[0].properties.x.alert) ? 'rgba(255,136,140,1)' : 'rgba(117,154,206,1)' |
|
|
|
|
|
}, |
|
|
|
|
|
sideBottomColor: function (index, feature) { |
|
|
|
|
|
return feature.coordinates[0].properties.x.waterLevel > Number(feature.coordinates[0].properties.x.alert) ? 'rgba(255,136,140,0.5)' : 'rgba(117,154,206,0.5)' |
|
|
|
|
|
}, |
|
|
|
|
|
}); |
|
|
|
|
|
gridLayer = gridLayer |
|
|
|
|
|
loca.add(gridLayer); |
|
|
|
|
|
|
|
|
|
|
|
dataSource.map(s => { |
|
|
|
|
|
// 创建纯文本标记
|
|
|
|
|
|
var text = new AMap.Text({ |
|
|
|
|
|
text: '纯文本标记', |
|
|
|
|
|
anchor: 'center', // 设置文本标记锚点
|
|
|
|
|
|
// draggable: true,
|
|
|
|
|
|
cursor: 'pointer', |
|
|
|
|
|
angle: 0, |
|
|
|
|
|
// visible: false,
|
|
|
|
|
|
offset: [0, -s.waterLevel], |
|
|
|
|
|
style: { |
|
|
|
|
|
'padding': '2px 4px', |
|
|
|
|
|
'margin-bottom': '1rem', |
|
|
|
|
|
'border-radius': '.25rem', |
|
|
|
|
|
'background-color': '#143857', |
|
|
|
|
|
// 'width': '12rem',
|
|
|
|
|
|
'border-width': 0, |
|
|
|
|
|
'box-shadow': '0 2px 6px 0 rgba(255, 255, 255, .3)', |
|
|
|
|
|
'text-align': 'center', |
|
|
|
|
|
'font-size': '14px', |
|
|
|
|
|
'color': '#DCF2FD', |
|
|
|
|
|
}, |
|
|
|
|
|
}); |
|
|
|
|
|
text.setMap(map); |
|
|
|
|
|
text.show(); |
|
|
|
|
|
text.setText(`${s.waterLevel || '--'}m`) |
|
|
|
|
|
text.setPosition(new AMap.LngLat(s.lng, s.lat)); |
|
|
|
|
|
}) |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
// // 拾取
|
|
|
|
|
|
// map.on('mousemove', (e) => {
|
|
|
|
|
|
// text.setMap(map);
|
|
|
|
|
|
// var feat = gridLayer.queryFeature(e.pixel.toArray());
|
|
|
|
|
|
|
|
|
|
|
|
// if (feat) {
|
|
|
|
|
|
// text.show();
|
|
|
|
|
|
// text.setText(feat.coordinates[0].properties.x.waterLevel + 'm');
|
|
|
|
|
|
// text.setPosition(e.lnglat);
|
|
|
|
|
|
|
|
|
|
|
|
// } else {
|
|
|
|
|
|
// text.hide();
|
|
|
|
|
|
// }
|
|
|
|
|
|
// });
|
|
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
return ( |
|
|
return ( |
|
|
<> |
|
|
<> |
|
|
{/* 延缓加载遮罩 */} |
|
|
{/* 延缓加载遮罩 */} |
|
|
{delay && <div id='delaydiv' style={{ |
|
|
{delay && <div className='map_delay'><div className='delay_img' /></div>} |
|
|
width: '100%', height: '100%', left: 0, top: 0, zIndex: 1000, background: '#000000', position: 'absolute', |
|
|
|
|
|
display: 'flex', alignItems: 'center', justifyContent: 'center' |
|
|
|
|
|
}}> |
|
|
|
|
|
</div>} |
|
|
|
|
|
|
|
|
|
|
|
{/* 地图容器 */} |
|
|
{/* 地图容器 */} |
|
|
<div className="gis" id={MAPDOMID} /> |
|
|
<div className="gis" id={MAPDOMID} /> |
|
|
@ -580,13 +389,17 @@ function Map(props) { |
|
|
onClick={() => { |
|
|
onClick={() => { |
|
|
setTab(s.tab) |
|
|
setTab(s.tab) |
|
|
s.className ? props.changeEmengencyTab(s.tab) : props.changeTab(s.tab) |
|
|
s.className ? props.changeEmengencyTab(s.tab) : props.changeTab(s.tab) |
|
|
|
|
|
if (s.tab == 'emergency') { |
|
|
|
|
|
setTab('yjwz') |
|
|
|
|
|
props.changeEmengencyTab('yjwz') |
|
|
|
|
|
} |
|
|
}} |
|
|
}} |
|
|
> |
|
|
> |
|
|
<div className={ |
|
|
<div className={ |
|
|
s.className ? `button_${s.tab} ${tab == s.tab ? 'button_' + s.tab + '_select' : ''}` : |
|
|
s.className ? `button_img_${(index + 1)} ${tab == s.tab ? 'button_img_' + (index + 1) + '_select' : ''}` : |
|
|
`button_img ${tab == s.tab ? 'button_img_select' : ''}`} /> |
|
|
`button_img ${tab == s.tab ? 'button_img_select' : ''}`} /> |
|
|
<div>{s.name}</div> |
|
|
<div>{s.name}</div> |
|
|
{s.className && <div className='dotbg'>7</div>} |
|
|
{s.className && <div className='dotbg'>{emergencyList[s.tab]?.length}</div>} |
|
|
</div> |
|
|
</div> |
|
|
{/* { |
|
|
{/* { |
|
|
tab !== 'overview' && <> <div className='icon_left'></div> |
|
|
tab !== 'overview' && <> <div className='icon_left'></div> |
|
|
|
