（*）水利gis弹框优化

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);
+
+            })
         })
 
 

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;