fix: '底图读取json'

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