VectorPreviewModal.jsx 4.23 KB
Newer Older
1 2 3 4
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'
邓超's avatar
邓超 committed
5
import { GetAllConfig, GetMetaData } from '@/services/gis/gis'
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 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