fix: '底图读取json'

src/pages/platformCenter/gis/schemeConfig/TileConfig/AddModal.jsx

+/* eslint-disable prefer-destructuring */
 /* eslint-disable camelcase */
 /* eslint-disable jsx-a11y/alt-text */
 /* eslint-disable no-else-return */
@@ -21,12 +22,15 @@ import {
   Radio,
   Button,
   Switch,
+  Empty,
+  TreeSelect,
 } from 'antd';
 import styles from '../SchemeConfig.less';
 import thumbnail_1 from '@/assets/images/thumbnail/thumbnail_1.jpg';
 import thumbnail_2 from '@/assets/images/thumbnail/thumbnail_2.jpg';
 import thumbnail_3 from '@/assets/images/thumbnail/thumbnail_3.jpg';
 import thumbnail_4 from '@/assets/images/thumbnail/thumbnail_4.jpg';
+import jsonData from './TileMap.json';
 import classnames from 'classnames';
 import {
   SetServiceConfig,
@@ -34,10 +38,21 @@ import {
   GetGridSetList,
   GetCustomBaseMapByName,
 } from '@/services/webConfig/api';
+
 const { Item } = Form;
 const { Option } = Select;
+const { TreeNode } = TreeSelect;
 const AddModal = props => {
-  const { callBackSubmit = () => {}, type, formObj, visible, baseMap, name, onCancel } = props;
+  const {
+    callBackSubmit = () => {},
+    type,
+    formObj,
+    visible,
+    baseMap,
+    name,
+    onCancel,
+    json,
+  } = props;
   const [loading, setLoading] = useState(false);
   const [radio, setRadio] = useState();
   const [alpha, setAlpha] = useState(1);
@@ -54,6 +69,8 @@ const AddModal = props => {
   const [type1, setType] = useState(0);
   const [form] = Form.useForm();
   const [radio1, setRadio1] = useState();
+  const [keepJsonData, setKeepJsonData] = useState([]);
+  const [maplayer, setMaplayer] = useState([]);
   const arr = [
     'assets/images/thumbnail/thumbnail_1.jpg',
     'assets/images/thumbnail/thumbnail_2.jpg',
@@ -101,17 +118,21 @@ const AddModal = props => {
             };
           } else {
             let url = '';
-            if (obj.type == 'streetPurplishBlue') {
-              url = '//map.geoq.cn/ArcGIS/rest/services/ChinaOnlineStreetPurplishBlue/MapServer';
-            } else if (obj.type == 'streetGray') {
-              url = '//map.geoq.cn/ArcGIS/rest/services/ChinaOnlineStreetGray/MapServer';
-            } else if (obj.type == 'streetWarm') {
-              url = '//map.geoq.cn/ArcGIS/rest/services/ChinaOnlineStreetWarm/MapServer';
-            } else if (obj.type == 'mapbox-i-ia') {
-              url = '//api.mapbox.com/v4/mapbox.satellite';
-            } else if (obj.type == 'tianditu-arcgis-i') {
-              url = '//services.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer';
+            let list = keepJsonData.find(i => i.type === obj.type);
+            if (list) {
+              url = list.url;
             }
+            // if (obj.type == 'streetPurplishBlue') {
+            //   url = '//map.geoq.cn/ArcGIS/rest/services/ChinaOnlineStreetPurplishBlue/MapServer';
+            // } else if (obj.type == 'streetGray') {
+            //   url = '//map.geoq.cn/ArcGIS/rest/services/ChinaOnlineStreetGray/MapServer';
+            // } else if (obj.type == 'streetWarm') {
+            //   url = '//map.geoq.cn/ArcGIS/rest/services/ChinaOnlineStreetWarm/MapServer';
+            // } else if (obj.type == 'mapbox-i-ia') {
+            //   url = '//api.mapbox.com/v4/mapbox.satellite';
+            // } else if (obj.type == 'tianditu-arcgis-i') {
+            //   url = '//services.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer';
+            // }
             arr = {
               servicename: obj.servicename,
               terminalType: 'base',
@@ -159,6 +180,22 @@ const AddModal = props => {
 
   const onFinish = value => {};
   useEffect(() => {
+    if (json.length > 0) {
+      setMaplayer(json);
+      let data = [];
+      json.forEach(item => {
+        data = [...data, ...item.items];
+      });
+      setKeepJsonData(data);
+    } else {
+      setMaplayer(jsonData);
+      let data = [];
+      jsonData.forEach(item => {
+        data = [...data, ...item.items];
+      });
+      setKeepJsonData(data);
+    }
+
     setLoading(false);
     setMapType(0);
     setType(0);
@@ -244,13 +281,13 @@ const AddModal = props => {
   const radioChange = e => {
     setRadio(e.target.value);
   };
-  const handleChange = value => {
-    console.log(value);
+  const handleChange = (value, label) => {
+    let str = label[0].split('（');
     setAdvanced(0);
     setCurrent(false);
     form.setFieldsValue({
-      label: servicenameToType(value),
-      servicename: servicenameToType(value),
+      label: str[0],
+      servicename: str[0],
     });
     if (value == 'google-user' || value == 'pipenet-tile') {
       setMapType(1);
@@ -263,140 +300,64 @@ const AddModal = props => {
       setType(0);
     }
   };
-  // 添加地图类型
-  const servicenameToType = type => {
-    // console.log(name);
-    // let random = Math.floor(Math.random() * 100) + 1;
-    // if (type == 'google-v') {
-    //   let aa = `谷歌地形${random}`;
-    //   if (name.indexOf(aa) != -1) {
-    //     servicenameToType(type);
-    //   } else {
-    //     return `谷歌地形${random}`;
-    //   }
-    // } else if (type == 'google-i-a') {
-    //   let aa = `谷歌影像(注记)${random}`;
-    //   if (name.indexOf(aa) != -1) {
-    //     servicenameToType(type);
-    //   } else {
-    //     return `谷歌影像(注记)${random}`;
-    //   }
-    // } else if (type == 'google-i') {
-    //   let aa = `谷歌影像${random}`;
-    //   if (name.indexOf(aa) != -1) {
-    //     servicenameToType(type);
-    //   } else {
-    //     return `谷歌影像${random}`;
-    //   }
-    // } else if (type == 'amap-i') {
-    //   let aa = `高德影像${random}`;
-    //   if (name.indexOf(aa) != -1) {
-    //     servicenameToType(type);
-    //   } else {
-    //     return `高德影像${random}`;
-    //   }
-    // } else if (type == 'amap-v') {
-    //   let aa = `高德地形${random}`;
-    //   if (name.indexOf(aa) != -1) {
-    //     servicenameToType(type);
-    //   } else {
-    //     return `高德地形${random}`;
-    //   }
-    // } else if (type == 'tianditu-i-ia') {
-    //   let aa = `天地图影像${random}`;
-    //   if (name.indexOf(aa) != -1) {
-    //     servicenameToType(type);
-    //   } else {
-    //     return `天地图影像${random}`;
-    //   }
-    // } else if (type == 'tianditu-v-va') {
-    //   let aa = `天地图地形${random}`;
-    //   if (name.indexOf(aa) != -1) {
-    //     servicenameToType(type);
-    //   } else {
-    //     return `天地图地形${random}`;
-    //   }
-    // } else if (type == 'google-user') {
-    //   let aa = `自定义底图${random}`;
-    //   if (name.indexOf(aa) != -1) {
-    //     servicenameToType(type);
-    //   } else {
-    //     return `自定义底图${random}`;
-    //   }
-    // } else if (type == 'pipenet-tile') {
-    //   let aa = `地形图${random}`;
-    //   if (name.indexOf(aa) != -1) {
-    //     servicenameToType(type);
-    //   } else {
-    //     return `地形图${random}`;
-    //   }
-    // }
-
-    switch (type) {
-      case 'google-v':
-        return '谷歌地形';
-      case 'google-i-a':
-        return '谷歌影像(注记)';
-      case 'google-i':
-        return '谷歌影像';
-      case 'amap-i':
-        return '高德影像';
-      case 'amap-v':
-        return '高德地形';
-      case 'tianditu-i-ia':
-        return '天地图影像';
-      case 'tianditu-v-va':
-        return '天地图地形';
-      case 'streetPurplishBlue':
-        return 'GeoQ午夜蓝';
-      case 'streetGray':
-        return 'GeoQ水墨灰';
-      case 'streetWarm':
-        return 'GeoQ暖色';
-      case 'mapbox-i-ia':
-        return 'mapbox影像';
-      case 'tianditu-arcgis-i':
-        return 'arcgis影像';
-      case 'arcgis-i-ia':
-        return 'arcgis影像注记';
-      case 'offline-map':
-        return '离线地图';
-      case 'tianditudark-v-va':
-        return '深色天地图地形';
-      // case 'google-user':
-      //   return;
-      // case 'pipenet-tile':
-      //   return;
-      default:
-    }
-  };
+  // // 添加地图类型
+  // const servicenameToType = type => {
+  //   switch (type) {
+  //     case 'google-v':
+  //       return '谷歌地形';
+  //     case 'google-i-a':
+  //       return '谷歌影像(注记)';
+  //     case 'google-i':
+  //       return '谷歌影像';
+  //     case 'amap-i':
+  //       return '高德影像';
+  //     case 'amap-v':
+  //       return '高德地形';
+  //     case 'tianditu-i-ia':
+  //       return '天地图影像';
+  //     case 'tianditu-v-va':
+  //       return '天地图地形';
+  //     case 'streetPurplishBlue':
+  //       return 'GeoQ午夜蓝';
+  //     case 'streetGray':
+  //       return 'GeoQ水墨灰';
+  //     case 'streetWarm':
+  //       return 'GeoQ暖色';
+  //     case 'mapbox-i-ia':
+  //       return 'mapbox影像';
+  //     case 'tianditu-arcgis-i':
+  //       return 'arcgis影像';
+  //     case 'arcgis-i-ia':
+  //       return 'arcgis影像注记';
+  //     case 'offline-map':
+  //       return '离线地图';
+  //     case 'tianditudark-v-va':
+  //       return '深色天地图地形';
+  //     default:
+  //   }
+  // };
   // 选择坐标系
   const handleCoordinate = e => {
     let work = form.getFieldsValue().workSpance;
     let lay = form.getFieldsValue().layer;
     let index = lay.indexOf(':');
     let result = lay.substr(index + 1, lay.length);
-    console.log(result);
     getGetCustomBaseMapByName(work, result, e);
   };
   // 选择图层
   const handleLayer = e => {
     let index = e.indexOf(':');
     let result = e.substr(index + 1, e.length);
-    console.log(result);
     let work = form.getFieldsValue().workSpance;
-    console.log(work);
     getGetGridSetList(work, result);
   };
   // 选择工作空间
   const handleWorkSpance = e => {
-    console.log(e);
     setData(spaceData[e]);
     form.setFieldsValue({ layer: spaceData[e][0] });
     let aa = form.getFieldsValue().layer;
     let index = aa.indexOf(':');
     let result = aa.substr(index + 1, aa.length);
-    console.log(result);
     getGetGridSetList(e, result);
   };
 
@@ -407,7 +368,6 @@ const AddModal = props => {
     if (aa) {
       let index = aa.indexOf(':');
       result = aa.substr(index + 1, aa.length);
-      console.log(result);
     }
     GetGridSetList({
       m_Port: obj.Port || '8080',
@@ -419,11 +379,9 @@ const AddModal = props => {
       workSpaceName: a,
     }).then(res => {
       let data = [];
-      console.log(res.results);
       res.results.map(i => {
         data.push(i.gridSetName);
       });
-      console.log(data);
       setAreaData(data);
       form.setFieldsValue({ coordinate: data[0] });
       getGetCustomBaseMapByName(a, bb, data[0]);
@@ -528,6 +486,18 @@ const AddModal = props => {
   const onChange1 = e => {
     setRadio1(e.target.value);
   };
+
+  const mapTree = (org, server) => {
+    const haveChildren = Array.isArray(org.items) && org.items.length > 0;
+    return haveChildren ? (
+      <TreeNode value={org.groupName} title={org.groupName} disabled>
+        {org.items.map(item => mapTree(item, org.groupName))}
+      </TreeNode>
+    ) : (
+      <TreeNode value={org.type} title={`${org.title}（${org.type}）`} />
+    );
+  };
+
   return (
     <Modal
       title="添加基础底图"
@@ -547,7 +517,7 @@ const AddModal = props => {
       {visible && (
         <Form form={form} {...layout} onFinish={onFinish}>
           <Item label="类型" name="type" rules={[{ required: true, message: '请选择服务名' }]}>
-            <Select onChange={handleChange}>
+            {/* <Select onChange={handleChange}>
               <Option value="amap-v">高德地形（amap-v）</Option>
               <Option value="amap-i">高德影像（amap-i）</Option>
               <Option value="tianditu-v-va">天地图地形（tianditu-v-va）</Option>
@@ -562,7 +532,22 @@ const AddModal = props => {
               <Option value="arcgis-i-ia">arcgis影像注记（arcgis-i-ia）</Option>
               <Option value="offline-map">离线地图（offline-map）</Option>
               <Option value="tianditudark-v-va">深色天地图地形（tianditudark-v-va）</Option>
-            </Select>
+            </Select> */}
+            <TreeSelect
+              showSearch
+              dropdownStyle={{ maxHeight: 400, overflow: 'auto' }}
+              placeholder="请选择底图 "
+              allowClear
+              treeDefaultExpandAll
+              showCheckedStrategy
+              onChange={handleChange}
+            >
+              {maplayer ? (
+                maplayer.map(i => mapTree(i))
+              ) : (
+                <Empty image={Empty.PRESENTED_IMAGE_SIMPLE} />
+              )}
+            </TreeSelect>
           </Item>
           <Item
             label="服务名"

src/pages/platformCenter/gis/schemeConfig/TileConfig/NewEditModal.jsx

+/* eslint-disable prefer-destructuring */
 /* eslint-disable jsx-a11y/alt-text */
 /* eslint-disable no-unused-vars */
 /* eslint-disable no-else-return */
@@ -21,7 +22,10 @@ import {
   Radio,
   Button,
   Switch,
+  TreeSelect,
+  Empty,
 } from 'antd';
+import jsonData from './TileMap.json';
 import styles from '../SchemeConfig.less';
 import thumbnail_1 from '@/assets/images/thumbnail/thumbnail_1.jpg';
 import thumbnail_2 from '@/assets/images/thumbnail/thumbnail_2.jpg';
@@ -36,6 +40,7 @@ import {
 } from '@/services/webConfig/api';
 const { Item } = Form;
 const { Option } = Select;
+const { TreeNode } = TreeSelect;
 const NewEditModal = props => {
   const { callBackSubmit = () => {}, type, formObj, visible, baseMap, name, onCancel } = props;
   const [loading, setLoading] = useState(false);
@@ -52,6 +57,7 @@ const NewEditModal = props => {
   const [type1, setType] = useState(0);
   const [form] = Form.useForm();
   const [radio1, setRadio1] = useState();
+  const [keepJsonData, setKeepJsonData] = useState([]);
   const arr = [
     'assets/images/thumbnail/thumbnail_1.jpg',
     'assets/images/thumbnail/thumbnail_2.jpg',
@@ -97,17 +103,21 @@ const NewEditModal = props => {
           };
         } else {
           let url = '';
-          if (obj.type == 'streetPurplishBlue') {
-            url = '//map.geoq.cn/ArcGIS/rest/services/ChinaOnlineStreetPurplishBlue/MapServer';
-          } else if (obj.type == 'streetGray') {
-            url = '//map.geoq.cn/ArcGIS/rest/services/ChinaOnlineStreetGray/MapServer';
-          } else if (obj.type == 'streetWarm') {
-            url = '//map.geoq.cn/ArcGIS/rest/services/ChinaOnlineStreetWarm/MapServer';
-          } else if (obj.type == 'mapbox-i-ia') {
-            url = '//api.mapbox.com/v4/mapbox.satellite';
-          } else if (obj.type == 'tianditu-arcgis-i') {
-            url = '//services.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer';
+          let list = keepJsonData.find(i => i.type === obj.type);
+          if (list) {
+            url = list.url;
           }
+          // if (obj.type == 'streetPurplishBlue') {
+          //   url = '//map.geoq.cn/ArcGIS/rest/services/ChinaOnlineStreetPurplishBlue/MapServer';
+          // } else if (obj.type == 'streetGray') {
+          //   url = '//map.geoq.cn/ArcGIS/rest/services/ChinaOnlineStreetGray/MapServer';
+          // } else if (obj.type == 'streetWarm') {
+          //   url = '//map.geoq.cn/ArcGIS/rest/services/ChinaOnlineStreetWarm/MapServer';
+          // } else if (obj.type == 'mapbox-i-ia') {
+          //   url = '//api.mapbox.com/v4/mapbox.satellite';
+          // } else if (obj.type == 'tianditu-arcgis-i') {
+          //   url = '//services.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer';
+          // }
           arr = {
             servicename: obj.servicename,
             terminalType: 'base',
@@ -168,6 +178,11 @@ const NewEditModal = props => {
 
   const onFinish = value => {};
   useEffect(() => {
+    let data = [];
+    jsonData.forEach(item => {
+      data = [...data, ...item.items];
+    });
+    setKeepJsonData(data);
     setLoading(false);
     setSpaceData([]);
     setKeyData([]);
@@ -306,6 +321,7 @@ const NewEditModal = props => {
     }
     if (value == 'offline-map') {
       setType(1);
+      form.setFieldsValue({ url: '' });
     } else {
       setType(0);
     }
@@ -490,6 +506,17 @@ const NewEditModal = props => {
     setRadio1(e.target.value);
   };
 
+  const mapTree = (org, server) => {
+    const haveChildren = Array.isArray(org.items) && org.items.length > 0;
+    return haveChildren ? (
+      <TreeNode value={org.groupName} title={org.groupName} disabled>
+        {org.items.map(item => mapTree(item, org.groupName))}
+      </TreeNode>
+    ) : (
+      <TreeNode value={org.type} title={`${org.title}（${org.type}）`} />
+    );
+  };
+
   return (
     <Modal
       title="编辑基础底图"
@@ -509,7 +536,7 @@ const NewEditModal = props => {
       {visible && (
         <Form form={form} {...layout} onFinish={onFinish}>
           <Item label="类型" name="type" rules={[{ required: true, message: '请选择服务名' }]}>
-            <Select onChange={handleChange}>
+            {/* <Select onChange={handleChange}>
               <Option value="amap-v">高德地形（amap-v）</Option>
               <Option value="amap-i">高德影像（amap-i）</Option>
               <Option value="tianditu-v-va">天地图地形（tianditu-v-va）</Option>
@@ -524,7 +551,22 @@ const NewEditModal = props => {
               <Option value="arcgis-i-ia">arcgis影像注记（arcgis-i-ia）</Option>
               <Option value="offline-map">离线地图（offline-map）</Option>
               <Option value="tianditudark-v-va">深色天地图地形（tianditudark-v-va）</Option>
-            </Select>
+            </Select> */}
+            <TreeSelect
+              showSearch
+              dropdownStyle={{ maxHeight: 400, overflow: 'auto' }}
+              placeholder="请选择底图 "
+              allowClear
+              treeDefaultExpandAll
+              showCheckedStrategy
+              onChange={handleChange}
+            >
+              {jsonData ? (
+                jsonData.map(i => mapTree(i))
+              ) : (
+                <Empty image={Empty.PRESENTED_IMAGE_SIMPLE} />
+              )}
+            </TreeSelect>
           </Item>
           <Item
             label="服务名"

src/pages/platformCenter/gis/schemeConfig/TileConfig/TileConfig.jsx

@@ -14,12 +14,18 @@ import React, { useState, useEffect } from 'react';
 import { PlusOutlined, UserAddOutlined } from '@ant-design/icons';
 import AutoResponsive from 'autoresponsive-react';
 import styles from '../SchemeConfig.less';
-import { GettMaplayer, deleteConfig, GetMaplayerByTerminalType } from '@/services/webConfig/api';
+import {
+  GettMaplayer,
+  deleteConfig,
+  GetMaplayerByTerminalType,
+  QueryBaseMapItems,
+} from '@/services/webConfig/api';
 import AddModal from './AddModal';
 import EditModal from './EditModal';
 import NewEditModal from './NewEditModal';
 import Cards from './card';
 import AddProjectModal from './AddProjectModal';
+
 const TileData = props => {
   const [treeLoading, setTreeLoading] = useState(false); // 弹窗显示
   const [tileData, setTileData] = useState([]); // table表格数据
@@ -35,6 +41,7 @@ const TileData = props => {
   const [name, setName] = useState([]);
   const [flagAdd, setFlagAdd] = useState(0);
   const [type1, setType1] = useState('');
+  const [json, setJson] = useState([]);
   const columns = [
     {
       title: '服务名',
@@ -175,6 +182,14 @@ const TileData = props => {
   useEffect(() => {
     renderTile();
   }, [flag]);
+
+  useEffect(() => {
+    QueryBaseMapItems().then(res => {
+      if (res.code === 0) {
+        setJson(res.data);
+      }
+    });
+  }, []);
   // 获取瓦片数据配置数据
   const renderTile = () => {
     setTreeLoading(true);
@@ -296,6 +311,7 @@ const TileData = props => {
             formObj={formObj}
             baseMap={baseMap}
             name={name}
+            json={json}
           />
           <EditModal
             visible={visible}
@@ -313,6 +329,7 @@ const TileData = props => {
             formObj={formObj}
             baseMap={baseMap}
             name={name}
+            json={json}
           />
           <AddProjectModal
             visible={projectVisible}

src/services/webConfig/api.js

@@ -327,3 +327,5 @@ export const SyncMapComponent = query => get(`${PUBLISH_SERVICE}/WebSite/SyncMap
 // 批量调整网站顺序
 export const BatchDragSingleWebsite = data =>
   post(`${PUBLISH_SERVICE}/WebSite/BatchDragSingleWebsite`, data);
+
+export const QueryBaseMapItems = param => get(`${PANDA_GIS}/MapLayer/QueryBaseMapItems`, param);