增加3d地图
parent
50f69efe07
commit
ed94abf4f5
|
|
@ -3,7 +3,13 @@ import { store } from './models/store'
|
|||
const address = localStorage.getItem('address') ? localStorage.getItem('address') : 'jianshi';
|
||||
|
||||
// @ts-ignore
|
||||
const extent: [number, number, number, number] = [139.5514, 30.1131, 110.2219, 30.9030];
|
||||
// const extent: [number, number, number, number] = [139.5514, 30.1131, 110.2219, 30.9030];
|
||||
const extent: [number, number, number, number] = [
|
||||
110.25175167632203,
|
||||
29.934801589268638,
|
||||
111.3498069381167,
|
||||
30.416712241937642
|
||||
];
|
||||
const ADCD6 = address === "jianshi" ? "422822" : "420529";
|
||||
const ADCD12 = ADCD6 + '000000';
|
||||
const ADCD = ADCD6 + '000000000';
|
||||
|
|
|
|||
|
|
@ -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 './index.less';
|
||||
import Map2D from './M2D/Map2D';
|
||||
import Map3D from './Map3D/Map3D';
|
||||
import Markers from './Markers';
|
||||
import { useLocation, useNavigate } from "react-router";
|
||||
|
||||
|
|
@ -11,26 +12,18 @@ let id_factory_index = 1;
|
|||
|
||||
export default function MapCtrl() {
|
||||
const location = useLocation();
|
||||
const navigate = useNavigate();
|
||||
|
||||
const pathname = location.pathname;
|
||||
|
||||
const ctrlIdRef = useRef(`cloudowr_mapdiv_${id_factory_index++}`);
|
||||
const mapobjRef = useRef();
|
||||
const [_, forceRender] = useReducer(s => s + 1, 1);
|
||||
|
||||
const dispatch = useDispatch();
|
||||
|
||||
const cameraTarget = useSelector(s => s.runtime.cameraTarget);
|
||||
const mapIn = useSelector(s => s.runtime.mapIn);
|
||||
const mapOut = useSelector(s => s.runtime.mapOut);
|
||||
const layerVisible = useSelector(s => s.map.layerVisible);
|
||||
const layerSetting = useSelector(s => s.map.layerSetting);
|
||||
|
||||
const clickLoopBtn = useSelector(s => s.map.clickLoopBtn);
|
||||
const layerSetting1 = useSelector(s => s.runtime.layerSetting);
|
||||
const layerSettingLoop = useSelector(s => s.runtime.layerSettingLoop);
|
||||
const smallSkRiskTime = useSelector(s => s.runtime.smallSkRiskTime);
|
||||
const dispatch = useDispatch();
|
||||
|
||||
useEffect(() => {
|
||||
const mapCtrl = mapobjRef.current;
|
||||
|
|
@ -42,26 +35,12 @@ export default function MapCtrl() {
|
|||
|
||||
}, [layerVisible, layerSetting, mapobjRef.current]);
|
||||
|
||||
// useEffect(() => {
|
||||
// const mapCtrl = mapobjRef.current;
|
||||
// if (!mapCtrl) {
|
||||
// return;
|
||||
// }
|
||||
// // mapCtrl.zoomIn()
|
||||
// const a = mapCtrl.getView().getZoom()
|
||||
// debugger
|
||||
// },[mapIn,mapOut])
|
||||
|
||||
useEffect(() => {
|
||||
const mapCtrl = mapobjRef.current;
|
||||
if (!mapCtrl) {
|
||||
return;
|
||||
}
|
||||
console.log("75", layerVisible);
|
||||
// || !layerVisible["forecastPoints"]
|
||||
// if (layerVisible["HLLayer"]) {
|
||||
// mapCtrl.zoomTo(cameraTarget);
|
||||
// }
|
||||
mapCtrl.zoomTo(cameraTarget);
|
||||
}, [cameraTarget])
|
||||
|
||||
|
|
@ -72,7 +51,8 @@ export default function MapCtrl() {
|
|||
divid: ctrlIdRef.current,
|
||||
dispatch
|
||||
};
|
||||
const mapobj = new Map2D(params);
|
||||
// const mapobj = new Map2D(params);
|
||||
const mapobj = mode === '3d' ? new Map3D(params) : new Map2D(params);
|
||||
setMapObj(mapobj);
|
||||
|
||||
mapobj.init();
|
||||
|
|
@ -107,10 +87,6 @@ export default function MapCtrl() {
|
|||
useEffect(() => {
|
||||
const mapCtrl = mapobjRef.current;
|
||||
if (mapCtrl) {
|
||||
console.log("mapCtrl.layerMgr 100++++++++++++++", layerVisible["ContourLayerLoop"]);
|
||||
|
||||
//console.log("clickLoopBtn",clickLoopBtn);
|
||||
|
||||
if (clickLoopBtn) {
|
||||
mapCtrl.layerMgr.addAppLayersCLoop(dispatch, layerVisible, layerSettingLoop);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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?
|
||||
<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?
|
||||
<div className='homePage_head2'>
|
||||
|
|
|
|||
|
|
@ -82,7 +82,7 @@
|
|||
padding: 10px;
|
||||
border-radius: 10px;
|
||||
background: #ffffff;
|
||||
border: 1px solid #eee;
|
||||
// border: 1px solid #eee;
|
||||
|
||||
.homePage_head2{
|
||||
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 { useLocation } from 'react-router'
|
||||
import { useDispatch, useSelector } from 'react-redux'
|
||||
import { Drawer } from 'antd'
|
||||
import './index.less'
|
||||
import MapCtrl from './MapCtrl'
|
||||
import MapCtrl from './MapCtrl/index2'
|
||||
import HomePanelsLayoutPage from './homePanelsLayoutPage'
|
||||
import LayersPage from '../Home/dlg/LayersDlg'
|
||||
import Shouqi2 from './img/shouqi2.png'
|
||||
import Zhankai2 from './img/zhankai2.png'
|
||||
import DiQiu from './img/DiQiu.png'
|
||||
import ZhongXin from './img/ZhongXin.png'
|
||||
import Ysgzq from '../ysgzq/ssyq'
|
||||
import Sssq from '../ysgzq/sssq'
|
||||
import Yqz from '../fxzb/jczw/yqz/index.js'
|
||||
import Sqz from '../fxzb/jczw/sqz/index.js'
|
||||
import Ddxsfx from '../fxdd/dqxsfx'
|
||||
// import Tqyb from '../fxdd/tqyb'
|
||||
import Fhxs from './fhxs'
|
||||
import Tqyb from './tqyb'
|
||||
import Tuli from './img/tuli.png'
|
||||
import ysgzqTuli from './img/ysgzqTuli.png'
|
||||
import Btn from './btn'
|
||||
|
||||
|
||||
const HomePage = () => {
|
||||
const getLayerVisible = (s:any) => s.map.layerVisible;
|
||||
let mapObj = useSelector((s:any) => s.map.map);
|
||||
const mode = useSelector((s:any) => s.map.mode);
|
||||
const layerVisible = useSelector(getLayerVisible);
|
||||
const [showPanels, setShowPanels] = useState(true)
|
||||
const location = useLocation()
|
||||
const dispatch = useDispatch()
|
||||
const pathname = location.pathname
|
||||
const [showPanels, setShowPanels] = useState(true)
|
||||
const [open, setOpen] = useState(false)
|
||||
|
||||
//收起\展开
|
||||
const collapseExpand = () => {
|
||||
setShowPanels(!showPanels)
|
||||
}
|
||||
|
||||
//还原地图位置
|
||||
const reduction = () => {
|
||||
dispatch.runtime.setHome()
|
||||
}
|
||||
|
||||
//图层控制
|
||||
const showLayers = () => {
|
||||
setOpen(!open)
|
||||
}
|
||||
|
||||
const onClose = () => {
|
||||
setOpen(false)
|
||||
}
|
||||
|
||||
useEffect(() => {
|
||||
// if (pathname !== '/mgr/home') {
|
||||
|
|
@ -88,101 +63,10 @@ const HomePage = () => {
|
|||
}}
|
||||
>
|
||||
{/* 控制按钮 */}
|
||||
<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?'-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>
|
||||
|
||||
<Btn showPanels={showPanels} setShowPanels={setShowPanels}/>
|
||||
|
||||
{/* 地图 */}
|
||||
<MapCtrl />
|
||||
<MapCtrl mode={mode}/>
|
||||
|
||||
|
||||
{/*首页面板*/}
|
||||
|
|
|
|||
Loading…
Reference in New Issue