fix: '管网预览gis组件'

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 { GetAllConfig, GetMetaData } from '@/services/gis/gis';
-import ReactJson from 'react-json-view';
-import { tr } from 'voca';
-const { Search } = Input;
+import { Spin } from 'antd';
+import { GetMetaDataPreview, GetTransformationGeom } from '@/services/gis/gis';
+import { ArcGISSceneMap } from '@wisdom-map/arcgismap';
+import axios from 'axios';
+import { getConditionList } from '@wisdom-map/basemap';
 const VectorPreviewModal = props => {
-  const { metaData } = props;
+  const { metaData, visible } = props;
 
-  const mapID = useRef();
-  const [currentMeta, setCurrentMeta] = useState();
+  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;
+    if (visible) {
+      if (metaData && metaData.Xmax < 100000000 && metaData.Xmax > 0) {
+        axios.get('/PandaGIS/MapServer/' + metaData.GISServerProjectName).then(resdata => {
+          let str = `${metaData.Xmin},${metaData.Ymin},${metaData.Xmax},${metaData.Ymax}`;
+          GetMetaDataPreview({ serviceName: metaData?.GISServerProjectName }).then(res => {
+            if (res.code === '0') {
+              let layerId = res[0]?.children.find(i => i.text === 'layerSrid : 102113');
+
+              let str1 = `${metaData.Xmin},${metaData.Ymin}`;
+              let str2 = `${metaData.Xmax},${metaData.Ymax}`;
+              if (!layerId) {
+                getCondition(str1, resdata.data.layerSrid, str2, '1');
+              } else {
+                handle(str);
               }
+            } else {
+              handle(str);
             }
-  }, [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: 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]);
+        });
+      } else {
+        console.log('错误坐标');
+      }
+    } else {
+      setCurrentMeta(null);
+    }
+  }, [visible, metaData]);
 
-            mapID.current.setBounds(new AMap.Bounds(southWest, northEast));
+  const getCondition = (str, id, str1, value) => {
+    GetTransformationGeom({
+      mapServerName: metaData?.GISServerProjectName,
+      inProj: id.toString(),
+      outProj: '102113',
+      xy: str,
+    }).then(resData => {
+      if (resData.code === '0') {
+        let val = JSON.parse(resData.data)?.xy;
+        if (value) {
+          getCondition(str1, id, val);
+        } else {
+          let list = `${str1},${val}`;
+          console.log(list);
+          debugger;
+          handle(`${str1},${val}`);
         }
       }
     });
-  }, [metaData]);
-  const resetmap = () => {};
+  };
+
+  const handle = str => {
+    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: '',
+        },
+      ],
+    };
+    setCurrentMeta(mapSettings);
+  };
+
+  const getMapInfo = viewObject => {
+    console.log(viewObject);
+  };
 
-  const getInitConfig = () => {};
   const onSubmit = () => {};
   return (
     <SiteModal
@@ -96,22 +142,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>

src/services/gis/gis.js

@@ -15,6 +15,10 @@ export const GetLayerList = param => get(`${PANDA_GIS}/MetaData/D_GetLayerList`,
 // 查看元数据
 export const GetMetaDataPreview = param => get(`${PANDA_GIS}/MetaData/D_GetMetaDataPreview`, param);
 
+// 坐标系转换
+export const GetTransformationGeom = param =>
+  get(`${PANDA_GIS}/Transformation/GetTransformationGeomByMapServaerName`, param);
+
 // 查看图层元数据
 export const GetLayerMetaDataPreview = param =>
   get(`${PANDA_GIS}/MetaData/D_GetLayerMetaDataPreview`, param);