增加3d地图
parent
50f69efe07
commit
ed94abf4f5
|
|
@ -3,7 +3,13 @@ import { store } from './models/store'
|
||||||
const address = localStorage.getItem('address') ? localStorage.getItem('address') : 'jianshi';
|
const address = localStorage.getItem('address') ? localStorage.getItem('address') : 'jianshi';
|
||||||
|
|
||||||
// @ts-ignore
|
// @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 ADCD6 = address === "jianshi" ? "422822" : "420529";
|
||||||
const ADCD12 = ADCD6 + '000000';
|
const ADCD12 = ADCD6 + '000000';
|
||||||
const ADCD = ADCD6 + '000000000';
|
const ADCD = ADCD6 + '000000000';
|
||||||
|
|
|
||||||
|
|
@ -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': '',
|
||||||
|
},
|
||||||
|
})
|
||||||
|
);
|
||||||
|
|
||||||
};
|
};
|
||||||
|
|
|
||||||
|
|
@ -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]));
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
@ -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);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
@ -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)
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
|
@ -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);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
@ -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;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
@ -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();
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
||||||
|
|
@ -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;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
@ -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;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
@ -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;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
@ -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;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
@ -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;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
@ -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) {}
|
||||||
|
}
|
||||||
|
|
@ -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;
|
||||||
|
}
|
||||||
|
|
@ -4,6 +4,7 @@ import FeaturePops from './Pops';
|
||||||
import FeatureTip from './FeatureTip';
|
import FeatureTip from './FeatureTip';
|
||||||
import './index.less';
|
import './index.less';
|
||||||
import Map2D from './M2D/Map2D';
|
import Map2D from './M2D/Map2D';
|
||||||
|
import Map3D from './Map3D/Map3D';
|
||||||
import Markers from './Markers';
|
import Markers from './Markers';
|
||||||
import { useLocation, useNavigate } from "react-router";
|
import { useLocation, useNavigate } from "react-router";
|
||||||
|
|
||||||
|
|
@ -11,26 +12,18 @@ let id_factory_index = 1;
|
||||||
|
|
||||||
export default function MapCtrl() {
|
export default function MapCtrl() {
|
||||||
const location = useLocation();
|
const location = useLocation();
|
||||||
const navigate = useNavigate();
|
|
||||||
|
|
||||||
const pathname = location.pathname;
|
const pathname = location.pathname;
|
||||||
|
|
||||||
const ctrlIdRef = useRef(`cloudowr_mapdiv_${id_factory_index++}`);
|
const ctrlIdRef = useRef(`cloudowr_mapdiv_${id_factory_index++}`);
|
||||||
const mapobjRef = useRef();
|
const mapobjRef = useRef();
|
||||||
const [_, forceRender] = useReducer(s => s + 1, 1);
|
const [_, forceRender] = useReducer(s => s + 1, 1);
|
||||||
|
|
||||||
const dispatch = useDispatch();
|
|
||||||
|
|
||||||
const cameraTarget = useSelector(s => s.runtime.cameraTarget);
|
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 layerVisible = useSelector(s => s.map.layerVisible);
|
||||||
const layerSetting = useSelector(s => s.map.layerSetting);
|
const layerSetting = useSelector(s => s.map.layerSetting);
|
||||||
|
|
||||||
const clickLoopBtn = useSelector(s => s.map.clickLoopBtn);
|
const clickLoopBtn = useSelector(s => s.map.clickLoopBtn);
|
||||||
const layerSetting1 = useSelector(s => s.runtime.layerSetting);
|
const layerSetting1 = useSelector(s => s.runtime.layerSetting);
|
||||||
const layerSettingLoop = useSelector(s => s.runtime.layerSettingLoop);
|
const layerSettingLoop = useSelector(s => s.runtime.layerSettingLoop);
|
||||||
const smallSkRiskTime = useSelector(s => s.runtime.smallSkRiskTime);
|
const smallSkRiskTime = useSelector(s => s.runtime.smallSkRiskTime);
|
||||||
|
const dispatch = useDispatch();
|
||||||
|
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
const mapCtrl = mapobjRef.current;
|
const mapCtrl = mapobjRef.current;
|
||||||
|
|
@ -42,26 +35,12 @@ export default function MapCtrl() {
|
||||||
|
|
||||||
}, [layerVisible, layerSetting, mapobjRef.current]);
|
}, [layerVisible, layerSetting, mapobjRef.current]);
|
||||||
|
|
||||||
// useEffect(() => {
|
|
||||||
// const mapCtrl = mapobjRef.current;
|
|
||||||
// if (!mapCtrl) {
|
|
||||||
// return;
|
|
||||||
// }
|
|
||||||
// // mapCtrl.zoomIn()
|
|
||||||
// const a = mapCtrl.getView().getZoom()
|
|
||||||
// debugger
|
|
||||||
// },[mapIn,mapOut])
|
|
||||||
|
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
const mapCtrl = mapobjRef.current;
|
const mapCtrl = mapobjRef.current;
|
||||||
if (!mapCtrl) {
|
if (!mapCtrl) {
|
||||||
return;
|
return;
|
||||||
}
|
}
|
||||||
console.log("75", layerVisible);
|
|
||||||
// || !layerVisible["forecastPoints"]
|
|
||||||
// if (layerVisible["HLLayer"]) {
|
|
||||||
// mapCtrl.zoomTo(cameraTarget);
|
|
||||||
// }
|
|
||||||
mapCtrl.zoomTo(cameraTarget);
|
mapCtrl.zoomTo(cameraTarget);
|
||||||
}, [cameraTarget])
|
}, [cameraTarget])
|
||||||
|
|
||||||
|
|
@ -72,7 +51,8 @@ export default function MapCtrl() {
|
||||||
divid: ctrlIdRef.current,
|
divid: ctrlIdRef.current,
|
||||||
dispatch
|
dispatch
|
||||||
};
|
};
|
||||||
const mapobj = new Map2D(params);
|
// const mapobj = new Map2D(params);
|
||||||
|
const mapobj = mode === '3d' ? new Map3D(params) : new Map2D(params);
|
||||||
setMapObj(mapobj);
|
setMapObj(mapobj);
|
||||||
|
|
||||||
mapobj.init();
|
mapobj.init();
|
||||||
|
|
@ -107,10 +87,6 @@ export default function MapCtrl() {
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
const mapCtrl = mapobjRef.current;
|
const mapCtrl = mapobjRef.current;
|
||||||
if (mapCtrl) {
|
if (mapCtrl) {
|
||||||
console.log("mapCtrl.layerMgr 100++++++++++++++", layerVisible["ContourLayerLoop"]);
|
|
||||||
|
|
||||||
//console.log("clickLoopBtn",clickLoopBtn);
|
|
||||||
|
|
||||||
if (clickLoopBtn) {
|
if (clickLoopBtn) {
|
||||||
mapCtrl.layerMgr.addAppLayersCLoop(dispatch, layerVisible, layerSettingLoop);
|
mapCtrl.layerMgr.addAppLayersCLoop(dispatch, layerVisible, layerSettingLoop);
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -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 (
|
||||||
|
<div key={mode} id={ctrlIdRef.current} className="map2d3d">
|
||||||
|
<FeaturePops mapobj={mapobjRef.current} />
|
||||||
|
<FeatureTip />
|
||||||
|
{/*<CoordsText />*/}
|
||||||
|
<Markers mapobj={mapobjRef.current} />
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
@ -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 (
|
||||||
|
<div
|
||||||
|
className="toolBox"
|
||||||
|
style={{
|
||||||
|
position: 'absolute',
|
||||||
|
zIndex: '110',
|
||||||
|
right: '-1rem',
|
||||||
|
top: '-7px',
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
<div className="layerPanelBtn clearFloat">
|
||||||
|
<div className="lf" title="地图展示图层控制" onClick={showLayers}>
|
||||||
|
<img
|
||||||
|
src={DiQiu}
|
||||||
|
alt=""
|
||||||
|
style={{ width: '30px', marginTop: '5px' }}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
<div className="lf" title="还原地图展示位置" onClick={reduction}>
|
||||||
|
<img
|
||||||
|
src={ZhongXin}
|
||||||
|
alt=""
|
||||||
|
style={{ width: '30px', marginTop: ' 5px' }}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
<div
|
||||||
|
className="lf"
|
||||||
|
title="收起悬浮功能块"
|
||||||
|
onClick={collapseExpand}
|
||||||
|
>
|
||||||
|
{showPanels ? (
|
||||||
|
<img
|
||||||
|
src={Shouqi2}
|
||||||
|
alt=""
|
||||||
|
style={{ width: '30px', marginTop: '5px' }}
|
||||||
|
/>
|
||||||
|
) : (
|
||||||
|
<img
|
||||||
|
src={Zhankai2}
|
||||||
|
alt=""
|
||||||
|
style={{ width: '30px', marginTop: '5px' }}
|
||||||
|
/>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
{/* <div className="lf" title="地图放大" onClick={()=>{
|
||||||
|
dispatch.runtime.setIn();
|
||||||
|
}}>
|
||||||
|
<img src={Fangda} alt="" style={{ width: "18px", marginTop: "-5px" }} />
|
||||||
|
</div>
|
||||||
|
<div className="lf" title="地图缩小" onClick={()=>{
|
||||||
|
dispatch.runtime.setOut();
|
||||||
|
}}>
|
||||||
|
<img src={Suoxiao} alt="" style={{ width: "18px", marginTop: "-5px" }} />
|
||||||
|
</div> */}
|
||||||
|
{/* <div className="lf" title="地图展示图层控制" onClick={showLayers}>
|
||||||
|
<DatabaseFilled style={{ fontSize: "17px", marginTop: "2px" }} />
|
||||||
|
</div> */}
|
||||||
|
<div className='mapToolBoxTuCeng' style={{left:open?'-235px':'5px'}}>
|
||||||
|
<div className='mapToolBoxTuCengItem' style={{color:mode==='3d'?'#1677ff':'black'}} onClick={btn3d}>
|
||||||
|
<img width={50} height={50} src={`${process.env.PUBLIC_URL}/assets/xyt/homeImg/shiliangtu.svg`} alt=""/>
|
||||||
|
3D图
|
||||||
|
</div>
|
||||||
|
<div className='mapToolBoxTuCengItem' style={{color:(!!layerVisible["SatelliteImage"]&&mode!=='3d')?'#1677ff':'black'}} onClick={yxtBtn}>
|
||||||
|
<img width={50} height={50} src={`${process.env.PUBLIC_URL}/assets/xyt/homeImg/yingxiangtu.png`} alt=""/>
|
||||||
|
影像图
|
||||||
|
</div>
|
||||||
|
<div className='mapToolBoxTuCengItem' style={{color:(!!layerVisible["OfflineMap"]&&mode!=='3d')?'#1677ff':'black'}} onClick={sltBtn}>
|
||||||
|
<img width={50} height={50} src={`${process.env.PUBLIC_URL}/assets/xyt/homeImg/shiliangtu.svg`} alt=""/>
|
||||||
|
矢量图
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
@ -191,7 +191,7 @@ const HomePage = ({showPanels}) => {
|
||||||
}
|
}
|
||||||
{
|
{
|
||||||
checkedObj.labelRight?
|
checkedObj.labelRight?
|
||||||
<div className='homePage_rightBox' style={{display:!showPanels?'none':'block',padding:showTable?'10px':'0px'}}>
|
<div className='homePage_rightBox' style={{display:!showPanels?'none':'block',padding:showTable?'10px':'0px',}}>
|
||||||
{
|
{
|
||||||
showTable?
|
showTable?
|
||||||
<div className='homePage_head2'>
|
<div className='homePage_head2'>
|
||||||
|
|
|
||||||
|
|
@ -82,7 +82,7 @@
|
||||||
padding: 10px;
|
padding: 10px;
|
||||||
border-radius: 10px;
|
border-radius: 10px;
|
||||||
background: #ffffff;
|
background: #ffffff;
|
||||||
border: 1px solid #eee;
|
// border: 1px solid #eee;
|
||||||
|
|
||||||
.homePage_head2{
|
.homePage_head2{
|
||||||
width: 100%;
|
width: 100%;
|
||||||
|
|
|
||||||
|
|
@ -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
|
|
||||||
}
|
|
||||||
|
|
@ -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<IProps> = ({ showPanels }) => {
|
|
||||||
const dispatch = useDispatch();
|
|
||||||
const hasAlertBox = useSelector((s: any) => s.runtime.hasAlertBox);
|
|
||||||
const childRef = useRef<any>(null);
|
|
||||||
const [showRight, setShowRight] = useState(false)
|
|
||||||
|
|
||||||
const [keyItem, setKeyItem] = useState<any>('>1000')
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
//const { data } = useRequest(OverallPromise.get);
|
|
||||||
|
|
||||||
const [countT, setCount] = useState<any>({});
|
|
||||||
const [dataList, setDataList] = useState<any>();
|
|
||||||
const [hlsxListData, setHlsxList] = useState<any>();
|
|
||||||
const [keys, setKeys] = useState<string>('0');
|
|
||||||
const [rightKeys, setRightKeys] = useState<string>('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 (
|
|
||||||
<div>
|
|
||||||
{
|
|
||||||
true//showPanels
|
|
||||||
? <>
|
|
||||||
<div style={showPanels?{display:'block'}:{display:'none'}}>
|
|
||||||
{/*左侧面板*/}
|
|
||||||
<div className="leftPanel" style={{ top: hasAlertBox ? "20px" : "0", maxHeight: hasAlertBox ? "calc(100vh - 104px)" : "calc(100vh - 84px)" }}>
|
|
||||||
<div style={{ maxHeight: hasAlertBox ? "calc(100vh - 104px)" : "calc(100vh - 84px)" }}>
|
|
||||||
<div className="clearFloat panelTitle flexac" style={{ color: '#333',padding: '8px 16px' }}>
|
|
||||||
<img src={require('../../../assets/images/panelTitle.png')} alt="" />
|
|
||||||
<span className="txt" style={{ color: '#000',fontSize:16,fontWeight:400 }}>基本情况</span>
|
|
||||||
</div>
|
|
||||||
<Collapse ghost onChange={onChange} expandIconPosition="end" accordion={true} bordered={false}>
|
|
||||||
{list.map((item: any) => {
|
|
||||||
return <Panel key={item.key} style={{ cursor: 'pointer' }}
|
|
||||||
header={<div className="clearFloat panelTitle1">
|
|
||||||
<div className="lf iconDiv">
|
|
||||||
</div>
|
|
||||||
<span className="lf txt" style={{ color: '#333', fontWeight: 400 }}>{item.title}</span>
|
|
||||||
</div>} >
|
|
||||||
<LeftContent selected={selected} rightKeys={rightKeys} ref={childRef} data1={item.child} />
|
|
||||||
</Panel>
|
|
||||||
})}
|
|
||||||
</Collapse>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
{rightKeys === '3' && <div style={{ zIndex: 101, position: 'absolute', height: '102%', margin: '-12px', width: '102%', backgroundColor: '#FFF', justifyContent: 'center' }} className="flex flexjcac">
|
|
||||||
<div style={{ position: 'relative' }}>
|
|
||||||
<div style={{ textAlign: 'center',fontSize: 24,marginTop: 24}}>2022年咸丰县降水量等值线图</div>
|
|
||||||
<img width={765} style={{ height: `calc(100% - 60px)` }} src={require('../../../assets/images/bigImg.png')} alt="" />
|
|
||||||
|
|
||||||
<div>
|
|
||||||
<img style={{ position: 'absolute', right: 10, top: 98,width:50, }} src={require('../../../assets/images/North.png')} alt="" />
|
|
||||||
</div>
|
|
||||||
<div style={{ position: 'absolute', left: -134, bottom: 150, border: '1px solid #f0f0f0' }}>
|
|
||||||
<img style={{ height: `calc(100% - 22px)` }} src={require('../../../assets/images/tuli_icon.png')} alt="" />
|
|
||||||
</div>
|
|
||||||
<span style={{position:'absolute',left: -134, bottom: 100,}}>资料来源:《2022年咸丰县水资源公报》</span>
|
|
||||||
</div>
|
|
||||||
</div>}
|
|
||||||
{noKey?<>
|
|
||||||
<div style={{position:'absolute',top:'calc(100vh - 250px)', left:'0px'}}>
|
|
||||||
<img src={Tuli2} alt="" width={300}/>
|
|
||||||
</div>
|
|
||||||
</>:null}
|
|
||||||
{/*右侧面板*/}
|
|
||||||
{showRight && <div className="rightPanel" style={{ top: hasAlertBox ? "20px" : "0" }}>
|
|
||||||
<div>
|
|
||||||
<RightContent keys={keys} rightKeys={rightKeys} dataList={dataList} countT={countT} noKey={noKey}/>
|
|
||||||
</div>
|
|
||||||
</div>}
|
|
||||||
</div>
|
|
||||||
</> : null
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
}
|
|
||||||
</div>
|
|
||||||
)
|
|
||||||
}
|
|
||||||
|
|
||||||
export default HomePanelsLayoutPage
|
|
||||||
|
|
@ -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;
|
|
||||||
}
|
|
||||||
|
|
@ -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;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
@ -1,41 +0,0 @@
|
||||||
import React, { forwardRef, useEffect, useState } from "react";
|
|
||||||
import "./leftContent.less"
|
|
||||||
|
|
||||||
const LeftContent = forwardRef((props: any, ref) => {
|
|
||||||
const [keyItem, setKeyItem] = useState<any>('>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 (
|
|
||||||
<div className='leftContent' >
|
|
||||||
{props.data1.map((item: any) => {
|
|
||||||
return (
|
|
||||||
<>
|
|
||||||
<div onClick={() => selectedItem(item)} style={{ backgroundColor: keyItem == item.keysType ? '#f0f7ff' : '#fff',padding:
|
|
||||||
'5px 40px' }}>
|
|
||||||
<img src={require(`../../../assets/images/${item.img}.png`)} height='18px' alt="" />
|
|
||||||
<span className="txt" style={{ color: keyItem == item.keysType ? '#0094ff' : '#000' }}>{item.title}
|
|
||||||
{['2', '4', '5', '6', '7'].includes(props.rightKeys) && <span>({item.num})
|
|
||||||
</span>}
|
|
||||||
</span>
|
|
||||||
</div>
|
|
||||||
</>)
|
|
||||||
})}
|
|
||||||
</div>
|
|
||||||
)
|
|
||||||
})
|
|
||||||
export default LeftContent
|
|
||||||
|
|
@ -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<infoDataType>({})
|
|
||||||
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(
|
|
||||||
<div className='rightContent'>
|
|
||||||
<div className='title flex flexac'>
|
|
||||||
<BarChartOutlined style={{fontSize:'14px',marginRight:'5px'}}/>
|
|
||||||
统计
|
|
||||||
</div>
|
|
||||||
<div className='flex flexsbc item'>
|
|
||||||
<div className='flex flexcc'>辖{infoData.townCount}镇{infoData.villageCount}乡{infoData.committeeCount}个区工委</div>
|
|
||||||
<div className='flex flexcc flexfc'>
|
|
||||||
<div>{infoData.countyArea}平方千米</div>
|
|
||||||
<div>县域面积</div>
|
|
||||||
</div>
|
|
||||||
<div className='flex flexcc flexfc'>
|
|
||||||
<div>{infoData.pcount}人</div>
|
|
||||||
<div>常住人口</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<PubTable data={data} cList={cList} showNum={false} columns={columns} type={{layer:'AdcdLayer',pops:'adcd'}}/>
|
|
||||||
</div>
|
|
||||||
)
|
|
||||||
}
|
|
||||||
export default SocioEconomic
|
|
||||||
|
|
@ -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;
|
|
||||||
}
|
|
||||||
|
|
@ -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
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
}
|
|
||||||
|
|
@ -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<string, any>[],
|
|
||||||
cList?: any,
|
|
||||||
columns: any,
|
|
||||||
keysType?: any,
|
|
||||||
showNum: boolean,
|
|
||||||
type?: any,
|
|
||||||
scrollYData?:number
|
|
||||||
}
|
|
||||||
|
|
||||||
const PubTable: React.FC<IProps> = (props: IProps) => {
|
|
||||||
const [data, setData] = useState([])
|
|
||||||
|
|
||||||
const [show, setShow] = useState<boolean>(true)
|
|
||||||
const [idex, setIndex] = useState<number>()
|
|
||||||
const [dataList, setList] = useState<any>()
|
|
||||||
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 (
|
|
||||||
<div className='pubTable'>
|
|
||||||
{props.data?.map((item, index) => {
|
|
||||||
return <div>
|
|
||||||
<div className='listItem flex flexsbc' onClick={()=>{
|
|
||||||
// myClick(item, index)
|
|
||||||
}}>
|
|
||||||
<div className='flex flexac' style={{ width: 100, cursor: 'pointer'}} onClick={()=>{
|
|
||||||
myClick(item, index)
|
|
||||||
}}>
|
|
||||||
<div className='iconCircle' ></div>
|
|
||||||
{item.adnm}
|
|
||||||
</div>
|
|
||||||
{!props.showNum && <div className='flex' >
|
|
||||||
<div className='blueColor' style={{ width: 100, textAlign: 'right' }}>{item.ldarea}平方千米</div>
|
|
||||||
<div className='blueColor' style={{ width: 100, textAlign: 'right',marginRight:20 }}>{item.population}人</div>
|
|
||||||
</div>}
|
|
||||||
{props.showNum && <div style={{ textAlign: 'right' }}>
|
|
||||||
<div className='blueColor'>{item.con}个</div>
|
|
||||||
</div>}
|
|
||||||
<div>
|
|
||||||
{(idex === index) && <UpCircleOutlined onClick={() => setShowType(index, item)} />}
|
|
||||||
{(idex !== index) && <DownCircleOutlined onClick={() => setShowType(index, item)} />}
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
{(idex === index) &&
|
|
||||||
<div style={{ margin: '5px 0'}}>
|
|
||||||
<Table
|
|
||||||
dataSource={data}
|
|
||||||
columns={props.columns}
|
|
||||||
pagination={false}
|
|
||||||
scroll={{ y: props.scrollYData || 275 }}
|
|
||||||
onRow={(record: any) => {
|
|
||||||
return {
|
|
||||||
onClick: (event: any) => flyToAdcd(record),
|
|
||||||
};
|
|
||||||
}}
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
}
|
|
||||||
</div>
|
|
||||||
})}
|
|
||||||
</div>
|
|
||||||
)
|
|
||||||
}
|
|
||||||
export default PubTable
|
|
||||||
|
|
@ -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<IProps> = (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 (
|
|
||||||
<>
|
|
||||||
<div className='rightContent'>
|
|
||||||
<div className='title flex flexac'>
|
|
||||||
<BarChartOutlined style={{ fontSize: '14px', marginRight: '5px' }} />
|
|
||||||
统计
|
|
||||||
</div>
|
|
||||||
<PubTable data={data} showNum={true} columns={columns} keysType='attWaterloggedList' type={{layer:'YFZHDLayer',pops:'yifazaihaidian'}}/>
|
|
||||||
</div>
|
|
||||||
</>
|
|
||||||
)
|
|
||||||
}
|
|
||||||
export default DisasterPronePoints
|
|
||||||
|
|
@ -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<IProps>= (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(
|
|
||||||
<>
|
|
||||||
<div className='rightContent'>
|
|
||||||
<div className='title flex flexac'>
|
|
||||||
<BarChartOutlined style={{fontSize:'14px',marginRight:'5px'}}/>
|
|
||||||
统计
|
|
||||||
</div>
|
|
||||||
<PubTable data={data} showNum={true} columns={columns} keysType='attGeoHazzardList' type={{layer:'DZZHDLayer',pops:'dizhizaihaidian'}}/>
|
|
||||||
</div>
|
|
||||||
</>
|
|
||||||
)
|
|
||||||
}
|
|
||||||
export default GeologicalHazardPoints
|
|
||||||
Binary file not shown.
|
Before Width: | Height: | Size: 69 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 84 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 102 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 86 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 85 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 72 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 88 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 88 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 85 KiB |
|
|
@ -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<IProps>= (props:IProps) => {
|
|
||||||
const [dataList,setDataList] =useState()
|
|
||||||
useEffect(()=>{
|
|
||||||
console.log(props,'我是props');
|
|
||||||
},[props])
|
|
||||||
return(
|
|
||||||
<>
|
|
||||||
{/* <div style={{position:'absolute',top:'calc(100vh - 300px)', left:'-78vw'}}> */}
|
|
||||||
<div style={{position:'absolute',top:'70vh', left:'calc(-100vw + 425px)'}}>
|
|
||||||
{props.keys==='xzqh'?<img src={Tuli1} alt="" width={300}/>:null}
|
|
||||||
{(props.keys==='<50'||props.keys==='50-1000'||props.keys==='>1000')?<img src={Tuli2} alt="" width={300}/>:null}
|
|
||||||
{props.keys==='sk'?<img src={Tuli3} alt="" width={300}/>:null}
|
|
||||||
{props.keys==='sdz'?<img src={Tuli4} alt="" width={300}/>:null}
|
|
||||||
{props.keys==='ysgc'?<img src={Tuli5} alt="" width={300}/>:null}
|
|
||||||
{props.keys==='st'?<img src={Tuli6} alt="" width={300}/>:null}
|
|
||||||
{props.keys==='yld'?<img src={Tuli7} alt="" width={300}/>:null}
|
|
||||||
{props.keys==='dzzhd'?<img src={Tuli8} alt="" width={300}/>:null}
|
|
||||||
{props.keys==='dxzhsj'?<img src={Tuli9} alt="" width={300}/>:null}
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
{/* <img src={Tuli} alt="" width={300}/> */}
|
|
||||||
</div>
|
|
||||||
{props.rightKeys === '1'&&<SocioEconomic />}
|
|
||||||
{props.rightKeys === '2'&&<River keys={props.keys} dataList={props.dataList}/>}
|
|
||||||
{props.rightKeys === '3'&&<Weather />}
|
|
||||||
{props.rightKeys === '4'&&<WaterConservancyProject keys={props.keys} countT={props.countT}/>}
|
|
||||||
{props.rightKeys === '5'&&<DisasterPronePoints />}
|
|
||||||
{props.rightKeys === '6'&&<GeologicalHazardPoints />}
|
|
||||||
{props.rightKeys === '7'&&<TypicalDisasterEvents />}
|
|
||||||
</>
|
|
||||||
)
|
|
||||||
}
|
|
||||||
export default RightContent
|
|
||||||
|
|
@ -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;
|
|
||||||
}
|
|
||||||
|
|
@ -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;
|
|
||||||
}
|
|
||||||
|
|
@ -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<IProps> = (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<boolean>(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 (
|
|
||||||
<div className='rightContent'>
|
|
||||||
<div className='title flex flexac' onClick={() => {
|
|
||||||
|
|
||||||
|
|
||||||
}}>
|
|
||||||
<BarChartOutlined style={{ fontSize: '14px', marginRight: '5px' }} />
|
|
||||||
统计
|
|
||||||
</div>
|
|
||||||
{props.keys !== '<50' && <div>{data.map(item => {
|
|
||||||
const dom = <div className='riverlistItem flex flexsbc' onClick={() => highlight(item)}>
|
|
||||||
<div className='flex flexac'>
|
|
||||||
<img src={require('../../../../assets/images/river.png')} alt="" className='imgTitle' />
|
|
||||||
{item.rvName}</div>
|
|
||||||
{item.rvBasArea && <div className='blueColor'>{item.rvBasArea}平方公里</div>}
|
|
||||||
</div>
|
|
||||||
|
|
||||||
return dom
|
|
||||||
})}</div>}
|
|
||||||
{props.keys === '<50' && <div>
|
|
||||||
<div className='flex flexsbc' style={{ flexWrap: 'wrap' }}>
|
|
||||||
{data.map(item => {
|
|
||||||
const dom = <div className='blueColor flex flexcc list50' onClick={() => highlight(item)}>{item.rvName}
|
|
||||||
</div>
|
|
||||||
return dom
|
|
||||||
})}
|
|
||||||
</div>
|
|
||||||
{/* <div className='tooltipsRiver'>其它的49条河名录</div> */}
|
|
||||||
</div>}
|
|
||||||
|
|
||||||
|
|
||||||
</div>
|
|
||||||
|
|
||||||
)
|
|
||||||
}
|
|
||||||
export default River
|
|
||||||
|
|
@ -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<IProps>= (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(
|
|
||||||
<>
|
|
||||||
<div className='rightContent'>
|
|
||||||
<div className='title flex flexac'>
|
|
||||||
<BarChartOutlined style={{fontSize:'14px',marginRight:'5px'}}/>
|
|
||||||
典型灾害事件
|
|
||||||
</div>
|
|
||||||
<Table dataSource={data} columns={columns} pagination={false} onRow={(record:any) => {
|
|
||||||
return {
|
|
||||||
onClick: (event:any) =>flyToAdcd(record),
|
|
||||||
};
|
|
||||||
}}/>
|
|
||||||
</div>
|
|
||||||
</>
|
|
||||||
)
|
|
||||||
}
|
|
||||||
export default TypicalDisasterEvents
|
|
||||||
|
|
@ -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;
|
|
||||||
}
|
|
||||||
|
|
@ -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
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
@ -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<IProps> = (props: IProps) => {
|
|
||||||
const dispatch = useDispatch();
|
|
||||||
const [data, setData] = useState<arr[]>([])
|
|
||||||
const [show, setShow] = useState<boolean>(true)
|
|
||||||
const [idex, setIndex] = useState<number>(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 (
|
|
||||||
<div className='pubTable'>
|
|
||||||
{data.map((item, index) => {
|
|
||||||
return <div>
|
|
||||||
<div className='listItem flex flexsbc'>
|
|
||||||
|
|
||||||
<div className='flex flexac' style={{width:200}} onClick={() => {
|
|
||||||
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,
|
|
||||||
});
|
|
||||||
}}>
|
|
||||||
<img src={require(`../../../../../../assets/images/${props.img}.png`)} alt="" />
|
|
||||||
{item.title}</div>
|
|
||||||
<div className='flex flexac'>
|
|
||||||
<div className='blueColor' style={{ marginRight: 10 }}>{item.num}</div>
|
|
||||||
{item.show && <div>
|
|
||||||
{!show && <UpCircleOutlined onClick={() => setShowType(index)} />}
|
|
||||||
{show && <DownCircleOutlined onClick={() => setShowType(index)} />}
|
|
||||||
</div>}
|
|
||||||
</div>
|
|
||||||
|
|
||||||
</div>
|
|
||||||
{((!show) && idex == index) &&
|
|
||||||
<div style={{margin:'5px 0'}}>
|
|
||||||
<Table
|
|
||||||
dataSource={props.data}
|
|
||||||
columns={props.columns}
|
|
||||||
scroll={{ y: 300 }}
|
|
||||||
pagination={false}
|
|
||||||
onRow={(record: any) => {
|
|
||||||
return {
|
|
||||||
onClick: (event: any) => flyToAdcd(record),
|
|
||||||
};
|
|
||||||
}}
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
}
|
|
||||||
</div>
|
|
||||||
})}
|
|
||||||
</div>
|
|
||||||
)
|
|
||||||
}
|
|
||||||
export default PubTable
|
|
||||||
|
|
@ -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<IProps> = (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 <div className='headerCell'>
|
|
||||||
<div className='afer'>装机容量</div>
|
|
||||||
<div className='before'>(万kW)</div>
|
|
||||||
</div>},
|
|
||||||
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(
|
|
||||||
<div className='reservoir'>
|
|
||||||
<div className='title flex flexac'>
|
|
||||||
<BarChartOutlined style={{fontSize:'14px',marginRight:'5px'}}/>
|
|
||||||
统计
|
|
||||||
</div>
|
|
||||||
<PubTable img='station' keys={props.keys} data={data} count={props.countT} columns={columns} type={{layer:'ShuiDianZhanLayer',pops:'shuidianzhan'}}/>
|
|
||||||
</div>
|
|
||||||
)
|
|
||||||
}
|
|
||||||
export default HydropowerStation
|
|
||||||
|
|
@ -1,10 +0,0 @@
|
||||||
.reservoir .item > div {
|
|
||||||
width: 23%;
|
|
||||||
}
|
|
||||||
.reservoir .item img {
|
|
||||||
height: 18px;
|
|
||||||
width: 18px;
|
|
||||||
}
|
|
||||||
.reservoir .item .blueColor {
|
|
||||||
color: #3749c7;
|
|
||||||
}
|
|
||||||
|
|
@ -1,13 +0,0 @@
|
||||||
.reservoir{
|
|
||||||
.item{
|
|
||||||
>div{width: 23%;}
|
|
||||||
img{
|
|
||||||
height:18px;
|
|
||||||
width: 18px;
|
|
||||||
}
|
|
||||||
.blueColor{
|
|
||||||
color:#3749c7
|
|
||||||
}
|
|
||||||
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
@ -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<IProps> = (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 (
|
|
||||||
<div className='rightContent'>
|
|
||||||
{props.keys === 'sk' && <Reservoir countT={props.countT} keys={props.keys}/>}
|
|
||||||
{props.keys === 'sdz' && <HydropowerStation countT={props.countT} keys={props.keys}/>}
|
|
||||||
{props.keys === 'ysgc' && <WaterDiversionEngineering countT={props.countT} keys={props.keys}/>}
|
|
||||||
{props.keys === 'st' && <Pond countT={props.countT} keys={props.keys}/>}
|
|
||||||
</div>
|
|
||||||
)
|
|
||||||
}
|
|
||||||
export default WaterConservancyProject
|
|
||||||
|
|
@ -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<IProps> = (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(
|
|
||||||
<div className='reservoir'>
|
|
||||||
<div className='title flex flexac'>
|
|
||||||
<BarChartOutlined style={{fontSize:'14px',marginRight:'5px'}}/>
|
|
||||||
统计
|
|
||||||
</div>
|
|
||||||
<PubTable img='pond' keys={props.keys} count={props.countT} data={data} columns={columns} type={{layer:'TangYanBaLayer',pops:'tangyanba'}}/>
|
|
||||||
</div>
|
|
||||||
)
|
|
||||||
}
|
|
||||||
export default Pond
|
|
||||||
|
|
@ -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<IProps> = (props:IProps) => {
|
|
||||||
const dispatch = useDispatch();
|
|
||||||
const [data,setData] = useState([{img:'',title:''}])
|
|
||||||
const [keyItem,setKeyItem] = useState(0)
|
|
||||||
const [countNum,setCount] = useState<objType>({
|
|
||||||
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(
|
|
||||||
<div className='reservoir'>
|
|
||||||
<div className='title flex flexac'>
|
|
||||||
<BarChartOutlined style={{fontSize:'14px',marginRight:'5px'}}/>
|
|
||||||
统计
|
|
||||||
</div>
|
|
||||||
<div className='flex flexsbc item'>
|
|
||||||
<div className='flex flexcc flexfc' >
|
|
||||||
<img src={require('../../../../../assets/images/big.png')} alt="" height='18px'/>
|
|
||||||
<span>{props.countT?.[props.keys]?.scal2}座</span>
|
|
||||||
<span>大(2)型</span>
|
|
||||||
</div>
|
|
||||||
<div className='flex flexcc flexfc' >
|
|
||||||
<img src={require('../../../../../assets/images/mid.png')} alt="" height='18px'/>
|
|
||||||
<span>{props.countT?.[props.keys]?.scal3}座</span>
|
|
||||||
<span>中型</span>
|
|
||||||
</div>
|
|
||||||
<div className='flex flexcc flexfc'>
|
|
||||||
<img src={require('../../../../../assets/images/small1.png')} alt="" height='18px'/>
|
|
||||||
<span>{props.countT?.[props.keys]?.scal4}座</span>
|
|
||||||
<span>小(1)型</span>
|
|
||||||
</div>
|
|
||||||
<div className='flex flexcc flexfc'>
|
|
||||||
<img src={require('../../../../../assets/images/small2.png')} alt="" height='18px' />
|
|
||||||
<span>{props.countT?.[props.keys]?.scal5}座</span>
|
|
||||||
<span>小(2)型</span>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<PubTable img='mid' keys={props.keys} data={data} count={props.countT} columns={columns} type={{layer:'ShuiKuLayer',pops:'shuiku'}} />
|
|
||||||
</div>
|
|
||||||
)
|
|
||||||
}
|
|
||||||
export default Reservoir
|
|
||||||
|
|
@ -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<IProps> = (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(
|
|
||||||
<div className='reservoir'>
|
|
||||||
<div className='title flex flexac'>
|
|
||||||
<BarChartOutlined style={{fontSize:'14px',marginRight:'5px'}}/>
|
|
||||||
统计
|
|
||||||
</div>
|
|
||||||
<PubTable img='waterDivers' data={data} keys={props.keys} columns={columns} count={props.countT} type={{layer:'YsgcLayer',pops:'yinshuigongcheng'}}/>
|
|
||||||
</div>
|
|
||||||
)
|
|
||||||
}
|
|
||||||
export default WaterDiversionEngineering
|
|
||||||
|
|
@ -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<number>(0)
|
|
||||||
const [data,setData] = useState([])
|
|
||||||
|
|
||||||
|
|
||||||
const columns: ColumnsType<DataType> = [
|
|
||||||
{
|
|
||||||
title: ()=>{return <div >时段
|
|
||||||
</div>},
|
|
||||||
dataIndex: 'tmTp',
|
|
||||||
key: 'tmTp',
|
|
||||||
align:'center',
|
|
||||||
render: text => <span>{text}h</span>,
|
|
||||||
width:40
|
|
||||||
},
|
|
||||||
{
|
|
||||||
title: ()=>{return <div >雨量
|
|
||||||
</div>},
|
|
||||||
dataIndex: 'drp',
|
|
||||||
key: 'drp',
|
|
||||||
render: text => <span >{text}mm</span>,
|
|
||||||
align:'center'
|
|
||||||
},
|
|
||||||
{
|
|
||||||
title: ()=>{return <div >发生时段
|
|
||||||
</div>},
|
|
||||||
dataIndex: 'happenTm',
|
|
||||||
key: 'happenTm',
|
|
||||||
render: text => <div style={{textAlign:'left',marginLeft:10}}>{text}</div>,
|
|
||||||
align:'center'
|
|
||||||
},
|
|
||||||
{
|
|
||||||
title: ()=>{return <div >政区
|
|
||||||
</div>},
|
|
||||||
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(
|
|
||||||
<div className='cimateCharacteristics'>
|
|
||||||
<div className='flex flexsac tabs'>
|
|
||||||
<div onClick={()=>selectAddress(0)} className={idex === 0?'active':''}>咸丰县</div>
|
|
||||||
<div onClick={()=>selectAddress(1)} className={idex === 1?'active':''}>湖北省</div>
|
|
||||||
</div>
|
|
||||||
<Table columns={columns} dataSource={data} pagination={false}/>
|
|
||||||
|
|
||||||
</div>
|
|
||||||
)
|
|
||||||
}
|
|
||||||
export default CimateCharacteristics
|
|
||||||
|
|
@ -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;
|
|
||||||
}
|
|
||||||
|
|
@ -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;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
@ -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<IProps> = (props:IProps) => {
|
|
||||||
const [data,setData] = useState<obj[]>([])
|
|
||||||
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(
|
|
||||||
<div>
|
|
||||||
{data.map(item=>{
|
|
||||||
return <div className='flex flexsbc feature'>
|
|
||||||
<span>{item.key}</span>
|
|
||||||
<span className='blueColor'>{item.time}</span>
|
|
||||||
<span className="blueColor">{item.content}</span>
|
|
||||||
</div>
|
|
||||||
})}
|
|
||||||
</div>
|
|
||||||
)
|
|
||||||
}
|
|
||||||
export default Feature
|
|
||||||
|
|
@ -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<IProps> = (props: IProps) => {
|
|
||||||
const [data, setData] = useState<any>([])
|
|
||||||
const [dataP, setDataP] = useState<any>([])
|
|
||||||
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 =`<div>${num + '月'}</div><div>${params[0].seriesName}:${params[0].value.value}mm</div><div>${params[1].seriesName}:${params[1].value.value}mm</div>`
|
|
||||||
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 =`<div>${num + '月'}</div><div>${params[0].seriesName}:${params[0].value.value}mm</div><div>${params[1].seriesName}:${params[1].value.value}mm</div>`
|
|
||||||
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 (
|
|
||||||
<div>
|
|
||||||
<ReactEcharts
|
|
||||||
option={option(data)}
|
|
||||||
style={{ height: '15rem' }}
|
|
||||||
/>
|
|
||||||
<div id='modelY'>
|
|
||||||
<Modal key={`${new Date()}`} centered={true} open={isModalOpen} width={650} onCancel={handleCancel} zIndex={2000} footer={null} >
|
|
||||||
|
|
||||||
<ReactEcharts
|
|
||||||
option={option1(data)}
|
|
||||||
key={`${isModalOpen}`}
|
|
||||||
style={{width:600,height:400}}
|
|
||||||
notMerge={true}
|
|
||||||
lazyUpdate
|
|
||||||
/>
|
|
||||||
</Modal>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
</div>
|
|
||||||
)
|
|
||||||
}
|
|
||||||
export default RainfallPeriod
|
|
||||||
|
|
@ -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);
|
|
||||||
}
|
|
||||||
|
|
@ -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);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
@ -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<DataType> = [
|
|
||||||
{
|
|
||||||
title: ()=>{return <div className='headerCell'>
|
|
||||||
<div className='afer'>频率</div>
|
|
||||||
<div className='before'>时段</div>
|
|
||||||
</div>},
|
|
||||||
dataIndex: 'tmTp',
|
|
||||||
key: 'tmTp',
|
|
||||||
render: text => <span>{text}h</span>,
|
|
||||||
align:'center'
|
|
||||||
},
|
|
||||||
{
|
|
||||||
title: ()=>{return <div>
|
|
||||||
<div className='afer'>5年</div>
|
|
||||||
<div className='before'>一遇</div>
|
|
||||||
</div>},
|
|
||||||
dataIndex: 'per20',
|
|
||||||
key: 'per20',
|
|
||||||
align:'center'
|
|
||||||
},
|
|
||||||
{
|
|
||||||
title: ()=>{return <div>
|
|
||||||
<div className='afer'>10年</div>
|
|
||||||
<div className='before'>一遇</div>
|
|
||||||
</div>},
|
|
||||||
dataIndex: 'per10',
|
|
||||||
key: 'per10',
|
|
||||||
align:'center'
|
|
||||||
},
|
|
||||||
{
|
|
||||||
title: ()=>{return <div>
|
|
||||||
<div className='afer'>20年</div>
|
|
||||||
<div className='before'>一遇</div>
|
|
||||||
</div>},
|
|
||||||
dataIndex: 'per5',
|
|
||||||
key: 'per5',
|
|
||||||
align:'center'
|
|
||||||
},
|
|
||||||
{
|
|
||||||
title: ()=>{return <div>
|
|
||||||
<div className='afer'>50年</div>
|
|
||||||
<div className='before'>一遇</div>
|
|
||||||
</div>},
|
|
||||||
dataIndex: 'per2',
|
|
||||||
key: 'per2',
|
|
||||||
align:'center'
|
|
||||||
},
|
|
||||||
{
|
|
||||||
title: ()=>{return <div>
|
|
||||||
<div className='afer'>100年</div>
|
|
||||||
<div className='before'>一遇</div>
|
|
||||||
</div>},
|
|
||||||
dataIndex: 'per1',
|
|
||||||
key: 'per1',
|
|
||||||
align:'center'
|
|
||||||
},
|
|
||||||
];
|
|
||||||
const getInfo = async()=>{
|
|
||||||
const res =await byplInfo()
|
|
||||||
console.log(res,'--数据');
|
|
||||||
setData(res.data)
|
|
||||||
}
|
|
||||||
useEffect(()=>{
|
|
||||||
getInfo()
|
|
||||||
},[])
|
|
||||||
return(
|
|
||||||
<div className='rainstormFrequency'>
|
|
||||||
<Table columns={columns} dataSource={data} pagination={false}/>
|
|
||||||
|
|
||||||
</div>
|
|
||||||
)
|
|
||||||
}
|
|
||||||
export default RainstormFrequency
|
|
||||||
|
|
@ -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;
|
|
||||||
}
|
|
||||||
|
|
@ -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
|
|
||||||
}
|
|
||||||
|
|
@ -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<arr[]>([])
|
|
||||||
const [keyItem, setKeyItem] = useState(0)
|
|
||||||
const [show, setShow] = useState<boolean>(false)
|
|
||||||
const [idex, setIndex] = useState<number>(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 (
|
|
||||||
<div>
|
|
||||||
{data.map((item, index) => {
|
|
||||||
return <div className='weatherContent'>
|
|
||||||
<div className='title flex flexac'>
|
|
||||||
<BarChartOutlined style={{ fontSize: '14px', marginRight: '5px' }} />
|
|
||||||
{item.title}
|
|
||||||
|
|
||||||
</div>
|
|
||||||
{!item.content && <div className='icon'>
|
|
||||||
{(idex === item.key) && <UpCircleOutlined onClick={() => setShowType(item.key)} />}
|
|
||||||
{!(idex === item.key) && <DownCircleOutlined onClick={() => setShowType(item.key)} />}
|
|
||||||
</div>}
|
|
||||||
{item.content && <div className='message'>
|
|
||||||
{item.content}
|
|
||||||
<div style={{ float: 'right' }}>
|
|
||||||
{(idex === item.key) && <UpCircleOutlined onClick={() => setShowType(item.key)} />}
|
|
||||||
{!(idex === item.key) && <DownCircleOutlined onClick={() => setShowType(item.key)} />}
|
|
||||||
</div>
|
|
||||||
</div>}
|
|
||||||
{(idex === item.key) && <div>
|
|
||||||
{idex === 1 && <Feature qhtdData={qhtdData} />}
|
|
||||||
{idex === 2 && <RainfallPeriod jysdfbData={jysdfbData} />}
|
|
||||||
{idex === 3 && <CimateCharacteristics />}
|
|
||||||
{idex === 4 && <RainstormFrequency />}
|
|
||||||
</div>}
|
|
||||||
</div>
|
|
||||||
})}
|
|
||||||
</div>
|
|
||||||
|
|
||||||
|
|
||||||
)
|
|
||||||
}
|
|
||||||
export default Weather
|
|
||||||
|
|
@ -1,55 +1,30 @@
|
||||||
import React, { useEffect, useState } from 'react'
|
import React, { useEffect, useState } from 'react'
|
||||||
import { useLocation } from 'react-router'
|
import { useLocation } from 'react-router'
|
||||||
import { useDispatch, useSelector } from 'react-redux'
|
import { useDispatch, useSelector } from 'react-redux'
|
||||||
import { Drawer } from 'antd'
|
|
||||||
import './index.less'
|
import './index.less'
|
||||||
import MapCtrl from './MapCtrl'
|
import MapCtrl from './MapCtrl/index2'
|
||||||
import HomePanelsLayoutPage from './homePanelsLayoutPage'
|
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 Ysgzq from '../ysgzq/ssyq'
|
||||||
import Sssq from '../ysgzq/sssq'
|
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 Ddxsfx from '../fxdd/dqxsfx'
|
||||||
// import Tqyb from '../fxdd/tqyb'
|
// import Tqyb from '../fxdd/tqyb'
|
||||||
import Fhxs from './fhxs'
|
import Fhxs from './fhxs'
|
||||||
import Tqyb from './tqyb'
|
import Tqyb from './tqyb'
|
||||||
import Tuli from './img/tuli.png'
|
import Btn from './btn'
|
||||||
import ysgzqTuli from './img/ysgzqTuli.png'
|
|
||||||
|
|
||||||
|
|
||||||
const HomePage = () => {
|
const HomePage = () => {
|
||||||
const getLayerVisible = (s:any) => s.map.layerVisible;
|
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 layerVisible = useSelector(getLayerVisible);
|
||||||
|
const [showPanels, setShowPanels] = useState(true)
|
||||||
const location = useLocation()
|
const location = useLocation()
|
||||||
const dispatch = useDispatch()
|
const dispatch = useDispatch()
|
||||||
const pathname = location.pathname
|
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(() => {
|
useEffect(() => {
|
||||||
// if (pathname !== '/mgr/home') {
|
// if (pathname !== '/mgr/home') {
|
||||||
|
|
@ -88,101 +63,10 @@ const HomePage = () => {
|
||||||
}}
|
}}
|
||||||
>
|
>
|
||||||
{/* 控制按钮 */}
|
{/* 控制按钮 */}
|
||||||
<div
|
<Btn showPanels={showPanels} setShowPanels={setShowPanels}/>
|
||||||
className="toolBox"
|
|
||||||
style={{
|
|
||||||
position: 'absolute',
|
|
||||||
zIndex: '110',
|
|
||||||
right: '-1rem',
|
|
||||||
top: '-7px',
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
<div className="layerPanelBtn clearFloat">
|
|
||||||
<div className="lf" title="地图展示图层控制" onClick={showLayers}>
|
|
||||||
<img
|
|
||||||
src={DiQiu}
|
|
||||||
alt=""
|
|
||||||
style={{ width: '30px', marginTop: '5px' }}
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
<div className="lf" title="还原地图展示位置" onClick={reduction}>
|
|
||||||
<img
|
|
||||||
src={ZhongXin}
|
|
||||||
alt=""
|
|
||||||
style={{ width: '30px', marginTop: ' 5px' }}
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
<div
|
|
||||||
className="lf"
|
|
||||||
title="收起悬浮功能块"
|
|
||||||
onClick={collapseExpand}
|
|
||||||
>
|
|
||||||
{showPanels ? (
|
|
||||||
<img
|
|
||||||
src={Shouqi2}
|
|
||||||
alt=""
|
|
||||||
style={{ width: '30px', marginTop: '5px' }}
|
|
||||||
/>
|
|
||||||
) : (
|
|
||||||
<img
|
|
||||||
src={Zhankai2}
|
|
||||||
alt=""
|
|
||||||
style={{ width: '30px', marginTop: '5px' }}
|
|
||||||
/>
|
|
||||||
)}
|
|
||||||
</div>
|
|
||||||
{/* <div className="lf" title="地图放大" onClick={()=>{
|
|
||||||
dispatch.runtime.setIn();
|
|
||||||
}}>
|
|
||||||
<img src={Fangda} alt="" style={{ width: "18px", marginTop: "-5px" }} />
|
|
||||||
</div>
|
|
||||||
<div className="lf" title="地图缩小" onClick={()=>{
|
|
||||||
dispatch.runtime.setOut();
|
|
||||||
}}>
|
|
||||||
<img src={Suoxiao} alt="" style={{ width: "18px", marginTop: "-5px" }} />
|
|
||||||
</div> */}
|
|
||||||
{/* <div className="lf" title="地图展示图层控制" onClick={showLayers}>
|
|
||||||
<DatabaseFilled style={{ fontSize: "17px", marginTop: "2px" }} />
|
|
||||||
</div> */}
|
|
||||||
<div className='mapToolBoxTuCeng' style={{left:open?'-170px':'5px'}}>
|
|
||||||
<div className='mapToolBoxTuCengItem' style={{color:!!layerVisible["SatelliteImage"]?'#1677ff':'black'}} onClick={()=>{
|
|
||||||
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);
|
|
||||||
}
|
|
||||||
});
|
|
||||||
}}>
|
|
||||||
<img width={50} height={50} src={`${process.env.PUBLIC_URL}/assets/xyt/homeImg/yingxiangtu.png`} alt=""/>
|
|
||||||
影像图
|
|
||||||
</div>
|
|
||||||
<div className='mapToolBoxTuCengItem' style={{color:!!layerVisible["OfflineMap"]?'#1677ff':'black'}} onClick={()=>{
|
|
||||||
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);
|
|
||||||
}
|
|
||||||
});
|
|
||||||
}}>
|
|
||||||
<img width={50} height={50} src={`${process.env.PUBLIC_URL}/assets/xyt/homeImg/shiliangtu.svg`} alt=""/>
|
|
||||||
矢量图
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
|
|
||||||
{/* 地图 */}
|
{/* 地图 */}
|
||||||
<MapCtrl />
|
<MapCtrl mode={mode}/>
|
||||||
|
|
||||||
|
|
||||||
{/*首页面板*/}
|
{/*首页面板*/}
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue