lishenfeng
/
tsg-web
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

檀树岗2d3d地图切换

qzc-dev
秦子超 2025-10-14 13:57:38 +08:00
parent 31969b1272
commit c4e0facb8a
21 changed files with 418 additions and 669 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
src/models/_/real.js
View File

@ -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;

1
src/models/map/index.ts
View File

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

4
src/models/runtime/index.ts
View File

@ -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 }
},

2
src/views/Home/MapCtrl/M2D/layermgr2d.js
View File

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

218
src/views/Home/MapCtrl/M2D/layers/WxqLayer2D.js
View File

@ -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],
})
}
}
})
}
}
}

222
src/views/Home/MapCtrl/M2D/layers/WxqLayer2DOld.js Normal file
View File

@ -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],
})
}
}
}
}
}

12
src/views/Home/MapCtrl/Map3D/Map3D.js
View File

@ -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),

15
src/views/Home/MapCtrl/Map3D/demo.js
View File

@ -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)

2
src/views/Home/MapCtrl/Map3D/layermgr3d.js
View File

@ -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{

8
src/views/Home/MapCtrl/Map3D/layers/FeatureLayer3D.js
View File

@ -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();
}

1
src/views/Home/MapCtrl/Map3D/layers/RainLayer3D.js
View File

@ -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),

54
src/views/Home/MapCtrl/Map3D/layers/WxqLayer3D.js Normal file
View File

@ -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;
}
}

53
src/views/Home/MapCtrl/Markers/RealDrpMarker.js
View File

@ -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 `
<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>
)

2
src/views/Home/MapCtrl/Markers/index.js
View File

@ -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;
}

3
src/views/Home/MapCtrl/Pops/index.js
View File

@ -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

15
src/views/Home/btn/index.js
View File

@ -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>

241
src/views/Home/homePanelsLayoutPage/index.js
View File

@ -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()
}}>
<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>

8
src/views/Home/homePanelsLayoutPage/item_xunchaxunjian.js
View File

@ -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)=>{

4
src/views/Home/index.tsx
View File

@ -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}
{/*四预-防洪形势*/}

120
src/views/Home/setMapStation/drp.js
View File

@ -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,
})
}
}
});
}
}

99
src/views/Home/setMapStation/wxq.js
View File

@ -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],
})
}
}
});
});
}
}