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
122
123
124
125
126
127
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(metaData.GISServerProjectName).then(
res2 => {
if (res2 && res2.units) {
setIsLoading(false)
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}/Cityinterface/rest/services/MapServer.svc/${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>
<div style={{ top: "10px", right: "10px", position: "absolute", overflowY: "scroll", maxHeight: "480px", backgroundColor: "white" }}>
<ReactJson src={currentMeta} collapsed={true} />
</div>
</div>
</div>
</Spin>
</SiteModal>
)
}
export default VectorPreviewModal