From c4e0facb8aea984d37ee7533866ff38ad657fa50 Mon Sep 17 00:00:00 2001 From: qzc Date: Tue, 14 Oct 2025 13:57:38 +0800 Subject: [PATCH] =?UTF-8?q?=E6=AA=80=E6=A0=91=E5=B2=972d3d=E5=9C=B0?= =?UTF-8?q?=E5=9B=BE=E5=88=87=E6=8D=A2?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/models/_/real.js | 3 +- src/models/map/index.ts | 1 + src/models/runtime/index.ts | 4 + src/views/Home/MapCtrl/M2D/layermgr2d.js | 2 +- .../Home/MapCtrl/M2D/layers/WxqLayer2D.js | 218 +++------------- .../Home/MapCtrl/M2D/layers/WxqLayer2DOld.js | 222 ++++++++++++++++ src/views/Home/MapCtrl/Map3D/Map3D.js | 12 +- src/views/Home/MapCtrl/Map3D/demo.js | 15 +- src/views/Home/MapCtrl/Map3D/layermgr3d.js | 2 + .../MapCtrl/Map3D/layers/FeatureLayer3D.js | 8 + .../Home/MapCtrl/Map3D/layers/RainLayer3D.js | 1 + .../Home/MapCtrl/Map3D/layers/WxqLayer3D.js | 54 ++++ .../Home/MapCtrl/Markers/RealDrpMarker.js | 53 ++-- src/views/Home/MapCtrl/Markers/index.js | 2 +- src/views/Home/MapCtrl/Pops/index.js | 3 +- src/views/Home/btn/index.js | 15 +- src/views/Home/homePanelsLayoutPage/index.js | 241 ++---------------- .../item_xunchaxunjian.js | 8 +- src/views/Home/index.tsx | 4 +- src/views/Home/setMapStation/drp.js | 120 +-------- src/views/Home/setMapStation/wxq.js | 99 +------ 21 files changed, 418 insertions(+), 669 deletions(-) create mode 100644 src/views/Home/MapCtrl/M2D/layers/WxqLayer2DOld.js create mode 100644 src/views/Home/MapCtrl/Map3D/layers/WxqLayer3D.js diff --git a/src/models/_/real.js b/src/models/_/real.js index 5fa7bf64b..81aa0c26e 100644 --- a/src/models/_/real.js +++ b/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; diff --git a/src/models/map/index.ts b/src/models/map/index.ts index 4858950e4..bc621e205 100644 --- a/src/models/map/index.ts +++ b/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, diff --git a/src/models/runtime/index.ts b/src/models/runtime/index.ts index 20c7195f8..eaf00359f 100644 --- a/src/models/runtime/index.ts +++ b/src/models/runtime/index.ts @@ -17,6 +17,7 @@ export const runtime = createModel()({ 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()({ } as RuntimeState, reducers: { + setRainDrpData(state, o) { + return { ...state, rainDrpData: o } + }, setIsReadObject(state, o) { return { ...state, isReadObject: o } }, diff --git a/src/views/Home/MapCtrl/M2D/layermgr2d.js b/src/views/Home/MapCtrl/M2D/layermgr2d.js index 924c8d719..80c7c7cb1 100644 --- a/src/views/Home/MapCtrl/M2D/layermgr2d.js +++ b/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 })); diff --git a/src/views/Home/MapCtrl/M2D/layers/WxqLayer2D.js b/src/views/Home/MapCtrl/M2D/layers/WxqLayer2D.js index 6b4a825dd..62f284dd7 100644 --- a/src/views/Home/MapCtrl/M2D/layers/WxqLayer2D.js +++ b/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._type = type; + this._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)', + }), + zIndex: zindex2d.sx, + });; } getLayerName() { - //return WxqLayer2D.LayerName; - return 'Dcpj_' + this._type + 'Layer'; + return WxqLayer2D.LayerName; } 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]; + const radarRangeData = await fetch(`${process.env.PUBLIC_URL}/data/geojson/macheng/wxq2.geojson`) + .then(resp => resp.json()) + .then(data => data.features) + .then(features => features.map(({ properties, geometry }) => ({ + ...properties, + properties, + geometry, + name: properties.NAME, + id: properties.PID, + }))) + .catch(() => []); + const wxq = {} + radarRangeData.map((item)=>{ + wxq[item.ADCD] = item + }) + sessionStorage.setItem('wxq',JSON.stringify(wxq)) + return [...radarRangeData]; } styleFunc = ({ props }) => { if (!this.isVisible()) { return null; } - //console.log(props); - return this._style1; + return this._style; } 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, + dispatch.runtime.setFeaturePop({ + id: data.PID, + type: 'wxq', data, lgtd: center[0], lttd: center[1], - elev: center[2], - }) - } - } + }) } } } diff --git a/src/views/Home/MapCtrl/M2D/layers/WxqLayer2DOld.js b/src/views/Home/MapCtrl/M2D/layers/WxqLayer2DOld.js new file mode 100644 index 000000000..6b4a825dd --- /dev/null +++ b/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], + }) + } + } + } + } +} diff --git a/src/views/Home/MapCtrl/Map3D/Map3D.js b/src/views/Home/MapCtrl/Map3D/Map3D.js index 134062657..e75a4848e 100644 --- a/src/views/Home/MapCtrl/Map3D/Map3D.js +++ b/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), - pitch: Cesium.Math.toRadians(-35.0), + // heading: Cesium.Math.toRadians(90), + // 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), diff --git a/src/views/Home/MapCtrl/Map3D/demo.js b/src/views/Home/MapCtrl/Map3D/demo.js index c21dfed80..e0d4c518e 100644 --- a/src/views/Home/MapCtrl/Map3D/demo.js +++ b/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 = -70 + const offsetHeight = 5 + // 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) diff --git a/src/views/Home/MapCtrl/Map3D/layermgr3d.js b/src/views/Home/MapCtrl/Map3D/layermgr3d.js index a92a4d61a..ea7cfd9c4 100644 --- a/src/views/Home/MapCtrl/Map3D/layermgr3d.js +++ b/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{ diff --git a/src/views/Home/MapCtrl/Map3D/layers/FeatureLayer3D.js b/src/views/Home/MapCtrl/Map3D/layers/FeatureLayer3D.js index 7108c5878..a55f1767b 100644 --- a/src/views/Home/MapCtrl/Map3D/layers/FeatureLayer3D.js +++ b/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(); } diff --git a/src/views/Home/MapCtrl/Map3D/layers/RainLayer3D.js b/src/views/Home/MapCtrl/Map3D/layers/RainLayer3D.js index 27958576b..b604a0327 100644 --- a/src/views/Home/MapCtrl/Map3D/layers/RainLayer3D.js +++ b/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), diff --git a/src/views/Home/MapCtrl/Map3D/layers/WxqLayer3D.js b/src/views/Home/MapCtrl/Map3D/layers/WxqLayer3D.js new file mode 100644 index 000000000..e086b50b0 --- /dev/null +++ b/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; + } +} diff --git a/src/views/Home/MapCtrl/Markers/RealDrpMarker.js b/src/views/Home/MapCtrl/Markers/RealDrpMarker.js index 04555ce3e..aea9c9072 100644 --- a/src/views/Home/MapCtrl/Markers/RealDrpMarker.js +++ b/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) { - // color1 = "#ADB6D9"; - // } else if (h24 >= 0.1 && h24 < 10) { - // color1 = "#BDEF9A"; - // } else if (h24 >= 10 && h24 < 25) { - // color1 = "#59B666"; - // } else if (h24 >= 25 && h24 < 50) { - // color1 = "#6EC2FA"; - // } else if (h24 >= 50 && h24 < 100) { - // color1 = "#1E1ACA"; - // } else if (h24 >= 100 && h24 < 250) { - // color1 = "#EB20F7"; - // } else if (h24 >= 250) { - // color1 = "#781D4F"; - // } - color1 = "#1E1ACA"; + if(drp===null){ + color1 = '#8c8c8c' + }else if(drp<0.1){ + color1 = '#ffffff' + }else if(drp>=0.1 && drp<10){ + color1 = 'rgb(167, 240, 143)'; + }else if(drp>=10 && drp<25){ + color1 = 'rgb(64, 215, 255)'; + }else if(drp>=25 && drp<50){ + color1 = 'rgb(32, 143, 238)'; + }else if(drp>=50 && drp<100){ + color1 = 'rgb(85, 86, 255)'; + }else if(drp>=100 && drp<250){ + color1 = 'rgb(191, 90, 252)'; + }else{ + color1 = 'rgb(246, 66, 66)'; + } + // color1 = "#1E1ACA"; return `
@@ -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 }) {
-
{data.name}
+
{data.name}
{/*
{data.h24 || '-'}m
*/}
) diff --git a/src/views/Home/MapCtrl/Markers/index.js b/src/views/Home/MapCtrl/Markers/index.js index 6bc2a25c1..28a838e12 100644 --- a/src/views/Home/MapCtrl/Markers/index.js +++ b/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; } diff --git a/src/views/Home/MapCtrl/Pops/index.js b/src/views/Home/MapCtrl/Pops/index.js index 3d0705216..f758b8dc8 100644 --- a/src/views/Home/MapCtrl/Pops/index.js +++ b/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 diff --git a/src/views/Home/btn/index.js b/src/views/Home/btn/index.js index b22b3b348..d04324913 100644 --- a/src/views/Home/btn/index.js +++ b/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}) {
*/}
-
+
3D图
diff --git a/src/views/Home/homePanelsLayoutPage/index.js b/src/views/Home/homePanelsLayoutPage/index.js index e05ea4aaf..d2ef9edb0 100644 --- a/src/views/Home/homePanelsLayoutPage/index.js +++ b/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 })); - // 清除已存在的同名图层 - // mapObj && mapObj.getLayers().getArray().forEach(layer => { - // if (layer.values_.name && (layer.values_.name.indexOf('ZHZS_YQ') > -1)) { - // mapObj.removeLayer(layer); - // } - // }); - // 创建雨量站图层 - addRainLayer(list, tms) + dispatch.map.setLayerVisible({ RealDrpLayer: true }) + dispatch.runtime.setRainDrpData(list||[]); + dispatch.runtime.setFeaturePop({ + id: record.stcd, + data: { ...record, myParams: tms }, + type: 'drp', + lgtd: record.lgtd, + 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() }}> @@ -756,7 +547,7 @@ const HomePage = ({ showPanels }) => { {/* { checkedObj.label === '水质' ? :null } */} {checkedObj.label === '视频点' ? : null} - {checkedObj.label === '巡查巡检' ? : null} + {checkedObj.label === '巡查巡检' ? : null} {checkedObj.label === '水库' ? : null} {checkedObj.label === '大坝' ? : null} @@ -767,7 +558,7 @@ const HomePage = ({ showPanels }) => { {checkedObj.label === '企事业单位' ? : null} {checkedObj.label === '沿河居民户' ? : null} - {checkedObj.label === '危险区' || checkedObj.label === '安置点' || checkedObj.label === '企事业单位' || checkedObj.label === '沿河居民户' ? : null} + {checkedObj.label === '危险区' || checkedObj.label === '安置点' || checkedObj.label === '企事业单位' || checkedObj.label === '沿河居民户' ? : null} {checkedObj.label === '搜索结果' ? { }} /> : null}
diff --git a/src/views/Home/homePanelsLayoutPage/item_xunchaxunjian.js b/src/views/Home/homePanelsLayoutPage/item_xunchaxunjian.js index 5f31d4310..6453f1ce3 100644 --- a/src/views/Home/homePanelsLayoutPage/item_xunchaxunjian.js +++ b/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)=>{ diff --git a/src/views/Home/index.tsx b/src/views/Home/index.tsx index 508008d5f..16585bf3e 100644 --- a/src/views/Home/index.tsx +++ b/src/views/Home/index.tsx @@ -69,14 +69,14 @@ const HomePage = () => { }} > {/* 控制按钮 */} - + {/* 地图 */} {/*首页面板*/} {pathname === '/mgr/home' ? ( - + ) : null} {/*四预-防洪形势*/} diff --git a/src/views/Home/setMapStation/drp.js b/src/views/Home/setMapStation/drp.js index 3c17b39df..5112c8187 100644 --- a/src/views/Home/setMapStation/drp.js +++ b/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 => { - if ( layer.values_.name && (layer.values_.name.indexOf('ZHZS_YQ') > -1)) { - layer.getSource().clear() - } - }) + dispatch.map.setLayerVisible({ RealDrpLayer: false }) } },[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, - }) - } - } - }); - } } diff --git a/src/views/Home/setMapStation/wxq.js b/src/views/Home/setMapStation/wxq.js index 7e68980ae..2249f71ae 100644 --- a/src/views/Home/setMapStation/wxq.js +++ b/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 => { - if ( layer.values_.name && (layer.values_.name.indexOf('ZHZS_WXQ') > -1)) { - layer.getSource().clear() - } - }) + dispatch.map.setLayerVisible({ WxqLayer: false }) } },[]) - 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], - }) - } - } - }); - - }); - } }