diff --git a/src/config.ts b/src/config.ts index 49707bacb..3de9de991 100644 --- a/src/config.ts +++ b/src/config.ts @@ -3,7 +3,13 @@ import { store } from './models/store' const address = localStorage.getItem('address') ? localStorage.getItem('address') : 'jianshi'; // @ts-ignore -const extent: [number, number, number, number] = [139.5514, 30.1131, 110.2219, 30.9030]; +// const extent: [number, number, number, number] = [139.5514, 30.1131, 110.2219, 30.9030]; +const extent: [number, number, number, number] = [ + 110.25175167632203, + 29.934801589268638, + 111.3498069381167, + 30.416712241937642 +]; const ADCD6 = address === "jianshi" ? "422822" : "420529"; const ADCD12 = ADCD6 + '000000'; const ADCD = ADCD6 + '000000000'; diff --git a/src/setupProxy.js b/src/setupProxy.js index a760dedc3..aac9cc466 100644 --- a/src/setupProxy.js +++ b/src/setupProxy.js @@ -26,4 +26,26 @@ module.exports = function (app) { }, }) ); + //3D地图搞成数据 + app.use( + '/shzh/mapres', + createProxyMiddleware({ + // target: 'http://223.75.53.141:8000/', + target: 'http://223.75.53.141:28080/',//测试 + changeOrigin: true, + }) + ); + //外协 + app.use( + '/service2', + createProxyMiddleware({ + target: 'http://223.75.53.141:8000/', + // target: 'http://223.75.53.141:28080/',//测试 + changeOrigin: true, + pathRewrite: { + '^/service2': '', + }, + }) + ); + }; diff --git a/src/views/Home/MapCtrl/Map3D/Map3D.js b/src/views/Home/MapCtrl/Map3D/Map3D.js new file mode 100644 index 000000000..299ba0d35 --- /dev/null +++ b/src/views/Home/MapCtrl/Map3D/Map3D.js @@ -0,0 +1,333 @@ +import config from '../config'; +import LayerMgr3D from './layermgr3d'; +import BaseMap from '../basemap'; +import { ToolManager } from './ToolManager3D'; + +const { Cesium } = window; + +function __prepare_ces(dispatch) { + Cesium.CesiumWidget.prototype.showErrorPanel = function (title) { + dispatch && dispatch.map.setMode('2d'); + if (title && title.indexOf('constructing') >= 0) { + alert('无法初始化三维场景，如果一直出现此问题，请尝试下载最新的chrome浏览器'); + } else { + alert('三维场景渲染出现问题'); + } + }; +} + +/*根据camera高度近似计算当前层级*/ +const heightToZoom = ( height) => { + var A = 40487.57; + var B = 0.00007096758; + var c = 91610.74; + var D = -40467.74; + return Math.round(D+(A-D)/(1+Math.pow( height/c,B)) ); +} + + +/** + * OL 封装 + */ +export default class Map3D extends BaseMap { + constructor({ divid, dispatch }) { + super(); + + this.dispatch = dispatch; + this.divid = divid; // div element id + this._map = null; // openlayers map obj + this.layerMgr = null; + this.toolMgr = null; + + // @ts-ignore + const open = XMLHttpRequest.prototype.open; + // @ts-ignore + XMLHttpRequest.prototype.open = function (method, url, ...rest) { + if (url.startsWith('http://res3dstatic7')) { + url = url.replaceAll('+', '%2B'); + } + return open.call(this, method, url, ...rest); + }; + } + + /** + * 初始化地图、图层 + */ + init() { + __prepare_ces(this.dispatch); + + const tiandiKey = "efc861f25f96dc6e5f884f0403ebfefd"; //天地图key，官网申请 + const baseUrl = "https://{s}.tianditu.gov.cn";//'https://t{0-7}.tianditu.gov.cn'; + + /*const viewer = new Cesium.Viewer(this.divid, { + animation: false, + baseLayerPicker: false, + geocoder: false, + sceneModePicker: false, + fullscreenButton: false, + homeButton: false, + timeline: false, + navigationHelpButton: false, + // scene3DOnly: true, + shadows: false, + infoBox: false, + terrainProvider: new Cesium.CesiumTerrainProvider({ + //url: config.baseDemUrl, + url: 'http://res3dstatic5.cloudowr.cn/wufeng/terrain', + requestVertexNormals: true, + }), + sceneMode: Cesium.SceneMode.COLUMBUS_VIEW, + + imageryProvider: new Cesium.UrlTemplateImageryProvider({ + //url: 'http://mt1.google.cn/vt/lyrs=s&hl=zh-CN&x={x}&y={y}&z={z}&s=Gali', + // url: 'http://t0.tianditu.gov.cn/DataServer?T=img_w&x={x}&y={y}&l={z}&tk=efc861f25f96dc6e5f884f0403ebfefd', + url: `http://res3dstatic{s}.cloudowr.cn/${localStorage.getItem('address')}/dom2/{z}/{x}/{y}.png`, + // url: `http://112.35.144.31:8888/lfdzspd/${localStorage.getItem('address')}/dom2/{z}/{x}/{y}.png`, + /!*subdomains: ['0', '1', '2', '3', '4', '5', '6', '7'], + maximumLevel: 18,*!/ + subdomains: ['1', '2', '3'], + maximumLevel: 17, + }), + // targetFrameRate: 10, + });*/ + + const viewer = new Cesium.Viewer(this.divid, { + terrainProvider: new Cesium.CesiumTerrainProvider({ + //url: 'http://res3dstatic5.cloudowr.cn/wufeng/terrain', + url:"/shzh/mapres/terrain", + requestVertexNormals: true, + }), + imageryProvider: new Cesium.UrlTemplateImageryProvider({ + //url: `http://res3dstatic{s}.cloudowr.cn/${localStorage.getItem('address')}/dom2/{z}/{x}/{y}.png`, + url: baseUrl + '/DataServer?T=img_w&x={x}&y={y}&l={z}&tk='+tiandiKey, + subdomains: ['t0', 't1', 't2', 't3', 't4', 't5', 't6', 't7'], + //minimumLevel:10, + maximumLevel: 17, + }), + scene3DOnly: true, + animation: false, + baseLayerPicker: false, + geocoder: false, + sceneModePicker: false, + fullscreenButton: false, + homeButton: false, + timeline: false, + navigationHelpButton: false, + shadows: false, + infoBox: false, + skyAtmosphere: false,//去掉球边缘 + }); + + //设置地表透明 + let globe = viewer.scene.globe; + globe.depthTestAgainstTerrain = false; + //viewer.scene.skyAtmosphere.show = false; //关闭大气层阴影 + viewer.scene.screenSpaceCameraController.minimumZoomDistance = 100; + viewer.scene.screenSpaceCameraController.maximumZoomDistance = 200000; + + + viewer.scene.globe.enableLighting = false; //关闭光照 + viewer.shadows = false;//关闭阴影 + viewer.scene.globe.depthTestAgainstTerrain = false;//解决地形遮挡entity问题 + + //优化项--关闭相关特效 + viewer.scene.moon.show = false; //月亮 + viewer.scene.fog.enabled = false; //雾 + viewer.scene.sun.show = false; //太阳 + viewer.scene.skyBox.show = false; //天空盒 + viewer.resolutionScale = 1.0; //画面细度，默认值为1.0 + + viewer.scene.fxaa = false; + viewer.scene.postProcessStages.fxaa.enabled = true; + viewer.scene.globe.depthTestAgainstTerrain = true; + viewer.scene.globe.baseColor = Cesium.Color.TRANSPARENT;//设置球的基础色 + viewer.scene.globe.undergroundColor= Cesium.Color.BLACK.withAlpha(0.5);//设置球的地下色 + viewer.scene.backgroundColor = Cesium.Color.BLACK; + + viewer.scene.screenSpaceCameraController.tiltEventTypes = [ + Cesium.CameraEventType.RIGHT_DRAG, Cesium.CameraEventType.PINCH, + { eventType: Cesium.CameraEventType.LEFT_DRAG, modifier: Cesium.KeyboardEventModifier.CTRL }, + { eventType: Cesium.CameraEventType.RIGHT_DRAG, modifier: Cesium.KeyboardEventModifier.CTRL } + ]; + + viewer.scene.screenSpaceCameraController.zoomEventTypes = [ + Cesium.CameraEventType.MIDDLE_DRAG, Cesium.CameraEventType.WHEEL, Cesium.CameraEventType.PINCH + ]; + + + //加载倾斜摄影 + var tileset = new Cesium.Cesium3DTileset({ + //url: 'http://res3dstatic7.cloudowr.cn/wufeng/3dtile/tileset.json', + url: localStorage.getItem('address')==="wufeng"? + 'service2/kshdata/1221wtz-3dtile-all/tileset.json': + "service2/kshdata/GRH/tileset.json", + maximumScreenSpaceError: 32, + maximumMemoryUsage: 100, //不可设置太高，目标机子空闲内存值以内，防止浏览器过于卡 + }); + + // fetch(`${process.env.PUBLIC_URL}/data/geojson/${localStorage.getItem('address')}/boua.geojson`) + // .then(resp => resp.json()) + // .then(data => { + // let features = data.features; + // let positionArray = []; + + // // 获取区域的经纬度坐标 + // for (let i = 0; i < features[0].geometry.coordinates[0].length; i++) { + // let coor = features[0].geometry.coordinates[0][i]; + // positionArray.push(coor[0]); + // positionArray.push(coor[1]); + // } + + // // 遮罩 + // let polygonEntity = new Cesium.Entity({ + // polygon: { + // hierarchy: { + // // 添加外部区域为1/4半圆，设置为180会报错 [0, 0, 0, 90, 179, 90, 179, 0] + // positions: Cesium.Cartesian3.fromDegreesArray([100, 0, 100, 89, 150, 89, 150, 0]), + // // 中心挖空的“洞” + // holes: [{ + // positions: Cesium.Cartesian3.fromDegreesArray(positionArray) + // }] + // }, + // material: Cesium.Color.BLACK.withAlpha(0.7) //new Cesium.Color(236,242,249, 1) + // } + // }); + + // // 边界线 + // let lineEntity = new Cesium.Entity({ + // polyline: { + // positions: Cesium.Cartesian3.fromDegreesArray(positionArray), + // width: 7, + // material: Cesium.Color.fromCssColorString('#7AE3C8'),//边界线颜色//Cesium.Color.YELLOW //new Cesium.Color(122,227,200, 1) + // clampToGround: true, + // zIndex: 10 + // } + // }); + + // viewer.entities.add(polygonEntity); + // viewer.entities.add(lineEntity); + // //viewer.flyTo(lineEntity); + // }); + + + //添加到球体上 + // viewer.scene.primitives.add(tileset); + + /*viewer.dataSources.add(Cesium.GeoJsonDataSource.load('http://res3dstatic4.cloudowr.cn/wufeng/geojson/boua.geojson', { + stroke: Cesium.Color.PINK, + strokeWidth: 3, + clampToGround: true, + }));*/ + + tileset.readyPromise.then(function () { + viewer.zoomTo( + tileset, + new Cesium.HeadingPitchRange( + 0.0, + -0.5, + tileset.boundingSphere.radius * 10 + ) + ); + }); + + //监听地图移动完成事件 + viewer.camera.moveEnd.addEventListener(() => { + //获取当前相机高度 + let height = Math.ceil(viewer.camera.positionCartographic.height); + let zoom = heightToZoom(height); + + console.log('地图变化监听事件',zoom); + + }); + + this.layerMgr = new LayerMgr3D(viewer); + viewer.scene.postRender.addEventListener(() => { + this.dispatch.runtime.tickViewChanged(); + this.layerMgr.frameUpdate(); + }); + + this.toolMgr = new ToolManager(viewer, this.dispatch); + this.toolMgr.init(); + + viewer.camera.setView({ + destination: Cesium.Cartesian3.fromDegrees(...config.homeCenter3D), + orientation: { + heading: Cesium.Math.toRadians(0), + pitch: Cesium.Math.toRadians(-35.0), + roll: 0.0 + } + }); + + // 限制相机高度 + // 相机最低高度 + const minimumHeight = 120; + + // 在渲染阶段前添加事件监听器 + viewer.scene.preRender.addEventListener(function () { + var eye = viewer.camera.positionCartographic; + + // 判断相机坐标是否小于阈值，若小于阈值，则保持视点方位，修改相机高度 + if (eye.height < minimumHeight) { + viewer.camera.setView({ + destination: Cesium.Cartesian3.fromRadians(eye.longitude, eye.latitude, minimumHeight), + orientation: { + direction: viewer.camera.direction, + up: viewer.camera.up + } + }); + } + }); + + this._map = viewer; + const toremove = document.getElementsByClassName('cesium-widget-credits'); + if (toremove && toremove[0]) { + toremove[0].style.display = 'none'; + } + } + + coordinateToPixel(lgtd, lttd, elev) { + const pt = Cesium.Cartesian3.fromDegrees(lgtd, lttd, elev); + const result = Cesium.SceneTransforms.wgs84ToWindowCoordinates( + this._map.scene, pt); + if (!result) { + return null + } + return [result.x, result.y, pt.x, pt.y, pt.z]; + } + + /** + * 组件卸载时，需要销毁map对象 + */ + destroy() { + console.log('##############destroy##############'); + if (!this.layerMgr) { + return; + } + this.layerMgr.destroy(); + if (this._map) { + this._map.destroy(); + this._map = null; + } + } + + /** + * get layer obj + */ + getLayer(name) { + return this.layerMgr.getLayer(name); + } + + zoomTo(cameraTarget) { + if (cameraTarget.center) { + this._map.camera.flyToBoundingSphere(new Cesium.BoundingSphere( + Cesium.Cartesian3.fromDegrees(cameraTarget.center[0], cameraTarget.center[1], cameraTarget.center[2] || 0), + 800) + ); + } else if (cameraTarget.bound) { + const b = cameraTarget.bound; + const p1 = Cesium.Cartesian3.fromDegrees(...b[0]); + const p2 = Cesium.Cartesian3.fromDegrees(...b[1]); + this._map.camera.flyToBoundingSphere(Cesium.BoundingSphere.fromPoints([p1, p2])); + } + } +} diff --git a/src/views/Home/MapCtrl/Map3D/ToolManager3D.js b/src/views/Home/MapCtrl/Map3D/ToolManager3D.js new file mode 100644 index 000000000..ebb5e0d8a --- /dev/null +++ b/src/views/Home/MapCtrl/Map3D/ToolManager3D.js @@ -0,0 +1,167 @@ + +const { Cesium } = window; + +export class Tool { + pickEntity(position) { + const picked = this._viewer.scene.pick(position); + if (picked) { + const obj = Cesium.defaultValue(picked.id, picked.primitive.id); + if (obj instanceof Cesium.Entity) { + return obj; + } + } + return null; + } + + move(/* e */) { + } + + leftclick(/* e */) { + } + + rightclick(/* e */) { + } + + leftdoubleclick(/* e */) { + } + + activate(viewer) { + this._viewer = viewer; + } + + unload() { + console.log('unload'); + } + + get toolName() { + throw 'tool must have a name.'; + } +} + +export class NavigationTool extends Tool { + constructor() { + super(); + this.resultIndex = 0; + } + + move(movement, dispatch) { + const entity = this.pickEntity(movement.endPosition); + if (entity && entity.getFeatureTip) { + const featureTip = entity.getFeatureTip(entity); + if (featureTip) { + dispatch.runtime.setFeatureTip({ + pixel: [movement.endPosition.x, movement.endPosition.y], + featureTip, + }); + } else { + dispatch.runtime.setFeatureTip(null); + } + } else { + dispatch.runtime.setFeatureTip(null); + } + } + + leftclick(e, dispatch) { + const entity = this.pickEntity(e.position); + if (entity && entity.onFeatureClicked) { + this.resultIndex += 1; + entity.onFeatureClicked(entity, dispatch); + return; + } + } + + get toolName() { + return 'NavigationTool'; + } +} + +export class ToolManager { + constructor(viewer, dispatch) { + this._curtool = null; + this._viewer = viewer; + this._dispatch = dispatch; + } + + move(movement) { + const ray = this._viewer.camera.getPickRay(movement.endPosition); + const position = this._viewer.scene.globe.pick(ray, this._viewer.scene); + let text = ''; + if (Cesium.defined(position)) { + const cartographic = Cesium.Ellipsoid.WGS84.cartesianToCartographic(position); + const longitudeString = Cesium.Math.toDegrees(cartographic.longitude).toFixed(4); + const latitudeString = Cesium.Math.toDegrees(cartographic.latitude).toFixed(4); + const height = cartographic.height.toFixed(2); + + text = `(${longitudeString} , ${latitudeString} , ${height})`; + } + this._dispatch.runtime.setCoordsText(text); + + return this._curtool.move(movement, this._dispatch); + } + + leftclick(leftclick) { + if (this._curtool) { + this._curtool.leftclick(leftclick, this._dispatch); + } + } + + rightclick(rightclick) { + if (this._curtool) { + this._curtool.rightclick(rightclick, this._dispatch); + } + } + + leftdoubleclick(leftdoubleclick) { + if (this._curtool) { + this._curtool.leftdoubleclick(leftdoubleclick, this._dispatch); + } + } + + setTool(tool) { + if (tool == null) { + tool = new NavigationTool(); + } + + if (tool.toolName === this.curToolName) { + return; + } + + if (this._curtool) { + this._curtool.unload(); + this._curtool = null; + } + + tool.activate(this._viewer); + this._curtool = tool; + } + + get curTool() { + return this._curtool; + } + + get curToolName() { + return this._curtool ? this._curtool.toolName : null; + } + + init() { + const orignalClickHandler = this._viewer.cesiumWidget.screenSpaceEventHandler; + orignalClickHandler.removeInputAction(Cesium.ScreenSpaceEventType.LEFT_CLICK); + orignalClickHandler.removeInputAction(Cesium.ScreenSpaceEventType.LEFT_DOUBLE_CLICK); + + const handler = new Cesium.ScreenSpaceEventHandler(this._viewer.scene.canvas); + handler.setInputAction((move) => { + this.move(move); + }, Cesium.ScreenSpaceEventType.MOUSE_MOVE); + handler.setInputAction((click) => { + this.leftclick(click); + }, Cesium.ScreenSpaceEventType.LEFT_CLICK); + handler.setInputAction((click) => { + this.rightclick(click); + }, Cesium.ScreenSpaceEventType.RIGHT_CLICK); + handler.setInputAction((click) => { + this.leftdoubleclick(click); + }, Cesium.ScreenSpaceEventType.LEFT_DOUBLE_CLICK); + + this.setTool(null); + } +} diff --git a/src/views/Home/MapCtrl/Map3D/demo.js b/src/views/Home/MapCtrl/Map3D/demo.js new file mode 100644 index 000000000..55aa033e1 --- /dev/null +++ b/src/views/Home/MapCtrl/Map3D/demo.js @@ -0,0 +1,149 @@ + +export default class LayerMgr { + constructor({ viewer }) { + this.viewer = viewer + } + + //加载模型 + getGltf() { + const model = this.viewer.scene.primitives.add(Cesium.Model.fromGltf({ + url: `${process.env.PUBLIC_URL}/models/dam/scene.gltf`, + modelMatrix: Cesium.Transforms.eastNorthUpToFixedFrame( + Cesium.Cartesian3.fromDegrees(114.97, 31.48) // 模型位置 + ), + scale: 100 + })); + } + getWater() { + let initialHeight = 130 + const geometry = new Cesium.PolygonGeometry({ + polygonHierarchy: new Cesium.PolygonHierarchy( + Cesium.Cartesian3.fromDegreesArray(positions) + ), + extrudedHeight: initialHeight + }); + const waterPrimitive = new Cesium.Primitive({ + geometryInstances: new Cesium.GeometryInstance({ geometry }), + appearance: new Cesium.EllipsoidSurfaceAppearance({ + aboveGround: true, + material: new Cesium.Material({ + fabric: { + type: 'Water', + uniforms: { + normalMap: Cesium.buildModuleUrl( + `${process.env.PUBLIC_URL}/models/waternormals.jpg` + ), + frequency: 1000.0, + animationSpeed: 0.01, + amplitude: 10, + }, + }, + }), + }), + show: true, + // releaseGeometryInstances: false + }); + this.viewer.scene.primitives.add(waterPrimitive); + // 自动抬升 + let height = 0; + setInterval(() => { + if (height < 0.4) { + height += 0.001; + // height += 0.02; + // waterPrimitive.extrudedHeight = height; // 触发setter + var currentModelMatrix = Cesium.Matrix4.clone(waterPrimitive.modelMatrix); + // 定义平移向量（例如，沿x轴平移100单位） + var translation = new Cesium.Cartesian3(-height*0.7, height, height*0.8); + // 创建一个平移矩阵 + var translationMatrix = Cesium.Matrix4.fromTranslation(translation); + // 计算新的modelMatrix（将平移矩阵应用到当前模型矩阵上） + var newModelMatrix = Cesium.Matrix4.multiply(translationMatrix, currentModelMatrix, new Cesium.Matrix4()); + waterPrimitive.modelMatrix = newModelMatrix; + } + }, 100); + } + + getQxsy() { + var tileset = new Cesium.Cesium3DTileset({ + // url: 'http://res3dstatic7.cloudowr.cn/wufeng/3dtile/tileset.json', + url: + // 'service2/kshdata/1221wtz-3dtile-all/tileset.json', + 'http://res3d.oss-cn-shenzhen.aliyuncs.com/macheng/xiaoyutan/Scene/3DTILE.json', + // "service2/kshdata/GRH/tileset.json", + maximumScreenSpaceError: 1, //精细程度越小越精细 + maximumMemoryUsage: 1000, //不可设置太高，目标机子空闲内存值以内，防止浏览器过于卡 + }); + // fetch(`${process.env.PUBLIC_URL}/data/geojson/macheng/boua.geojson`) + // .then(resp => resp.json()) + // .then(data => { + // let features = data.features; + // let positionArray = []; + // // 获取区域的经纬度坐标 + // for (let i = 0; i < features[0].geometry.coordinates[0].length; i++) { + // let coor = features[0].geometry.coordinates[0][i]; + // positionArray.push(coor[0]); + // positionArray.push(coor[1]); + // } + + // // 遮罩 + // let polygonEntity = new Cesium.Entity({ + // polygon: { + // hierarchy: { + // // 添加外部区域为1/4半圆，设置为180会报错 [0, 0, 0, 90, 179, 90, 179, 0] + // positions: Cesium.Cartesian3.fromDegreesArray([100, 0, 100, 89, 150, 89, 150, 0]), + // // 中心挖空的“洞” + // holes: [{ + // positions: Cesium.Cartesian3.fromDegreesArray(positionArray) + // }] + // }, + // material: Cesium.Color.BLACK.withAlpha(0.7) //new Cesium.Color(236,242,249, 1) + // } + // }); + + // // 边界线 + // let lineEntity = new Cesium.Entity({ + // polyline: { + // positions: Cesium.Cartesian3.fromDegreesArray(positionArray), + // width: 7, + // material: Cesium.Color.fromCssColorString('#7AE3C8'),//边界线颜色//Cesium.Color.YELLOW //new Cesium.Color(122,227,200, 1) + // clampToGround: true, + // zIndex: 10 + // } + // }); + + // viewer.entities.add(polygonEntity); + // viewer.entities.add(lineEntity); + // //viewer.flyTo(lineEntity); + // }); + + + //添加到球体上 + viewer.scene.primitives.add(tileset); + + tileset.readyPromise.then(function () { + viewer.zoomTo( + tileset, + new Cesium.HeadingPitchRange( + 0, + -0.7, + 2500 + // tileset.boundingSphere.radius * 10 + ) + ); + }); + + //设置倾斜摄影Z轴高度 + tileset.readyPromise.then(function (tileset) { + const offsetHeight = 15 + const boundingSphere = tileset.boundingSphere + const cartographic = Cesium.Cartographic.fromCartesian(boundingSphere.center) + const surface = Cesium.Cartesian3.fromRadians(cartographic.longitude, cartographic.latitude, 0.0) + const offset = Cesium.Cartesian3.fromRadians(cartographic.longitude, cartographic.latitude, offsetHeight) + const translation = Cesium.Cartesian3.subtract(offset, surface, new Cesium.Cartesian3()) + tileset.modelMatrix = Cesium.Matrix4.fromTranslation(translation) + // viewer.flyTo(tileset) + }) + } + +} + diff --git a/src/views/Home/MapCtrl/Map3D/layermgr3d.js b/src/views/Home/MapCtrl/Map3D/layermgr3d.js new file mode 100644 index 000000000..910931fec --- /dev/null +++ b/src/views/Home/MapCtrl/Map3D/layermgr3d.js @@ -0,0 +1,91 @@ +import LayerMgr from "../layermgr"; +import BouaLayer3D from "./layers/BouaLayer3D"; +import RainLayer3D from "./layers/RainLayer3D"; +import RainLayer3DRadar from "./layers/RainLayer3D-radar"; +import RainLayer3DRh from "./layers/RainLayer3D-rh"; + +import HLLayer3D from "./layers/HLLayer3D"; +import XLYLayer3D from "./layers/XLYLayer3D"; + +export default class LayerMgr3D extends LayerMgr { + constructor(viewer) { + super(); + + this.viewer = viewer; + this.highlightEnts = []; + } + + /** + * 添加图层 + * @param {@BaseLayer} + */ + addLayer(layer) { + this.layers.push(layer); + if (layer.onAdd) { + layer.onAdd(this.viewer); + } + + return layer; + } + + destroy() { + for (const layer of this.layers) { + layer.destroy(); + } + this.viewer.entities.removeAll(); + + this.viewer.imageryLayers.removeAll() + } + + frameUpdate() { + const tm = Date.now(); + for (const layer of this.layers) { + if (layer.onFrameUpdate) { + layer.onFrameUpdate(tm, this.viewer); + } + } + } + + /** + * + */ + addAppLayers(dispatch, visible, setting, otherParams) { + visible = visible || {}; + + this.addLayer(new BouaLayer3D({ visible: visible[BouaLayer3D.LayerName], setting, dispatch })); + + if(visible[RainLayer3D.LayerName]){ + this.addLayer(new RainLayer3D({ visible: visible[RainLayer3D.LayerName], setting, dispatch })); + }else{ + //this.viewer.imageryLayers.removeAll(); + this.viewer.entities.removeAll(); + } + if(visible[RainLayer3DRadar.LayerName]){ + this.addLayer(new RainLayer3DRadar({ visible: visible[RainLayer3DRadar.LayerName], setting, dispatch })); + }else{ + //this.viewer.imageryLayers.removeAll(); + this.viewer.entities.removeAll(); + } + if(visible[RainLayer3DRh.LayerName]){ + this.addLayer(new RainLayer3DRh({ visible: visible[RainLayer3DRh.LayerName], setting, dispatch })); + }else{ + //this.viewer.imageryLayers.removeAll(); RainLayer3DRh + this.viewer.entities.removeAll(); + } + + if(visible[HLLayer3D.LayerName]){ + this.addLayer(new HLLayer3D({ visible: visible[HLLayer3D.LayerName], setting, dispatch })); + }else{ + //this.viewer.imageryLayers.removeAll(); + this.viewer.entities.removeAll(); + } + if(visible[XLYLayer3D.LayerName]){ + this.addLayer(new XLYLayer3D({ visible: visible[XLYLayer3D.LayerName], setting, dispatch })); + }else{ + //this.viewer.imageryLayers.removeAll(); + this.viewer.entities.removeAll(); + } + + this._addAppMarkerLayers(dispatch, visible, setting, otherParams); + } +} diff --git a/src/views/Home/MapCtrl/Map3D/layers/BouaLayer3D.js b/src/views/Home/MapCtrl/Map3D/layers/BouaLayer3D.js new file mode 100644 index 000000000..ebb1a70d7 --- /dev/null +++ b/src/views/Home/MapCtrl/Map3D/layers/BouaLayer3D.js @@ -0,0 +1,154 @@ +import FeatureLayer3D from "./FeatureLayer3D"; +import { getPolygonHierarchy } from "../utils/cesutil"; +import { zindex2d } from "../../zindex"; +import { xzList } from "../../../../../models/_/common"; + +const { Cesium } = window; + +const ROW_KEY = 'CODE'; + +export default class BouaLayer3D extends FeatureLayer3D { + static LayerName = 'BouaLayer'; + + constructor(props) { + super({ ...props, rowKey: ROW_KEY }); + } + + getLayerName() { + return BouaLayer3D.LayerName; + } + + async dataPromise() { + const a1 = await fetch(`${process.env.PUBLIC_URL}/data/geojson/xj.geojson`) + .then(resp => resp.json()) + .then(data => data.features) + .then(features => features.map(o => ({ + ...o.properties, + geometry: o.geometry, + type: 'xj', + }))) + .catch(() => []); + + const a2 = await fetch(`${process.env.PUBLIC_URL}/data/geojson/xzj.geojson`) + .then(resp => resp.json()) + .then(data => data.features) + .then(features => features.map(o => ({ + ...o.properties, + geometry: o.geometry, + type: 'xzj', + }))) + .catch(() => []); + + const xzLabel = await xzList().then(data => data.map(o => ({ + ...o, + //code: o.CODE, + type: 'label' + }))); + + return [...a1, ...a2, ...xzLabel]; + } + + featureState(record) { + const id = record[ROW_KEY]; + const highlight = this.highlights[id]; + let width = record.type === 'xj' ? 3 : 2; + let opacity = record.type === 'xj' ? 0.6 : 0.3; + let color; + if (highlight) { + color = Cesium.Color.fromCssColorString(`rgb(255, 0, 0, 0.8)`); + width = width * 2; + } else { + color = Cesium.Color.fromCssColorString(`rgb(255, 255, 255, ${opacity})`); + } + return { + id, + highlight, + color, + width, + } + } + + addFeature(record) { + if (record.type === 'label') { + + const labelEnt = this._viewer.entities.add({ + show: this._isRecordVisible(record), + position: Cesium.Cartesian3.fromDegrees(record.lgtd, record.lttd, record.elev), + + label: { + text: record.NAME, + font: 'bold 14px 微软雅黑', + fillColor: Cesium.Color.fromCssColorString('#fbffa7'), + style: Cesium.LabelStyle.FILL_AND_OUTLINE, + heightReference: Cesium.HeightReference.NONE, + //pixelOffset: new Cesium.Cartesian2(0, 8), + disableDepthTestDistance: Number.POSITIVE_INFINITY, + } + }); + labelEnt.__props = record; + + return labelEnt; + + } else { + if (!record.geometry) { + return; + } + const coordsArr = getPolygonHierarchy(record.geometry); + if (!coordsArr) { + return null; + } + + const state = this.featureState(record); + const ret = []; + for (const coords of coordsArr) { + const outerPositions = Array.isArray(coords) ? coords : coords.positions; + if (outerPositions) { + const lineent = this._viewer.entities.add({ + show: this._isRecordVisible(record), + polyline: { + positions: outerPositions, + width: state.width, + clampToGround: true, + material: state.color, + zIndex: state.highlight ? zindex2d.bouahighlight : (record.type === 'xj' ? zindex2d.boua1 : zindex2d.boua2) + }, + }); + lineent.__props = record; + lineent.__state = state; + + ret.push(lineent); + } + } + + return ret; + } + + + } + + refreshFeatureEntity(ent) { + const state = ent.__state; + const props = ent.__props; + if (!state || !props) { + return; + } + + if (state.highlight !== this.highlights[state.id]) { + const newState = this.featureState(props); + + ent.polyline.width = newState.width; + ent.polyline.material.color = newState.color; + ent.polyline.zIndex = newState.highlight ? zindex2d.bouahighlight : (props.type === 'xj' ? zindex2d.boua1 : zindex2d.boua2) + ent.__state = newState; + } + } + + setSetting(setting) { + if (setting?.highlight?.BouaLayer !== this._setting?.highlight?.BouaLayer) { + this.highlights = this.getHighlightMap(setting?.highlight); + this.refreshFeatureEntities(); + } + + this._setting = setting; + } +} diff --git a/src/views/Home/MapCtrl/Map3D/layers/FeatureLayer3D.js b/src/views/Home/MapCtrl/Map3D/layers/FeatureLayer3D.js new file mode 100644 index 000000000..7108c5878 --- /dev/null +++ b/src/views/Home/MapCtrl/Map3D/layers/FeatureLayer3D.js @@ -0,0 +1,133 @@ +import BaseLayer3D from "./baselayer3d"; + +export default class FeatureLayer3D extends BaseLayer3D { + constructor(props) { + super(props); + + this._loading = false; + this.rowKey = props.rowKey; + + this.highlights = this.getHighlightMap(); + } + + _updateVisible() { + if (!this._entities) { + return; + } + + for (const ent of this._entities) { + if (ent.__props) { + const needShow = this._isRecordVisible(ent.__props); + if (ent.show != needShow) { + ent.show = needShow; + } + } + } + } + + _isRecordVisible(record) { + return !!(this.isVisible() || this.highlights[record[this.rowKey]]); + } + + setVisible(val) { + super.setVisible(val); + + this._updateVisible(); + } + + dataPromise() { + return Promise.resolve([]); + } + + addFeature(record) { + console.error('method addFeature not impl', record); + } + + /** + * 读取数据并设置数据源 + */ + loadData() { + if (this._loading) { + return; + } + + this._loading = true; + this.dataPromise().then((data) => { + this._loading = false; + this.setData(data); + }); + } + + beforeSetData() { } + + /** + * 设置数据源 + * @param {*} records + */ + setData(records) { + const viewer = this._viewer; + if (!viewer || !viewer.dataSourceDisplay?.defaultDataSource) { + console.log('viewer null'); + return; + } + + this.beforeSetData(); + + viewer.entities.suspendEvents(); + try { + if (Array.isArray(this._entities) && this._entities.length > 0) { + for (const ent of this._entities) { + viewer.entities.remove(ent); + } + this._entities = undefined; + } + + if (Array.isArray(records)) { + this._entities = []; + for (const record of records) { + const ents = this.addFeature(record); + this._appendEntities(ents); + } + } + } catch (e) { + console.log(e); + } finally { + viewer.entities.resumeEvents(); + } + } + + onAdd(viewer) { + super.onAdd(viewer); + this.loadData(); + } + + + // 辅助函数，根据需要继承 + refreshFeatureEntity(ent) { } + + // 辅助函数 + refreshFeatureEntities() { + const viewer = this._viewer; + if (!viewer) { + console.error('viewer null'); + return; + } + + //console.log(this.highlights, this._setting); + viewer.entities.suspendEvents(); + try { + if (Array.isArray(this._entities) && this._entities.length > 0) { + for (const ent of this._entities) { + this.refreshFeatureEntity(ent) + } + } + + this._updateVisible(); + } catch (e) { + console.log(e); + } finally { + viewer.entities.resumeEvents(); + } + } + +} diff --git a/src/views/Home/MapCtrl/Map3D/layers/HLLayer3D.js b/src/views/Home/MapCtrl/Map3D/layers/HLLayer3D.js new file mode 100644 index 000000000..f3c6dd4b8 --- /dev/null +++ b/src/views/Home/MapCtrl/Map3D/layers/HLLayer3D.js @@ -0,0 +1,95 @@ +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"; +import simplify from '@turf/simplify'; + + +const { Cesium } = window; + +export default class HLLayer3D extends FeatureLayer3D { + static LayerName = 'HLLayer'; + + constructor(props) { + super(props); + this.rowKey = 'hl_id'; + } + + getLayerName() { + return HLLayer3D.LayerName; + } + + async dataPromise() { + const hlData = await fetch(`${process.env.PUBLIC_URL}/data/geojson/广润河流域线.geojson`) + .then(resp => resp.json()) + .then(data => data.features) + .then(features => features + .filter(o => o.geometry.type === 'LineString' && o.geometry.coordinates.length > 1) + .map(({ properties, geometry }) => ({ + ...properties, + geometry, + name: properties.name || properties.Name, + pname: properties.projName, + id: properties.FID, + }))) + .catch(() => []); + + return hlData; + } + + featureState(record) { + const id = record['hl_id']; + const highlight = this.highlights[id]; + let width = record.type === 'xj' ? 3 : 2; + let opacity = record.type === 'xj' ? 0.6 : 0.3; + let color; + if (highlight) { + color = Cesium.Color.fromCssColorString(`rgb(255, 0, 0, 0.8)`); + width = width * 2; + } else { + color = Cesium.Color.fromCssColorString(`rgb(255, 255, 255, ${opacity})`); + } + return { + id, + highlight, + color, + width, + } + } + + addFeature(record) { + if (!record.geometry) { + return; + } + const coordsArr = getPolygonHierarchy(record.geometry); + if (!coordsArr) { + return null; + } + + const state = this.featureState(record); + const ret = []; + for (const coords of coordsArr) { + const outerPositions = Array.isArray(coords) ? coords : coords.positions; + //console.log(outerPositions); + if (outerPositions) { + const lineent = this._viewer.entities.add({ + show: this._isRecordVisible(record), + polyline: { + positions: outerPositions, + width: 4, + clampToGround: true, + material: Cesium.Color.fromCssColorString('#84b3e8').withAlpha(0.7), + zIndex: 4 + }, + }); + lineent.__props = record; + lineent.__state = state; + + ret.push(lineent); + } + } + + return ret; + } +} diff --git a/src/views/Home/MapCtrl/Map3D/layers/RainLayer3D-radar.js b/src/views/Home/MapCtrl/Map3D/layers/RainLayer3D-radar.js new file mode 100644 index 000000000..fb7b509dd --- /dev/null +++ b/src/views/Home/MapCtrl/Map3D/layers/RainLayer3D-radar.js @@ -0,0 +1,56 @@ +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 RainLayer3DRadar extends FeatureLayer3D { + static LayerName = 'RainLayerRadar'; + + constructor(props) { + super(props); + this.rowKey = 'gml_id'; + } + + getLayerName() { + return RainLayer3DRadar.LayerName; + } + + async dataPromise() { + const rainData = await fetch(`${process.env.PUBLIC_URL}/data/rainfallCenter/建始县20210812.geojson`) + .then(resp => resp.json()) + .then(data => data.features) + .then(features => features.map(o => ({ ...o.properties, geometry: o.geometry, type: 'rain' }))) + .catch(() => []); + + //console.log("rainData 33++++",rainData); + + 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({ + show: this.isVisible(), + polygon: { + hierarchy: coords, + material: Cesium.Color.fromCssColorString(record.fill).withAlpha(1), + zIndex: 5 + } + }); + ret.push(ent); + } + + return ret; + } +} diff --git a/src/views/Home/MapCtrl/Map3D/layers/RainLayer3D-rh.js b/src/views/Home/MapCtrl/Map3D/layers/RainLayer3D-rh.js new file mode 100644 index 000000000..0b373bdbc --- /dev/null +++ b/src/views/Home/MapCtrl/Map3D/layers/RainLayer3D-rh.js @@ -0,0 +1,56 @@ +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 RainLayer3DRh extends FeatureLayer3D { + static LayerName = 'RainLayerRh'; + + constructor(props) { + super(props); + this.rowKey = 'gml_id'; + } + + getLayerName() { + return RainLayer3DRh.LayerName; + } + + async dataPromise() { + const rainData = await fetch(`${process.env.PUBLIC_URL}/data/rainfallCenter/建始县20210811.geojson`) + .then(resp => resp.json()) + .then(data => data.features) + .then(features => features.map(o => ({ ...o.properties, geometry: o.geometry, type: 'rain' }))) + .catch(() => []); + + //console.log("rainData 33++++",rainData); + + 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({ + show: this.isVisible(), + polygon: { + hierarchy: coords, + material: Cesium.Color.fromCssColorString(record.fill).withAlpha(1), + zIndex: 5 + } + }); + ret.push(ent); + } + + return ret; + } +} diff --git a/src/views/Home/MapCtrl/Map3D/layers/RainLayer3D.js b/src/views/Home/MapCtrl/Map3D/layers/RainLayer3D.js new file mode 100644 index 000000000..27958576b --- /dev/null +++ b/src/views/Home/MapCtrl/Map3D/layers/RainLayer3D.js @@ -0,0 +1,56 @@ +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 RainLayer3D extends FeatureLayer3D { + static LayerName = 'RainLayer'; + + constructor(props) { + super(props); + this.rowKey = 'gml_id'; + } + + getLayerName() { + return RainLayer3D.LayerName; + } + + async dataPromise() { + const rainData = await fetch(`${process.env.PUBLIC_URL}/data/rainfallCenter/建始县20210810.geojson`) + .then(resp => resp.json()) + .then(data => data.features) + .then(features => features.map(o => ({ ...o.properties, geometry: o.geometry, type: 'rain' }))) + .catch(() => []); + + //console.log("rainData 33++++",rainData); + + 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({ + show: this.isVisible(), + polygon: { + hierarchy: coords, + material: Cesium.Color.fromCssColorString(record.fill).withAlpha(1), + zIndex: zindex2d.sx + } + }); + ret.push(ent); + } + + return ret; + } +} diff --git a/src/views/Home/MapCtrl/Map3D/layers/XLYLayer3D.js b/src/views/Home/MapCtrl/Map3D/layers/XLYLayer3D.js new file mode 100644 index 000000000..f5bfead71 --- /dev/null +++ b/src/views/Home/MapCtrl/Map3D/layers/XLYLayer3D.js @@ -0,0 +1,98 @@ +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"; +import simplify from '@turf/simplify'; + + +const { Cesium } = window; + +export default class XLYLayer3D extends FeatureLayer3D { + static LayerName = 'XLYLayer'; + + constructor(props) { + super(props); + this.rowKey = 'XLY_id'; + } + + getLayerName() { + return XLYLayer3D.LayerName; + } + + async dataPromise() { + const XLYData1 = await fetch(`${process.env.PUBLIC_URL}/data/geojson/广润河流域面.geojson`) + .then(resp => resp.json()) + .then(data => data.features) + .then(features => features.map(o => ({ ...o.properties, geometry: o.geometry, type: 'ly1' }))) + .catch(() => []); + + const XLYData2 = await fetch(`${process.env.PUBLIC_URL}/data/geojson/广润河支流面.geojson`) + .then(resp => resp.json()) + .then(data => data.features) + .then(features => features.map(o => ({ ...o.properties, geometry: o.geometry, type: 'ly2' }))) + .catch(() => []); + + return [...XLYData1, ...XLYData2]; + } + + featureState(record) { + const id = record['XLY_id']; + const highlight = this.highlights[id]; + let width = record.type === 'xj' ? 3 : 2; + let opacity = record.type === 'xj' ? 0.6 : 0.3; + let color; + if (highlight) { + color = Cesium.Color.fromCssColorString(`rgb(255, 0, 0, 0.8)`); + width = width * 2; + } else { + color = Cesium.Color.fromCssColorString(`rgb(255, 255, 255, ${opacity})`); + } + return { + id, + highlight, + color, + width, + } + } + + addFeature(record) { + if (!record.geometry) { + return; + } + const coordsArr = getPolygonHierarchy(record.geometry); + if (!coordsArr) { + return null; + } + + const state = this.featureState(record); + const ret = []; + for (const coords of coordsArr) { + const outerPositions = Array.isArray(coords) ? coords : coords.positions; + + if (outerPositions) { + const lineent = this._viewer.entities.add({ + show: this._isRecordVisible(record), + polyline: { + positions: outerPositions, + width: 4, + clampToGround: true, + material: Cesium.Color.fromCssColorString('#da6361').withAlpha(0.7), + zIndex: 4 + }, + polygon: { + hierarchy: coords, + material: record.type === "ly2"?Cesium.Color.fromCssColorString('#da6361').withAlpha(0.6):Cesium.Color.fromCssColorString('#da6361').withAlpha(0), + zIndex: zindex2d.sx + } + }); + lineent.__props = record; + lineent.__state = state; + + ret.push(lineent); + } + } + + return ret; + } +} diff --git a/src/views/Home/MapCtrl/Map3D/layers/baselayer3d.js b/src/views/Home/MapCtrl/Map3D/layers/baselayer3d.js new file mode 100644 index 000000000..1f06a90da --- /dev/null +++ b/src/views/Home/MapCtrl/Map3D/layers/baselayer3d.js @@ -0,0 +1,65 @@ +import BaseLayer from "../../baselayer"; + +export default class BaseLayer3D extends BaseLayer { + constructor(props) { + super(props); + + // cesium的entity对象数组，如果是数组，则表示图层是可见的，如果是undefine，则表示图层未加载 + this._entities = undefined; + this._viewer = undefined; + } + + onAdd(viewer) { + this._viewer = viewer; + } + + /** + * + * @param {*} removeEntities + */ + destroy(removeEntities) { + if (!this._entities || !this._entities.length) { + return; + } + if (removeEntities) { + this._removeEntities(); + } + this._entities = undefined; + } + + _removeEntities() { + if (!this._entities) { + return; + } + const viewer = this._viewer; + viewer.entities.suspendEvents(); + try { + for (const ent of this._entities) { + viewer.entities.remove(ent); + } + } catch (e) { + console.log(e); + } finally { + viewer.entities.resumeEvents(); + } + this._entities = undefined; + } + + _appendEntities(ents) { + if (!Array.isArray(this._entities)) { + this._entities = []; + } + if (Array.isArray(ents)) { + for (const ent of ents) { + this._entities.push(ent); + } + } else if (ents) { + this._entities.push(ents); + } + } + + /** + * 每一帧调用 + */ + //onFrameUpdate(tm) {} +} diff --git a/src/views/Home/MapCtrl/Map3D/utils/cesutil.js b/src/views/Home/MapCtrl/Map3D/utils/cesutil.js new file mode 100644 index 000000000..304e39c8b --- /dev/null +++ b/src/views/Home/MapCtrl/Map3D/utils/cesutil.js @@ -0,0 +1,65 @@ +//import Cesium from 'cesium'; +const { Cesium } = window; + + +export function getPolygonHierarchy(geom) { + if (typeof geom === 'string') { + try { + geom = JSON.parse(geom); + } catch (e) { + return null; + } + } + const type = geom.type; + let polygons = []; + if (type === 'Polygon') { + polygons.push(geom.coordinates); + } else if (type === 'MultiPolygon') { + polygons = geom.coordinates; + } else if (type === 'LineString' || type === 'Ring') { + polygons.push([geom.coordinates]); + } + + if (polygons.length === 0) { + return null; + } + + const ret = []; + for (const lines of polygons) { + let positions = null; + const holes = []; + for (const linedata of lines) { + const coordarr = []; + for (const curpt of linedata) { + const h = curpt[2] ? curpt[2] : 0; + coordarr.push(curpt[0], curpt[1], h); + } + + if (!positions) { + positions = Cesium.Cartesian3.fromDegreesArrayHeights(coordarr); + } else { + holes.push({ + positions: Cesium.Cartesian3.fromDegreesArrayHeights(coordarr), + }); + } + } + + if (!positions) { + return null; + } + + let hierarchy; + if (holes.length === 0) { + hierarchy = positions; + } else { + hierarchy = { + positions, + holes, + }; + } + + ret.push(hierarchy); + } + + return ret; +} diff --git a/src/views/Home/MapCtrl/index.js b/src/views/Home/MapCtrl/index.js index 308c2a173..299b61791 100644 --- a/src/views/Home/MapCtrl/index.js +++ b/src/views/Home/MapCtrl/index.js @@ -4,6 +4,7 @@ import FeaturePops from './Pops'; import FeatureTip from './FeatureTip'; import './index.less'; import Map2D from './M2D/Map2D'; +import Map3D from './Map3D/Map3D'; import Markers from './Markers'; import { useLocation, useNavigate } from "react-router"; @@ -11,26 +12,18 @@ let id_factory_index = 1; export default function MapCtrl() { const location = useLocation(); - const navigate = useNavigate(); - const pathname = location.pathname; - const ctrlIdRef = useRef(`cloudowr_mapdiv_${id_factory_index++}`); const mapobjRef = useRef(); const [_, forceRender] = useReducer(s => s + 1, 1); - - const dispatch = useDispatch(); - const cameraTarget = useSelector(s => s.runtime.cameraTarget); - const mapIn = useSelector(s => s.runtime.mapIn); - const mapOut = useSelector(s => s.runtime.mapOut); const layerVisible = useSelector(s => s.map.layerVisible); const layerSetting = useSelector(s => s.map.layerSetting); - const clickLoopBtn = useSelector(s => s.map.clickLoopBtn); const layerSetting1 = useSelector(s => s.runtime.layerSetting); const layerSettingLoop = useSelector(s => s.runtime.layerSettingLoop); const smallSkRiskTime = useSelector(s => s.runtime.smallSkRiskTime); + const dispatch = useDispatch(); useEffect(() => { const mapCtrl = mapobjRef.current; @@ -42,26 +35,12 @@ export default function MapCtrl() { }, [layerVisible, layerSetting, mapobjRef.current]); - // useEffect(() => { - // const mapCtrl = mapobjRef.current; - // if (!mapCtrl) { - // return; - // } - // // mapCtrl.zoomIn() - // const a = mapCtrl.getView().getZoom() - // debugger - // },[mapIn,mapOut]) useEffect(() => { const mapCtrl = mapobjRef.current; if (!mapCtrl) { return; } - console.log("75", layerVisible); - // || !layerVisible["forecastPoints"] - // if (layerVisible["HLLayer"]) { - // mapCtrl.zoomTo(cameraTarget); - // } mapCtrl.zoomTo(cameraTarget); }, [cameraTarget]) @@ -72,7 +51,8 @@ export default function MapCtrl() { divid: ctrlIdRef.current, dispatch }; - const mapobj = new Map2D(params); + // const mapobj = new Map2D(params); + const mapobj = mode === '3d' ? new Map3D(params) : new Map2D(params); setMapObj(mapobj); mapobj.init(); @@ -107,10 +87,6 @@ export default function MapCtrl() { useEffect(() => { const mapCtrl = mapobjRef.current; if (mapCtrl) { - console.log("mapCtrl.layerMgr 100++++++++++++++", layerVisible["ContourLayerLoop"]); - - //console.log("clickLoopBtn",clickLoopBtn); - if (clickLoopBtn) { mapCtrl.layerMgr.addAppLayersCLoop(dispatch, layerVisible, layerSettingLoop); } diff --git a/src/views/Home/MapCtrl/index2.js b/src/views/Home/MapCtrl/index2.js new file mode 100644 index 000000000..5ef83e7c9 --- /dev/null +++ b/src/views/Home/MapCtrl/index2.js @@ -0,0 +1,114 @@ +import React, { useEffect, useReducer, useRef, useState } from 'react'; +import { useDispatch, useSelector } from 'react-redux'; +import FeaturePops from './Pops'; +import FeatureTip from './FeatureTip'; +import './index.less'; +import Map2D from './M2D/Map2D'; +import Map3D from './Map3D/Map3D'; +import Markers from './Markers'; +import { useLocation, useNavigate } from "react-router"; + +let id_factory_index = 1; + +export default function MapCtrl({mode}) { + const location = useLocation(); + const pathname = location.pathname; + const ctrlIdRef = useRef(`cloudowr_mapdiv_${id_factory_index++}`); + const mapobjRef = useRef(); + const [_, forceRender] = useReducer(s => s + 1, 1); + const cameraTarget = useSelector(s => s.runtime.cameraTarget); + const layerVisible = useSelector(s => s.map.layerVisible); + const layerSetting = useSelector(s => s.map.layerSetting); + const clickLoopBtn = useSelector(s => s.map.clickLoopBtn); + const layerSetting1 = useSelector(s => s.runtime.layerSetting); + const layerSettingLoop = useSelector(s => s.runtime.layerSettingLoop); + const smallSkRiskTime = useSelector(s => s.runtime.smallSkRiskTime); + const dispatch = useDispatch(); + + useEffect(() => { + const mapCtrl = mapobjRef.current; + if (!mapCtrl) { + return; + } + mapCtrl.layerMgr.setSetting(layerSetting || {}); + mapCtrl.layerMgr.setVisible(layerVisible || {}); + + }, [layerVisible, layerSetting, mapobjRef.current]); + + // useEffect(() => { + // const mapCtrl = mapobjRef.current; + // if (!mapCtrl) { + // return; + // } + // // mapCtrl.zoomIn() + // const a = mapCtrl.getView().getZoom() + // debugger + // },[mapIn,mapOut]) + + useEffect(() => { + const mapCtrl = mapobjRef.current; + if (!mapCtrl) { + return; + } + mapCtrl.zoomTo(cameraTarget); + }, [cameraTarget]) + + const [mapObj, setMapObj] = useState(null); + + useEffect(() => { + const params = { + divid: ctrlIdRef.current, + dispatch + }; + console.log(77); + // const mapobj = new Map2D(params); + const mapobj = mode === '3d' ? new Map3D(params) : new Map2D(params); + setMapObj(mapobj); + + mapobj.init(); + + mapobj.layerMgr.addAppLayers(dispatch, layerVisible, layerSetting, smallSkRiskTime); + + mapobjRef.current = mapobj; + + forceRender(); + + return () => { + mapobj.destroy(); + mapobjRef.current = null; + } + }, [mode,pathname]); + + useEffect(() => { + if (layerVisible["ContourLayer"]) { + mapObj.layerMgr.addAppLayersC(dispatch, layerVisible, layerSetting1); + } + }, [layerSetting1]); + + //smallSkRiskTime + useEffect(() => { + const mapCtrl = mapobjRef.current; + + if (smallSkRiskTime && smallSkRiskTime.stm && smallSkRiskTime.etm) { + mapCtrl.layerMgr.addAppLayers(dispatch, layerVisible, layerSetting, smallSkRiskTime); + } + }, [smallSkRiskTime]); + + useEffect(() => { + const mapCtrl = mapobjRef.current; + if (mapCtrl) { + if (clickLoopBtn) { + mapCtrl.layerMgr.addAppLayersCLoop(dispatch, layerVisible, layerSettingLoop); + } + } + }, [layerSettingLoop, clickLoopBtn]); + + return ( +
+ + + {/**/} + +
+ ); +} diff --git a/src/views/Home/btn/index.js b/src/views/Home/btn/index.js new file mode 100644 index 000000000..6c0966f54 --- /dev/null +++ b/src/views/Home/btn/index.js @@ -0,0 +1,141 @@ +import React, { useEffect, useReducer, useRef, useState } from 'react'; +import { useDispatch, useSelector } from 'react-redux'; +import DiQiu from '../img/DiQiu.png' +import ZhongXin from '../img/ZhongXin.png' +import Shouqi2 from '../img/shouqi2.png' +import Zhankai2 from '../img/zhankai2.png' + +export default function Btn({showPanels,setShowPanels}) { + const [open, setOpen] = useState(false) + const getLayerVisible = (s) => s.map.layerVisible; + const mode = useSelector((s) => s.map.mode); + const layerVisible = useSelector(getLayerVisible); + let mapObj = useSelector((s) => s.map.map); + + const dispatch = useDispatch() + + + //收起\展开 + const collapseExpand = () => { + setShowPanels(!showPanels) + } + //图层控制 + const showLayers = () => { + setOpen(!open) + } + const onClose = () => { + setOpen(false) + } + //还原地图位置 + const reduction = () => { + dispatch.runtime.setHome() + } + //影像图btn + const yxtBtn = () =>{ + dispatch.map.setMode('2d'); + dispatch.map.setLayerVisible({ ['OfflineMap']: false }); + dispatch.map.setLayerVisible({ ['SatelliteImage']: true }); + //卫星图打开河流面很丑，所以关掉 + mapObj && mapObj.getLayers().getArray().forEach((layer)=> { + if(layer.values_.name === "HLLayer"||layer.values_.name === "HL2Layer"){ + layer.setVisible(false); + } + if(layer.values_.name === "HLLayer2"){ + layer.setVisible(true); + } + }); + } + //矢量图btn + const sltBtn = ()=>{ + dispatch.map.setMode('2d'); + dispatch.map.setLayerVisible({ ['SatelliteImage']: false }); + dispatch.map.setLayerVisible({ ['OfflineMap']: true }); + mapObj && mapObj.getLayers().getArray().forEach((layer)=> { + if(layer.values_.name === "HLLayer"||layer.values_.name === "HL2Layer"){ + layer.setVisible(true); + } + if(layer.values_.name === "HLLayer2"){ + layer.setVisible(false); + } + }); + } + //3Dbtn + const btn3d = ()=>{ + dispatch.map.setMode('3d'); + } + + return ( +
+
+
+ +
+
+ +
+
+ {showPanels ? ( + + ) : ( + + )} +
+ {/*
{ + dispatch.runtime.setIn(); + }}> + +
+
{ + dispatch.runtime.setOut(); + }}> + +
*/} + {/*
+ +
*/} +
+
+ + 3D图 +
+
+ + 影像图 +
+
+ + 矢量图 +
+
+
+
+ ); +} diff --git a/src/views/Home/homePanelsLayoutPage/index.js b/src/views/Home/homePanelsLayoutPage/index.js index ff3c8cc9e..0d9c68951 100644 --- a/src/views/Home/homePanelsLayoutPage/index.js +++ b/src/views/Home/homePanelsLayoutPage/index.js @@ -191,7 +191,7 @@ const HomePage = ({showPanels}) => { } { checkedObj.labelRight? -
+
{ showTable?
diff --git a/src/views/Home/homePanelsLayoutPage/index.less b/src/views/Home/homePanelsLayoutPage/index.less index 88cde57d3..361a913bd 100644 --- a/src/views/Home/homePanelsLayoutPage/index.less +++ b/src/views/Home/homePanelsLayoutPage/index.less @@ -82,7 +82,7 @@ padding: 10px; border-radius: 10px; background: #ffffff; - border: 1px solid #eee; + // border: 1px solid #eee; .homePage_head2{ width: 100%; diff --git a/src/views/Home/homePanelsLayoutXL/http/rightHtpp.js b/src/views/Home/homePanelsLayoutXL/http/rightHtpp.js deleted file mode 100644 index 8157c8d00..000000000 --- a/src/views/Home/homePanelsLayoutXL/http/rightHtpp.js +++ /dev/null @@ -1,115 +0,0 @@ -import { httpget2 } from "../../../../utils/request" -import apiUrl from '../../../../service/apiurl' -export const adList = async(params)=>{ - const res = await httpget2(apiUrl.jbqk.shjj.list,params) - return res -} -export const info = async(params)=>{ - const res = await httpget2(apiUrl.jbqk.shjj.info,params) - return res -} - -export const cList = async(params)=>{ - const res = await httpget2(apiUrl.jbqk.shjj.cList,params) - return res -} - -export const hlsxList = async(params)=>{ - const res = await httpget2(apiUrl.jbqk.hlsx.list,params) - return res -} - -export const qhtdInfo = async(params)=>{ - const res = await httpget2(apiUrl.jbqk.qxsw.qxtd.qhtd,params) - return res -} - -export const jysdfbInfo = async(params)=>{ - const res = await httpget2(apiUrl.jbqk.qxsw.qxtd.jysdfb,params) - return res -} - -export const byjzInfo = async(params)=>{ - let url = params === 'hb'? apiUrl.jbqk.qxsw.qxtd.byjzhb:apiUrl.jbqk.qxsw.qxtd.byjzxf - const res = await httpget2(url,{}) - return res -} - -export const byplInfo = async()=>{ - const res = await httpget2(apiUrl.jbqk.qxsw.qxtd.bypl,{}) - return res -} - -export const skList = async()=>{ - const res = await httpget2(apiUrl.jbqk.slgc.sk.list,{}) - return res -} - -export const skcount = async()=>{ - const res = await httpget2(apiUrl.jbqk.slgc.sk.count,{}) - return res -} - -export const sdzCount = async()=>{ - const res = await httpget2(apiUrl.jbqk.slgc.sdz.count,{}) - return res -} - -export const sdzList = async()=>{ - const res = await httpget2(apiUrl.jbqk.slgc.sdz.list,{}) - return res -} - -export const ysgcCount = async()=>{ - const res = await httpget2(apiUrl.jbqk.slgc.ysgc.count,{}) - return res -} - -export const ysgcList = async()=>{ - const res = await httpget2(apiUrl.jbqk.slgc.ysgc.list,{}) - return res -} - -export const tybCount = async()=>{ - const res = await httpget2(apiUrl.jbqk.slgc.tyb.count,{}) - return res -} - -export const tybList = async()=>{ - const res = await httpget2(apiUrl.jbqk.slgc.tyb.list,{}) - return res -} - - -export const yfzhdCount = async()=>{ - const res = await httpget2(apiUrl.jbqk.yfzhd.count,{}) - return res -} -export const yfzhdList = async()=>{ - const res = await httpget2(apiUrl.jbqk.yfzhd.list,{}) - return res -} -export const yfzhdTableList = async()=>{ - const res = await httpget2(apiUrl.jbqk.yfzhd.tableList,{}) - return res -} - - -export const dzzhdCount = async()=>{ - const res = await httpget2(apiUrl.jbqk.dzzhd.count,{}) - return res -} -export const dzzhdList = async()=>{ - const res = await httpget2(apiUrl.jbqk.dzzhd.list,{}) - return res -} -export const dzzhdTableList = async()=>{ - const res = await httpget2(apiUrl.jbqk.dzzhd.tableList,{}) - return res -} - - -export const dxzhsjlist = async()=>{ - const res = await httpget2(apiUrl.jbqk.dxzhsj.list,{}) - return res -} \ No newline at end of file diff --git a/src/views/Home/homePanelsLayoutXL/index.tsx b/src/views/Home/homePanelsLayoutXL/index.tsx deleted file mode 100644 index 91c431045..000000000 --- a/src/views/Home/homePanelsLayoutXL/index.tsx +++ /dev/null @@ -1,270 +0,0 @@ -import React, { useEffect, useRef, useState } from "react"; -import {useDispatch, useSelector} from "react-redux"; -import { Collapse } from 'antd' -import appconsts from '../../../service/appconsts'; -import { getRainConditionApi } from "../../../service/homePage"; -import LeftContent from "./leftContent"; -import RightContentkey1 from "./right/SocioEconomic"; -import RightContent from "./right"; -import { dxzhsjlist, dzzhdCount, hlsxList, sdzCount, skcount, tybCount, yfzhdCount, ysgcCount } from "./http/rightHtpp"; -import Tuli2 from "./right/img/tuli2.png" - - - -const { Panel } = Collapse; - -type IProps = { - showPanels: Boolean; -} - -const HomePanelsLayoutPage: React.FC = ({ showPanels }) => { - const dispatch = useDispatch(); - const hasAlertBox = useSelector((s: any) => s.runtime.hasAlertBox); - const childRef = useRef(null); - const [showRight, setShowRight] = useState(false) - - const [keyItem, setKeyItem] = useState('>1000') - - - - //const { data } = useRequest(OverallPromise.get); - - const [countT, setCount] = useState({}); - const [dataList, setDataList] = useState(); - const [hlsxListData, setHlsxList] = useState(); - const [keys, setKeys] = useState('0'); - const [rightKeys, setRightKeys] = useState('1'); - const [list, setList] = useState([]); - const [defaultActiveKey, setDefaultActiveKey] = useState(); - const [noKey,setNoKey] = useState(true) - const onChange = (key: any) => { - // childRef.current?.showModal() - // setDefaultActiveKey[] - console.log(rightKeys, key, '0989800'); - - if (key) { - setShowRight(true) - setRightKeys(key) - setNoKey(false) - } else { - setShowRight(false) - setNoKey(true) - } - - - }; - - let listItem: any = - [ - { - title: '社会经济', key: 1, icon: `${process.env.PUBLIC_URL}/assets/panelTitle.png`, - child: [{ img: 'xzgh', title: '行政区划', keysType: 'xzqh', key: '1' }] - }, - { - title: '河流水系', key: 2, icon: `${process.env.PUBLIC_URL}/assets/panelTitle.png`, - child: [{ img: 'hlsx', title: '>1000平方公里', key: '1', keysType: '>1000', num: 0 }, - { img: 'hlsx', title: '50-1000平方公里', key: '2', keysType: '50-1000', num: 0 }, - { img: 'hlsx', title: '<50平方公里', key: '3', keysType: '<50', num: 0 }] - }, - { - title: '气象水文', key: 3, icon: `${process.env.PUBLIC_URL}/assets/panelTitle.png`, - child: [{ img: 'qxtd', title: '气象特点', key: '1', keysType: 'qxtd' }] - }, - { - title: '水利工程', key: 4, icon: `${process.env.PUBLIC_URL}/assets/panelTitle.png`, - child: [{ img: 'sk', title: '水库', keysType: 'sk', key: '1', num: 0 }, - { img: "sdz", title: "水电站", keysType: 'sdz', key: '2', num: 0 }, - { img: "ysgc", title: "引水工程", keysType: 'ysgc', key: '3', num: 0 }, - { img: "st", title: "塘(堰)坝", keysType: 'st', key: '4', num: 0 }] - }, - { - title: '易发灾害点', key: 5, icon: `${process.env.PUBLIC_URL}/assets/panelTitle.png`, - child: [{ img: 'yld', title: '易涝点', keysType: 'yld', key: '1', num: 0 }] - }, - { - title: '地质灾害点', key: 6, icon: `${process.env.PUBLIC_URL}/assets/panelTitle.png`, - child: [{ img: 'dzzhd', title: '地质灾害点', keysType: 'dzzhd', key: '1', num: 0 }] - }, - { - title: '典型灾害事件', key: 7, icon: `${process.env.PUBLIC_URL}/assets/panelTitle.png`, - child: [{ img: 'dxzhsj', title: '典型灾害事件', keysType: 'dxzhsj', key: '1', num: 0 }] - }, - ] - - // -------------------------------获取数据 - - //获取河流水系数据 - const getHlsxInfo = async () => { - const res = await hlsxList() - listItem[1].child.map((item: any) => { - if (item.keysType === '<50') { - item.num = res.data[1].length - } - if (item.keysType === '50-1000') { - item.num = res.data[2].length - } - if (item.keysType === '>1000') { - item.num = res.data[3].length - } - }) - console.log(res.data,'567899'); - - setHlsxList(res.data) - } - const getSlgcInfo = async () => { - const resCount = await skcount() - const resSdzCount = await sdzCount() - const resYsgcCount = await ysgcCount() - const resTybCount = await tybCount() - if(resCount.code !== 200)return - setCount({ sk: resCount.data, sdz: resSdzCount.data, ysgc: resYsgcCount.data, st: resTybCount.data }) - listItem[3].child.map((item: any) => { - if (item.keysType === 'sk') { - item.num = resCount.data.total - } - if (item.keysType === 'sdz') { - item.num = resSdzCount.data.total - } - if (item.keysType === 'ysgc') { - item.num = resYsgcCount.data.total - } - if (item.keysType === 'st') { - item.num = resTybCount.data.total - } - return item - }) - } - const geDxzhsj = async () => { - const res = await dxzhsjlist() - if(res.code !== 200)return - listItem[6].child[0].num = res.data.length - } - const geDzzhd = async () => { - const res = await dzzhdCount() - if(res.code == 200){ - listItem[5].child[0].num = res.data - } - } - const geyfzhd = async () => { - const res = await yfzhdCount() - if(res.code !== 200)return - listItem[4].child[0].num = res.data - } - - //---------------------------- - - const selected = (key: string) => { - console.log(hlsxListData); - setKeys(key) - if (key == '<50') { - setDataList(hlsxListData?.[1]) - } - if (key == '50-1000') { - setDataList(hlsxListData?.[2]) - } - if (key == '>1000') { - setDataList(hlsxListData?.[3]) - } - } - const mapList = [ - { - title: '0-500', - }, - { - title: '0-500', - }, - { - title: '0-500', - }, { - title: '0-500', - } - ] - useEffect(() => { - // dispatch.map.setLayerVisible({'ShuiKuLayer': false}); - // dispatch.map.setZhongxingSk(false); - //避免第一次加载过慢，先行渲染 - setList(listItem) - Promise.all([getHlsxInfo(), getSlgcInfo(), geyfzhd(), geDzzhd(), geDxzhsj()]).then(() => { - //主要为了渲染菜单项后面的统计数据 - setList(listItem) - }) - - return ()=>{ - // dispatch.map.setLayerVisible({'ShuiKuLayer': true}); - dispatch.map.setZhongxingSk(true); - } - }, []) - useEffect(()=>{ - if (keys == '<50') { - setDataList(hlsxListData?.[1]) - } - if (keys == '50-1000') { - setDataList(hlsxListData?.[2]) - } - if (keys == '>1000') { - setDataList(hlsxListData?.[3]) - } - },[hlsxListData]) - return ( -
- { - true//showPanels - ? <> -
- {/*左侧面板*/} -
-
-
- - 基本情况 -
- - {list.map((item: any) => { - return -
-
- {item.title} -
} > - - - })} - -
-
- {rightKeys === '3' &&
-
-
2022年咸丰县降水量等值线图
- - -
- -
-
- -
- 资料来源:《2022年咸丰县水资源公报》 -
-
} - {noKey?<> -
- -
- :null} - {/*右侧面板*/} - {showRight &&
-
- -
-
} -
- : null - - - - } -
- ) -} - -export default HomePanelsLayoutPage \ No newline at end of file diff --git a/src/views/Home/homePanelsLayoutXL/leftContent.css b/src/views/Home/homePanelsLayoutXL/leftContent.css deleted file mode 100644 index 8f342f217..000000000 --- a/src/views/Home/homePanelsLayoutXL/leftContent.css +++ /dev/null @@ -1,12 +0,0 @@ -.leftContent .txt { - margin-left: 10px; - font-family: 'Microsoft YaHei UI', sans-serif; - font-weight: 400; - font-style: normal; - font-size: 14px; - color: #000000; - text-align: left; -} -.leftContent .selectItem { - color: #409eff; -} diff --git a/src/views/Home/homePanelsLayoutXL/leftContent.less b/src/views/Home/homePanelsLayoutXL/leftContent.less deleted file mode 100644 index 875f9a869..000000000 --- a/src/views/Home/homePanelsLayoutXL/leftContent.less +++ /dev/null @@ -1,15 +0,0 @@ -.leftContent{ - // padding: 0 40px; - .txt{ - margin-left: 10px; - font-family: 'Microsoft YaHei UI', sans-serif; - font-weight: 400; - font-style: normal; - font-size: 14px; - color: #000000; - text-align: left; - } - .selectItem{ - color: #409eff; - } -} \ No newline at end of file diff --git a/src/views/Home/homePanelsLayoutXL/leftContent.tsx b/src/views/Home/homePanelsLayoutXL/leftContent.tsx deleted file mode 100644 index 71e306f31..000000000 --- a/src/views/Home/homePanelsLayoutXL/leftContent.tsx +++ /dev/null @@ -1,41 +0,0 @@ -import React, { forwardRef, useEffect, useState } from "react"; -import "./leftContent.less" - -const LeftContent = forwardRef((props: any, ref) => { - const [keyItem, setKeyItem] = useState('>1000') - const selectedItem = (item: any) => { - setKeyItem(item.keysType); - props.selected(item.keysType); - } - useEffect(() => { - let mapob: any = { - 1: 'xzqh', - 2: '>1000', - 3: 'qxtd', - 4: 'sk', - 5: 'yld', - 6: 'dzzhd', - 7: 'dxzhsj' - } - setKeyItem(mapob[props.rightKeys]) - props.selected(mapob[props.rightKeys]); - }, [props.rightKeys]) - return ( -
- {props.data1.map((item: any) => { - return ( - <> -
selectedItem(item)} style={{ backgroundColor: keyItem == item.keysType ? '#f0f7ff' : '#fff',padding: - '5px 40px' }}> - - {item.title} - {['2', '4', '5', '6', '7'].includes(props.rightKeys) && ({item.num}) - } - -
- ) - })} -
- ) -}) -export default LeftContent \ No newline at end of file diff --git a/src/views/Home/homePanelsLayoutXL/right/SocioEconomic.tsx b/src/views/Home/homePanelsLayoutXL/right/SocioEconomic.tsx deleted file mode 100644 index acf1aea57..000000000 --- a/src/views/Home/homePanelsLayoutXL/right/SocioEconomic.tsx +++ /dev/null @@ -1,95 +0,0 @@ -import { BarChartOutlined } from "@ant-design/icons"; -import { title } from "process"; -import { stringify } from "querystring"; -import React, {useEffect, useState} from "react"; -import { adList, cList, info } from "../http/rightHtpp"; -import { useSelector, useDispatch } from "react-redux"; -import PubTable from "./components/pubTable"; -import "./rightContent.less" - -type IProps = { - key: Number; - } -type infoDataType={ - townCount?:number, - villageCount?:number, - countyArea?:number, - committeeCount?:number, - pcount?:number -} -const SocioEconomic: React.FC = (IProps) => { - const [data,setData] = useState([]) - const [infoData,setInfo] = useState({}) - const dispatch = useDispatch(); - const getList=async()=>{ - const res = await adList() - if(res.code == 200){ - setData(res.data) - } - } - const getInfo=async()=>{ - const res = await info() - if(res.code == 200){ - setInfo(res.data) - } - } - const columns = [ - { - title: '序号', - render:(text:string,record:object,index:number)=>`${index+1}`, - align:'center' as const, - }, - { - title: '行政村名', - dataIndex: 'adnm', - key: 'adnm', - align:'center' as const, - - }, - { - title: '面积(km²)', - dataIndex: 'ldarea', - key: 'ldarea', - align:'center' as const, - - }, - { - title: '人口', - dataIndex: 'population', - key: 'population', - align:'center' as const, - - }, - ]; - useEffect(()=>{ - getList() - getInfo() - - - dispatch.map.setLayerVisible({'ShuiKuLayer': false}); - return ()=>{ - dispatch.map.setLayerVisible({'ShuiKuLayer': true}); - } - },[]) - return( -
-
- - 统计 -
-
-
辖{infoData.townCount}镇{infoData.villageCount}乡{infoData.committeeCount}个区工委
-
-
{infoData.countyArea}平方千米
-
县域面积
-
-
-
{infoData.pcount}人
-
常住人口
-
-
- -
- ) -} -export default SocioEconomic \ No newline at end of file diff --git a/src/views/Home/homePanelsLayoutXL/right/components/pubTable.css b/src/views/Home/homePanelsLayoutXL/right/components/pubTable.css deleted file mode 100644 index 951c9b599..000000000 --- a/src/views/Home/homePanelsLayoutXL/right/components/pubTable.css +++ /dev/null @@ -1,28 +0,0 @@ -.pubTable .listItem { - height: 30px; - background: linear-gradient(to right, #eaf4fe, #eaf4fe, #eaf4fe, #eaf4fe, #fff); - border-radius: 10px; - margin-top: 5px; - padding: 0 8px; - font-family: 'Arial Normal', 'Arial', sans-serif; - font-weight: 400; - font-style: normal; - font-size: 13px; - letter-spacing: normal; - color: #333333; - vertical-align: none; - text-align: center; - line-height: normal; - text-transform: none; -} -.pubTable .listItem .iconCircle { - border: 2px solid #000; - border-radius: 50%; - background-color: saddlebrown; - height: 8px; - width: 8px; - margin-right: 10px; -} -.pubTable .listItem .blueColor { - color: #3749c7; -} diff --git a/src/views/Home/homePanelsLayoutXL/right/components/pubTable.less b/src/views/Home/homePanelsLayoutXL/right/components/pubTable.less deleted file mode 100644 index 4e5db12f6..000000000 --- a/src/views/Home/homePanelsLayoutXL/right/components/pubTable.less +++ /dev/null @@ -1,32 +0,0 @@ -.pubTable{ - .listItem{ - height: 30px; - background: linear-gradient(to right,#eaf4fe,#eaf4fe,#eaf4fe,#eaf4fe,#fff); - border-radius: 10px; - margin-top: 5px; - padding: 0 8px; - font-family: 'Arial Normal', 'Arial', sans-serif; - font-weight: 400; - font-style: normal; - font-size: 13px; - letter-spacing: normal; - color: #333333; - vertical-align: none; - text-align: center; - line-height: normal; - text-transform: none; - .iconCircle{ - border: 2px solid #000; - border-radius: 50%; - background-color: saddlebrown; - height:8px; - width: 8px; - margin-right: 10px; - - } - .blueColor{ - color:#3749c7 - } - } - -} diff --git a/src/views/Home/homePanelsLayoutXL/right/components/pubTable.tsx b/src/views/Home/homePanelsLayoutXL/right/components/pubTable.tsx deleted file mode 100644 index 3323ae7fc..000000000 --- a/src/views/Home/homePanelsLayoutXL/right/components/pubTable.tsx +++ /dev/null @@ -1,185 +0,0 @@ -import { DownCircleOutlined, UpCircleOutlined } from "@ant-design/icons"; -import { message, Table } from "antd"; -import { useSelector, useDispatch } from "react-redux"; -import React, { useEffect, useState } from "react"; -// import { cList } from "../../http/rightHtpp"; -import './pubTable.less' - -type IProps = { - data?: Record[], - cList?: any, - columns: any, - keysType?: any, - showNum: boolean, - type?: any, - scrollYData?:number -} - -const PubTable: React.FC = (props: IProps) => { - const [data, setData] = useState([]) - - const [show, setShow] = useState(true) - const [idex, setIndex] = useState() - const [dataList, setList] = useState() - const dispatch = useDispatch(); - - const setShowType = (idx: number, item: any) => { - if (idx != idex) { - setIndex(idx) - console.log(props,'------'); - if (props.cList) { - getTabelData(item.adcd) - } else { - console.log(item[props.keysType]); - - if (item[props.keysType] && item[props.keysType].length > 0) { - const list = item[props.keysType].map((item: any) => { - return { - ...item, - lgtd: item.lng, - lttd: item.lat - } - }) - setData(list) - }else{ - setData(item[props.keysType]) - } - } - } else { - setIndex(999) - } - } - const getTabelData = async (params: string) => { - const res = await props.cList({ adcd: params }) - setData(res.data) - } - useEffect(() => { - dispatch.map.setLayerVisible({ [props.type.layer]: true }); - setList(props.data) - - return () => { - clearHighlight() - dispatch.map.setLayerVisible({ [props.type.layer]: false }); - dispatch.runtime.closeFeaturePopAll() - } - }, [props.data]) - - const myClick = (item: any, index: any) => { - // if (index != idex) { - // if (props.type.layer === 'AdcdLayer') { - // adcdBorderHighlight(item.adcd) - // flyToAdcd(item) - // } - // } - // setShowType(index, item) - - - //高亮镇范围，飞行 - adcdBorderHighlight(item.adcd) - - dispatch.map.setLayerVisible({ 'AdcdLayer': true }); - const { lgtd, lttd, elev, adcd } = item; - if (lgtd && lttd) { - if(props.type.layer==='AdcdLayer'){ - // dispatch.runtime.setFeaturePop({ type: 'adcd', data: item, lgtd:lgtd, lttd: lttd, }); - // dispatch.runtime.setFeaturePop({ type: 'DingWeiFu', data: item, lgtd:lgtd, lttd: lttd, }); - } - // dispatch.runtime.setCameraTarget({ - // center: [lgtd, lttd - 0.05, elev], - // zoom: 12.2, - // pitch: 60, - // }); - } else { - message.info('缺失经纬度'); - } - } - - - const flyToAdcd = (record: any) => { - if(props.type.layer==='AdcdLayer'||props.type.layer==='YFZHDLayer'||props.type.layer==='DZZHDLayer'){ - const adcd = record.adcd.substring(0, 9); - adcdBorderHighlight(adcd) - } - - - - dispatch.map.setLayerVisible({ [props.type.layer]: true }); - const { lgtd, lttd, elev, adcd } = record; - if (lgtd && lttd) { - if(props.type.layer==='AdcdLayer'){ - dispatch.runtime.setFeaturePop({ type: 'DingWeiFu', data: record, lgtd: record.lgtd, lttd: record.lttd, }); - }else{ - dispatch.runtime.setFeaturePop({ type: props.type.pops, data: record, lgtd: record.lgtd, lttd: record.lttd, }); - } - - dispatch.runtime.setCameraTarget({ - center: [lgtd, lttd, elev], - zoom: 12.2, - pitch: 60, - }); - } else { - message.info('缺失经纬度'); - } - }; - - const clearHighlight = () => { - //清除 - ['422826102', '422826100', '422826201', '422826104', '422826203', '422826204', '422826200', '422826101', '422826103', '422826202', '422826400'].map((i) => { - const vo = { ["AdcdBorderLayer_" + i]: false }; - dispatch.map.setLayerVisible(vo); - }) - } - - const adcdBorderHighlight = (adcd: any) => { - clearHighlight() - const value = adcd.substring(0, 9) - const vo = { ["AdcdBorderLayer_" + value]: true }; - dispatch.map.setLayerVisible(vo); - } - - return ( -
- {props.data?.map((item, index) => { - return
-
{ - // myClick(item, index) - }}> -
{ - myClick(item, index) - }}> -
- {item.adnm} -
- {!props.showNum &&
-
{item.ldarea}平方千米
-
{item.population}人
-
} - {props.showNum &&
-
{item.con}个
-
} -
- {(idex === index) && setShowType(index, item)} />} - {(idex !== index) && setShowType(index, item)} />} -
-
- {(idex === index) && -
- { - return { - onClick: (event: any) => flyToAdcd(record), - }; - }} - /> - - } - - })} - - ) -} -export default PubTable diff --git a/src/views/Home/homePanelsLayoutXL/right/disasterPronePoints.tsx b/src/views/Home/homePanelsLayoutXL/right/disasterPronePoints.tsx deleted file mode 100644 index 4bcf0c847..000000000 --- a/src/views/Home/homePanelsLayoutXL/right/disasterPronePoints.tsx +++ /dev/null @@ -1,75 +0,0 @@ -import { BarChartOutlined } from "@ant-design/icons"; -import { title } from "process"; -import { stringify } from "querystring"; -import React, { useEffect, useState } from "react"; -import {useSelector, useDispatch} from "react-redux"; -import { yfzhdList, yfzhdTableList } from "../http/rightHtpp"; -import PubTable from "./components/pubTable"; -import "./rightContent.less" - - -type IProps = { - key?: number; - rightKeys?: string; -} - -const DisasterPronePoints: React.FC = (props: IProps) => { - const dispatch = useDispatch(); - const [data, setData] = useState() - const getList = async () => { - const res = await yfzhdTableList() - if (res.code == 200) { - setData(res.data) - } - } - useEffect(()=>{ - dispatch.map.setLayerVisible({'ShuiKuLayer': false}); - return ()=>{ - dispatch.map.setLayerVisible({'ShuiKuLayer': true}); - } - },[]) - - const columns = [ - { - title: '序号', - render:(text:string,record:object,index:number)=>`${index+1}`, - align:'center' as const, - }, - { - title: '名称', - dataIndex: 'name', - key: 'name', - align:'center' as const, - ellipsis: true, - }, - { - title: '积水最大深度(m)', - dataIndex: 'depth', - key: 'depth', - align:'center' as const, - with:400, - }, - { - title: '影响人口', - dataIndex: 'pop', - key: 'pop', - align:'center' as const, - - }, - ]; - useEffect(() => { - getList() - }, []) - return ( - <> -
-
- - 统计 -
- -
- - ) -} -export default DisasterPronePoints \ No newline at end of file diff --git a/src/views/Home/homePanelsLayoutXL/right/geologicalHazardPoints.tsx b/src/views/Home/homePanelsLayoutXL/right/geologicalHazardPoints.tsx deleted file mode 100644 index afae0a49a..000000000 --- a/src/views/Home/homePanelsLayoutXL/right/geologicalHazardPoints.tsx +++ /dev/null @@ -1,79 +0,0 @@ -import { BarChartOutlined } from "@ant-design/icons"; -import { title } from "process"; -import { stringify } from "querystring"; -import React, {useEffect, useState} from "react"; -import {useSelector, useDispatch} from "react-redux"; -import { dzzhdTableList } from "../http/rightHtpp"; -import PubTable from "./components/pubTable"; -import "./rightContent.less" - - -type IProps = { - key?: number; - rightKeys?:string; - } - -const GeologicalHazardPoints:React.FC= (props:IProps) => { - const dispatch = useDispatch(); - const mapob: { [key: string]: any }={ - 1:'崩塌', - 2:'滑坡', - 3:'塌陷' - } - const columns = [ - { - title: '序号', - render:(text:string,record:object,index:number)=>`${index+1}`, - align:'center' as const, - }, - { - title: '名称', - dataIndex: 'name', - key: 'name', - align:'center' as const, - ellipsis: true, - }, - { - title: '体积(万m³)', - dataIndex: 'vol', - key: 'vol', - align:'center' as const, - - }, - { - title: '灾害类型', - dataIndex: 'dtype', - key: 'dtype', - render: (text: string, record: any, index: number) => `${mapob[record.dtype]}`, - align:'center' as const, - - }, - ]; - const [data, setData] = useState() - const getList = async () => { - const res = await dzzhdTableList() - if (res.code == 200) { - setData(res.data) - } - } - useEffect(()=>{ - dispatch.map.setLayerVisible({'ShuiKuLayer': false}); - getList() - - return ()=>{ - dispatch.map.setLayerVisible({'ShuiKuLayer': true}); - } - },[]) - return( - <> -
-
- - 统计 -
- -
- - ) -} -export default GeologicalHazardPoints \ No newline at end of file diff --git a/src/views/Home/homePanelsLayoutXL/right/img/tuli1.png b/src/views/Home/homePanelsLayoutXL/right/img/tuli1.png deleted file mode 100644 index cf5ec9e37..000000000 Binary files a/src/views/Home/homePanelsLayoutXL/right/img/tuli1.png and /dev/null differ diff --git a/src/views/Home/homePanelsLayoutXL/right/img/tuli2.png b/src/views/Home/homePanelsLayoutXL/right/img/tuli2.png deleted file mode 100644 index aa811abd4..000000000 Binary files a/src/views/Home/homePanelsLayoutXL/right/img/tuli2.png and /dev/null differ diff --git a/src/views/Home/homePanelsLayoutXL/right/img/tuli3.png b/src/views/Home/homePanelsLayoutXL/right/img/tuli3.png deleted file mode 100644 index e82a78fdb..000000000 Binary files a/src/views/Home/homePanelsLayoutXL/right/img/tuli3.png and /dev/null differ diff --git a/src/views/Home/homePanelsLayoutXL/right/img/tuli4.png b/src/views/Home/homePanelsLayoutXL/right/img/tuli4.png deleted file mode 100644 index f4d14fc92..000000000 Binary files a/src/views/Home/homePanelsLayoutXL/right/img/tuli4.png and /dev/null differ diff --git a/src/views/Home/homePanelsLayoutXL/right/img/tuli5.png b/src/views/Home/homePanelsLayoutXL/right/img/tuli5.png deleted file mode 100644 index ef9e2b1e8..000000000 Binary files a/src/views/Home/homePanelsLayoutXL/right/img/tuli5.png and /dev/null differ diff --git a/src/views/Home/homePanelsLayoutXL/right/img/tuli6.png b/src/views/Home/homePanelsLayoutXL/right/img/tuli6.png deleted file mode 100644 index 4e29fdbdb..000000000 Binary files a/src/views/Home/homePanelsLayoutXL/right/img/tuli6.png and /dev/null differ diff --git a/src/views/Home/homePanelsLayoutXL/right/img/tuli7.png b/src/views/Home/homePanelsLayoutXL/right/img/tuli7.png deleted file mode 100644 index 82f4e5903..000000000 Binary files a/src/views/Home/homePanelsLayoutXL/right/img/tuli7.png and /dev/null differ diff --git a/src/views/Home/homePanelsLayoutXL/right/img/tuli8.png b/src/views/Home/homePanelsLayoutXL/right/img/tuli8.png deleted file mode 100644 index c8c4ab9cc..000000000 Binary files a/src/views/Home/homePanelsLayoutXL/right/img/tuli8.png and /dev/null differ diff --git a/src/views/Home/homePanelsLayoutXL/right/img/tuli9.png b/src/views/Home/homePanelsLayoutXL/right/img/tuli9.png deleted file mode 100644 index a8c6271cc..000000000 Binary files a/src/views/Home/homePanelsLayoutXL/right/img/tuli9.png and /dev/null differ diff --git a/src/views/Home/homePanelsLayoutXL/right/index.tsx b/src/views/Home/homePanelsLayoutXL/right/index.tsx deleted file mode 100644 index 843ad2ac4..000000000 --- a/src/views/Home/homePanelsLayoutXL/right/index.tsx +++ /dev/null @@ -1,78 +0,0 @@ -import { BarChartOutlined } from "@ant-design/icons"; -import { title } from "process"; -import { stringify } from "querystring"; -import React, {useEffect, useState} from "react"; -import PubTable from "./components/pubTable"; -import DisasterPronePoints from "./disasterPronePoints"; -import GeologicalHazardPoints from "./geologicalHazardPoints"; -import "./rightContent.less" -import River from "./river"; -import SocioEconomic from "./SocioEconomic"; -import TypicalDisasterEvents from "./typicalDisasterEvents"; -import WaterConservancyProject from "./waterConservancyProject"; -import Weather from "./weather/weather"; -import Tuli1 from "./img/tuli1.png" -import Tuli2 from "./img/tuli2.png" -import Tuli3 from "./img/tuli3.png" -import Tuli4 from "./img/tuli4.png" -import Tuli5 from "./img/tuli5.png" -import Tuli6 from "./img/tuli6.png" -import Tuli7 from "./img/tuli7.png" -import Tuli8 from "./img/tuli8.png" -import Tuli9 from "./img/tuli9.png" - - -type IProps = { - keys: string; - rightKeys:string; - dataList?:any, - countT?:any, - noKey?:any - } -// const mapob={ - -// } -// if (key == '<50') { - // setDataList(hlsxListData?.[1]) - // } - // if (key == '50-1000') { - // setDataList(hlsxListData?.[2]) - // } - // if (key == '>1000') { - // setDataList(hlsxListData?.[3]) - // } -const RightContent:React.FC= (props:IProps) => { - const [dataList,setDataList] =useState() - useEffect(()=>{ - console.log(props,'我是props'); - },[props]) - return( - <> - {/*
*/} -
- {props.keys==='xzqh'?:null} - {(props.keys==='<50'||props.keys==='50-1000'||props.keys==='>1000')?:null} - {props.keys==='sk'?:null} - {props.keys==='sdz'?:null} - {props.keys==='ysgc'?:null} - {props.keys==='st'?:null} - {props.keys==='yld'?:null} - {props.keys==='dzzhd'?:null} - {props.keys==='dxzhsj'?:null} - - - - - {/* */} -
- {props.rightKeys === '1'&&} - {props.rightKeys === '2'&&} - {props.rightKeys === '3'&&} - {props.rightKeys === '4'&&} - {props.rightKeys === '5'&&} - {props.rightKeys === '6'&&} - {props.rightKeys === '7'&&} - - ) -} -export default RightContent \ No newline at end of file diff --git a/src/views/Home/homePanelsLayoutXL/right/rightContent.css b/src/views/Home/homePanelsLayoutXL/right/rightContent.css deleted file mode 100644 index 6e8ec0658..000000000 --- a/src/views/Home/homePanelsLayoutXL/right/rightContent.css +++ /dev/null @@ -1,85 +0,0 @@ -.rightContent { - font-size: 14px; -} -.rightContent .title { - width: 155px; - height: 46px; - background-image: url('../../../../assets/images/titleback.png'); - background-repeat: no-repeat; - background-size: cover; - color: #fff; - padding-left: 8px ; -} -.rightContent .item { - color: #3749C7; -} -.rightContent .item > div { - width: 30%; - height: 85px; - background: inherit; - background-color: #eaf4fe; - border: none; - border-radius: 5px; - -moz-box-shadow: none; - -webkit-box-shadow: none; - box-shadow: none; - text-align: center; -} -.riverlistItem { - height: 30px; - background: linear-gradient(to right, #eaf4fe, #eaf4fe, #eaf4fe, #eaf4fe, #fff); - border-radius: 10px; - margin-top: 5px; - padding: 0 8px; - font-family: 'Arial Normal', 'Arial', sans-serif; - font-weight: 400; - font-style: normal; - font-size: 13px; - letter-spacing: normal; - color: #3749c7; - vertical-align: none; - text-align: center; - line-height: normal; - text-transform: none; -} -.riverlistItem .iconCircle { - border: 2px solid #000; - border-radius: 50%; - background-color: saddlebrown; - height: 8px; - width: 8px; - margin-right: 10px; -} -.riverlistItem .imgTitle { - height: 14px; - width: 14px; - margin-right: 10px; -} -.riverlistItem .blueColor { - color: #3749c7; -} -.list50 { - width: 100px; - height: 36px; - background-color: #eaf4fe; - margin-bottom: 10px; - border-radius: 5px; -} -.tooltipsRiver { - border-width: 0px; - padding: 10px; - position: absolute; - left: 34px; - top: 50%; - width: 289px; - height: 70px; - background: inherit; - background-color: #fef5cd; - border: none; - border-radius: 0px; - -moz-box-shadow: 2px 5px 9px rgba(0, 0, 0, 0.34901961); - -webkit-box-shadow: 2px 5px 9px rgba(0, 0, 0, 0.34901961); - box-shadow: 2px 5px 9px rgba(0, 0, 0, 0.34901961); - font-size: 14px; - color: #212121; -} diff --git a/src/views/Home/homePanelsLayoutXL/right/rightContent.less b/src/views/Home/homePanelsLayoutXL/right/rightContent.less deleted file mode 100644 index fef2f7559..000000000 --- a/src/views/Home/homePanelsLayoutXL/right/rightContent.less +++ /dev/null @@ -1,89 +0,0 @@ -.rightContent{ - font-size: 14px; - // margin-right: 35px; - .title{ - width: 155px; - height: 46px; - background-image: url('../../../../assets/images/titleback.png'); - background-repeat:no-repeat; - background-size: cover; - color: #fff; - padding-left:8px ; - } - .item{ - color: #3749C7; - >div{ - width: 30%; - height: 85px; - background: inherit; - background-color: rgba(234, 244, 254, 1); - border: none; - border-radius: 5px; - -moz-box-shadow: none; - -webkit-box-shadow: none; - box-shadow: none; - text-align: center; - } - - } -} - -.riverlistItem{ - height: 30px; - background: linear-gradient(to right,#eaf4fe,#eaf4fe,#eaf4fe,#eaf4fe,#fff); - border-radius: 10px; - margin-top: 5px; - padding: 0 8px; - font-family: 'Arial Normal', 'Arial', sans-serif; - font-weight: 400; - font-style: normal; - font-size: 13px; - letter-spacing: normal; - color: #3749c7; - vertical-align: none; - text-align: center; - line-height: normal; - text-transform: none; - .iconCircle{ - border: 2px solid #000; - border-radius: 50%; - background-color: saddlebrown; - height:8px; - width: 8px; - margin-right: 10px; - - } - .imgTitle{ - height: 14px; - width: 14px; - margin-right: 10px; - } - .blueColor{ - color:#3749c7 - } -} -.list50{ - width: 100px; - height: 36px; - background-color: #eaf4fe; - margin-bottom: 10px; - border-radius: 5px; -} -.tooltipsRiver{ - border-width: 0px; - padding: 10px; - position: absolute; - left: 34px; - top: 50%; - width: 289px; - height: 70px; - background: inherit; - background-color: rgba(254, 245, 205, 1); - border: none; - border-radius: 0px; - -moz-box-shadow: 2px 5px 9px rgba(0, 0, 0, 0.349019607843137); - -webkit-box-shadow: 2px 5px 9px rgba(0, 0, 0, 0.349019607843137); - box-shadow: 2px 5px 9px rgba(0, 0, 0, 0.349019607843137); - font-size: 14px; - color: #212121; -} \ No newline at end of file diff --git a/src/views/Home/homePanelsLayoutXL/right/river.tsx b/src/views/Home/homePanelsLayoutXL/right/river.tsx deleted file mode 100644 index ce9fdec98..000000000 --- a/src/views/Home/homePanelsLayoutXL/right/river.tsx +++ /dev/null @@ -1,272 +0,0 @@ -import { BarChartOutlined } from "@ant-design/icons"; -import { title } from "process"; -import { stringify } from "querystring"; -import React, { useEffect, useState } from "react"; -import { useSelector, useDispatch } from "react-redux"; -import { isArray } from "../../../../utils/tools"; -import PubTable from "./components/pubTable"; -import {message} from "antd" - -import { Vector as VectorSource } from "ol/source"; -import VectorLayer from "ol/layer/Vector"; -import Style from "ol/style/Style"; -import StrokeStyle from "ol/style/Stroke"; -import Stroke from "ol/style/Stroke"; -import FillStyle from "ol/style/Fill"; -import {unByKey} from 'ol/Observable.js'; -import {easeOut} from 'ol/easing.js'; -import {getVectorContext} from 'ol/render.js'; -import Circle from "ol/style/Circle"; -import GeoJSONFormat from "ol/format/GeoJSON"; -import Feature from "ol/Feature"; -import Point from 'ol/geom/Point.js'; -import { geometryCenter } from "../../../../utils/tools"; - - - -import "./rightContent.less" - -type IProps = { - keys: string; - dataList: any -} - -const River: React.FC = (props: IProps) => { - const dispatch = useDispatch(); - let mapObj = useSelector((s: any) => s.map.map); - const [data, setData] = useState([{ rvName: '', rvBasArea: '' }]) - const [keyItem, setKeyItem] = useState(0) - const [showType, setShowType] = useState(true) - const getData = () => { - console.log(props.dataList, isArray(props.dataList), '----riverList'); - if (isArray(props.dataList)) { - setData(props.dataList) - } - } - useEffect(() => { - getData() - - mapObj && mapObj.getLayers().getArray().forEach((layer:any)=> { - 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(); - } - }) - - if(props.keys==='<50'){ - props.dataList?.map((item:any,index:any)=>{ - const arr = JSON.parse(item.geojsonrv) - addHlLayer(arr,'HlSX_'+item.rvCode+index,'#00FFFF',item) - }) - } - if(props.keys==='50-1000'){ - props.dataList?.map((item:any,index:any)=>{ - const arr = JSON.parse(item.geojsonrv) - addHlLayer(arr,'HlSX_'+item.rvCode+index,'#00FFFF',item) - }) - } - if(props.keys==='>1000'){ - props.dataList?.map((item:any,index:any)=>{ - const arr = JSON.parse(item.geojsonrv) - addHlLayer(arr,'HlSX_'+item.rvCode+index,'#00FFFF',item) - }) - } - - return ()=>{ - mapObj && mapObj.getLayers().getArray().forEach((layer:any)=> { - 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(); - } - }) - dispatch.runtime.closeFeaturePopAll() - } - }, [props]) - - - const highlight = (item:any)=>{ - mapObj && mapObj.getLayers().getArray().forEach((layer:any)=> { - 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(); - } - }) - console.log(item); - // const arr = JSON.parse(item.geojsonrv)?.coordinates[0]||[] - const arr = JSON.parse(item.geojsonrv) - // const arr2 = JSON.parse(item.geojsonly)?.coordinates[0]||[[]] - const arr2 = JSON.parse(item.geojsonly) - - - // addHlLayer({type:"LineString",coordinates:arr},'HlItem_'+item.rvCode,'#00FFFF',item) - addHlLayer(arr,'HlItem_'+item.rvCode,'#00FFFF',item) - - // addLyLayer({type:"Polygon",coordinates:arr2},'LyItem_'+item.rvCode,'#00FFFF',item) - addLyLayer(arr2,'LyItem_'+item.rvCode,'#00FFFF',item) - - // const center:any = geometryCenter({type:"LineString",coordinates:arr}); - // if (center) { - // // dispatch.runtime.setFeaturePop({ type: 'heliu', data: item, lgtd: center[0], lttd: center[1], }); - // // dispatch.runtime.setCameraTarget({ - // // center: [center[0], center[1], null], - // // zoom: 12.2, - // // pitch: 60, - // // }); - // }else{ - // message.info('缺失经纬度'); - // } - } - - const addHlLayer = (geojsonrv:any,name:any,color?:any,item?:any)=>{ - if(!geojsonrv){ - return - } - const geojsonFormat = new GeoJSONFormat(); - let geometry = geojsonFormat.readGeometry(geojsonrv, { - featureProjection: 'EPSG:3857', - }); - const feature = new Feature({ - geometry, - data: item, - name: name - }); - - var vectorSource = new VectorSource({ - features: [feature] - }); - - const vectorLayer = new VectorLayer({ - // @ts-ignore - name: name, - source: vectorSource, - style: new Style({ - stroke: new StrokeStyle({ - color: color, - width: 4, - }), - }), - zIndex:100 - }); - - mapObj.addLayer(vectorLayer); - } - - const addLyLayer = (geojsonly:any,name:any,color?:any,item?:any)=>{ - if(!geojsonly){ - return - } - console.log('流域数据',geojsonly); - const geojsonFormat = new GeoJSONFormat(); - let geometry = geojsonFormat.readGeometry(geojsonly, { - featureProjection: 'EPSG:3857', - }); - const feature = new Feature({ - geometry, - data:item, - name: name - }); - - var vectorSource = new VectorSource({ - features: [feature] - }); - - const vectorLayer = new VectorLayer({ - // @ts-ignore - name: name, - source: vectorSource, - style: - // new Style({ - // stroke: new StrokeStyle({ - // color: color, - // width: 4, - // }), - // }), - - new Style({ - stroke: new StrokeStyle({ - color: 'rgba(122,227,200, 1)', - width: 2, - }), - fill: new FillStyle({ - color: 'rgba(44,169,138,0.5)', - }), - }), - zIndex:102 - }); - - mapObj.addLayer(vectorLayer); - } - - - - useEffect(() => { - dispatch.map.setLayerVisible({'ShuiKuLayer': true}); - dispatch.map.setLayerVisible({'AdcdLayer': true }); - dispatch.map.setZhongxingSk(true); - - - mapObj.on('click', function (evt: any) { - var feature = mapObj.forEachFeatureAtPixel(evt.pixel, function (feature: any) { - return feature; - }); - const name = feature?.values_?.name || "" - if (feature && (name.indexOf('HlSX_')>-1 || name.indexOf('HlItem')>-1 || name.indexOf('LyItem_')>-1)) { - let data = feature.values_.data; - const arr = JSON.parse(data.geojsonrv).coordinates[0] - const center:any = geometryCenter({type:"LineString",coordinates:arr}); - if(center){ - dispatch.runtime.setFeaturePop({ - id: data.rvCode, - type: 'heliu', - data, - lgtd: center[0], - lttd: center[1], - }) - }else{ - message.info('缺失经纬度'); - } - } - }); - - return ()=>{ - dispatch.map.setLayerVisible({'ShuiKuLayer': false}); - dispatch.map.setLayerVisible({'AdcdLayer': false}); - dispatch.map.setZhongxingSk(false); - } - }, [mapObj]) - - - return ( -
-
{ - - - }}> - - 统计 -
- {props.keys !== '<50' &&
{data.map(item => { - const dom =
highlight(item)}> -
- - {item.rvName}
- {item.rvBasArea &&
{item.rvBasArea}平方公里
} -
- - return dom - })}
} - {props.keys === '<50' &&
-
- {data.map(item => { - const dom =
highlight(item)}>{item.rvName} -
- return dom - })} -
- {/*
其它的49条河名录
*/} -
} - - -
- - ) -} -export default River \ No newline at end of file diff --git a/src/views/Home/homePanelsLayoutXL/right/typicalDisasterEvents.tsx b/src/views/Home/homePanelsLayoutXL/right/typicalDisasterEvents.tsx deleted file mode 100644 index 2b47e763f..000000000 --- a/src/views/Home/homePanelsLayoutXL/right/typicalDisasterEvents.tsx +++ /dev/null @@ -1,89 +0,0 @@ -import { BarChartOutlined } from "@ant-design/icons"; -import { Table } from "antd"; -import {useSelector, useDispatch} from "react-redux"; -import { title } from "process"; -import { stringify } from "querystring"; -import React, {useEffect, useState} from "react"; -import { dxzhsjlist } from "../http/rightHtpp"; -import PubTable from "./components/pubTable"; -import "./rightContent.less" - - -type IProps = { - key?: number; - rightKeys?:string; - } - -const TypicalDisasterEvents:React.FC= (props:IProps) => { - const dispatch = useDispatch(); - const [data,setData] = useState() - const getList = async()=>{ - const res = await dxzhsjlist() - setData(res.data) - } - const columns = [ - { - title: '序号', - render:(text:string,record:object,index:number)=>`${index+1}`, - align:'center' as const, - }, - { - title: '灾害发生时间', - dataIndex: 'otime', - key: 'otime', - align:'center' as const, - - }, - { - title: '灾害发生地点', - dataIndex: 'address', - key: 'address', - align:'center' as const, - - }, - ]; - useEffect(()=>{ - getList() - - dispatch.map.setLayerVisible({'DXZHSJLayer': true}); - dispatch.map.setLayerVisible({'ShuiKuLayer': false}); - return ()=>{ - dispatch.runtime.closeFeaturePopAll() - dispatch.map.setLayerVisible({'DXZHSJLayer': false}); - dispatch.map.setLayerVisible({'ShuiKuLayer': true}); - } - },[]) - - - const flyToAdcd = (record:any) => { - dispatch.map.setLayerVisible({"DXZHSJLayer": true}); - - const { lgtd, lttd, elev, adcd } = record; - - if (lgtd && lttd) { - dispatch.runtime.setFeaturePop({ type: 'dianxingzaihaishijian', data: record, lgtd: record.lgtd, lttd: record.lttd, }); - - dispatch.runtime.setCameraTarget({ - center: [lgtd, lttd, elev], - zoom: 12.2, - pitch: 60, - }); - } - }; - return( - <> -
-
- - 典型灾害事件 -
-
{ - return { - onClick: (event:any) =>flyToAdcd(record), - }; - }}/> - - - ) -} -export default TypicalDisasterEvents \ No newline at end of file diff --git a/src/views/Home/homePanelsLayoutXL/right/waterConservancyProject/components/pubTable.css b/src/views/Home/homePanelsLayoutXL/right/waterConservancyProject/components/pubTable.css deleted file mode 100644 index 08cb44ed1..000000000 --- a/src/views/Home/homePanelsLayoutXL/right/waterConservancyProject/components/pubTable.css +++ /dev/null @@ -1,25 +0,0 @@ -.pubTable .listItem { - height: 30px; - background: linear-gradient(to right, #eaf4fe, #eaf4fe, #eaf4fe, #eaf4fe, #fff); - border-radius: 10px; - margin-top: 5px; - padding: 0 8px; - font-family: 'Arial Normal', 'Arial', sans-serif; - font-weight: 400; - font-style: normal; - font-size: 13px; - letter-spacing: normal; - color: #333333; - vertical-align: none; - text-align: center; - line-height: normal; - text-transform: none; -} -.pubTable .listItem img { - height: 18px; - width: 18px; - margin-right: 10px; -} -.pubTable .listItem .blueColor { - color: #3749c7; -} diff --git a/src/views/Home/homePanelsLayoutXL/right/waterConservancyProject/components/pubTable.less b/src/views/Home/homePanelsLayoutXL/right/waterConservancyProject/components/pubTable.less deleted file mode 100644 index 1743241bd..000000000 --- a/src/views/Home/homePanelsLayoutXL/right/waterConservancyProject/components/pubTable.less +++ /dev/null @@ -1,27 +0,0 @@ -.pubTable{ - .listItem{ - height: 30px; - background: linear-gradient(to right,#eaf4fe,#eaf4fe,#eaf4fe,#eaf4fe,#fff); - border-radius: 10px; - margin-top: 5px; - padding: 0 8px; - font-family: 'Arial Normal', 'Arial', sans-serif; - font-weight: 400; - font-style: normal; - font-size: 13px; - letter-spacing: normal; - color: #333333; - vertical-align: none; - text-align: center; - line-height: normal; - text-transform: none; - img{ - height:18px; - width: 18px; - margin-right: 10px; - } - .blueColor{ - color:#3749c7 - } - } -} \ No newline at end of file diff --git a/src/views/Home/homePanelsLayoutXL/right/waterConservancyProject/components/pubTable.tsx b/src/views/Home/homePanelsLayoutXL/right/waterConservancyProject/components/pubTable.tsx deleted file mode 100644 index 284fe7cda..000000000 --- a/src/views/Home/homePanelsLayoutXL/right/waterConservancyProject/components/pubTable.tsx +++ /dev/null @@ -1,148 +0,0 @@ -import { DownCircleOutlined, UpCircleOutlined } from "@ant-design/icons"; -import { useSelector, useDispatch } from "react-redux"; -import { tsInferType } from "@babel/types"; -import { message, Table } from "antd"; -import React, { useEffect, useState } from "react"; -import './pubTable.less' -type IProps = { - keys: any, - img: string, - data: any, - count?: any, - columns: any, - type?: any -} -type arr = { - title: string, - num: string, - show?: boolean -} -const PubTable: React.FC = (props: IProps) => { - const dispatch = useDispatch(); - const [data, setData] = useState([]) - const [show, setShow] = useState(true) - const [idex, setIndex] = useState(0) - - - - const setShowType = (idx: number) => { - setShow(!show) - setIndex(idx) - } - const setDataList = () => { - - let data: any = [] - if (props.keys == 'sk') { - data = [ - { title: '水库总数', num: `${props.count?.sk?.total}座`, show: true }, - { title: '总库容', num: `${props.count?.sk?.totcap}万m³` }, - { title: props.count?.sk?.maxres, num: '县内最大水库' }, - ] - } else if (props.keys == 'sdz') { - data = [ - { title: '电站总数', num: `${props.count?.sdz?.total}座`, show: true }, - { title: '装机总容量', num: `${props.count?.sdz?.totcap}万kW` }, - { title: '多年平均发电总量', num: `${props.count?.sdz?.avgelect.toFixed(4)}GW.h` }, - ] - } else if (props.keys == 'ysgc') { - data = [ - { title: '工程总数', num: `${props.count?.ysgc?.total}条`, show: false }, - { title: '渠道总长', num: `${props.count?.ysgc?.tlong}米` }, - ] - } else if (props.keys == 'st') { - data = [ - { title: '塘(堰)坝总数', num: `${props.count?.st?.total}座`, show: true }, - { title: '总容积', num: `${props.count?.st?.txhst}m³` }, - ] - } - setData(data) - } - useEffect(() => { - setDataList() - - - return () => { - dispatch.runtime.closeFeaturePopAll() - } - }, [props]) - - - const flyToAdcd = (record: any) => { - dispatch.map.setLayerVisible({ [props.type.layer]: true }); - - const { lgtd, lttd, elev, adcd } = record; - if (lgtd && lttd) { - if(props.type.layer==='ShuiKuLayer'){ - dispatch.runtime.setFeaturePop({ type: 'DingWeiFu', data: record, lgtd: record.lgtd, lttd: record.lttd, }); - }else{ - dispatch.runtime.setFeaturePop({ type: props.type.pops, data: record, lgtd: record.lgtd, lttd: record.lttd, }); - } - - dispatch.runtime.setCameraTarget({ - center: [lgtd, lttd, elev], - zoom: 12.2, - pitch: 60, - }); - } else { - message.info('缺失经纬度'); - } - }; - - - return ( -
- {data.map((item, index) => { - return
-
- -
{ - if(props.type.pops!=='yinshuigongcheng' || index!==0){ - return - } - const data = props.data?.[0] - dispatch.runtime.setFeaturePop({ - id: data.wadiName, - type: 'yinshuigongcheng', - data: data, - lgtd: 109.10271856170048, - lttd: 29.64073449479511, - }) - // dispatch.runtime.setFeaturePop({ type: 'DingWeiFu', data: data, lgtd:109.10271856170048, lttd:29.64073449479511, }); - dispatch.runtime.setCameraTarget({ - center: ['109.10271856170048', '29.64073449479511', null], - zoom: 12.2, - pitch: 60, - }); - }}> - - {item.title}
-
-
{item.num}
- {item.show &&
- {!show && setShowType(index)} />} - {show && setShowType(index)} />} -
} -
- -
- {((!show) && idex == index) && -
-
{ - return { - onClick: (event: any) => flyToAdcd(record), - }; - }} - /> - - } - - })} - - ) -} -export default PubTable \ No newline at end of file diff --git a/src/views/Home/homePanelsLayoutXL/right/waterConservancyProject/hydropowerStation.tsx b/src/views/Home/homePanelsLayoutXL/right/waterConservancyProject/hydropowerStation.tsx deleted file mode 100644 index 9cd999c23..000000000 --- a/src/views/Home/homePanelsLayoutXL/right/waterConservancyProject/hydropowerStation.tsx +++ /dev/null @@ -1,86 +0,0 @@ -import { BarChartOutlined } from "@ant-design/icons"; -import React, {useEffect, useState} from "react"; -import {useSelector, useDispatch} from "react-redux"; -import { sdzList } from "../../http/rightHtpp"; -import PubTable from "./components/pubTable"; -import './index.less' -import moment from "moment" -type IProps = { - keys: string; - countT:any - } - -const HydropowerStation: React.FC = (props:IProps) => { - const dispatch = useDispatch(); - const [data,setData] = useState([{img:'',title:''}]) - const [keyItem,setKeyItem] = useState(0) - const columns = [ - { - title: '序号', - render: (text: string, record: object, index: number) => `${index + 1}`, - align: 'center' as const, - }, - { - title: '水电站名称', - dataIndex: 'hystName', - key: 'hystName', - align: 'center' as const, - - }, - { - title: ()=>{return
-
装机容量
-
(万kW)
-
}, - dataIndex: 'totInsCap', - render: (text: string, record: any, index: number) => `${record.totInsCap}`, - key: 'totInsCap', - align: 'center' as const, - }, - { - title: '建成年份', - dataIndex: 'compDate', - render: (text: string, record: any, index: number) => `${moment(record.compDate).format('YYYY')}`, - key: 'compDate', - align: 'center' as const, - - }, - ]; - const getInfo = async()=>{ - - - const res = await sdzList() - if(res.data && res.data.length>0){ - const list = res.data.map((i:any)=>{ - return { - ...i, - lgtd:i.hystLong, - lttd:i.hystLat - } - }) - console.log(list,'sdz'); - setData(list) - } - - } - useEffect(()=>{ - getInfo() - dispatch.map.setLayerVisible({'ShuiKuLayer': false}); - dispatch.map.setLayerVisible({'ShuiDianZhanLayer': true}); - dispatch.map.setLayerVisible({'AdcdLayer': true}); - return ()=>{ - dispatch.map.setLayerVisible({'ShuiDianZhanLayer': false}); - dispatch.map.setLayerVisible({'AdcdLayer': true}); - } - },[]) - return( -
-
- - 统计 -
- -
- ) -} -export default HydropowerStation \ No newline at end of file diff --git a/src/views/Home/homePanelsLayoutXL/right/waterConservancyProject/index.css b/src/views/Home/homePanelsLayoutXL/right/waterConservancyProject/index.css deleted file mode 100644 index 316a57a1a..000000000 --- a/src/views/Home/homePanelsLayoutXL/right/waterConservancyProject/index.css +++ /dev/null @@ -1,10 +0,0 @@ -.reservoir .item > div { - width: 23%; -} -.reservoir .item img { - height: 18px; - width: 18px; -} -.reservoir .item .blueColor { - color: #3749c7; -} diff --git a/src/views/Home/homePanelsLayoutXL/right/waterConservancyProject/index.less b/src/views/Home/homePanelsLayoutXL/right/waterConservancyProject/index.less deleted file mode 100644 index 8f615b772..000000000 --- a/src/views/Home/homePanelsLayoutXL/right/waterConservancyProject/index.less +++ /dev/null @@ -1,13 +0,0 @@ -.reservoir{ - .item{ - >div{width: 23%;} - img{ - height:18px; - width: 18px; - } - .blueColor{ - color:#3749c7 - } - - } -} \ No newline at end of file diff --git a/src/views/Home/homePanelsLayoutXL/right/waterConservancyProject/index.tsx b/src/views/Home/homePanelsLayoutXL/right/waterConservancyProject/index.tsx deleted file mode 100644 index fa7cb2e38..000000000 --- a/src/views/Home/homePanelsLayoutXL/right/waterConservancyProject/index.tsx +++ /dev/null @@ -1,37 +0,0 @@ -import React, { useEffect, useState } from "react"; -import HydropowerStation from "./hydropowerStation"; -import {useSelector, useDispatch} from "react-redux"; -import "./index.less" -import Pond from "./pond"; -import Reservoir from "./reservoir"; -import WaterDiversionEngineering from "./waterDiversionEngineering"; - -type IProps = { - keys: string, - countT: any -} - -const WaterConservancyProject: React.FC = (props: IProps) => { - const [data, setData] = useState([{ img: '', title: '' }]) - const [keyItem, setKeyItem] = useState(0) - const dispatch = useDispatch(); - - useEffect(() => { - // console.log(props,'我是props'); - dispatch.map.setZhongxingSk(false) - // dispatch.map.setLayerVisible({'ShuiKuLayer': false}); - return ()=>{ - dispatch.map.setZhongxingSk(true) - dispatch.map.setLayerVisible({'ShuiKuLayer': true}); - } - }, []) - return ( -
- {props.keys === 'sk' && } - {props.keys === 'sdz' && } - {props.keys === 'ysgc' && } - {props.keys === 'st' && } -
- ) -} -export default WaterConservancyProject \ No newline at end of file diff --git a/src/views/Home/homePanelsLayoutXL/right/waterConservancyProject/pond.tsx b/src/views/Home/homePanelsLayoutXL/right/waterConservancyProject/pond.tsx deleted file mode 100644 index 939e5c2ff..000000000 --- a/src/views/Home/homePanelsLayoutXL/right/waterConservancyProject/pond.tsx +++ /dev/null @@ -1,73 +0,0 @@ -import { BarChartOutlined } from "@ant-design/icons"; -import React, {useEffect, useState} from "react"; -import {useSelector, useDispatch} from "react-redux"; -import { tybList } from "../../http/rightHtpp"; -import PubTable from "./components/pubTable"; -import './index.less' -type IProps = { - keys: string, - countT: any - - } - -const Pond: React.FC = (props:IProps) => { - const dispatch = useDispatch(); - const [data,setData] = useState([{img:'',title:''}]) - const [keyItem,setKeyItem] = useState(0) - const columns = [ - { - title: '序号', - render: (text: string, record: object, index: number) => `${index + 1}`, - align: 'center' as const, - width:50 - }, - { - title: '名称', - dataIndex: 'damname', - key: 'damname', - align: 'center' as const, - width:100, - }, - { - title: '容积(m³)', - dataIndex: 'xhst', - key: 'xhst', - align: 'center' as const, - - }, - { - title: '所在政区', - dataIndex: 'adnm', - key: 'adnm', - align: 'center' as const, - ellipsis:true - }, - ]; - const getInfo = async()=>{ - - - const res = await tybList() - console.log(res); - if(res && res.data){ - setData(res.data) - } - } - useEffect(()=>{ - getInfo() - dispatch.map.setLayerVisible({'ShuiKuLayer': false}); - dispatch.map.setLayerVisible({'TangYanBaLayer': true}); - return ()=>{ - dispatch.map.setLayerVisible({'TangYanBaLayer': false}); - } - },[]) - return( -
-
- - 统计 -
- -
- ) -} -export default Pond \ No newline at end of file diff --git a/src/views/Home/homePanelsLayoutXL/right/waterConservancyProject/reservoir.tsx b/src/views/Home/homePanelsLayoutXL/right/waterConservancyProject/reservoir.tsx deleted file mode 100644 index 55e2b72f4..000000000 --- a/src/views/Home/homePanelsLayoutXL/right/waterConservancyProject/reservoir.tsx +++ /dev/null @@ -1,115 +0,0 @@ -import { BarChartOutlined } from "@ant-design/icons"; -import React, {useEffect, useState} from "react"; -import {useSelector, useDispatch} from "react-redux"; -import { skcount, skList } from "../../http/rightHtpp"; -import PubTable from "./components/pubTable"; -import './index.less' -type IProps = { - keys: string; - countT:any - } -type objType={ - scal1:number, - scal3:number, - scal4:number, - scal5:number -} -const Reservoir: React.FC = (props:IProps) => { - const dispatch = useDispatch(); - const [data,setData] = useState([{img:'',title:''}]) - const [keyItem,setKeyItem] = useState(0) - const [countNum,setCount] = useState({ - scal1:0, - scal3:0, - scal4:0, - scal5:0 - }) - const mapOb: { [key: string]: any }={ - 1:'大(1)型', - 2:'大(2)型', - 3:'中型', - 4:'小(1)型', - 5:'小(2)型', - 9:'其他' - } - const columns = [ - { - title: '序号', - render: (text: string, record: object, index: number) => `${index + 1}`, - align: 'center' as const, - }, - { - title: '水库名称', - dataIndex: 'resName', - key: 'resName', - align: 'center' as const, - - }, - { - title: '水库规模', - dataIndex: 'engScal', - render: (text: string, record: any, index: number) => `${mapOb[record.engScal]}`, - key: 'engScal', - align: 'center' as const, - - }, - { - title: '库容(万m³)', - dataIndex: 'totCap', - key: 'totCap', - align: 'center' as const, - - }, - ]; - const getInfo = async()=>{ - - - const res = await skList() - console.log(res); - setData(res.data) - - } - useEffect(()=>{ - getInfo() - dispatch.map.setZhongxingSk(false) - dispatch.map.setLayerVisible({'ShuiKuLayer': true}); - dispatch.map.setLayerVisible({'AdcdLayer': true}); - return ()=>{ - dispatch.map.setZhongxingSk(true) - // dispatch.map.setLayerVisible({'ShuiKuLayer': false}); - dispatch.map.setLayerVisible({'AdcdLayer': false}); - } - },[]) - return( -
-
- - 统计 -
-
-
- - {props.countT?.[props.keys]?.scal2}座 - 大(2)型 -
-
- - {props.countT?.[props.keys]?.scal3}座 - 中型 -
-
- - {props.countT?.[props.keys]?.scal4}座 - 小(1)型 -
-
- - {props.countT?.[props.keys]?.scal5}座 - 小(2)型 -
-
- -
- ) -} -export default Reservoir \ No newline at end of file diff --git a/src/views/Home/homePanelsLayoutXL/right/waterConservancyProject/waterDiversionEngineering.tsx b/src/views/Home/homePanelsLayoutXL/right/waterConservancyProject/waterDiversionEngineering.tsx deleted file mode 100644 index 6ddafde8e..000000000 --- a/src/views/Home/homePanelsLayoutXL/right/waterConservancyProject/waterDiversionEngineering.tsx +++ /dev/null @@ -1,72 +0,0 @@ -import { BarChartOutlined } from "@ant-design/icons"; -import moment from "moment"; -import React, {useEffect, useState} from "react"; -import {useSelector, useDispatch} from "react-redux"; -import { ysgcList } from "../../http/rightHtpp"; -import PubTable from "./components/pubTable"; -import './index.less' -type IProps = { - keys: string, - countT:any - } - -const WaterDiversionEngineering: React.FC = (props:IProps) => { - const dispatch = useDispatch(); - const [data,setData] = useState([{img:'',title:''}]) - const [keyItem,setKeyItem] = useState(0) - const columns = [ - { - title: '序号', - render: (text: string, record: object, index: number) => `${index + 1}`, - align: 'center' as const, - }, - { - title: '名称', - dataIndex: 'wadiName', - key: 'wadiName', - align: 'center' as const, - - }, - { - title: '工程规模', - dataIndex: 'engScal', - key: 'engScal', - align: 'center' as const, - - }, - { - title: '修建时间', - dataIndex: 'buildDate', - key: 'buildDate', - render: (text: string, record: any, index: number) => `${moment(record.buildDate).format('YYYY-DD')}`, - align: 'center' as const, - - }, - ]; - const getInfo = async()=>{ - - - const res = await ysgcList() - console.log(res,'sdz'); - setData(res.data) - - } - useEffect(()=>{ - getInfo() - dispatch.map.setLayerVisible({'ShuiKuLayer': false}); - dispatch.map.setLayerVisible({'YsgcLayer': true}); - return ()=>{ - dispatch.map.setLayerVisible({'YsgcLayer': false}); - } - },[]) - return( -
-
- - 统计 -
- -
- ) -} -export default WaterDiversionEngineering \ No newline at end of file diff --git a/src/views/Home/homePanelsLayoutXL/right/weather/components/cimateCharacteristics.tsx b/src/views/Home/homePanelsLayoutXL/right/weather/components/cimateCharacteristics.tsx deleted file mode 100644 index c5eb6ad1b..000000000 --- a/src/views/Home/homePanelsLayoutXL/right/weather/components/cimateCharacteristics.tsx +++ /dev/null @@ -1,85 +0,0 @@ -import { Table } from "antd"; -import React, {useEffect, useState} from "react"; -import './feature.less' -import type { ColumnsType } from 'antd/es/table'; -import { byjzInfo } from "../../../http/rightHtpp"; - -type obj={ - content:string, - time?:string, - key:string -} -interface DataType { - key: string; - name: string; - age: number; - address: string; - address1: string; - } -const CimateCharacteristics: React.FC = (IProps) => { - const [idex,setIndex] = useState(0) - const [data,setData] = useState([]) - - - const columns: ColumnsType = [ - { - title: ()=>{return
时段 -
}, - dataIndex: 'tmTp', - key: 'tmTp', - align:'center', - render: text => {text}h, - width:40 - }, - { - title: ()=>{return
雨量 -
}, - dataIndex: 'drp', - key: 'drp', - render: text => {text}mm, - align:'center' - }, - { - title: ()=>{return
发生时段 -
}, - dataIndex: 'happenTm', - key: 'happenTm', - render: text =>
{text}
, - align:'center' - }, - { - title: ()=>{return
政区 -
}, - dataIndex: 'happenAdnm', - key: 'happenAdnm', - align:'center', - width:50 - }, - ]; - const mapOb:{[key:number]:any}={ - 0:'xf', - 1:'hb' - } - const selectAddress=(idex:number)=>{ - setIndex(idex) - getInfo(mapOb[idex]) - } - const getInfo = async(type:number)=>{ - const res = await byjzInfo(type) - setData(res.data) - } - useEffect(()=>{ - getInfo(0) - },[]) - return( -
-
-
selectAddress(0)} className={idex === 0?'active':''}>咸丰县
-
selectAddress(1)} className={idex === 1?'active':''}>湖北省
-
-
- - - ) -} -export default CimateCharacteristics \ No newline at end of file diff --git a/src/views/Home/homePanelsLayoutXL/right/weather/components/feature.css b/src/views/Home/homePanelsLayoutXL/right/weather/components/feature.css deleted file mode 100644 index faf8b66fc..000000000 --- a/src/views/Home/homePanelsLayoutXL/right/weather/components/feature.css +++ /dev/null @@ -1,20 +0,0 @@ -.feature { - margin: 5px 0; - padding: 0 15px; - background-color: #e9f5fe; - border-radius: 5px; - height: 30px; -} -.cimateCharacteristics .tabs { - height: 35px; - background-color: #d7e0ff; - margin-bottom: 5px; -} -.cimateCharacteristics .tabs .active { - color: #0079fe; - border-bottom: 1px solid #0079fe; -} -.cimateCharacteristics .tabs > div { - flex: 1; - text-align: center; -} diff --git a/src/views/Home/homePanelsLayoutXL/right/weather/components/feature.less b/src/views/Home/homePanelsLayoutXL/right/weather/components/feature.less deleted file mode 100644 index e58bcbfb1..000000000 --- a/src/views/Home/homePanelsLayoutXL/right/weather/components/feature.less +++ /dev/null @@ -1,23 +0,0 @@ -.feature{ - margin: 5px 0; - padding: 0 15px; - background-color: #e9f5fe; - border-radius: 5px; - height: 30px; -} -.cimateCharacteristics{ - .tabs{ - height: 35px; - background-color: #d7e0ff; - margin-bottom: 5px; - .active{ - color: #0079fe; - border-bottom: 1px solid #0079fe; - } - >div{ - flex:1; - text-align: center; - } - } -} - diff --git a/src/views/Home/homePanelsLayoutXL/right/weather/components/feature.tsx b/src/views/Home/homePanelsLayoutXL/right/weather/components/feature.tsx deleted file mode 100644 index cbef3d157..000000000 --- a/src/views/Home/homePanelsLayoutXL/right/weather/components/feature.tsx +++ /dev/null @@ -1,44 +0,0 @@ -import moment from "moment"; -import React, {useEffect, useState} from "react"; -import { qhtdInfo } from "../../../http/rightHtpp"; -import './feature.less' - -type IProps = { - qhtdData:any -} -type obj={ - content:string, - time?:string, - key:string -} - -const Feature: React.FC = (props:IProps) => { - const [data,setData] = useState([]) - const getInfo = async()=>{ - setData([ - {content:`${props.qhtdData.avgTmp}℃`,key:'历年平均气温'}, - {content:`${props.qhtdData.maxTmp}℃`,key:'极端最高气温',time:moment(props.qhtdData.maxTmpDate).format('YYYY-MM-DD')}, - {content:`${props.qhtdData.minTmp}℃`,key:'极端最低气温',time:moment(props.qhtdData.minTmpDate).format('YYYY-MM-DD')}, - {content:`${props.qhtdData.avgSunshineHour}`,key:'历年平均日照时数'}, - {content:`${props.qhtdData.minAvgWindSpeed}-${props.qhtdData.maxAvgWindSpeed}米/秒`,key:'多年平均风速'}, - {content:`${props.qhtdData.avgDye}mm`,key:'多年平均蒸发量'}, - {content:`${props.qhtdData.minHumidity}-${props.qhtdData.maxHumidity}%`,key:'相对湿度'}, - ] - ) - } - useEffect(()=>{ - getInfo() - },[props]) - return( -
- {data.map(item=>{ - return
- {item.key} - {item.time} - {item.content} -
- })} -
- ) -} -export default Feature \ No newline at end of file diff --git a/src/views/Home/homePanelsLayoutXL/right/weather/components/rainfallPeriod.tsx b/src/views/Home/homePanelsLayoutXL/right/weather/components/rainfallPeriod.tsx deleted file mode 100644 index 461c02c61..000000000 --- a/src/views/Home/homePanelsLayoutXL/right/weather/components/rainfallPeriod.tsx +++ /dev/null @@ -1,265 +0,0 @@ -import React, { useEffect, useMemo, useRef, useState } from "react"; -import './feature.less' -import ReactEcharts from 'echarts-for-react/lib/index'; -import { Button, Modal } from "antd"; - - -type obj = { - content: string, - time?: string, - key: string -} -type IProps = { - jysdfbData: any -} -const RainfallPeriod: React.FC = (props: IProps) => { - const [data, setData] = useState([]) - const [dataP, setDataP] = useState([]) - const [isModalOpen, setIsModalOpen] = useState(false); - const [height, setHeight] = useState(200); - - const [isModalOpen1, setIsModalOpen1] = useState(false); - - - let myChart:any = null; - - const showModal = () => { - setIsModalOpen(true); - setIsModalOpen1(true) - setHeight(300) - // setTimeout(()=>{ - // setIsModalOpen1(true) - // }) - }; - - - - const handleCancel = () => { - setIsModalOpen(false); - - myChart && myChart.resize(); // 在 Modal 关闭前调用 resize - }; - - const option = (data: any) => { - return { - tooltip: { - trigger: 'axis', - position: ['20%', '50%'], - formatter: function (params:any) { - let num = params[0].value.name.replace(/\D/g, '') - const dom =`
${num + '月'}
${params[0].seriesName}:${params[0].value.value}mm
${params[1].seriesName}:${params[1].value.value}mm
` - return dom - } - }, - legend: { - data: ['咸丰多年逐月平均降水量', '全省多年逐月平均降水量'], - type:'scroll', - right:50, - left:50, - // itemWidth:'12', - // itemHeight:'12', - itemGap:10 - }, - toolbox: { - feature: { - myTool1: { - show: true, - icon: 'path://M432.45,595.444c0,2.177-4.661,6.82-11.305,6.82c-6.475,0-11.306-4.567-11.306-6.82s4.852-6.812,11.306-6.812C427.841,588.632,432.452,593.191,432.45,595.444L432.45,595.444z M421.155,589.876c-3.009,0-5.448,2.495-5.448,5.572s2.439,5.572,5.448,5.572c3.01,0,5.449-2.495,5.449-5.572C426.604,592.371,424.165,589.876,421.155,589.876L421.155,589.876z M421.146,591.891c-1.916,0-3.47,1.589-3.47,3.549c0,1.959,1.554,3.548,3.47,3.548s3.469-1.589,3.469-3.548C424.614,593.479,423.062,591.891,421.146,591.891L421.146,591.891zM421.146,591.891', - onclick: function (){ - showModal() - } - }, - } - }, - grid: { - right: '10', - top: 30 - }, - calculable: true, - dataset: [ - { source: data }, - { source: dataP } - ] - , - xAxis: - { - type: 'category', - axisLabel: { - formatter: function (value: any) { - let num = value.replace(/\D/g, '') - let str = '' - if (num < 10) { - str = '0' + num - } else { - str = num - } - return str + '月'; - } - } - } - , - yAxis: [ - { - name: 'mm', - type: 'value' - } - ], - series: [ - { - name: '咸丰多年逐月平均降水量', - type: 'bar', - datasetIndex: 0, - encode: { - x: 'name', - y: 'value' - }, - itemStyle: { - color: 'skyblue' - } - }, - { - name: '全省多年逐月平均降水量', - type: 'bar', - datasetIndex: 1, - encode: { - x: 'name', - y: 'value' - }, - itemStyle: { - color: 'blue' - } - }, - ] - } - }; - - const option1 = (data: any) => { - return { - tooltip: { - trigger: 'axis', - position: ['20%', '50%'], - formatter: function (params:any) { - let num = params[0].value.name.replace(/\D/g, '') - const dom =`
${num + '月'}
${params[0].seriesName}:${params[0].value.value}mm
${params[1].seriesName}:${params[1].value.value}mm
` - return dom - } - }, - legend: { - data: ['咸丰多年逐月平均降水量', '全省多年逐月平均降水量'], - - }, - - grid: { - right: '10', - top: 30 - }, - calculable: true, - dataset: [ - { source: data }, - { source: dataP } - ] - , - xAxis: - { - type: 'category', - axisLabel: { - formatter: function (value: any) { - let num = value.replace(/\D/g, '') - let str = '' - if (num < 10) { - str = '0' + num - } else { - str = num - } - return str + '月'; - } - } - } - , - yAxis: [ - { - name: 'mm', - type: 'value' - } - ], - series: [ - { - name: '咸丰多年逐月平均降水量', - type: 'bar', - datasetIndex: 0, - encode: { - x: 'name', - y: 'value' - }, - itemStyle: { - color: 'skyblue' - } - }, - { - name: '全省多年逐月平均降水量', - type: 'bar', - datasetIndex: 1, - encode: { - x: 'name', - y: 'value' - }, - itemStyle: { - color: 'blue' - } - }, - ] - } - }; - - - const handData = () => { - let dataKey = Object.keys(props.jysdfbData) - let arr = dataKey.map(item => { - return { name: item, value: props.jysdfbData[item] } - }).filter(item => item.name.includes('avg')) - let data1: any = [] - let data2: any = [] - arr.forEach(item => { - if (item.name.indexOf('p') !== -1) { - const obj ={ - name:item.name.replace('p', ''), - value:item.value - } - data1.push(obj) - } else { - data2.push(item) - } - }) - console.log(data1,data2); - - setDataP(data1) - setData(data2) - } - useEffect(() => { - if(props.jysdfbData){ - handData() - } - }, []) - return ( -
- -
- - - - -
- -
- ) -} -export default RainfallPeriod \ No newline at end of file diff --git a/src/views/Home/homePanelsLayoutXL/right/weather/components/rainstormFrequency.css b/src/views/Home/homePanelsLayoutXL/right/weather/components/rainstormFrequency.css deleted file mode 100644 index 3a6fe1b64..000000000 --- a/src/views/Home/homePanelsLayoutXL/right/weather/components/rainstormFrequency.css +++ /dev/null @@ -1,34 +0,0 @@ -.rainstormFrequency .headerCell { - border-top: 43px #f2f3f5 solid; - /*上边框宽度等于表格第一行行高*/ - width: 0px; - /*让容器宽度为0*/ - height: 0px; - /*让容器高度为0*/ - border-left: 70px #f2f3f5 solid; - /*左边框宽度等于表格第一行第一格宽度*/ - position: relative; -} -.rainstormFrequency .headerCell .afer { - position: absolute; - top: -40px; - left: -28px; - width: 28px; -} -.rainstormFrequency .headerCell .before { - position: absolute; - top: -20px; - left: -65px; - width: 28px; -} -.rainstormFrequency .headerCell::after { - content: ''; - position: absolute; - width: 1px; - height: 76px; - top: -58px; - left: -36px; - background-color: #ccc; - display: block; - transform: rotate(-59deg); -} diff --git a/src/views/Home/homePanelsLayoutXL/right/weather/components/rainstormFrequency.less b/src/views/Home/homePanelsLayoutXL/right/weather/components/rainstormFrequency.less deleted file mode 100644 index 6d61b6edb..000000000 --- a/src/views/Home/homePanelsLayoutXL/right/weather/components/rainstormFrequency.less +++ /dev/null @@ -1,41 +0,0 @@ -.rainstormFrequency{ - -.headerCell { - // 画三角形 - border-top: 43px #f2f3f5 solid; - /*上边框宽度等于表格第一行行高*/ - width: 0px; - /*让容器宽度为0*/ - height: 0px; - /*让容器高度为0*/ - border-left: 70px #f2f3f5 solid; - /*左边框宽度等于表格第一行第一格宽度*/ - position: relative; - .afer { - position: absolute; - top: -40px; - left: -28px; - width: 28px; - // color: #666666; - } - .before { - position: absolute; - top: -20px; - left: -65px; - width: 28px; - // color: #666666; - } - // 伪元素画分割线 - &::after { - content: ''; - position: absolute; - width: 1px; - height: 76px; - top: -58px; - left: -36px; - background-color: #ccc; - display: block; - transform: rotate(-59deg); - } - } - } \ No newline at end of file diff --git a/src/views/Home/homePanelsLayoutXL/right/weather/components/rainstormFrequency.tsx b/src/views/Home/homePanelsLayoutXL/right/weather/components/rainstormFrequency.tsx deleted file mode 100644 index c31762ed2..000000000 --- a/src/views/Home/homePanelsLayoutXL/right/weather/components/rainstormFrequency.tsx +++ /dev/null @@ -1,95 +0,0 @@ -import { Table } from "antd"; -import React, {useEffect, useState} from "react"; -import './rainstormFrequency.less' -import styler from './rainstormFrequency.less' - -import type { ColumnsType } from 'antd/es/table'; -import { byplInfo } from "../../../http/rightHtpp"; - -type obj={ - content:string, - time?:string, - key:string -} -interface DataType { - key: string; - name: string; - age: number; - address: string; - address1: string; - } -const RainstormFrequency: React.FC = (IProps) => { - const [data,setData]=useState() - const columns: ColumnsType = [ - { - title: ()=>{return
-
频率
-
时段
-
}, - dataIndex: 'tmTp', - key: 'tmTp', - render: text => {text}h, - align:'center' - }, - { - title: ()=>{return
-
5年
-
一遇
-
}, - dataIndex: 'per20', - key: 'per20', - align:'center' - }, - { - title: ()=>{return
-
10年
-
一遇
-
}, - dataIndex: 'per10', - key: 'per10', - align:'center' - }, - { - title: ()=>{return
-
20年
-
一遇
-
}, - dataIndex: 'per5', - key: 'per5', - align:'center' - }, - { - title: ()=>{return
-
50年
-
一遇
-
}, - dataIndex: 'per2', - key: 'per2', - align:'center' - }, - { - title: ()=>{return
-
100年
-
一遇
-
}, - dataIndex: 'per1', - key: 'per1', - align:'center' - }, - ]; - const getInfo = async()=>{ - const res =await byplInfo() - console.log(res,'--数据'); - setData(res.data) - } - useEffect(()=>{ - getInfo() - },[]) - return( -
-
- - - ) -} -export default RainstormFrequency \ No newline at end of file diff --git a/src/views/Home/homePanelsLayoutXL/right/weather/weather.css b/src/views/Home/homePanelsLayoutXL/right/weather/weather.css deleted file mode 100644 index 922e44f12..000000000 --- a/src/views/Home/homePanelsLayoutXL/right/weather/weather.css +++ /dev/null @@ -1,29 +0,0 @@ -.weatherContent { - font-size: 14px; - box-shadow: 0px 1px 4px rgba(0, 0, 0, 0.34901961); - margin-bottom: 30px; - position: relative; -} -.weatherContent .title { - width: 155px; - height: 46px; - background-image: url('../../../../../assets/images/titleback.png'); - background-repeat: no-repeat; - background-size: cover; - color: #fff; - padding-left: 8px ; -} -.weatherContent .message { - background-color: #e9f5fe; - color: #000; - padding: 15px; - border-radius: 5px; -} -.weatherContent .icon { - position: absolute; - right: 15px; - top: 10px; -} -.blueColor { - color: #3749c7; -} diff --git a/src/views/Home/homePanelsLayoutXL/right/weather/weather.less b/src/views/Home/homePanelsLayoutXL/right/weather/weather.less deleted file mode 100644 index fa2b93e6f..000000000 --- a/src/views/Home/homePanelsLayoutXL/right/weather/weather.less +++ /dev/null @@ -1,29 +0,0 @@ -.weatherContent{ - font-size: 14px; - box-shadow: 0px 1px 4px rgba(0, 0, 0, 0.349019607843137); - margin-bottom: 30px; - position: relative; - .title{ - width: 155px; - height: 46px; - background-image: url('../../../../../assets/images/titleback.png'); - background-repeat:no-repeat; - background-size: cover; - color: #fff; - padding-left:8px ; - } - .message{ - background-color: #e9f5fe; - color: #000; - padding: 15px; - border-radius: 5px; - } - .icon{ - position: absolute; - right: 15px; - top: 10px; - } -} -.blueColor{ - color:#3749c7 -} \ No newline at end of file diff --git a/src/views/Home/homePanelsLayoutXL/right/weather/weather.tsx b/src/views/Home/homePanelsLayoutXL/right/weather/weather.tsx deleted file mode 100644 index e3e58f656..000000000 --- a/src/views/Home/homePanelsLayoutXL/right/weather/weather.tsx +++ /dev/null @@ -1,92 +0,0 @@ -import { BarChartOutlined, DownCircleOutlined, UpCircleOutlined } from "@ant-design/icons"; -import { title } from "process"; -import { stringify } from "querystring"; -import React, { useEffect, useState } from "react"; -import { jysdfbInfo, qhtdInfo } from "../../http/rightHtpp"; -import PubTable from "../components/pubTable"; -import CimateCharacteristics from "./components/cimateCharacteristics"; -import Feature from "./components/feature"; -import RainfallPeriod from "./components/rainfallPeriod"; -import RainstormFrequency from "./components/rainstormFrequency"; -import "./weather.less" - -type IProps = { - key: Number; -} -type arr = { - content?: string, - title: string, - key: number -} -const Weather: React.FC = (IProps) => { - const [data, setData] = useState([]) - const [keyItem, setKeyItem] = useState(0) - const [show, setShow] = useState(false) - const [idex, setIndex] = useState(0) - const [qhtdData, setQhtdData] = useState({}) - const [jysdfbData, setJysdfbData] = useState({}) - - - - const setShowType = (idx: number) => { - setShow(!show) - setIndex(idx) - if(idx != idex){ - setIndex(idx) - }else{ - setIndex(999) - } - } - const getInfo = async () => { - const { data } = await qhtdInfo() - if(data){ - setQhtdData(data) - } - const res = await jysdfbInfo() - if(res.code == 200){ - setJysdfbData(res.data) - } - setData([ - { content: data.feature, title: '气候特点', key: 1 }, - { content: res.data.feature, title: '降雨时段分布', key: 2 }, - { title: '暴雨极值', key: 3, }, - { title: '暴雨频率(mm)', key: 4, }, - ]) - } - useEffect(() => { - getInfo() - }, []) - return ( -
- {data.map((item, index) => { - return
-
- - {item.title} - -
- {!item.content &&
- {(idex === item.key) && setShowType(item.key)} />} - {!(idex === item.key) && setShowType(item.key)} />} -
} - {item.content &&
- {item.content} -
- {(idex === item.key) && setShowType(item.key)} />} - {!(idex === item.key) && setShowType(item.key)} />} -
-
} - {(idex === item.key) &&
- {idex === 1 && } - {idex === 2 && } - {idex === 3 && } - {idex === 4 && } -
} -
- })} -
- - - ) -} -export default Weather \ No newline at end of file diff --git a/src/views/Home/index.tsx b/src/views/Home/index.tsx index bbd39d234..6aa3135d4 100644 --- a/src/views/Home/index.tsx +++ b/src/views/Home/index.tsx @@ -1,55 +1,30 @@ import React, { useEffect, useState } from 'react' import { useLocation } from 'react-router' import { useDispatch, useSelector } from 'react-redux' -import { Drawer } from 'antd' import './index.less' -import MapCtrl from './MapCtrl' +import MapCtrl from './MapCtrl/index2' import HomePanelsLayoutPage from './homePanelsLayoutPage' -import LayersPage from '../Home/dlg/LayersDlg' -import Shouqi2 from './img/shouqi2.png' -import Zhankai2 from './img/zhankai2.png' -import DiQiu from './img/DiQiu.png' -import ZhongXin from './img/ZhongXin.png' import Ysgzq from '../ysgzq/ssyq' import Sssq from '../ysgzq/sssq' -import Yqz from '../fxzb/jczw/yqz/index.js' -import Sqz from '../fxzb/jczw/sqz/index.js' import Ddxsfx from '../fxdd/dqxsfx' // import Tqyb from '../fxdd/tqyb' import Fhxs from './fhxs' import Tqyb from './tqyb' -import Tuli from './img/tuli.png' -import ysgzqTuli from './img/ysgzqTuli.png' +import Btn from './btn' const HomePage = () => { const getLayerVisible = (s:any) => s.map.layerVisible; - let mapObj = useSelector((s:any) => s.map.map); + const mode = useSelector((s:any) => s.map.mode); const layerVisible = useSelector(getLayerVisible); + const [showPanels, setShowPanels] = useState(true) const location = useLocation() const dispatch = useDispatch() const pathname = location.pathname - const [showPanels, setShowPanels] = useState(true) - const [open, setOpen] = useState(false) - //收起\展开 - const collapseExpand = () => { - setShowPanels(!showPanels) - } - //还原地图位置 - const reduction = () => { - dispatch.runtime.setHome() - } - //图层控制 - const showLayers = () => { - setOpen(!open) - } - const onClose = () => { - setOpen(false) - } useEffect(() => { // if (pathname !== '/mgr/home') { @@ -88,101 +63,10 @@ const HomePage = () => { }} > {/* 控制按钮 */} -
-
-
- -
-
- -
-
- {showPanels ? ( - - ) : ( - - )} -
- {/*
{ - dispatch.runtime.setIn(); - }}> - -
-
{ - dispatch.runtime.setOut(); - }}> - -
*/} - {/*
- -
*/} -
-
{ - dispatch.map.setLayerVisible({ ['OfflineMap']: false }); - dispatch.map.setLayerVisible({ ['SatelliteImage']: true }); - //卫星图打开河流面很丑，所以关掉 - mapObj && mapObj.getLayers().getArray().forEach((layer:any)=> { - if(layer.values_.name === "HLLayer"||layer.values_.name === "HL2Layer"){ - layer.setVisible(false); - } - if(layer.values_.name === "HLLayer2"){ - layer.setVisible(true); - } - }); - }}> - - 影像图 -
-
{ - dispatch.map.setLayerVisible({ ['SatelliteImage']: false }); - dispatch.map.setLayerVisible({ ['OfflineMap']: true }); - mapObj && mapObj.getLayers().getArray().forEach((layer:any)=> { - if(layer.values_.name === "HLLayer"||layer.values_.name === "HL2Layer"){ - layer.setVisible(true); - } - if(layer.values_.name === "HLLayer2"){ - layer.setVisible(false); - } - }); - }}> - - 矢量图 -
-
-
-
- + {/* 地图 */} - + {/*首页面板*/}