diff --git a/super-screen/client/assets/images/homepage/water/waterlevelbg.png b/super-screen/client/assets/images/homepage/water/waterlevelbg.png new file mode 100644 index 0000000..c499da1 Binary files /dev/null and b/super-screen/client/assets/images/homepage/water/waterlevelbg.png differ diff --git a/super-screen/client/src/sections/water-prevention/containers/gis.js b/super-screen/client/src/sections/water-prevention/containers/gis.js index 840b4be..c4babf1 100644 --- a/super-screen/client/src/sections/water-prevention/containers/gis.js +++ b/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: `
+
`, + 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(
+
{ + map.setCenter([115.922069, 28.554867]) + map.clearInfoWindow(); + }} /> +
+ 监测站: + {s?.name} +
+
+ 实时水位: + {`${s.waterLevel || '--'}m`} +
+
, + document.getElementById(`contentid${s?.name}`)); + } + }, 50); + + }) }) diff --git a/super-screen/client/src/sections/water-prevention/containers/gis.less b/super-screen/client/src/sections/water-prevention/containers/gis.less index e335c68..cffde70 100644 --- a/super-screen/client/src/sections/water-prevention/containers/gis.less +++ b/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;