fix: '管网预览代码回退'

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

-/* eslint-disable no-unused-expressions */
 import React, { useEffect, useState, useRef } from 'react';
 import SiteModal from '@/components/Modal/SiteModa';
-import { Spin } from 'antd';
+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 { ArcGISSceneMap } from '@wisdom-map/arcgismap';
+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);
-    GetMetaData({ mapServerName: metaData?.GISServerProjectName }).then(res2 => {
-      setIsLoading(false);
-      if (res2 && res2.units) {
-        const extent = res2.fullExtent;
-        if (extent.xmax < 100000000 && extent.xmax > 0) {
-          let str = `${extent.xmin},${extent.ymin},${extent.xmax},${extent.ymax}`;
-          console.log(str);
-          debugger;
-          let mapsettings = {
-            layers: [
-              {
-                id: metaData?.GISServerProjectName,
-                title: metaData?.GISServerProjectName,
-                icon: '',
-                layerType: '',
-                url: `/PandaGIS/MapServer/${metaData?.GISServerProjectName}`,
-                opacity: '1.0',
-                showLegend: true,
-                visible: true,
-                useProxy: true,
-                proxyUrl: '',
-                extent: str,
-                baseLayer: '',
-                resolution: '',
-                origin: '',
-                tileMatrix: '',
-                wmtsUrl: '',
-                schemename: '',
-                roles: '',
-                areaName: '',
-                boundColor: '#86c8f8',
-                backgroundColor: '#000000',
-                boundWidth: '10px',
-                backgroundOpacity: '0.6',
-                basemaps: [
-                  {
-                    id: '高德地形',
-                    title: '高德地形',
-                    thumbnailUrl: 'images/thumbnail/thumbnail_1.jpg',
-                    baseLayers: [
-                      {
-                        title: '高德地形',
-                        icon: '',
-                        layerType: 'amap-v',
-                        url: '',
-                        opacity: '1.0',
-                        visible: false,
-                        useProxy: false,
-                        proxyUrl: '',
-                        style: '',
-                        extent: '',
-                        baseLayer: '',
-                        resolution: '',
-                        origin: '',
-                        tileMatrix: '',
-                        levelStart: '',
-                        levelEnd: '',
-                        levelEndEnlarge: false,
-                      },
-                    ],
-                  },
-                ],
-                levelStart: '',
-              },
-            ],
+    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],
           };
-          setCurrentMeta(mapsettings);
+          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 getMapInfo = viewObject => {
-    console.log(viewObject);
-  };
-
+  const getInitConfig = () => {};
   const onSubmit = () => {};
   return (
     <SiteModal
@@ -102,14 +96,22 @@ const VectorPreviewModal = props => {
     >
       <Spin spinning={isLoading}>
         <div style={{ width: '1000px', height: '500px' }}>
-          {currentMeta && (
-            <ArcGISSceneMap
-              getMapInfo={e => getMapInfo(e)}
-              config={currentMeta}
-              client="sandbox"
-              widgets={[]}
-            />
-          )}
+          <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>