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 { Input, Cascader, Button, message, Spin } from 'antd';
-import {
-  gcj_decrypt,
-  exetent2AmapPoint,
-  lngLat2WebMercator,
-  plan2AMapbound,
-  webMercator2LngLat,
-} from '@/utils/transformUtil';
+import { Spin } from 'antd';
 import { GetAllConfig, GetMetaData } from '@/services/gis/gis';
-import ReactJson from 'react-json-view';
-import { tr } from 'voca';
-const { Search } = Input;
+import { ArcGISSceneMap } from '@wisdom-map/arcgismap';
 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],
+    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: '',
+              },
+            ],
           };
-          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));
-          }
+          setCurrentMeta(mapsettings);
         }
-      });
+      }
+    });
   }, [metaData]);
-  const resetmap = () => {};
 
-  const getInitConfig = () => {};
+  const getMapInfo = viewObject => {
+    console.log(viewObject);
+  };
+
   const onSubmit = () => {};
   return (
     <SiteModal
@@ -96,22 +102,14 @@ const VectorPreviewModal = props => {
     >
       <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>
+          {currentMeta && (
+            <ArcGISSceneMap
+              getMapInfo={e => getMapInfo(e)}
+              config={currentMeta}
+              client="sandbox"
+              // widgets={[]}
+            />
+          )}
         </div>
       </Spin>
     </SiteModal>