1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
import React, { useEffect, useState, useRef } from 'react';
import SiteModal from '@/components/Modal/SiteModa';
import { Input, Cascader, Button, message, Spin } from 'antd';
import {
gcj_decrypt,
exetent2AmapPoint,
lngLat2WebMercator,
plan2AMapbound,
webMercator2LngLat,
} from '@/utils/transformUtil';
import { GetAllConfig, GetMetaData } from '@/services/gis/gis';
import ReactJson from 'react-json-view';
import { tr } from 'voca';
const { Search } = Input;
const VectorPreviewModal = props => {
const { metaData } = props;
const mapID = useRef();
const [currentMeta, setCurrentMeta] = useState();
const [isLoading, setIsLoading] = useState(false);
useEffect(() => {
if (document.getElementById('map-container')) {
if (!mapID.current) {
//1.加载底图
let m = new window.AMap.Map('map-container');
mapID.current = m;
}
}
}, [props]);
useEffect(() => {
let map = mapID.current;
map && map.clearMap();
map && map.remove(map.getLayers());
setIsLoading(true);
map &&
GetMetaData({ mapServerName: metaData.GISServerProjectName }).then(res2 => {
setIsLoading(false);
if (res2 && res2.units) {
setCurrentMeta(res2);
const layers = res2.layers || [];
const workspace = res2.mapName.split('_')[0];
const subLayers = layers
.filter(layer => layer.subLayerIds && layer.subLayerIds.length === 0)
.map(layer => layer.name);
const paramLayers = `${workspace}:${subLayers.join(',')}`;
const params = {
LAYERS: paramLayers,
VERSION: '1.1.1',
_site: '',
};
const wmsOption = {
tileSize: 512,
url: `${location.origin}/PandaGIS/MapServer/Export/${
metaData.GISServerProjectName
}/GeoServerProxy/wms`,
blend: false,
params: params,
zooms: [2, 20],
};
let wms = new window.AMap.TileLayer.WMS(wmsOption);
map.add(wms);
setIsLoading(true);
// wms.complete(() => {
// setIsLoading(false)
// })
wms.on('complete', () => {
setIsLoading(false);
});
const extent = res2.fullExtent;
if (extent.xmax < 100000000 && extent.xmax > 0) {
const a = webMercator2LngLat(extent.xmin, extent.ymin);
const b = webMercator2LngLat(extent.xmax, extent.ymax);
const southWest = new AMap.LngLat(a[0], a[1]);
const northEast = new AMap.LngLat(b[0], b[1]);
mapID.current.setBounds(new AMap.Bounds(southWest, northEast));
}
}
});
}, [metaData]);
const resetmap = () => {};
const getInitConfig = () => {};
const onSubmit = () => {};
return (
<SiteModal
{...props}
title="管网预览"
bodyStyle={{ width: '100%', minHeight: '100px' }}
style={{ top: 200, borderRadius: '20px' }}
width="1050px"
cancelText="取消"
okText="确认"
onOk={() => onSubmit()}
>
<Spin spinning={isLoading}>
<div style={{ width: '1000px', height: '500px' }}>
<div style={{ width: '1000px', height: '500px', position: 'absolute' }}>
<div id="map-container" style={{ width: '1000px', height: '500px' }} />
<div
style={{
top: '10px',
right: '10px',
position: 'absolute',
overflowY: 'scroll',
maxHeight: '480px',
maxWidth: '250px',
backgroundColor: 'white',
}}
>
<ReactJson src={currentMeta} />
</div>
</div>
</div>
</Spin>
</SiteModal>
);
};
export default VectorPreviewModal;