perf:元数据预览组件

package.json

@@ -112,6 +112,7 @@
     "react-dom": "16.8.6",
     "react-helmet": "6.0.0-beta",
     "react-intl": "2.8.0",
+    "react-json-view": "^1.21.3",
     "react-redux": "7.0.2",
     "react-resizable": "^1.11.0",
     "react-router-dom": "5.1.0",

src/pages/platformCenter/schemeConfig/VectorData/VectorData.jsx

@@ -5,15 +5,18 @@ import {
     GetVectorService, deleteVectorService, getSolutionList, updatePublishedMetaData
 } from '@/services/webConfig/api';
 import AddModal from './AddModal'
+import PreviewModal from './VectorPreviewModal'
 const VectorData = props => {
     const [treeLoading, setTreeLoading] = useState(false);// 弹窗显示
     const [tileData, setTileData] = useState([]); // table表格数据
     const [visible, setVisible] = useState(false); // 弹窗
+    const [previewVisible, setPreviewVisible] = useState(false); // 预览弹窗
     const [flag, setFlag] = useState(0); // 更新list
     const [loading, setLoading] = useState([]); // 更新状态
     const [type, setType] = useState('add'); // 弹窗类型
     const [solutionNames, setSolutionNames] = useState('');
     const [formObj, setFormObj] = useState({ user: 'admin', password: 'geoserver' });
+    const [currentMetaData,setCurrentMetaData] = useState(null)
     const columns = [
         {
             title: '服务名',
@@ -50,6 +53,9 @@ const VectorData = props => {
             align: 'center',
             render: (text, record, index) => (
                 <Space>
+                    <Button type="primary" size="small" onClick={() => previewMetaData(record, index)}>
+                        预览
+                  </Button>
                     <Button type="primary" size="small" loading={loading[index]} onClick={() => enterLoading(record, index)}>
                         更新
                   </Button>
@@ -108,6 +114,10 @@ const VectorData = props => {
         })
 
     }
+    const previewMetaData = (record) => {
+        setCurrentMetaData(record)
+        setPreviewVisible(true)
+    }
 
     const solutionName = () => {
         getSolutionList({
@@ -202,6 +212,11 @@ const VectorData = props => {
                 formObj={formObj}
                 solutionNames={solutionNames}
             />
+            <PreviewModal
+                visible={previewVisible}
+                onCancel={() => setPreviewVisible(false)}
+                metaData={currentMetaData}
+            />
         </>
     )
 }

src/pages/platformCenter/schemeConfig/VectorData/VectorPreviewModal.jsx

+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/platform/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.serviceName).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.serviceName}/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
\ No newline at end of file