Browse Source

(*)水利gis弹框优化

master
peng.peng 1 year ago
parent
commit
8466ea1d3c
  1. BIN
      super-screen/client/assets/images/homepage/water/waterlevelbg.png
  2. 57
      super-screen/client/src/sections/water-prevention/containers/gis.js
  3. 42
      super-screen/client/src/sections/water-prevention/containers/gis.less

BIN
super-screen/client/assets/images/homepage/water/waterlevelbg.png

Binary file not shown.

After

Width:  |  Height:  |  Size: 66 KiB

57
super-screen/client/src/sections/water-prevention/containers/gis.js

@ -34,13 +34,14 @@ function Map(props) {
});
map = new AMap.Map(MAPDOMID, {
center: [116.054664, 28.538966],
center: [116.061261, 28.509558],
zoomEnable: true,
dragEnable: true,
viewMode: '3D',
pitch: 22.9,
pitch: 48.10000000000003,
labelzIndex: 130,
zoom: 10.3,
zoom: 10.75,
rotation: 12.299999999999997,
cursor: 'pointer',
mapStyle: 'amap://styles/300b147a96946a4f1c1b1b8eb1f92f76',
layers: [
@ -94,10 +95,10 @@ function Map(props) {
const renderMarkers = () => {
map.clearMap();
map.setZoom(10.3)
map.setCenter([116.054664, 28.538966])
map.setPitch(22.9)
map.setRotation(1.7000)
// map.setZoom(10.3)
// map.setCenter([116.054664, 28.538966])
// map.setPitch(48.10000000000003)
// map.setRotation(1.7000)
if (loca && heatmap) loca.remove(heatmap)
//初始层级 zoom14以下显示聚合点
@ -434,8 +435,8 @@ function Map(props) {
gridLayer.setSource(geo);
gridLayer.setStyle({
unit: 'meter',
radius: 600,
gap: 0,
radius: 400,
gap: 10,
altitude: 100,
// height: function (index, feature) {
// return 6000
@ -449,7 +450,7 @@ function Map(props) {
// return 'red'
// }
height: function (index, feature) {
const baseHeigh = 1400
const baseHeigh = 700
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 :
@ -501,6 +502,42 @@ function Map(props) {
text.show();
text.setText(`${s.waterLevel || '--'}m`)
text.setPosition(new AMap.LngLat(s.lng, s.lat));
let infowindow = new AMap.InfoWindow({
isCustom: true, //使用自定义窗体
content: `<div id="water-level" class="water-level-infowindow">
<div style="height:${360}px;" id="contentid${s?.name}"></div></div>`,
offset: new AMap.Pixel(100, 120)
});
text.on('click', () => {
infowindow.open(map, new AMap.LngLat(s.lng, s.lat));
setTimeout(() => {
if (document.getElementById(`contentid${s.name}`)) {
map.setCenter(new AMap.LngLat(s.lng, s.lat))
render(<div>
<div className='gis_exit'
style={{ right: 6, top: 67 }}
onClick={() => {
map.setCenter([115.922069, 28.554867])
map.clearInfoWindow();
}} />
<div className='gis_item'>
<span className='gis_title'>监测站</span>
<span className='gis_text'>{s?.name}</span>
</div>
<div className='gis_item'>
<span className='gis_title'>实时水位</span>
<span className='gis_text'>{`${s.waterLevel || '--'}m`}</span>
</div>
</div>,
document.getElementById(`contentid${s?.name}`));
}
}, 50);
})
})

42
super-screen/client/src/sections/water-prevention/containers/gis.less

@ -179,6 +179,48 @@
}
}
.water-level-infowindow {
width: 322px;
height: 234.43px;
background: url('/assets/images/homepage/water/waterlevelbg.png') no-repeat;
background-size: 100% 100%;
padding-left: 22px;
padding-top: 140px;
color: #fff;
.gis_exit {
cursor: pointer;
position: absolute;
right: 9px;
top: 42px;
width: 30.75px;
height: 23px;
background: url('/assets/images/homepage/communtity/exit.png') no-repeat;
background-size: 100% 100%;
}
.gis_item {
height: 35px;
background-image: linear-gradient(180deg, #0555a791 0%, #022a6f91 100%);
width: 93%;
display: flex;
align-items: center;
padding-left: 20px;
.gis_title {
font-family: SourceHanSansCN-Regular;
font-weight: 400;
font-size: 14px;
color: #C3E6FF;
letter-spacing: 0;
margin-right: 12px;
}
}
}
.personinfowindow {
width: 302px;
height: 420px;

Loading…
Cancel
Save