Skip to content

C
CivManage
Commit a85137bb authored by 皮倩雯's avatar 皮倩雯
Browse files
Options

fix: '底图读取json'

parent 8fc448db
Pipeline #70432 failed with stages
          Hide whitespace changes
          Inline Side-by-side
          Showing with 191 additions and 145 deletions
          src/pages/platformCenter/gis/schemeConfig/TileConfig/AddModal.jsx
          View file @ a85137bb
          /* 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
          View file @ a85137bb
          /* 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
          View file @ a85137bb
          ......@@ -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
          View file @ a85137bb
          ......@@ -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);
          Markdown is supported
          0% or
          You are about to add 0 people to the discussion. Proceed with caution.
          Finish editing this message first!
          Please register or to comment