Skip to content

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

fix: '地图新版本自定义绘制范围'

parent 4b621619
Pipeline #61714 waiting for manual action with stages
          Hide whitespace changes
          Inline Side-by-side
          Showing with 592 additions and 208 deletions
          package.json
          View file @ 5758b9a1
          ...@@ -83,7 +83,6 @@ ...@@ -83,7 +83,6 @@
          "babel-core": "7.0.0-bridge.0" "babel-core": "7.0.0-bridge.0"
          }, },
          "dependencies": { "dependencies": {
          "@ant-design/pro-card": "^1.4.6", "@ant-design/pro-card": "^1.4.6",
          "@antv/data-set": "^0.11.7", "@antv/data-set": "^0.11.7",
          "@babel/plugin-proposal-optional-chaining": "^7.12.1", "@babel/plugin-proposal-optional-chaining": "^7.12.1",
          ...@@ -93,8 +92,8 @@ ...@@ -93,8 +92,8 @@
          "@esri/calcite-colors": "6.0.3", "@esri/calcite-colors": "6.0.3",
          "@wisdom-cesium/cesium": "^1.0.78", "@wisdom-cesium/cesium": "^1.0.78",
          "@wisdom-map/amap": "1.1.0-beta.40", "@wisdom-map/amap": "1.1.0-beta.40",
          "@wisdom-map/arcgismap": "1.4.0-52", "@wisdom-map/arcgismap": "1.4.0-67",
          "@wisdom-map/basemap": "1.1.0-11", "@wisdom-map/basemap": "1.1.0-13",
          "ace-builds": "^1.4.12", "ace-builds": "^1.4.12",
          "antd-img-crop": "^3.13.2", "antd-img-crop": "^3.13.2",
          "bizcharts": "^4.0.15", "bizcharts": "^4.0.15",
          ......
          src/pages/platformCenter/gis/schemeConfig/ScopeMap/index.jsx
          View file @ 5758b9a1
          /* eslint-disable no-unused-expressions */
          /* eslint-disable no-case-declarations */ /* eslint-disable no-case-declarations */
          /* eslint-disable import/no-duplicates */ /* eslint-disable import/no-duplicates */
          /* eslint-disable no-new */ /* eslint-disable no-new */
          ...@@ -7,11 +8,15 @@ import { ...@@ -7,11 +8,15 @@ import {
          ArcGISMap, ArcGISMap,
          ArcGISSceneMap, ArcGISSceneMap,
          Drawtool, Drawtool,
          EditTool,
          geomUtils, geomUtils,
          PipenetStylesCenter, PipenetStylesCenter,
          MapImageLayer, MapImageLayer,
          GraphicsLayer,
          watchUtils, watchUtils,
          SimpleFillSymbol, SimpleFillSymbol,
          Graphic,
          EditAndDrawPanel,
          } from '@wisdom-map/arcgismap'; } from '@wisdom-map/arcgismap';
          import { getPipenetLayer } from '@wisdom-map/basemap'; import { getPipenetLayer } from '@wisdom-map/basemap';
          import { import {
          ...@@ -27,8 +32,20 @@ import { ...@@ -27,8 +32,20 @@ import {
          Radio, Radio,
          message, message,
          Popconfirm, Popconfirm,
          Dropdown,
          Menu,
          Space,
          Tag,
          } from 'antd'; } from 'antd';
          import { EnvironmentOutlined } from '@ant-design/icons'; import {
          EnvironmentOutlined,
          FormOutlined,
          DoubleLeftOutlined,
          DoubleRightOutlined,
          BorderOutlined,
          CheckCircleOutlined,
          ExclamationCircleOutlined,
          } from '@ant-design/icons';
          import classnames from 'classnames'; import classnames from 'classnames';
          import { GetWebSiteConfig } from '@/services/gis/gis'; import { GetWebSiteConfig } from '@/services/gis/gis';
          import { SetServiceConfig, GetSpriteSheet } from '@/services/webConfig/api'; import { SetServiceConfig, GetSpriteSheet } from '@/services/webConfig/api';
          ...@@ -161,11 +178,19 @@ const Map = props => { ...@@ -161,11 +178,19 @@ const Map = props => {
          const [keepColor, setKeepColor] = useState(''); const [keepColor, setKeepColor] = useState('');
          const [radio1, setRadio1] = useState(); const [radio1, setRadio1] = useState();
          const [area, setArea] = useState(''); const [area, setArea] = useState('');
          const keep1 = useRef(null);
          const [flag, setFlag] = useState(0);
          const [toolVisible, setToolVisible] = useState(true);
          const [saveFlag, setSaveFlag] = useState(0);
          const [draw, setDraw] = useState(0); // 原方案是否已绘制了自定义行政区
          const [newDraw, setNewDraw] = useState(0);
          const [keepBorderArea, setKeepBorderArea] = useState();
          const [keepType, setKeepType] = useState('');
          const [resultData, setResultData] = useState(null);
          const [keepDraw, setKeepDraw] = useState([]);
          const [butState, setButState] = useState(false); // 绘制按钮状态
          useEffect(() => { useEffect(() => {
          // GetSpriteSheet().then(res => {
          // console.log(123);
          // });
          GetWebSiteConfig({ client: 'sandbox' }).then(res => { GetWebSiteConfig({ client: 'sandbox' }).then(res => {
          let setttings = {}; let setttings = {};
          if (res.data.length === 0) { if (res.data.length === 0) {
          ...@@ -194,11 +219,39 @@ const Map = props => { ...@@ -194,11 +219,39 @@ const Map = props => {
          exportScheme: setttings.exportScheme || 'pandagis', exportScheme: setttings.exportScheme || 'pandagis',
          customFlag: setttings.customFlag, customFlag: setttings.customFlag,
          }); });
          setKeepBorderArea(setttings.customPointExtent);
          if (setttings.customPointExtent) {
          let aa = JSON.parse(setttings.customPointExtent);
          let data = {};
          console.log(aa);
          if (aa && aa.type) {
          setKeepDraw(aa.geometry);
          setKeepType(aa.type);
          data.type = aa.type;
          let rings = [];
          aa.geometry.map(i => {
          rings.push([i.x, i.y]);
          });
          let hh = {};
          hh.rings = rings;
          console.log(hh);
          data.geometry = geomUtils.toGeometry(hh);
          setResultData({ ...data });
          }
          } else {
          setKeepDraw(setttings.customPointExtent);
          }
          if (setttings.customPointExtent) {
          setDraw(1);
          } else {
          setDraw(0);
          }
          setFlag(setttings.customFlag);
          setColorList(setttings.boundColor || '#86C8F8'); setColorList(setttings.boundColor || '#86C8F8');
          setKeepColor(setttings.boundColor || '#86C8F8'); setKeepColor(setttings.boundColor || '#86C8F8');
          setColor(setttings.backgroundColor || '#000000'); setColor(setttings.backgroundColor || '#000000');
          setRadio(setttings.exportScheme || 'pandagis'); setRadio(setttings.exportScheme || 'pandagis');
          setRadio1(setttings.customFlag);
          if (setttings.id) { if (setttings.id) {
          setKeep(setttings); setKeep(setttings);
          setName(setttings.id); setName(setttings.id);
          ...@@ -206,6 +259,7 @@ const Map = props => { ...@@ -206,6 +259,7 @@ const Map = props => {
          } else { } else {
          setName(''); setName('');
          } }
          setCanLoadMap(true); setCanLoadMap(true);
          }, 0); }, 0);
          }); });
          ...@@ -228,9 +282,100 @@ const Map = props => { ...@@ -228,9 +282,100 @@ const Map = props => {
          }); });
          }, []); }, []);
          const getData = () => {
          GetWebSiteConfig({ client: 'sandbox' }).then(res => {
          let setttings = {};
          if (res.data.length === 0) {
          res.data.layers = [defaultMap];
          setttings = defaultMap;
          }
          setSchemeList(res.data);
          setMapsettings(res.data);
          setSetttingsSave(res.data);
          res.data.forEach(item => {
          if (item.schemename === form.getFieldsValue().schemename) {
          setttings = item;
          }
          });
          console.log(setttings);
          setTimeout(() => {
          form.setFieldsValue({
          areaName: setttings.areaName ? [setttings.areaName] : ['上海市'],
          backgroundColor: setttings.backgroundColor || '#000000',
          backgroundOpacity: setttings.backgroundOpacity * 100 || '60',
          boundColor: setttings.boundColor || '#86C8F8',
          boundWidth: parseInt(setttings.boundWidth) || '5',
          extent: setttings.extent,
          customPointExtent: setttings.customPointExtent,
          schemename: setttings.schemename,
          exportScheme: setttings.exportScheme || 'pandagis',
          customFlag: setttings.customFlag,
          });
          setKeepBorderArea(setttings.customPointExtent);
          if (setttings.customPointExtent) {
          let aa = JSON.parse(setttings.customPointExtent);
          let data = {};
          console.log(aa);
          if (aa && aa.type) {
          setKeepDraw(aa.geometry);
          setKeepType(aa.type);
          data.type = aa.type;
          let rings = [];
          aa.geometry.map(i => {
          rings.push([i.x, i.y]);
          });
          let hh = {};
          hh.rings = rings;
          console.log(hh);
          data.geometry = geomUtils.toGeometry(hh);
          setResultData({ ...data });
          }
          } else {
          setKeepDraw(setttings.customPointExtent);
          }
          if (setttings.customPointExtent) {
          setDraw(1);
          } else {
          setDraw(0);
          }
          setFlag(setttings.customFlag);
          setColorList(setttings.boundColor || '#86C8F8');
          setKeepColor(setttings.boundColor || '#86C8F8');
          setColor(setttings.backgroundColor || '#000000');
          setRadio(setttings.exportScheme || 'pandagis');
          if (setttings.id) {
          setKeep(setttings);
          setName(setttings.id);
          setSchemename(setttings.schemename);
          } else {
          setName('');
          }
          setCanLoadMap(true);
          }, 0);
          });
          // 获取城市选择器列表
          window.AMap.plugin('AMap.DistrictSearch', () => {
          let districtSearch = new AMap.DistrictSearch({
          // 关键字对应的行政区级别，country表示国家
          level: 'country',
          // 显示下级行政区级数，1表示返回下一级行政区
          subdistrict: 3,
          });
          // 搜索所有省/直辖市信息
          districtSearch.search('中国', (status, result) => {
          // 查询成功时，result即为对应的行政区信息
          console.log(result, '行政区划信息');
          result.districtList[0].districtList.push({ adcode: '100000', name: '中华人民共和国' });
          setOptions(result.districtList[0].districtList);
          });
          });
          };
          // 获取地图实例 // 获取地图实例
          const getMapInfo = viewObject => { const getMapInfo = viewObject => {
          console.log(66666);
          setMap(viewObject); setMap(viewObject);
          // const { layer } = getPipenetLayer(viewObject?.map); // const { layer } = getPipenetLayer(viewObject?.map);
          // if (layer) { // if (layer) {
          ...@@ -248,10 +393,10 @@ const Map = props => { ...@@ -248,10 +393,10 @@ const Map = props => {
          }); });
          mapInfo.current = viewObject; mapInfo.current = viewObject;
          if (form.getFieldsValue().exportScheme == 'pandagis') { if (form.getFieldsValue().exportScheme == 'pandagis') {
          console.log(mapInfo.current.map.layers);
          let data = mapInfo.current.map.layers.find( let data = mapInfo.current.map.layers.find(
          item => item.layerType && item.layerType == 'PipenetLayertest', item => item.layerType && item.layerType == 'PipenetLayertest',
          ); );
          console.log(mapInfo.current.map.layers);
          if (!data) { if (!data) {
          // 用户自定义创建的管网图 // 用户自定义创建的管网图
          let aa = ''; let aa = '';
          ...@@ -270,7 +415,7 @@ const Map = props => { ...@@ -270,7 +415,7 @@ const Map = props => {
          viewObject.map.add(pandagis1); viewObject.map.add(pandagis1);
          } }
          } }
          setRadio1(form.getFieldsValue().customFlag);
          gate(); gate();
          }; };
          ...@@ -279,6 +424,7 @@ const Map = props => { ...@@ -279,6 +424,7 @@ const Map = props => {
          setttingsSave.forEach(item => { setttingsSave.forEach(item => {
          if (item.schemename === aa) { if (item.schemename === aa) {
          if (!item.areaName) { if (!item.areaName) {
          console.log(888888);
          mapRef.current.changeAreaName('上海市'); mapRef.current.changeAreaName('上海市');
          } }
          // if (!item.backgroundColor) { // if (!item.backgroundColor) {
          ...@@ -298,6 +444,7 @@ const Map = props => { ...@@ -298,6 +444,7 @@ const Map = props => {
          const checkColor = color => { const checkColor = color => {
          form.setFieldsValue({ backgroundColor: color }); form.setFieldsValue({ backgroundColor: color });
          setColor(color); setColor(color);
          console.log(color);
          mapRef.current.updateAreaColor(color); mapRef.current.updateAreaColor(color);
          }; };
          ...@@ -312,10 +459,12 @@ const Map = props => { ...@@ -312,10 +459,12 @@ const Map = props => {
          switch (changedFields[0].name[0]) { switch (changedFields[0].name[0]) {
          case 'backgroundOpacity': case 'backgroundOpacity':
          obj[index].backgroundOpacity = changedFields[0].value / 100; obj[index].backgroundOpacity = changedFields[0].value / 100;
          console.log(obj[index].backgroundOpacity);
          mapRef.current.changeBackgroundOpacity(obj[index].backgroundOpacity); mapRef.current.changeBackgroundOpacity(obj[index].backgroundOpacity);
          break; break;
          case 'boundWidth': case 'boundWidth':
          obj[index].boundWidth = changedFields[0].value; obj[index].boundWidth = changedFields[0].value;
          console.log(obj[index].boundWidth);
          mapRef.current.changeBoundWidthValue(obj[index].boundWidth); mapRef.current.changeBoundWidthValue(obj[index].boundWidth);
          break; break;
          // case 'boundColor': // case 'boundColor':
          ...@@ -323,18 +472,21 @@ const Map = props => { ...@@ -323,18 +472,21 @@ const Map = props => {
          // mapRef.current.changeBoundColor(obj[index].boundColor); // mapRef.current.changeBoundColor(obj[index].boundColor);
          // break; // break;
          case 'areaName': case 'areaName':
          setFlag(0);
          Drawtool.deactivate(false); Drawtool.deactivate(false);
          setArea(''); setArea('');
          obj[index].areaName = changedFields[0].value[changedFields[0].value.length - 1]; obj[index].areaName = changedFields[0].value[changedFields[0].value.length - 1];
          console.log(obj[index].areaName);
          mapRef.current.changeAreaName(obj[index].areaName); mapRef.current.changeAreaName(obj[index].areaName);
          form.setFieldsValue({ customPointExtent: '' }); form.setFieldsValue({ customPointExtent: '' });
          setDraw(0);
          setNewDraw(0);
          break; break;
          case 'schemename': case 'schemename':
          setRadio1('');
          mapInfo.current.map.layers.forEach(item => { mapInfo.current.map.layers.forEach(item => {
          console.log(item.layerType); console.log(item.layerType);
          if (item.layerType && item.layerType == 'PipenetLayertest') { if (item.layerType && item.layerType == 'PipenetLayertest') {
          console.log(3333);
          mapInfo.current.map.remove(item); mapInfo.current.map.remove(item);
          } }
          }); });
          ...@@ -374,12 +526,59 @@ const Map = props => { ...@@ -374,12 +526,59 @@ const Map = props => {
          exportScheme: setttings.exportScheme || 'pandagis', exportScheme: setttings.exportScheme || 'pandagis',
          customFlag: setttings.customFlag, customFlag: setttings.customFlag,
          }); });
          if (setttings.customPointExtent) {
          let aa = JSON.parse(setttings.customPointExtent);
          if (aa && aa.type) {
          setKeepDraw(aa.geometry);
          setKeepType(aa.type);
          let data = {};
          data.type = aa.type;
          let rings = [];
          aa.geometry.map(i => {
          rings.push([i.x, i.y]);
          });
          let hh = {};
          console.log(aa);
          hh.rings = rings;
          console.log(hh);
          data.geometry = geomUtils.toGeometry(hh);
          setResultData({ ...data });
          console.log(aa.geometry);
          console.log(data);
          }
          } else {
          console.log(setttings.customPointExtent);
          setKeepDraw(setttings.customPointExtent);
          }
          setKeepBorderArea(setttings.customPointExtent);
          setButState(false);
          setNewDraw(0);
          if (setttings.customPointExtent) {
          setDraw(1);
          } else {
          setDraw(0);
          }
          setFlag(setttings.customFlag);
          setColorList(setttings.boundColor || '#86C8F8'); setColorList(setttings.boundColor || '#86C8F8');
          setKeepColor(setttings.boundColor || '#86C8F8'); setKeepColor(setttings.boundColor || '#86C8F8');
          setColor(setttings.backgroundColor || '#000000'); setColor(setttings.backgroundColor || '#000000');
          setRadio(setttings.exportScheme || 'pandagis'); setRadio(setttings.exportScheme || 'pandagis');
          setRadio1(setttings.customFlag); setRadio1(setttings.customFlag);
          mapRef.current.mapchange(obj); mapRef.current.mapchange(obj);
          if (!setttings.areaName || setttings.areaName == null) {
          mapRef.current.changeAreaName('上海市');
          }
          if (!setttings.backgroundColor || setttings.backgroundColor == null) {
          mapRef.current.updateAreaColor('#000000');
          }
          if (!setttings.backgroundOpacity || setttings.backgroundOpacity == null) {
          mapRef.current.changeBackgroundOpacity('0.6');
          }
          if (!setttings.boundWidth || setttings.boundWidth == null) {
          mapRef.current.changeBoundWidthValue('5px');
          }
          if (form.getFieldsValue().exportScheme == 'pandagis') { if (form.getFieldsValue().exportScheme == 'pandagis') {
          let data = mapInfo.current.map.layers.find( let data = mapInfo.current.map.layers.find(
          ...@@ -404,32 +603,13 @@ const Map = props => { ...@@ -404,32 +603,13 @@ const Map = props => {
          mapInfo.current.map.add(pandagis1); mapInfo.current.map.add(pandagis1);
          } }
          } }
          // 清除原有接口返回后端绘制的管网图
          // const { layer } = getPipenetLayer(mapRef.current?.map);
          // if (layer) {
          // console.log(6666666);
          // layer.visible = false;
          // }
          // // 若方案有管网且是后端绘制每次切换首先创建用户自定义的后端绘制管网
          // if (setttings.exportScheme == 'pandagis') {
          // console.log(222222);
          // const pandagisaa = new MapImageLayer({
          // id: setttings.id,
          // url: `/PandaGIS/MapServer/${setttings.id}`,
          // layerType: 'PipenetLayertest',
          // title: setttings.id,
          // });
          // // 用户自定义创建的管网图
          // mapInfo.current.map.add(pandagisaa);
          // }
          // setMapsettings(obj);
          break; break;
          default: default:
          break; break;
          } }
          }; };
          // 选择范围 // 选择范围
          const onTangleClick = e => { const onTangleClick = e => {
          Drawtool.activate({ Drawtool.activate({
          ...@@ -455,42 +635,62 @@ const Map = props => { ...@@ -455,42 +635,62 @@ const Map = props => {
          }); });
          }; };
          // 自定义行政区范围 const saveCallBack = e => {
          const onTangleClick1 = e => { setSaveFlag(1);
          Drawtool.activate({ console.log(e);
          view: mapInfo.current, if (e.geometry && e.geometry.rings) {
          symbol: new SimpleFillSymbol({ let geom1 = [];
          color: [230, 250, 250, 0.3], e.geometry.rings[0].forEach(i => {
          outline: { geom1.push({ x: i[0], y: i[1] });
          color: [0, 51, 102, 1], });
          width: 1,
          },
          }),
          action: 'polygon',
          toolTip: '单击鼠标左键开始绘制,双击结束,右键取消,z回退至上一步',
          autoClear: false,
          drawEnd: geometry => {
          console.log(geometry);
          let geom1 = [];
          geometry.rings[0].forEach(i => {
          geom1.push({ x: i[0], y: i[1] });
          });
          let area = form.getFieldsValue().areaName; let area1 = form.getFieldsValue().areaName;
          mapRef.current.changeAreaName(area[0], geom1); mapRef.current.changeAreaName(area1[0], geom1);
          form.setFieldsValue({ form.setFieldsValue({
          customPointExtent: JSON.stringify(geom1), customPointExtent: geom1,
          }); });
          }, setKeepDraw(geom1);
          }); setButState(false);
          setDraw(1);
          let data = {
          geometry: e.geometry,
          type: e.type,
          };
          setKeepType(e.type);
          setResultData({ ...data });
          } else if (e.geometry == null && draw == 0) {
          notification.error({
          message: '提示',
          duration: 3,
          description: '请先绘制范围再保存',
          });
          } else {
          setButState(false);
          }
          // else {
          // let geom = [];
          // geom.push({ x: e.geometry.xmin, y: e.geometry.ymax });
          // geom.push({ x: e.geometry.xmin, y: e.geometry.ymin });
          // geom.push({ x: e.geometry.xmax, y: e.geometry.ymin });
          // geom.push({ x: e.geometry.xmax, y: e.geometry.ymax });
          // let area1 = form.getFieldsValue().areaName;
          // mapRef.current.changeAreaName(area1[0], geom);
          // form.setFieldsValue({
          // customPointExtent: geom,
          // });
          // setKeepDraw(geom);
          // }
          Drawtool.deactivate(false);
          }; };
          // 提交 // 提交
          const onFinish = () => { const onFinish = () => {
          if (form.getFieldsValue().customFlag == 1 && !form.getFieldsValue().customPointExtent) { if (form.getFieldsValue().customFlag == 1 && draw == 0) {
          notification.error({ notification.error({
          message: '提示', message: '提示',
          duration: 3, duration: 3,
          description: '自定义行政区需要绘制范围', description: '自定义行政区范围未绘制完成',
          }); });
          return; return;
          } }
          ...@@ -520,9 +720,34 @@ const Map = props => { ...@@ -520,9 +720,34 @@ const Map = props => {
          } else { } else {
          list = obj.boundColor; list = obj.boundColor;
          } }
          let data = {};
          console.log(obj.customPointExtent);
          // let ab = JSON.parse(obj.customPointExtent);
          // console.log(ab);
          if (obj.customPointExtent) {
          if (keepBorderArea && !obj.customPointExtent.type) {
          data.type = keepType;
          data.geometry = obj.customPointExtent;
          console.log(data);
          } else if (keepBorderArea && obj.customPointExtent.type) {
          data = obj.customPointExtent;
          console.log(data);
          } else if (!keepBorderArea && !obj.customPointExtent.type) {
          data.type = keepType;
          data.geometry = obj.customPointExtent;
          console.log(data);
          } else if (!keepBorderArea && obj.customPointExtent.type) {
          data = obj.customPointExtent;
          console.log(data);
          }
          }
          console.log(obj.customPointExtent);
          console.log(data);
          console.log(keepBorderArea);
          console.log(obj.customPointExtent ? data : keepBorderArea);
          const jsConfig = { const jsConfig = {
          extent: form.getFieldValue('extent'), extent: form.getFieldValue('extent'),
          customPointExtent: obj.customPointExtent, customPointExtent: obj.customPointExtent ? data : keepBorderArea,
          areaName: aa, areaName: aa,
          boundColor: list, boundColor: list,
          boundWidth: `${obj.boundWidth}px`, boundWidth: `${obj.boundWidth}px`,
          ...@@ -531,7 +756,6 @@ const Map = props => { ...@@ -531,7 +756,6 @@ const Map = props => {
          exportScheme: obj.exportScheme == '' ? 'pandagis' : obj.exportScheme, exportScheme: obj.exportScheme == '' ? 'pandagis' : obj.exportScheme,
          customFlag: obj.customFlag, customFlag: obj.customFlag,
          }; };
          console.log(jsConfig);
          SetServiceConfig({ SetServiceConfig({
          schemename: obj.schemename, schemename: obj.schemename,
          terminalType: 'web', terminalType: 'web',
          ...@@ -545,7 +769,7 @@ const Map = props => { ...@@ -545,7 +769,7 @@ const Map = props => {
          isBaseMap: false, isBaseMap: false,
          jsonCfg: JSON.stringify({ jsonCfg: JSON.stringify({
          extent: form.getFieldValue('extent'), extent: form.getFieldValue('extent'),
          customPointExtent: obj.customPointExtent, customPointExtent: obj.customPointExtent ? data : keepBorderArea,
          }), }),
          }).then(); }).then();
          notification.success({ notification.success({
          ...@@ -565,10 +789,17 @@ const Map = props => { ...@@ -565,10 +789,17 @@ const Map = props => {
          mapObj[index].customPointExtent = obj.customPointExtent; mapObj[index].customPointExtent = obj.customPointExtent;
          mapObj[index].exportScheme = obj.exportScheme; mapObj[index].exportScheme = obj.exportScheme;
          mapObj[index].customFlag = obj.customFlag; mapObj[index].customFlag = obj.customFlag;
          if (obj.customPointExtent) {
          setDraw(1);
          } else {
          setDraw(0);
          }
          setSetttingsSave(mapObj); setSetttingsSave(mapObj);
          Drawtool.deactivate(false); Drawtool.deactivate(false);
          setArea(''); setArea('');
          setKeepSave(''); setKeepSave('');
          getData();
          } else { } else {
          notification.error({ notification.error({
          message: '提示', message: '提示',
          ...@@ -608,14 +839,60 @@ const Map = props => { ...@@ -608,14 +839,60 @@ const Map = props => {
          }; };
          const onChange1 = e => { const onChange1 = e => {
          setResultData(null);
          if (e.target.value == 0) { if (e.target.value == 0) {
          console.log(form.getFieldsValue().areaName);
          let data = form.getFieldsValue().areaName; let data = form.getFieldsValue().areaName;
          mapRef.current.changeAreaName(data[0]); let aa = form.getFieldsValue().schemename;
          form.setFieldsValue({ customPointExtent: '' }); let list = mapsettings.find(i => i.schemename == aa);
          mapRef.current.changeAreaName(data[data.length - 1]);
          console.log(list);
          if (list.backgroundColor != null) {
          form.setFieldsValue({
          backgroundColor: list.backgroundColor,
          backgroundOpacity: list.backgroundOpacity * 100,
          boundColor: list.boundColor,
          boundWidth: parseInt(list.boundWidth),
          });
          setColorList(list.boundColor);
          setColor(list.backgroundColor);
          } else {
          form.setFieldsValue({
          backgroundColor: '#000000',
          backgroundOpacity: '60',
          boundColor: '#86c8f8',
          boundWidth: parseInt('10px'),
          });
          setColorList('#86c8f8');
          setColor('#000000');
          }
          setButState(false);
          // setDraw(0);
          Drawtool.deactivate(); Drawtool.deactivate();
          setRadio1(e.target.value);
          } else {
          console.log(keepDraw);
          if (keepDraw) {
          let area1 = form.getFieldsValue().areaName;
          mapRef.current.changeAreaName(area1[0], keepDraw);
          let data = {};
          console.log(keepType);
          data.type = keepType;
          let rings = [];
          keepDraw.map(i => {
          rings.push([i.x, i.y]);
          });
          let hh = {};
          hh.rings = rings;
          console.log(hh);
          data.geometry = geomUtils.toGeometry(hh);
          setResultData({ ...data });
          }
          if (draw == 0) {
          setButState(true);
          }
          setRadio1(e.target.value);
          } }
          setRadio1(e.target.value);
          }; };
          const onSave = e => { const onSave = e => {
          ...@@ -632,154 +909,221 @@ const Map = props => { ...@@ -632,154 +909,221 @@ const Map = props => {
          return ( return (
          <div> <div>
          <div className={styles.mapContent}> <div className={styles.mapContent}>
          <div className={styles.mapTool}> <div
          <Form className={classnames({
          form={form} [styles.mapTool]: true,
          labelCol={{ span: 6 }} [styles.mapToolHide]: !toolVisible,
          wrapperCol={{ span: 18 }} })}
          labelWrap >
          onFieldsChange={changeValue} {toolVisible && (
          onFinish={onFinish} <Form
          > form={form}
          <Form.Item label="切换方案" name="schemename" style={{ marginBottom: '19px' }}> labelCol={{ span: 6 }}
          <Select placeholder="请选择方案"> wrapperCol={{ span: 18 }}
          {schemeList.map((item, index) => ( labelWrap
          <Option value={item.schemename} key={index}> onFieldsChange={changeValue}
          {item.schemename} onFinish={onFinish}
          </Option> >
          ))} <Form.Item label="切换方案" name="schemename" style={{ marginBottom: '19px' }}>
          </Select> <Select placeholder="请选择方案">
          </Form.Item> {schemeList.map((item, index) => (
          <Form.Item label="地区选择" name="areaName" style={{ marginBottom: '19px' }}> <Option value={item.schemename} key={index}>
          <Cascader {item.schemename}
          fieldNames={{ </Option>
          label: 'name', ))}
          value: 'name', </Select>
          children: 'districtList', </Form.Item>
          }} <Form.Item label="地区选择" name="areaName" style={{ marginBottom: '19px' }}>
          showSearch <Cascader
          options={options} fieldNames={{
          placeholder="请选择行政区" label: 'name',
          changeOnSelect value: 'name',
          allowClear={false} children: 'districtList',
          /> }}
          </Form.Item> showSearch
          <Form.Item label="自定义行政区" name="customFlag" style={{ marginBottom: '19px' }}> options={options}
          <Radio.Group onChange={onChange1} value={radio1}> placeholder="请选择行政区"
          <Radio value={0}>否</Radio> changeOnSelect
          <Radio value={1}>是</Radio> allowClear={false}
          </Radio.Group> />
          </Form.Item> </Form.Item>
          {radio1 == 0 ? ( <Form.Item label="自定义行政区" name="customFlag" style={{ marginBottom: '19px' }}>
          <span /> <Radio.Group onChange={onChange1} value={radio1}>
          ) : ( <Radio value={0}>否</Radio>
          <Form.Item label="自定义行政区范围" style={{ marginBottom: '19px' }}> <Radio value={1}>是</Radio>
          </Radio.Group>
          </Form.Item>
          {radio1 == 0 ? (
          <span />
          ) : (
          <>
          <Form.Item label="自定义行政区范围" name="customPointExtent">
          {butState && (
          <Tag
          style={{
          width: '100px',
          height: '27px',
          paddingLeft: '28px',
          paddingTop: '2px',
          marginTop: '4px',
          display: 'flex',
          alignItems: 'center',
          }}
          color="warning"
          >
          绘制中
          </Tag>
          )}
          {!butState && draw == 1 && (
          <Tooltip title="点击按钮开始绘制">
          <Tag
          icon={<CheckCircleOutlined style={{ marginTop: '2px' }} />}
          color="success"
          style={{
          width: '100px',
          height: '27px',
          paddingLeft: '24px',
          paddingTop: '0px',
          marginTop: '4px',
          display: 'flex',
          alignItems: 'center',
          }}
          onClick={() => {
          setNewDraw(0);
          setButState(true);
          }}
          >
          已绘制
          </Tag>
          </Tooltip>
          )}
          {/* {newDraw == 1 && (
          <Tooltip title="点击按钮开始绘制">
          <Tag
          style={{
          width: '100px',
          height: '27px',
          paddingLeft: '19px',
          paddingTop: '2px',
          marginTop: '4px',
          display: 'flex',
          alignItems: 'center',
          }}
          icon={<CheckCircleOutlined style={{ marginTop: '2px' }} />}
          color="success"
          onClick={() => {
          setNewDraw(0);
          setButState(true);
          }}
          >
          已绘制
          </Tag>
          </Tooltip>
          )} */}
          </Form.Item>
          </>
          )}
          <Form.Item label="遮罩颜色" name="backgroundColor" style={{ marginBottom: '19px' }}>
          <div className={styles.colorContent}>
          {colorArr.map(item => (
          <div
          className={classnames(styles.colorBox, {
          [styles.currentColor]: item.color === color,
          })}
          key={item.color}
          style={{ background: item.color }}
          onClick={() => checkColor(item.color)}
          />
          ))}
          </div>
          </Form.Item>
          <Form.Item
          label="透明度(%)"
          name="backgroundOpacity"
          style={{ marginBottom: '19px' }}
          >
          <Slider min={0} max={100} />
          </Form.Item>
          <Form.Item label="边界颜色" name="boundColor" style={{ marginBottom: '19px' }}>
          <Popconfirm
          placement="topLeft"
          icon={false}
          title={
          <SketchPicker width="217px" color={colorList} onChange={e => colorChange(e)} />
          }
          okText="确认"
          cancelText="取消"
          onConfirm={() => {
          setKeepColor(colorList);
          }}
          onCancel={() => {
          form.setFieldsValue({ boundColor: keepColor });
          mapRef.current.changeBoundColor(keepColor);
          setColorList(keepColor);
          }}
          >
          <div className={styles.borderColor}>
          <div
          style={{
          background: colorList,
          width: '18px',
          height: '10px',
          marginLeft: '1px',
          marginTop: '4px',
          }}
          />
          </div>
          </Popconfirm>
          </Form.Item>
          <Form.Item label="边界宽度" name="boundWidth" style={{ marginBottom: '19px' }}>
          <InputNumber min={1} max={10} />
          </Form.Item>
          {name ? (
          <Form.Item label="管网方案" name="exportScheme" style={{ marginBottom: '19px' }}>
          <Radio.Group onChange={onChange} value={radio}>
          <Radio value="pandagis">后端出图</Radio>
          <Radio value="arcgis">前端出图</Radio>
          </Radio.Group>
          </Form.Item>
          ) : (
          <></>
          )}
          <Form.Item label="复位范围" style={{ marginBottom: '19px' }}>
          <div style={{ display: 'flex' }}> <div style={{ display: 'flex' }}>
          <Form.Item name="customPointExtent" style={{ marginBottom: '0', width: '100%' }}> <Form.Item name="extent" style={{ marginBottom: '0', width: '100%' }}>
          <Input.TextArea style={{ resize: 'none', height: '76px' }} disabled /> <Input.TextArea style={{ resize: 'none', height: '76px' }} disabled />
          </Form.Item> </Form.Item>
          <Tooltip title="自定义行政区范围框选"> <Tooltip title="复位范围框选">
          <Button <Button
          style={{ height: '76px', borderLeft: 'none' }} style={{ height: '76px', borderLeft: 'none' }}
          icon={<EnvironmentOutlined style={{ marginTop: '5px' }} />} icon={<EnvironmentOutlined style={{ marginTop: '5px' }} />}
          onClick={e => onTangleClick1(e)} onClick={e => onTangleClick(e)}
          /> />
          </Tooltip> </Tooltip>
          </div> </div>
          </Form.Item> </Form.Item>
          )} <Form.Item wrapperCol={{ offset: 6, span: 18 }}>
          <Button type="primary" htmlType="submit">
          <Form.Item label="遮罩颜色" name="backgroundColor" style={{ marginBottom: '19px' }}> 提交
          <div className={styles.colorContent}> </Button>
          {colorArr.map(item => (
          <div
          className={classnames(styles.colorBox, {
          [styles.currentColor]: item.color === color,
          })}
          key={item.color}
          style={{ background: item.color }}
          onClick={() => checkColor(item.color)}
          />
          ))}
          </div>
          </Form.Item>
          <Form.Item label="透明度(%)" name="backgroundOpacity" style={{ marginBottom: '19px' }}>
          <Slider min={0} max={100} />
          </Form.Item>
          <Form.Item label="边界颜色" name="boundColor" style={{ marginBottom: '19px' }}>
          <Popconfirm
          placement="topLeft"
          icon={false}
          title={
          <SketchPicker width="217px" color={colorList} onChange={e => colorChange(e)} />
          }
          okText="确认"
          cancelText="取消"
          onConfirm={() => {
          setKeepColor(colorList);
          }}
          onCancel={() => {
          form.setFieldsValue({ boundColor: keepColor });
          mapRef.current.changeBoundColor(keepColor);
          setColorList(keepColor);
          }}
          >
          <div
          className={styles.borderColor}
          // style={{
          // width: '22px',
          // height: '20px',
          // border: '1px solid #ccc',
          // borderRadius: '2px',
          // }}
          >
          <div
          style={{
          background: colorList,
          width: '18px',
          height: '10px',
          marginLeft: '1px',
          marginTop: '4px',
          }}
          />
          </div>
          {/* <Button style={{ marginLeft: '15px' }}>更改边界颜色</Button> */}
          </Popconfirm>
          </Form.Item>
          <Form.Item label="边界宽度" name="boundWidth" style={{ marginBottom: '19px' }}>
          <InputNumber min={1} max={10} />
          </Form.Item>
          {name ? (
          <Form.Item label="管网方案" name="exportScheme" style={{ marginBottom: '19px' }}>
          <Radio.Group onChange={onChange} value={radio}>
          <Radio value="pandagis">后端绘制</Radio>
          <Radio value="arcgis">前端绘制</Radio>
          </Radio.Group>
          </Form.Item> </Form.Item>
          ) : ( </Form>
          <></> )}
          )}
          <Form.Item label="复位范围" style={{ marginBottom: '19px' }}> <div className={styles.switcher}>
          <div style={{ display: 'flex' }}> {toolVisible && (
          <Form.Item name="extent" style={{ marginBottom: '0', width: '100%' }}> <Tooltip title="隐藏配置栏">
          <Input.TextArea style={{ resize: 'none', height: '76px' }} disabled /> <DoubleLeftOutlined onClick={() => setToolVisible(false)} />
          </Form.Item> </Tooltip>
          <Tooltip title="复位范围框选"> )}
          <Button {!toolVisible && (
          style={{ height: '76px', borderLeft: 'none' }} <Tooltip title="显示配置栏">
          icon={<EnvironmentOutlined style={{ marginTop: '5px' }} />} <DoubleRightOutlined onClick={() => setToolVisible(true)} />
          onClick={e => onTangleClick(e)} </Tooltip>
          /> )}
          </Tooltip> </div>
          </div>
          </Form.Item>
          <Form.Item wrapperCol={{ offset: 6, span: 18 }}>
          <Button type="primary" htmlType="submit">
          提交
          </Button>
          </Form.Item>
          </Form>
          </div> </div>
          <div className={styles.mapBox}> <div className={styles.mapBox}>
          {canLoadMap && ( {canLoadMap && (
          ...@@ -806,6 +1150,29 @@ const Map = props => { ...@@ -806,6 +1150,29 @@ const Map = props => {
          ) : ( ) : (
          <></> <></>
          )} )}
          {radio1 == 1 && butState ? (
          <>
          <span>{console.log(form.getFieldsValue().areaName)}</span>
          <EditAndDrawPanel
          view={mapInfo.current}
          editType={['EXTENT', 'POLYGON', 'CIRCLE']}
          defaultGraphic={resultData}
          areaName={() => {
          if (form.getFieldsValue().areaName) {
          return form.getFieldsValue().areaName[
          form.getFieldsValue().areaName.length - 1
          ];
          }
          }}
          useActivePanel
          colorConfigBtnShow
          handleBtnShow
          callback={saveCallBack}
          />
          </>
          ) : (
          <></>
          )}
          </div> </div>
          </div> </div>
          </div> </div>
          ......
          src/pages/platformCenter/gis/schemeConfig/ScopeMap/index.less
          View file @ 5758b9a1
          ...@@ -11,7 +11,12 @@ ...@@ -11,7 +11,12 @@
          min-width: 100px; min-width: 100px;
          } }
          .mapTool { .mapTool {
          width: 400px; width: 25%;
          overflow-y: scroll;
          overflow-x: hidden;
          transition-property: width;
          transition-duration: 0.5s;
          position: relative;
          .title { .title {
          text-align: center; text-align: center;
          font-weight: 700; font-weight: 700;
          ...@@ -30,7 +35,21 @@ ...@@ -30,7 +35,21 @@
          border: 2px solid #faad14; border: 2px solid #faad14;
          } }
          } }
          .switcher {
          display: block;
          position: absolute;
          font-size: 18px;
          color: #1890ff !important;
          top: 42%;
          right:-2px;
          transform: translate(0%, -50%);
          z-index: 1;
          }
          }
          .mapToolHide{
          width: 26px;
          } }
          .mapBox { .mapBox {
          display: flex; display: flex;
          align-items: center; align-items: center;
          ...@@ -59,4 +78,4 @@ ...@@ -59,4 +78,4 @@
          height: 20px; height: 20px;
          border: 1px solid rgb(241, 228, 32); border: 1px solid rgb(241, 228, 32);
          border-radius: 2px; border-radius: 2px;
          } }
          \ No newline at end of file
          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