Merge branch 'qzc-dev'

src/models/_/real.js

@@ -24,7 +24,8 @@ export const DrpRealPromiseWX = new CachePromise(
   // 5000
 
   // 全部雨量站点信息,没有雨量值
-  () => httpget2(apiurl.station.rainfallStation.list)//agnp.geojson  adcd.geojson
+  // () => httpget2(apiurl.station.rainfallStation.list)//agnp.geojson  adcd.geojson
+  () => httppost2(apiurl.home.yq)//agnp.geojson  adcd.geojson
     .then(({ data }) => data || [])
     .then((data) => {
       return data;

src/models/map/index.ts

@@ -42,6 +42,7 @@ function initState() {
       XxjyswzLayer: false,
       SmallSkRiskLayer: false,
       XjRealDrpLayer: false,
+      WxqLayer: false,
       RainLayer: false,
       RainLayerRadar: false,
       RainLayerRh: false,

src/models/runtime/index.ts

@@ -17,6 +17,7 @@ export const runtime = createModel<RootModel>()({
     calculatingLoop: false,
     mouseCoords: undefined,
     featurePops: [], // [{ id, type, data, lgtd, lttd, elev }]
+    rainDrpData:[],
     infoDlg: undefined,
     cameraTarget: undefined,
     markers: {},
@@ -56,6 +57,9 @@ export const runtime = createModel<RootModel>()({
   } as RuntimeState,
 
   reducers: {
+    setRainDrpData(state, o) {
+      return { ...state, rainDrpData: o }
+    },
     setIsReadObject(state, o) {
       return { ...state, isReadObject: o }
     },

src/views/Home/MapCtrl/M2D/layermgr2d.js

@@ -133,7 +133,7 @@ export default class LayerMgr2D extends LayerMgr {
     this.addLayer(new BouaLayer2D({ visible: visible[BouaLayer2D.LayerName], setting, dispatch }));
     // this.addLayer(new BouaInLayer2D({ visible: visible[BouaInLayer2D.LayerName], setting, dispatch }));
     // this.addLayer(new BouaOutLayer2D({ visible: visible[BouaOutLayer2D.LayerName], setting, dispatch }));
-
+    this.addLayer(new WxqLayer2D({ visible: visible[WxqLayer2D.LayerName], setting, dispatch }));
 
     //RainLayer2DRadar 测雨雷达
     // this.addLayer(new RainLayer2DRadar({ visible: visible[RainLayer2DRadar.LayerName], setting, dispatch }));

src/views/Home/MapCtrl/M2D/layers/WxqLayer2D.js

@@ -8,215 +8,65 @@ import { DcpjPromise } from '../../../../../models/_/dcpj';
 import { geometryCenter, geometryBound } from '../../../../../utils/tools';
 
 export default class WxqLayer2D extends POILayer2D {
-  static LayerName = 'Dcpj_' + this._type + 'Layer';
+  static LayerName = 'WxqLayer';
 
   constructor(props, type) {
     super(props);
 
-    this._style1 = {};
+    this._style = new Style({
-
+        stroke: new StrokeStyle({
-    this._type = type;
+            color: 'rgba(255,0,0,0.9)',
+            width: 2,
+        }),
+        fill: new FillStyle({
+            color: 'rgba(255,0,0,0.3)',
+        }),
+        zIndex: zindex2d.sx,
+    });;
   }
 
   getLayerName() {
-    //return WxqLayer2D.LayerName;
+    return WxqLayer2D.LayerName;
-    return 'Dcpj_' + this._type + 'Layer';
   }
 
   async dataPromise() {
-    const WXQData = await DcpjPromise(this._type);
+    const radarRangeData = await fetch(`${process.env.PUBLIC_URL}/data/geojson/macheng/wxq2.geojson`)
-    //console.log("WXQData",WXQData);
+        .then(resp => resp.json())
-    //danad:危险区
+        .then(data => data.features)
-    if(this._type === "danad"){
+        .then(features => features.map(({ properties, geometry }) => ({
-      WXQData.forEach(o => {
+                ...properties,
-        this._style1 = new Style({
+                properties,
-          stroke: new StrokeStyle({
+                geometry,
-            color: '#da6361',
+                name: properties.NAME,
-            width: 2,
+                id: properties.PID, 
-          }),
+            })))
-          fill: new FillStyle({
+        .catch(() => []);
-            color: 'rgba(218,99,97,0.5)',
+    const wxq = {}
-          }),
+    radarRangeData.map((item)=>{
-          zIndex: zindex2d.sx,
+        wxq[item.ADCD] = item
-        })
+    })
-      });
+    sessionStorage.setItem('wxq',JSON.stringify(wxq))
-    }
+    return [...radarRangeData];
-    //placement:安置点
-    if(this._type === "placement"){
-      WXQData.forEach(o => {
-        this._style1 = new Style({
-          image: new Icon({
-            src: require("../../../../../assets/icons/azd1.png"),
-            anchor: [0.5, 0.5],
-            opacity: 1,
-            scale: 0.9,
-          }),
-        })
-      });
-    }
-    //transfer:转移路线
-    if(this._type === "transfer"){
-      this._style1 = new Style({
-        stroke: new StrokeStyle({
-          color: 'yellow',
-          width: 2,
-        }),
-        zIndex: zindex2d.sx,
-      })
-    }
-    //flrvvlg:沿河居民户
-    if(this._type === "flrvvlg"){
-      WXQData.forEach(o => {
-        this._style1 = new Style({
-          image: new Icon({
-            src: require("../../../../../assets/icons/yhjmh.png"),
-            anchor: [0.5, 0.5],
-            opacity: 1,
-            scale: 0.6,
-          }),
-        })
-      });
-    }
-    //bsnssinfo:企事业单位
-    if(this._type === "bsnssinfo"){
-      WXQData.forEach(o => {
-        this._style1 = new Style({
-          image: new Icon({
-            src: require("../../../../../assets/icons/qsydw.png"),
-            anchor: [0.5, 0.5],
-            opacity: 1,
-            scale: 0.6,
-          }),
-        })
-      });
-    }
-    //bridge:桥梁
-    if(this._type === "bridge"){
-      WXQData.forEach(o => {
-        this._style1 = new Style({
-          image: new Icon({
-            src: require("../../../../../assets/icons/ql.png"),
-            anchor: [0.5, 0.5],
-            opacity: 1,
-            scale: 0.6,
-          }),
-        })
-      });
-    }
-    //culvert:路涵
-    if(this._type === "culvert"){
-      WXQData.forEach(o => {
-        this._style1 = new Style({
-          image: new Icon({
-            src: require("../../../../../assets/icons/lh.png"),
-            anchor: [0.5, 0.5],
-            opacity: 1,
-            scale: 0.7,
-          }),
-        })
-      });
-    }
-    //sluice:水闸
-    if(this._type === "sluice"){
-      WXQData.forEach(o => {
-        this._style1 = new Style({
-          image: new Icon({
-            src: require("../../../../../assets/icons/sz.png"),
-            anchor: [0.5, 0.5],
-            opacity: 1,
-            scale: 0.7,
-          }),
-        })
-      });
-    }
-    //daminfo:塘(堰)坝
-    if(this._type === "daminfo"){
-      WXQData.forEach(o => {
-        this._style1 = new Style({
-          image: new Icon({
-            src: require("../../../../../assets/icons/tyb.png"),
-            anchor: [0.5, 0.5],
-            opacity: 1,
-            scale: 0.7,
-          }),
-        })
-      });
-    }
-    //dike:堤防
-    if(this._type === "dike"){
-      var lightStroke = new Style({
-        stroke: new StrokeStyle({
-          color: "#C971E8",
-          width: 20,
-          lineDash: [10,40],
-          lineDashOffset: 6,
-          lineCap:"butt"
-        })
-      });
-
-      var darkStroke = new Style({
-        stroke: new StrokeStyle({
-          color: "#C971E8",
-          width: 2,
-          lineDash: [40,10],
-        })
-      });
-
-      WXQData.forEach(o => {
-        this._style1 = [lightStroke, darkStroke]
-      });
-    }
-    //wbrinfo:无线预警广播
-    if(this._type === "wbrinfo"){
-      WXQData.forEach(o => {
-        this._style1 = new Style({
-          image: new Icon({
-            src: require("../../../../../assets/icons/gb.png"),
-            anchor: [0.5, 0.5],
-            opacity: 1,
-            scale: 0.7,
-          }),
-        })
-      });
-    }
-
-    return [...WXQData];
   }
 
   styleFunc = ({ props }) => {
     if (!this.isVisible()) {
       return null;
     }
-    //console.log(props);
+    return this._style;
-    return this._style1;
   }
 
   onFeatureClicked(feature, dispatch) {
     const { data } = feature.getProperties();
     if (data) {
-      if(this._type !== "danad" && this._type !== "transfer" && this._type !== "dike"){
-        dispatch.runtime.setFeaturePop({
-          id: data.ADCD,
-          type: this._type,
-          data,
-          lgtd: data.lgtd,
-          lttd: data.lttd,
-          elev: data.elev,
-        })
-      }else{
-        const bbox = geometryBound(data.geometry);
         const center = geometryCenter(data.geometry);
-        if (bbox && center) {
+        dispatch.runtime.setFeaturePop({
-          dispatch.runtime.setFeaturePop({
+            id: data.PID,
-            id: data.ADCD,
+            type: 'wxq',
-            type: this._type,
             data,
             lgtd: center[0],
             lttd: center[1],
-            elev: center[2],
+        })
-          })
-        }
-      }
     }
   }
 }

src/views/Home/MapCtrl/M2D/layers/WxqLayer2DOld.js

@@ -0,0 +1,222 @@
+import POILayer2D from "./POILayer2D";
+import Style from 'ol/style/Style';
+import StrokeStyle from 'ol/style/Stroke';
+import { zindex2d } from "../../zindex";
+import FillStyle from "ol/style/Fill";
+import Icon from "ol/style/Icon";
+import { DcpjPromise } from '../../../../../models/_/dcpj';
+import { geometryCenter, geometryBound } from '../../../../../utils/tools';
+
+export default class WxqLayer2D extends POILayer2D {
+  static LayerName = 'Dcpj_' + this._type + 'Layer';
+
+  constructor(props, type) {
+    super(props);
+
+    this._style1 = {};
+
+    this._type = type;
+  }
+
+  getLayerName() {
+    //return WxqLayer2D.LayerName;
+    return 'Dcpj_' + this._type + 'Layer';
+  }
+
+  async dataPromise() {
+    const WXQData = await DcpjPromise(this._type);
+    //console.log("WXQData",WXQData);
+    //danad:危险区
+    if(this._type === "danad"){
+      WXQData.forEach(o => {
+        this._style1 = new Style({
+          stroke: new StrokeStyle({
+            color: '#da6361',
+            width: 2,
+          }),
+          fill: new FillStyle({
+            color: 'rgba(218,99,97,0.5)',
+          }),
+          zIndex: zindex2d.sx,
+        })
+      });
+    }
+    //placement:安置点
+    if(this._type === "placement"){
+      WXQData.forEach(o => {
+        this._style1 = new Style({
+          image: new Icon({
+            src: require("../../../../../assets/icons/azd1.png"),
+            anchor: [0.5, 0.5],
+            opacity: 1,
+            scale: 0.9,
+          }),
+        })
+      });
+    }
+    //transfer:转移路线
+    if(this._type === "transfer"){
+      this._style1 = new Style({
+        stroke: new StrokeStyle({
+          color: 'yellow',
+          width: 2,
+        }),
+        zIndex: zindex2d.sx,
+      })
+    }
+    //flrvvlg:沿河居民户
+    if(this._type === "flrvvlg"){
+      WXQData.forEach(o => {
+        this._style1 = new Style({
+          image: new Icon({
+            src: require("../../../../../assets/icons/yhjmh.png"),
+            anchor: [0.5, 0.5],
+            opacity: 1,
+            scale: 0.6,
+          }),
+        })
+      });
+    }
+    //bsnssinfo:企事业单位
+    if(this._type === "bsnssinfo"){
+      WXQData.forEach(o => {
+        this._style1 = new Style({
+          image: new Icon({
+            src: require("../../../../../assets/icons/qsydw.png"),
+            anchor: [0.5, 0.5],
+            opacity: 1,
+            scale: 0.6,
+          }),
+        })
+      });
+    }
+    //bridge:桥梁
+    if(this._type === "bridge"){
+      WXQData.forEach(o => {
+        this._style1 = new Style({
+          image: new Icon({
+            src: require("../../../../../assets/icons/ql.png"),
+            anchor: [0.5, 0.5],
+            opacity: 1,
+            scale: 0.6,
+          }),
+        })
+      });
+    }
+    //culvert:路涵
+    if(this._type === "culvert"){
+      WXQData.forEach(o => {
+        this._style1 = new Style({
+          image: new Icon({
+            src: require("../../../../../assets/icons/lh.png"),
+            anchor: [0.5, 0.5],
+            opacity: 1,
+            scale: 0.7,
+          }),
+        })
+      });
+    }
+    //sluice:水闸
+    if(this._type === "sluice"){
+      WXQData.forEach(o => {
+        this._style1 = new Style({
+          image: new Icon({
+            src: require("../../../../../assets/icons/sz.png"),
+            anchor: [0.5, 0.5],
+            opacity: 1,
+            scale: 0.7,
+          }),
+        })
+      });
+    }
+    //daminfo:塘(堰)坝
+    if(this._type === "daminfo"){
+      WXQData.forEach(o => {
+        this._style1 = new Style({
+          image: new Icon({
+            src: require("../../../../../assets/icons/tyb.png"),
+            anchor: [0.5, 0.5],
+            opacity: 1,
+            scale: 0.7,
+          }),
+        })
+      });
+    }
+    //dike:堤防
+    if(this._type === "dike"){
+      var lightStroke = new Style({
+        stroke: new StrokeStyle({
+          color: "#C971E8",
+          width: 20,
+          lineDash: [10,40],
+          lineDashOffset: 6,
+          lineCap:"butt"
+        })
+      });
+
+      var darkStroke = new Style({
+        stroke: new StrokeStyle({
+          color: "#C971E8",
+          width: 2,
+          lineDash: [40,10],
+        })
+      });
+
+      WXQData.forEach(o => {
+        this._style1 = [lightStroke, darkStroke]
+      });
+    }
+    //wbrinfo:无线预警广播
+    if(this._type === "wbrinfo"){
+      WXQData.forEach(o => {
+        this._style1 = new Style({
+          image: new Icon({
+            src: require("../../../../../assets/icons/gb.png"),
+            anchor: [0.5, 0.5],
+            opacity: 1,
+            scale: 0.7,
+          }),
+        })
+      });
+    }
+
+    return [...WXQData];
+  }
+
+  styleFunc = ({ props }) => {
+    if (!this.isVisible()) {
+      return null;
+    }
+    //console.log(props);
+    return this._style1;
+  }
+
+  onFeatureClicked(feature, dispatch) {
+    const { data } = feature.getProperties();
+    if (data) {
+      if(this._type !== "danad" && this._type !== "transfer" && this._type !== "dike"){
+        dispatch.runtime.setFeaturePop({
+          id: data.ADCD,
+          type: this._type,
+          data,
+          lgtd: data.lgtd,
+          lttd: data.lttd,
+          elev: data.elev,
+        })
+      }else{
+        const bbox = geometryBound(data.geometry);
+        const center = geometryCenter(data.geometry);
+        if (bbox && center) {
+          dispatch.runtime.setFeaturePop({
+            id: data.ADCD,
+            type: this._type,
+            data,
+            lgtd: center[0],
+            lttd: center[1],
+            elev: center[2],
+          })
+        }
+      }
+    }
+  }
+}

src/views/Home/MapCtrl/Map3D/Map3D.js

@@ -240,7 +240,7 @@ export default class Map3D extends BaseMap {
     this.demo = new Demo3D()
 
     this.demo.getQxsy(viewer) //倾斜摄影
-    // this.demo.getDem(viewer) //地形图
+    this.demo.getDem(viewer) //地形图
     this.demo.getWxyx(viewer) //卫星影像
     // this.demo.getCzml2(viewer) //demo
     // this.demo.getGltf(viewer) //模型
@@ -261,10 +261,14 @@ export default class Map3D extends BaseMap {
 
     viewer.camera.setView({
       // destination: Cesium.Cartesian3.fromDegrees(...config.homeCenter3D),
-      destination: Cesium.Cartesian3.fromDegrees(114.771646000,31.496518000,500),
+      // destination: Cesium.Cartesian3.fromDegrees(114.771646000,31.496518000,500),
+      destination: Cesium.Cartesian3.fromDegrees(114.761646000,31.486218000,5000),
       orientation: {
-        heading: Cesium.Math.toRadians(-90),
+        // heading: Cesium.Math.toRadians(90),
-        pitch: Cesium.Math.toRadians(-35.0),
+        // pitch: Cesium.Math.toRadians(-35.0),
+        // roll: 0.0,
+        heading: Cesium.Math.toRadians(0),
+        pitch: Cesium.Math.toRadians(-80.0),
         roll: 0.0
         // heading: Cesium.Math.toRadians(0),
         // pitch: Cesium.Math.toRadians(-90.0),

src/views/Home/MapCtrl/Map3D/demo.js

@@ -9,13 +9,22 @@ export default class LayerMgr {
 
   //加载模型
   getGltf(viewer) {
+    const position = Cesium.Cartesian3.fromDegrees(114.7629, 31.4948,25)
     viewer.entities.add({
-      position: Cesium.Cartesian3.fromDegrees(114.97, 31.47,250),
+      position: position,
       model: { 
           uri: `${process.env.PUBLIC_URL}/models/dam/scene.gltf` ,
           scale: 10,
           runAnimations: false
       },
+      orientation: Cesium.Transforms.headingPitchRollQuaternion(
+        position,
+        new Cesium.HeadingPitchRoll(
+          Cesium.Math.toRadians(90),
+          Cesium.Math.toRadians(0),
+          Cesium.Math.toRadians(0)
+        ) 
+      )
     });
   }
   getWater(viewer) {
@@ -147,8 +156,8 @@ export default class LayerMgr {
       viewer.scene.primitives.add(tileset);
 
 
-      // const offsetHeight = 10
+      const offsetHeight = 5
-      const offsetHeight = -70
+      // const offsetHeight = -70
       const boundingSphere = tileset.boundingSphere 
       const cartographic = Cesium.Cartographic.fromCartesian(boundingSphere.center) 
       const surface = Cesium.Cartesian3.fromRadians(cartographic.longitude, cartographic.latitude, 0.0) 

src/views/Home/MapCtrl/Map3D/layermgr3d.js

@@ -1,6 +1,7 @@
 import LayerMgr from "../layermgr";
 import BouaLayer3D from "./layers/BouaLayer3D";
 import RainLayer3D from "./layers/RainLayer3D";
+import WxqLayer3D from "./layers/WxqLayer3D"
 import RainLayer3DRadar from "./layers/RainLayer3D-radar";
 import RainLayer3DRh from "./layers/RainLayer3D-rh";
 
@@ -60,6 +61,7 @@ export default class LayerMgr3D extends LayerMgr {
     //   //this.viewer.imageryLayers.removeAll();
     //   this.viewer.entities.removeAll();
     // }
+    this.addLayer(new WxqLayer3D({ visible: visible[WxqLayer3D.LayerName], setting, dispatch }));
     // if(visible[RainLayer3DRadar.LayerName]){
     //   this.addLayer(new RainLayer3DRadar({ visible: visible[RainLayer3DRadar.LayerName], setting, dispatch }));
     // }else{

src/views/Home/MapCtrl/Map3D/layers/FeatureLayer3D.js

@@ -8,6 +8,7 @@ export default class FeatureLayer3D extends BaseLayer3D {
     this.rowKey = props.rowKey;
 
     this.highlights = this.getHighlightMap();
+    this._viewer = null;
   }
 
   _updateVisible() {
@@ -33,6 +34,12 @@ export default class FeatureLayer3D extends BaseLayer3D {
     super.setVisible(val);
 
     this._updateVisible();
+    // 这里修改是否显示图层
+    this._viewer.entities.values.forEach((layer) => {
+      if(this.rowKey===layer._name){
+        layer.show = val
+      }
+    })
   }
 
   dataPromise() {
@@ -98,6 +105,7 @@ export default class FeatureLayer3D extends BaseLayer3D {
 
   onAdd(viewer) {
     super.onAdd(viewer);
+    this._viewer = viewer;
     this.loadData();
   }
 

src/views/Home/MapCtrl/Map3D/layers/RainLayer3D.js

@@ -42,6 +42,7 @@ export default class RainLayer3D extends FeatureLayer3D {
     for (const coords of coordsArr) {
       const ent = this._viewer.entities.add({
         show: this.isVisible(),
+        name: this.rowKey,
         polygon: {
           hierarchy: coords,
           material: Cesium.Color.fromCssColorString(record.fill).withAlpha(1),

src/views/Home/MapCtrl/Map3D/layers/WxqLayer3D.js

@@ -0,0 +1,54 @@
+import FeatureLayer3D from "./FeatureLayer3D";
+import { getPolygonHierarchy } from "../utils/cesutil";
+import { zindex2d } from "../../zindex";
+import Style from "ol/style/Style";
+import FillStyle from "ol/style/Fill";
+
+const { Cesium } = window;
+
+export default class WxqLayer3D extends FeatureLayer3D {
+  static LayerName = 'WxqLayer';
+
+  constructor(props) {
+    super(props);
+    this.rowKey = 'wxq_id';
+  }
+
+  getLayerName() {
+    return WxqLayer3D.LayerName;
+  }
+
+  async dataPromise() {
+    const rainData = await fetch(`${process.env.PUBLIC_URL}/data/geojson/macheng/wxq2.geojson`)
+      .then(resp => resp.json())
+      .then(data => data.features)
+      .then(features => features.map(o => ({ ...o.properties, properties:o.properties, geometry: o.geometry, type: 'wxq' })))
+      .catch(() => []);
+    return rainData;
+  }
+
+  addFeature(record) {
+    if (!record.geometry) {
+      return;
+    }
+    const coordsArr = getPolygonHierarchy(record.geometry);
+    if (!coordsArr) {
+      return null;
+    }
+    const ret = [];
+    for (const coords of coordsArr) {
+      const ent = this._viewer.entities.add({
+        name: this.rowKey,
+        show: this.isVisible(),
+        polygon: {
+          hierarchy: coords,
+          material: Cesium.Color.fromCssColorString('rgba(255,0,0,1)').withAlpha(0.3),
+          zIndex: zindex2d.sx
+        }
+      });
+      ret.push(ent);
+    }
+
+    return ret;
+  }
+}

src/views/Home/MapCtrl/Markers/RealDrpMarker.js

@@ -1,32 +1,34 @@
 import React, { useEffect } from 'react';
 import { zindexmarker } from '../zindex';
 import { DRP_COLORS } from "../../../../utils/renutils";
-import {useSelector} from "react-redux";
+import { useDispatch, useSelector } from 'react-redux'
 
 const {
   css,
   physics,
 } = window.popmotionXL;
 
-function renderMarker({ h24 }, { width, highlight }) {
+function renderMarker({ drp }, { width, highlight }) {
 
   let color1;
-  // if (h24 === 0 || h24 === null) {
+  if(drp===null){
-  //   color1 = "#ADB6D9";
+    color1 = '#8c8c8c'
-  // } else if (h24 >= 0.1 && h24 < 10) {
+  }else if(drp<0.1){
-  //   color1 = "#BDEF9A";
+    color1 = '#ffffff'
-  // } else if (h24 >= 10 && h24 < 25) {
+  }else if(drp>=0.1 && drp<10){
-  //   color1 = "#59B666";
+    color1 = 'rgb(167, 240, 143)';
-  // } else if (h24 >= 25 && h24 < 50) {
+  }else if(drp>=10 && drp<25){
-  //   color1 = "#6EC2FA";
+    color1 = 'rgb(64, 215, 255)';
-  // } else if (h24 >= 50 && h24 < 100) {
+  }else if(drp>=25 && drp<50){
-  //   color1 = "#1E1ACA";
+    color1 = 'rgb(32, 143, 238)';
-  // } else if (h24 >= 100 && h24 < 250) {
+  }else if(drp>=50 && drp<100){
-  //   color1 = "#EB20F7";
+    color1 = 'rgb(85, 86, 255)';
-  // } else if (h24 >= 250) {
+  }else if(drp>=100 && drp<250){
-  //   color1 = "#781D4F";
+    color1 = 'rgb(191, 90, 252)';
-  // }
+  }else{
-  color1 = "#1E1ACA";
+    color1 = 'rgb(246, 66, 66)';
+  }
+  // color1 = "#1E1ACA";
 
   return `
   <div style="cursor:pointer">
@@ -43,6 +45,7 @@ const dist2 = 8000 * 8000;
 
 function RealDrpMarker({ data, dispatch, setting, zoom, distSq }) {
   const highlight = setting;
+  const rainDrpData = useSelector(s => s.runtime.rainDrpData);
 
   let zindexOffset = 1;
   if (!data.status) {
@@ -52,7 +55,7 @@ function RealDrpMarker({ data, dispatch, setting, zoom, distSq }) {
   }
 
   useEffect(() => {
-    const width = 12;
+    const width = 10;
 
     const placeholder = document.getElementById(`marker_drp_${data.id}`);
     if (!placeholder) {
@@ -61,7 +64,8 @@ function RealDrpMarker({ data, dispatch, setting, zoom, distSq }) {
 
     const ratio = highlight ? 1.2 : 1.0;
 
-    const svgMarker = renderMarker(data, { width: width * ratio, highlight });
+    const drpData = rainDrpData?.filter(o=>o.stcd===data.stcd)||[]
+    const svgMarker = renderMarker(drpData?.length===1?drpData[0]:data, { width: width * ratio, highlight });
 
     placeholder.innerHTML = svgMarker;
 
@@ -112,7 +116,7 @@ function RealDrpMarker({ data, dispatch, setting, zoom, distSq }) {
     return () => {
       placeholder.innerHTML = '';
     }
-  }, [highlight]);
+  }, [highlight,rainDrpData]);
 
   const showPop = () => {
     dispatch.runtime.setFeaturePop({
@@ -150,7 +154,8 @@ function RealDrpMarker({ data, dispatch, setting, zoom, distSq }) {
           bottom: 0,
           left: 0,
           transformOrigin: 'bottom center',
-          transform: `translateX(-50%)${markerZoom > 1 ? ' scale(' + markerZoom + ')' : ''}`,
+          // transform: `translateX(-50%)${markerZoom > 1 ? ' scale(' + markerZoom + ')' : ''}`,
+          transform: 'translateX(-50%) scale(1.5)',
           lineHeight: 1,
           zIndex: zindexmarker.drp + zindexOffset + (highlight ? zindexmarker.hilightPlus : 0)
         }}
@@ -181,7 +186,7 @@ function RealDrpMarker({ data, dispatch, setting, zoom, distSq }) {
           <div
             className="markerLabel"
             style={{
-              backgroundColor: '#0008',
+              // backgroundColor: '#0008',
               padding: 4,
               borderRadius: 4,
               fontSize: 10,
@@ -191,7 +196,7 @@ function RealDrpMarker({ data, dispatch, setting, zoom, distSq }) {
               transform: 'translateX(-50%)',
               zIndex: zindexmarker.drpLabel + zindexOffset + (highlight ? zindexmarker.hilightPlus : 0), color: '#fff'
             }}>
-            <div style={{textAlign:"center"}}>{data.name}</div>
+            <div style={{textAlign:"center",color:'rgba(0,0,0,0.5)'}}>{data.name}</div>
             {/* <div style={{textAlign:"center"}}>{data.h24 || '-'}m</div> */}
           </div>
         )

src/views/Home/MapCtrl/Markers/index.js

@@ -75,7 +75,7 @@ function Markers({ mapobj }) {
     <>
       {
         rendata.map(o => {
-          const pixels = mapobj.coordinateToPixel(o.lgtd, o.lttd, o.elev);
+          const pixels = mapobj.coordinateToPixel(o.lgtd, o.lttd, 120);
           if (!pixels) {
             return null;
           }

src/views/Home/MapCtrl/Pops/index.js

@@ -72,7 +72,8 @@ function FeaturePops({ mapobj }) {
     <>
       {
         popups.map(({ type, lgtd, lttd, elev, data, id }) => {
-          const pixels = mapobj.coordinateToPixel(lgtd, lttd, elev);
+          // const pixels = mapobj.coordinateToPixel(lgtd, lttd, elev);
+          const pixels = mapobj.coordinateToPixel(lgtd, lttd, 120);
           let left = null
           let top = null
           let zIndex = null

src/views/Home/btn/index.js

@@ -6,7 +6,7 @@ import ZhongXin from '../img/ZhongXin.png'
 import Shouqi2 from '../img/shouqi2.png'
 import Zhankai2 from '../img/zhankai2.png'
 
-export default function Btn({showPanels,setShowPanels}) {
+export default function Btn({showPanels,setShowPanels, pathname}) {
     const [open, setOpen] = useState(false)
     const getLayerVisible = (s) => s.map.layerVisible;
     const mode = useSelector((s) => s.map.mode);
@@ -40,7 +40,7 @@ export default function Btn({showPanels,setShowPanels}) {
         dispatch.map.setLayerVisible({ ['OfflineMap']: false });
         dispatch.map.setLayerVisible({ ['SatelliteImage']: true });
         //卫星图打开河流面很丑，所以关掉
-        mapObj && mapObj.getLayers().getArray().forEach((layer)=> {
+        mode==='2d' && mapObj && mapObj.getLayers().getArray().forEach((layer)=> {
             if(layer.values_.name === "HLLayer"||layer.values_.name === "HL2Layer"){
             layer.setVisible(false);
             }
@@ -54,7 +54,7 @@ export default function Btn({showPanels,setShowPanels}) {
         dispatch.map.setMode('2d');
         dispatch.map.setLayerVisible({ ['SatelliteImage']: false });
         dispatch.map.setLayerVisible({ ['OfflineMap']: true });
-        mapObj && mapObj.getLayers().getArray().forEach((layer)=> {
+        mode==='2d' && mapObj && mapObj.getLayers().getArray().forEach((layer)=> {
             if(layer.values_.name === "HLLayer"||layer.values_.name === "HL2Layer"){
             layer.setVisible(true);
             }
@@ -65,9 +65,12 @@ export default function Btn({showPanels,setShowPanels}) {
     }
     //3Dbtn
     const btn3d = ()=>{
-        navigate('/mgr/sy/hsyy');
+        if(pathname==='/mgr/sy/tqyb'){
+            return 
+        }
+        // navigate('/mgr/sy/hsyy');
         setOpen(false)
-        // dispatch.map.setMode('3d');
+        dispatch.map.setMode('3d');
         
     }
 
@@ -129,7 +132,7 @@ export default function Btn({showPanels,setShowPanels}) {
                 <DatabaseFilled style={{ fontSize: "17px", marginTop: "2px" }} />
             </div> */}
             <div className='mapToolBoxTuCeng' style={{left:open?'-225px':'5px'}}>
-                <div className='mapToolBoxTuCengItem' style={{color:mode==='3d'?'#1677ff':'black'}}  onClick={btn3d}>
+                <div className='mapToolBoxTuCengItem' style={{color:mode==='3d'?'#1677ff':'black',cursor:pathname==='/mgr/sy/tqyb'?'no-drop':'pointer'}}  onClick={btn3d}>
                     <img width={50} height={50} src={`${process.env.PUBLIC_URL}/assets/xyt/homeImg/3dMap.jpg`} alt=""/>
                     3D图
                 </div>

src/views/Home/homePanelsLayoutPage/index.js

@@ -99,7 +99,7 @@ const items = [
 
 ]
 
-const HomePage = ({ showPanels }) => {
+const HomePage = ({ showPanels, mode }) => {
   // 添加搜索输入框的引用
   const searchInputRef = useRef(null);
   const dispatch = useDispatch();
@@ -203,196 +203,8 @@ const HomePage = ({ showPanels }) => {
     return;
   }
 
-  // 加载危险区图层数据
-  const getGeoJsonData = async () => {
-    const radarRangeData = await fetch(`${process.env.PUBLIC_URL}/data/geojson/macheng/wxq2.geojson`)
-      .then(resp => resp.json())
-      .then(data => data.features)
-      .catch(() => []);
-
-    const wxq = {}
-    radarRangeData.map((item) => {
-      wxq[item.properties.ADCD] = item
-    })
-    sessionStorage.setItem('wxq', JSON.stringify(wxq))
-    return [...radarRangeData];
-  };
-  // 危险区图层
-  const addLayer = () => {
-
-    getGeoJsonData().then((data) => {
-      var layer = new VectorLayer({
-        // @ts-ignore
-        name: "ZHZS_WXQ",
-        source: new VectorSource(),
-        style: new Style({
-          stroke: new StrokeStyle({
-            color: 'rgba(255,0,0,0.9)',
-            width: 2,
-          }),
-          fill: new FillStyle({
-            color: 'rgba(255,0,0,0.3)',
-          }),
-        })
-      });
-
-      const features = data.map((item) => {
-        // debugger
-        const geojsonFormat = new GeoJSONFormat();
-        let geometry = geojsonFormat.readGeometry(item.geometry, {
-          featureProjection: 'EPSG:3857',
-        });
-        const feature = new Feature({
-          geometry,
-          data: { ...item.properties, geometry: item.geometry, myLayerType: 'wxq' },
-        });
-
-        return feature
-      })
-
-      features.forEach(feature => layer.getSource().addFeature(feature));
-      mapObj && mapObj.addLayer(layer);
-
-      mapObj && mapObj.on('click', function (evt) {
-
-        //console.log("271++++",postmessageData);
-
-        var feature = mapObj && mapObj.forEachFeatureAtPixel(evt.pixel, function (feature) {
-          return feature;
-        });
-        if (feature) {
-          const data = feature.values_.data
-
-          const center = geometryCenter(data.geometry);
-          if (data && data.myLayerType === 'wxq') {
-
-            dispatch.runtime.setCameraTarget({
-              center: [center[0], center[1]],
-              zoom: 18,
-              pitch: 60
-            })
-            dispatch.runtime.setFeaturePop({
-              id: data.PID,
-              data: { ...data },
-              type: 'wxq',
-              lgtd: center[0],
-              lttd: center[1],
-            })
-          }
-        }
-      });
-
-    });
-  }
-
-  const getColor = (val) => {
-    if (val === null) {
-      return '#8c8c8c';
-    } else if (val < 0.1) {
-      return '#ffffff';
-    } else if (val >= 0.1 && val < 10) {
-      return 'rgb(167, 240, 143)';
-    } else if (val >= 10 && val < 25) {
-      return 'rgb(64, 215, 255)';
-    } else if (val >= 25 && val < 50) {
-      return 'rgb(32, 143, 238)';
-    } else if (val >= 50 && val < 100) {
-      return 'rgb(85, 86, 255)';
-    } else if (val >= 100 && val < 250) {
-      return 'rgb(191, 90, 252)';
-    } else {
-      return 'rgb(246, 66, 66)';
-    }
-  };
-  // 雨量站图层
-  const addRainLayer = (arr, tms) => {
-    var layer = new VectorLayer({
-      // @ts-ignore 
-      name: "ZHZS_YQ",
-      source: new VectorSource(),
-      style: (feature, zIndex) => {
-        const drp = feature.values_.data.drp
-        const stnm = feature.values_.data.stnm
-        return [new Style({
-          image: new Circle({
-            radius: 5,
-            fill: new FillStyle({ color: getColor(drp) }),
-            stroke: new Stroke({ color: getColor(drp), width: 2 })
-          }),
-          text: new Text({
-            text: zIndex < 50 ? `${stnm}` : '',
-            offsetY: 24,
-            font: '12px 微软雅黑',
-            //backgroundFill: new FillStyle({ color: "rgba(255,255,255,0.5)" }),
-            fill: new FillStyle({ color: "rgba(0,0,0,0.5)" }),
-            stroke: new Stroke({ color: '#fff', width: 1 }),
-            overflow: true,
-          }),
-          zIndex: drp === 0 ? 0.01 : drp * 10
-        })]
-      },
-      zIndex: 200,
-    })
-
-    var layerDrp = new VectorLayer({
-      // @ts-ignore
-      name: "ZHZS_YQ_DRP",
-      visible: true,
-      source: new VectorSource(),
-      style: (feature, zIndex) => {
-        const drp = feature.values_.data.drp
-        return [new Style({
-          text: new Text({
-            text: drp === null ? '-' : String(drp),
-            offsetY: 12,
-            font: '12px 微软雅黑',
-            //backgroundFill: new FillStyle({ color: "rgba(255,255,255,0.5)" }),
-            fill: new FillStyle({ color: "rgba(0,0,0,0.5)" }),
-            stroke: new Stroke({ color: '#fff', width: 1 }),
-            overflow: true,
-          })
-        })]
-      },
-      zIndex: 200,
-    })
-
-
-
-    const features = arr.map((item) => {
-      const point2 = transform([item.lgtd, item.lttd], 'EPSG:4326', 'EPSG:3857');
-      const feature = new Feature({
-        geometry: new Point(point2),
-        data: { ...item, myParams: tms, myLayerType: 'drp' }
-      });
-
-      return feature
-    })
-    features.forEach(feature => layer.getSource().addFeature(feature));
-    features.forEach(feature => layerDrp.getSource().addFeature(feature));
-    mapObj && mapObj.addLayer(layer);
-    mapObj && mapObj.addLayer(layerDrp);
-    mapObj && mapObj.on('click', function (evt) {
-
-      //console.log("271++++",postmessageData);
-
-      var feature = mapObj && mapObj.forEachFeatureAtPixel(evt.pixel, function (feature) {
-        return feature;
-      });
-      if (feature) {
-        const data = feature.values_.data
-        if (data && data.myLayerType === 'drp') {
-          dispatch.runtime.setFeaturePop({
-            id: data.stcd,
-            data: { ...data, myParams: tms },
-            type: 'drp',
-            lgtd: data.lgtd,
-            lttd: data.lttd,
-          })
-        }
-      }
-    });
-  }
   const clickItem = (item) => {
+    debugger
     // 业务规则库
     if (item.type == '业务规则库' || item.type == '调度方案库' || item.type == '工程安全知识库') {
       regularOpen(item)
@@ -409,6 +221,7 @@ const HomePage = ({ showPanels }) => {
     dispatch.runtime.closeFeaturePopAll();
     // 先关闭所有图层
     dispatch.map.setLayerVisible({
+      WxqLayer: false,
       HdswLayer: false,
       RealDrpLayer: false,
       PicStLayer: false,
@@ -419,14 +232,6 @@ const HomePage = ({ showPanels }) => {
       QSYDWLayer: false,
       YHJMHLayer: false
     });
-    // 先清除已存在的同名图层
-    mapObj && mapObj.getLayers().getArray().forEach(layer => {
-      if (layer.values_.name && (layer.values_.name.indexOf('ZHZS_WXQ') > -1 ||
-        layer.values_.name.indexOf('ZHZS_YQ') > -1 ||
-        layer.values_.name.indexOf('ZHZS_YQ_DRP') > -1)) {
-        layer.getSource().clear()
-      }
-    });
 
     // 根据类型确定弹窗类型和图层
     let popType = item.type;
@@ -483,7 +288,7 @@ const HomePage = ({ showPanels }) => {
     const record = JSON.parse(item.jsonStr);
 
     if (item.type == '危险区') {
-      addLayer()
+      dispatch.map.setLayerVisible({ WxqLayer: true })
       const wxq = JSON.parse(sessionStorage.getItem('wxq'))?.[record?.adcd] || ''
       if (!wxq) {
         message.error('暂无经纬度数据')
@@ -547,14 +352,16 @@ const HomePage = ({ showPanels }) => {
             drp: i.drp
           }));
 
-          // 清除已存在的同名图层
+          dispatch.map.setLayerVisible({ RealDrpLayer: true })
-          // mapObj && mapObj.getLayers().getArray().forEach(layer => {
+          dispatch.runtime.setRainDrpData(list||[]);
-          //   if (layer.values_.name && (layer.values_.name.indexOf('ZHZS_YQ') > -1)) {
+          dispatch.runtime.setFeaturePop({
-          //     mapObj.removeLayer(layer);
+            id: record.stcd,
-          //   }
+            data: { ...record, myParams: tms },
-          // });
+            type: 'drp',
-          // 创建雨量站图层
+            lgtd: record.lgtd,
-          addRainLayer(list, tms)
+            lttd: record.lttd,
+          })
+
         } catch (error) {
           console.error('获取雨量站数据失败', error);
         }
@@ -608,7 +415,6 @@ const HomePage = ({ showPanels }) => {
 
   useEffect(() => {
     setCheckedObj({ key: '12', label: '雨情', labelRight: '统计', icon: 'yuqing' })
-    getGeoJsonData()
   }, [])
 
 
@@ -629,11 +435,6 @@ const HomePage = ({ showPanels }) => {
           setSearchVal('')
           dispatch.runtime.closeFeaturePopAll()
           dispatch.map.setLayerVisible({ ShuiKuLayer: false })
-          mapObj && mapObj.getLayers().getArray().forEach(layer => {
-            if (layer.values_.name && (layer.values_.name.indexOf('ZHZS_WXQ') > -1 || layer.values_.name.indexOf('ZHZS_YQ') > -1 || layer.values_.name.indexOf('ZHZS_YQ_DRP') > -1)) {
-              layer.getSource().clear()
-            }
-          });
           dispatch.runtime.setHome()
           if (a === undefined) {
             setCheckedObj({ key: '12', label: '雨情', labelRight: '统计', icon: 'yuqing' })
@@ -647,11 +448,6 @@ const HomePage = ({ showPanels }) => {
             // dispatch.runtime.setHome()
             setCheckedObj({ key: '21', label: '巡查巡检', labelRight: '工程巡检', icon: 'shuiku' })
           } else if (a === '3') {
-            dispatch.runtime.setCameraTarget({
-              center: [114.75, 31.493],
-              zoom: 13.5,
-              pitch: 60
-            })
             setShowTable(true)
             setCheckedObj({ key: '31', label: '危险区', labelRight: '危险区列表', icon: 'weixianqu' })
           } else if (a === '4') {
@@ -683,11 +479,6 @@ const HomePage = ({ showPanels }) => {
                       setCheckedObj(item)
                       setShowTable(true)
                       dispatch.map.setLayerVisible({ ShuiKuLayer: false })
-                      mapObj && mapObj.getLayers().getArray().forEach(layer => {
-                        if (layer.values_.name && (layer.values_.name.indexOf('ZHZS_WXQ') > -1 || layer.values_.name.indexOf('ZHZS_YQ') > -1 || layer.values_.name.indexOf('ZHZS_YQ_DRP') > -1)) {
-                          layer.getSource().clear()
-                        }
-                      });
                       dispatch.runtime.setHome()
                     }}>
                       <img src={`${process.env.PUBLIC_URL}/assets/xyt/homeImg/${item.icon}.png`} width="20" height="20" alt="" style={{ marginRight: '10px' }} />
@@ -756,7 +547,7 @@ const HomePage = ({ showPanels }) => {
             {/* { checkedObj.label === '水质' ? <ShuiZhi/>:null } */}
             {checkedObj.label === '视频点' ? <ShiPinDian /> : null}
 
-            {checkedObj.label === '巡查巡检' ? <XunChaXunJian /> : null}
+            {checkedObj.label === '巡查巡检' ? <XunChaXunJian mode={mode}/> : null}
 
             {checkedObj.label === '水库' ? <GCShuiKu /> : null}
             {checkedObj.label === '大坝' ? <DaBa /> : null}
@@ -767,7 +558,7 @@ const HomePage = ({ showPanels }) => {
             {checkedObj.label === '企事业单位' ? <QSYDW /> : null}
             {checkedObj.label === '沿河居民户' ? <YHJMH /> : null}
 
-            {checkedObj.label === '危险区' || checkedObj.label === '安置点' || checkedObj.label === '企事业单位' || checkedObj.label === '沿河居民户' ? <SetWxqStation /> : null}
+            {checkedObj.label === '危险区' || checkedObj.label === '安置点' || checkedObj.label === '企事业单位' || checkedObj.label === '沿河居民户' ? <SetWxqStation mode={mode}/> : null}
             {checkedObj.label === '搜索结果' ? <SetDrpStation tms={tms} setTableData={() => { }} /> : null}
 
           </div>

src/views/Home/homePanelsLayoutPage/item_xunchaxunjian.js

@@ -18,7 +18,7 @@ import moment from "moment";
 
 
 
-const Page = ({mySetTms}) => {
+const Page = ({mode}) => {
     const dispatch = useDispatch();
     const refModal = useRef();
     let mapObj = useSelector(s => s.map.map)
@@ -47,7 +47,7 @@ const Page = ({mySetTms}) => {
 
 
         return ()=>{
-            mapObj && mapObj.getLayers().getArray().forEach((layer)=> {
+            mode === '2d' && mapObj && mapObj.getLayers().getArray().forEach((layer)=> {
                 const a = layer.values_
                 if( (layer.values_.name) && ((layer.values_.name).indexOf("HlSX_") !== -1 || (layer.values_.name).indexOf("HlItem_") !== -1 || (layer.values_.name).indexOf("LyItem_") !== -1) ){
                     layer.getSource().clear();
@@ -86,7 +86,7 @@ const Page = ({mySetTms}) => {
 
 
     const addHlLayer = (geojsonrv,name,color,item)=>{
-        mapObj && mapObj.getLayers().getArray().forEach((layer)=> {
+        mode === '2d' && mapObj && mapObj.getLayers().getArray().forEach((layer)=> {
             if( (layer.values_.name) && ((layer.values_.name).indexOf("HlSX_") !== -1 || (layer.values_.name).indexOf("HlItem_") !== -1 || (layer.values_.name).indexOf("LyItem_") !== -1) ){
                 layer.getSource().clear();
             }
@@ -122,7 +122,7 @@ const Page = ({mySetTms}) => {
             zIndex:100
         });
 
-        mapObj.addLayer(vectorLayer);
+        mode === '2d' && mapObj.addLayer(vectorLayer);
     }
 
     const onRowClick = async(data)=>{

src/views/Home/index.tsx

@@ -69,14 +69,14 @@ const HomePage = () => {
           }}
         >
           {/* 控制按钮 */}
-          <Btn showPanels={showPanels} setShowPanels={setShowPanels}/>
+          <Btn showPanels={showPanels} setShowPanels={setShowPanels} pathname={pathname}/>
 
           {/* 地图 */}
           <MapCtrl mode={mode}/>
 
           {/*首页面板*/}
           {pathname === '/mgr/home' ? (
-            <HomePanelsLayoutPage showPanels={showPanels} />
+            <HomePanelsLayoutPage showPanels={showPanels} mode={mode}/>
           ) : null}
 
           {/*四预-防洪形势*/}

src/views/Home/setMapStation/drp.js

@@ -20,7 +20,6 @@ import apiurl from "../../../service/apiurl";
 
 export default function SetDrpStation({tms, setTableData}) {
     const dispatch = useDispatch();
-    let mapObj = useSelector(s => s.map.map)
 
     const getData = async (tms) =>{
         const { data, code, msg } = await httppost2(apiurl.home.yq,{
@@ -39,131 +38,18 @@ export default function SetDrpStation({tms, setTableData}) {
             drp : i.drp ,//i.v,
           }
         })
-        addLayer(list||[],tms||[])
+        dispatch.runtime.setRainDrpData(list||[]);
+        dispatch.map.setLayerVisible({ RealDrpLayer: true })
         setTableData(list||[])
 
     }
     useEffect(()=>{
         getData(tms)
-
         return ()=>{
-            mapObj && mapObj.getLayers().getArray().forEach(layer => {
+            dispatch.map.setLayerVisible({ RealDrpLayer: false })
-            if ( layer.values_.name && (layer.values_.name.indexOf('ZHZS_YQ') > -1)) {
-                    layer.getSource().clear()
-                }
-            })
         }
     },[tms])
 
-    const getColor = (val)=>{
-        if(val===null){
-          return '#8c8c8c'
-        }else if(val<0.1){
-            return '#ffffff'
-        }else if(val>=0.1 && val<10){
-            return 'rgb(167, 240, 143)';
-        }else if(val>=10 && val<25){
-            return 'rgb(64, 215, 255)';
-        }else if(val>=25 && val<50){
-            return 'rgb(32, 143, 238)';
-        }else if(val>=50 && val<100){
-            return 'rgb(85, 86, 255)';
-        }else if(val>=100 && val<250){
-            return 'rgb(191, 90, 252)';
-        }else{
-            return 'rgb(246, 66, 66)';
-        }
-    }
-
-
-  const addLayer = (arr, tms) => {
-        var layer = new VectorLayer({
-          // @ts-ignore 
-          name:"ZHZS_YQ",
-          source: new VectorSource(),
-          style: (feature,zIndex) =>{
-            const drp = feature.values_.data.drp
-            const stnm = feature.values_.data.stnm
-              return [new Style({
-                image: new Circle({
-                  radius: 5,
-                  fill: new FillStyle({ color: getColor(drp) }),
-                  stroke: new Stroke({ color: getColor(drp), width: 2 })
-                }),
-                text: new Text({
-                  text: zIndex<50?`${stnm}`:'',
-                  offsetY: 24,
-                  font: '12px 微软雅黑',
-                  //backgroundFill: new FillStyle({ color: "rgba(255,255,255,0.5)" }),
-                  fill: new FillStyle({ color: "rgba(0,0,0,0.5)"  }),
-                  stroke: new Stroke({ color: '#fff', width: 1 }),
-                  overflow: true,
-                }),
-                zIndex: drp===0?0.01:drp*10
-              })]
-            },
-            zIndex:200,
-        })
-    
-        var layerDrp = new VectorLayer({
-          // @ts-ignore
-          name:"ZHZS_YQ_DRP",
-          visible:true,
-          source: new VectorSource(),
-          style: (feature,zIndex) =>{
-            const drp = feature.values_.data.drp
-              return [new Style({
-                text: new Text({
-                  text: drp===null?'-':String(drp),
-                  offsetY: 12,
-                  font: '12px 微软雅黑',
-                  //backgroundFill: new FillStyle({ color: "rgba(255,255,255,0.5)" }),
-                  fill: new FillStyle({ color: "rgba(0,0,0,0.5)"  }),
-                  stroke: new Stroke({ color: '#fff', width: 1 }),
-                  overflow: true,
-                })
-              })]
-            },
-            zIndex:200,
-        })
-    
-      
-    
-        const features = arr.map((item)=>{
-          const point2 = transform([item.lgtd, item.lttd], 'EPSG:4326', 'EPSG:3857');
-          const feature = new Feature({
-            geometry: new Point(point2),
-            data:{...item,myParams:tms,myLayerType:'drp'}
-          });
-    
-          return feature
-        })
-        features.forEach(feature => layer.getSource().addFeature(feature));
-        features.forEach(feature => layerDrp.getSource().addFeature(feature));
-        mapObj && mapObj.addLayer(layer);
-        mapObj && mapObj.addLayer(layerDrp);
-        
-        mapObj && mapObj.on('click', function(evt) {
-    
-          //console.log("271++++",postmessageData);
-    
-          var feature = mapObj && mapObj.forEachFeatureAtPixel(evt.pixel, function(feature) {
-            return feature;
-          });
-          if (feature) {
-            const data = feature.values_.data
-            if(data && data.myLayerType==='drp'){
-              dispatch.runtime.setFeaturePop({
-                id: data.stcd,
-                data:{...data,myParams:tms},
-                type: 'drp',
-                lgtd: data.lgtd,
-                lttd: data.lttd,
-              })
-            }
-          }
-        });
-      }
 
 }
 

src/views/Home/setMapStation/wxq.js

@@ -22,9 +22,8 @@ import { httppost2 } from "../../../utils/request";
 import { geometryCenter } from '../../../utils/tools'
 import apiurl from "../../../service/apiurl";
 
-export default function SetDrpStation({tms}) {
+export default function SetDrpStation({mode}) {
     const dispatch = useDispatch();
-    let mapObj = useSelector(s => s.map.map)
 
     const getData = async (tms) =>{
         const { data, code, msg } = await httppost2(apiurl.home.wxq)
@@ -33,104 +32,12 @@ export default function SetDrpStation({tms}) {
         }
     }
     useEffect(()=>{
-        addLayer()
+      dispatch.map.setLayerVisible({ WxqLayer: true })
         return ()=>{
-            mapObj && mapObj.getLayers().getArray().forEach(layer => {
+            dispatch.map.setLayerVisible({ WxqLayer: false })
-            if ( layer.values_.name && (layer.values_.name.indexOf('ZHZS_WXQ') > -1)) {
-                    layer.getSource().clear()
-                }
-            })
         }
     },[])
 
-    const getGeoJsonData = async () => {
-      const radarRangeData = await fetch(`${process.env.PUBLIC_URL}/data/geojson/macheng/wxq2.geojson`)
-        .then(resp => resp.json())
-        .then(data => data.features)
-        .catch(() => []);
-
-      const wxq = {}
-      radarRangeData.map((item)=>{
-        wxq[item.properties.ADCD] = item
-      })
-      sessionStorage.setItem('wxq',JSON.stringify(wxq))
-      return [...radarRangeData];
-    };
-
-
-
-  const addLayer = () => {
-    
-       // 先清除已存在的同名图层
-    mapObj && mapObj.getLayers().getArray().forEach(layer => {
-      if (layer.values_.name && (layer.values_.name.indexOf('ZHZS_WXQ') > -1)) {
-        mapObj.removeLayer(layer);
-      }
-    });
-      getGeoJsonData().then((data) => {
-        var layer =  new VectorLayer({
-          // @ts-ignore
-          name:"ZHZS_WXQ",
-          source: new VectorSource(),
-          style: new Style({
-            stroke: new StrokeStyle({
-              color: 'rgba(255,0,0,0.9)',
-              width: 2,
-            }),
-            fill: new FillStyle({
-              color: 'rgba(255,0,0,0.3)',
-            }),
-          })
-        });
-
-        const features = data.map((item)=>{
-          // debugger
-          const geojsonFormat = new GeoJSONFormat();
-          let geometry = geojsonFormat.readGeometry(item.geometry, {
-            featureProjection: 'EPSG:3857',
-          });
-          const feature = new Feature({
-            geometry,
-            data:{...item.properties,geometry:item.geometry,myLayerType:'wxq'},
-          });
-    
-          return feature
-        })
-
-        features.forEach(feature => layer.getSource().addFeature(feature));
-        mapObj && mapObj.addLayer(layer);
-
-        mapObj && mapObj.on('click', function(evt) {
-    
-          //console.log("271++++",postmessageData);
-    
-          var feature = mapObj && mapObj.forEachFeatureAtPixel(evt.pixel, function(feature) {
-            return feature;
-          });
-          if (feature) {
-            const data = feature.values_.data
-
-            const center = geometryCenter(data.geometry);
-            if(data && data.myLayerType==='wxq'){
-
-              dispatch.runtime.setCameraTarget({
-                center: [center[0], center[1]],
-                zoom: 18,
-                pitch: 60
-              })
-              dispatch.runtime.setFeaturePop({
-                id: data.PID,
-                data:{...data},
-                type: 'wxq',
-                lgtd: center[0],
-                lttd: center[1],
-              })
-            }
-          }
-        });
-
-      });
-      }
 
 }