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, 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;