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 @@
          "babel-core": "7.0.0-bridge.0"
          },
          "dependencies": {
          "@ant-design/pro-card": "^1.4.6",
          "@antv/data-set": "^0.11.7",
          "@babel/plugin-proposal-optional-chaining": "^7.12.1",
          ......@@ -93,8 +92,8 @@
          "@esri/calcite-colors": "6.0.3",
          "@wisdom-cesium/cesium": "^1.0.78",
          "@wisdom-map/amap": "1.1.0-beta.40",
          "@wisdom-map/arcgismap": "1.4.0-52",
          "@wisdom-map/basemap": "1.1.0-11",
          "@wisdom-map/arcgismap": "1.4.0-67",
          "@wisdom-map/basemap": "1.1.0-13",
          "ace-builds": "^1.4.12",
          "antd-img-crop": "^3.13.2",
          "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 import/no-duplicates */
          /* eslint-disable no-new */
          ......@@ -7,11 +8,15 @@ import {
          ArcGISMap,
          ArcGISSceneMap,
          Drawtool,
          EditTool,
          geomUtils,
          PipenetStylesCenter,
          MapImageLayer,
          GraphicsLayer,
          watchUtils,
          SimpleFillSymbol,
          Graphic,
          EditAndDrawPanel,
          } from '@wisdom-map/arcgismap';
          import { getPipenetLayer } from '@wisdom-map/basemap';
          import {
          ......@@ -27,8 +32,20 @@ import {
          Radio,
          message,
          Popconfirm,
          Dropdown,
          Menu,
          Space,
          Tag,
          } 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 { GetWebSiteConfig } from '@/services/gis/gis';
          import { SetServiceConfig, GetSpriteSheet } from '@/services/webConfig/api';
          ......@@ -161,11 +178,19 @@ const Map = props => {
          const [keepColor, setKeepColor] = useState('');
          const [radio1, setRadio1] = 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(() => {
          // GetSpriteSheet().then(res => {
          // console.log(123);
          // });
          GetWebSiteConfig({ client: 'sandbox' }).then(res => {
          let setttings = {};
          if (res.data.length === 0) {
          ......@@ -194,11 +219,39 @@ const Map = props => {
          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');
          setRadio1(setttings.customFlag);
          if (setttings.id) {
          setKeep(setttings);
          setName(setttings.id);
          ......@@ -206,6 +259,7 @@ const Map = props => {
          } else {
          setName('');
          }
          setCanLoadMap(true);
          }, 0);
          });
          ......@@ -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 => {
          console.log(66666);
          setMap(viewObject);
          // const { layer } = getPipenetLayer(viewObject?.map);
          // if (layer) {
          ......@@ -248,10 +393,10 @@ const Map = props => {
          });
          mapInfo.current = viewObject;
          if (form.getFieldsValue().exportScheme == 'pandagis') {
          console.log(mapInfo.current.map.layers);
          let data = mapInfo.current.map.layers.find(
          item => item.layerType && item.layerType == 'PipenetLayertest',
          );
          console.log(mapInfo.current.map.layers);
          if (!data) {
          // 用户自定义创建的管网图
          let aa = '';
          ......@@ -270,7 +415,7 @@ const Map = props => {
          viewObject.map.add(pandagis1);
          }
          }
          setRadio1(form.getFieldsValue().customFlag);
          gate();
          };
          ......@@ -279,6 +424,7 @@ const Map = props => {
          setttingsSave.forEach(item => {
          if (item.schemename === aa) {
          if (!item.areaName) {
          console.log(888888);
          mapRef.current.changeAreaName('上海市');
          }
          // if (!item.backgroundColor) {
          ......@@ -298,6 +444,7 @@ const Map = props => {
          const checkColor = color => {
          form.setFieldsValue({ backgroundColor: color });
          setColor(color);
          console.log(color);
          mapRef.current.updateAreaColor(color);
          };
          ......@@ -312,10 +459,12 @@ const Map = props => {
          switch (changedFields[0].name[0]) {
          case 'backgroundOpacity':
          obj[index].backgroundOpacity = changedFields[0].value / 100;
          console.log(obj[index].backgroundOpacity);
          mapRef.current.changeBackgroundOpacity(obj[index].backgroundOpacity);
          break;
          case 'boundWidth':
          obj[index].boundWidth = changedFields[0].value;
          console.log(obj[index].boundWidth);
          mapRef.current.changeBoundWidthValue(obj[index].boundWidth);
          break;
          // case 'boundColor':
          ......@@ -323,18 +472,21 @@ const Map = props => {
          // mapRef.current.changeBoundColor(obj[index].boundColor);
          // break;
          case 'areaName':
          setFlag(0);
          Drawtool.deactivate(false);
          setArea('');
          obj[index].areaName = changedFields[0].value[changedFields[0].value.length - 1];
          console.log(obj[index].areaName);
          mapRef.current.changeAreaName(obj[index].areaName);
          form.setFieldsValue({ customPointExtent: '' });
          setDraw(0);
          setNewDraw(0);
          break;
          case 'schemename':
          setRadio1('');
          mapInfo.current.map.layers.forEach(item => {
          console.log(item.layerType);
          if (item.layerType && item.layerType == 'PipenetLayertest') {
          console.log(3333);
          mapInfo.current.map.remove(item);
          }
          });
          ......@@ -374,12 +526,59 @@ const Map = props => {
          exportScheme: setttings.exportScheme || 'pandagis',
          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');
          setKeepColor(setttings.boundColor || '#86C8F8');
          setColor(setttings.backgroundColor || '#000000');
          setRadio(setttings.exportScheme || 'pandagis');
          setRadio1(setttings.customFlag);
          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') {
          let data = mapInfo.current.map.layers.find(
          ......@@ -404,32 +603,13 @@ const Map = props => {
          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;
          default:
          break;
          }
          };
          // 选择范围
          const onTangleClick = e => {
          Drawtool.activate({
          ......@@ -455,42 +635,62 @@ const Map = props => {
          });
          };
          // 自定义行政区范围
          const onTangleClick1 = e => {
          Drawtool.activate({
          view: mapInfo.current,
          symbol: new SimpleFillSymbol({
          color: [230, 250, 250, 0.3],
          outline: {
          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] });
          });
          const saveCallBack = e => {
          setSaveFlag(1);
          console.log(e);
          if (e.geometry && e.geometry.rings) {
          let geom1 = [];
          e.geometry.rings[0].forEach(i => {
          geom1.push({ x: i[0], y: i[1] });
          });
          let area = form.getFieldsValue().areaName;
          mapRef.current.changeAreaName(area[0], geom1);
          form.setFieldsValue({
          customPointExtent: JSON.stringify(geom1),
          });
          },
          });
          let area1 = form.getFieldsValue().areaName;
          mapRef.current.changeAreaName(area1[0], geom1);
          form.setFieldsValue({
          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 = () => {
          if (form.getFieldsValue().customFlag == 1 && !form.getFieldsValue().customPointExtent) {
          if (form.getFieldsValue().customFlag == 1 && draw == 0) {
          notification.error({
          message: '提示',
          duration: 3,
          description: '自定义行政区需要绘制范围',
          description: '自定义行政区范围未绘制完成',
          });
          return;
          }
          ......@@ -520,9 +720,34 @@ const Map = props => {
          } else {
          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 = {
          extent: form.getFieldValue('extent'),
          customPointExtent: obj.customPointExtent,
          customPointExtent: obj.customPointExtent ? data : keepBorderArea,
          areaName: aa,
          boundColor: list,
          boundWidth: `${obj.boundWidth}px`,
          ......@@ -531,7 +756,6 @@ const Map = props => {
          exportScheme: obj.exportScheme == '' ? 'pandagis' : obj.exportScheme,
          customFlag: obj.customFlag,
          };
          console.log(jsConfig);
          SetServiceConfig({
          schemename: obj.schemename,
          terminalType: 'web',
          ......@@ -545,7 +769,7 @@ const Map = props => {
          isBaseMap: false,
          jsonCfg: JSON.stringify({
          extent: form.getFieldValue('extent'),
          customPointExtent: obj.customPointExtent,
          customPointExtent: obj.customPointExtent ? data : keepBorderArea,
          }),
          }).then();
          notification.success({
          ......@@ -565,10 +789,17 @@ const Map = props => {
          mapObj[index].customPointExtent = obj.customPointExtent;
          mapObj[index].exportScheme = obj.exportScheme;
          mapObj[index].customFlag = obj.customFlag;
          if (obj.customPointExtent) {
          setDraw(1);
          } else {
          setDraw(0);
          }
          setSetttingsSave(mapObj);
          Drawtool.deactivate(false);
          setArea('');
          setKeepSave('');
          getData();
          } else {
          notification.error({
          message: '提示',
          ......@@ -608,14 +839,60 @@ const Map = props => {
          };
          const onChange1 = e => {
          setResultData(null);
          if (e.target.value == 0) {
          console.log(form.getFieldsValue().areaName);
          let data = form.getFieldsValue().areaName;
          mapRef.current.changeAreaName(data[0]);
          form.setFieldsValue({ customPointExtent: '' });
          let aa = form.getFieldsValue().schemename;
          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();
          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 => {
          ......@@ -632,154 +909,221 @@ const Map = props => {
          return (
          <div>
          <div className={styles.mapContent}>
          <div className={styles.mapTool}>
          <Form
          form={form}
          labelCol={{ span: 6 }}
          wrapperCol={{ span: 18 }}
          labelWrap
          onFieldsChange={changeValue}
          onFinish={onFinish}
          >
          <Form.Item label="切换方案" name="schemename" style={{ marginBottom: '19px' }}>
          <Select placeholder="请选择方案">
          {schemeList.map((item, index) => (
          <Option value={item.schemename} key={index}>
          {item.schemename}
          </Option>
          ))}
          </Select>
          </Form.Item>
          <Form.Item label="地区选择" name="areaName" style={{ marginBottom: '19px' }}>
          <Cascader
          fieldNames={{
          label: 'name',
          value: 'name',
          children: 'districtList',
          }}
          showSearch
          options={options}
          placeholder="请选择行政区"
          changeOnSelect
          allowClear={false}
          />
          </Form.Item>
          <Form.Item label="自定义行政区" name="customFlag" style={{ marginBottom: '19px' }}>
          <Radio.Group onChange={onChange1} value={radio1}>
          <Radio value={0}>否</Radio>
          <Radio value={1}>是</Radio>
          </Radio.Group>
          </Form.Item>
          {radio1 == 0 ? (
          <span />
          ) : (
          <Form.Item label="自定义行政区范围" style={{ marginBottom: '19px' }}>
          <div
          className={classnames({
          [styles.mapTool]: true,
          [styles.mapToolHide]: !toolVisible,
          })}
          >
          {toolVisible && (
          <Form
          form={form}
          labelCol={{ span: 6 }}
          wrapperCol={{ span: 18 }}
          labelWrap
          onFieldsChange={changeValue}
          onFinish={onFinish}
          >
          <Form.Item label="切换方案" name="schemename" style={{ marginBottom: '19px' }}>
          <Select placeholder="请选择方案">
          {schemeList.map((item, index) => (
          <Option value={item.schemename} key={index}>
          {item.schemename}
          </Option>
          ))}
          </Select>
          </Form.Item>
          <Form.Item label="地区选择" name="areaName" style={{ marginBottom: '19px' }}>
          <Cascader
          fieldNames={{
          label: 'name',
          value: 'name',
          children: 'districtList',
          }}
          showSearch
          options={options}
          placeholder="请选择行政区"
          changeOnSelect
          allowClear={false}
          />
          </Form.Item>
          <Form.Item label="自定义行政区" name="customFlag" style={{ marginBottom: '19px' }}>
          <Radio.Group onChange={onChange1} value={radio1}>
          <Radio value={0}>否</Radio>
          <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' }}>
          <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 />
          </Form.Item>
          <Tooltip title="自定义行政区范围框选">
          <Tooltip title="复位范围框选">
          <Button
          style={{ height: '76px', borderLeft: 'none' }}
          icon={<EnvironmentOutlined style={{ marginTop: '5px' }} />}
          onClick={e => onTangleClick1(e)}
          onClick={e => onTangleClick(e)}
          />
          </Tooltip>
          </div>
          </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}
          // 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 wrapperCol={{ offset: 6, span: 18 }}>
          <Button type="primary" htmlType="submit">
          提交
          </Button>
          </Form.Item>
          ) : (
          <></>
          )}
          </Form>
          )}
          <Form.Item label="复位范围" style={{ marginBottom: '19px' }}>
          <div style={{ display: 'flex' }}>
          <Form.Item name="extent" style={{ marginBottom: '0', width: '100%' }}>
          <Input.TextArea style={{ resize: 'none', height: '76px' }} disabled />
          </Form.Item>
          <Tooltip title="复位范围框选">
          <Button
          style={{ height: '76px', borderLeft: 'none' }}
          icon={<EnvironmentOutlined style={{ marginTop: '5px' }} />}
          onClick={e => onTangleClick(e)}
          />
          </Tooltip>
          </div>
          </Form.Item>
          <Form.Item wrapperCol={{ offset: 6, span: 18 }}>
          <Button type="primary" htmlType="submit">
          提交
          </Button>
          </Form.Item>
          </Form>
          <div className={styles.switcher}>
          {toolVisible && (
          <Tooltip title="隐藏配置栏">
          <DoubleLeftOutlined onClick={() => setToolVisible(false)} />
          </Tooltip>
          )}
          {!toolVisible && (
          <Tooltip title="显示配置栏">
          <DoubleRightOutlined onClick={() => setToolVisible(true)} />
          </Tooltip>
          )}
          </div>
          </div>
          <div className={styles.mapBox}>
          {canLoadMap && (
          ......@@ -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>
          ......
          src/pages/platformCenter/gis/schemeConfig/ScopeMap/index.less
          View file @ 5758b9a1
          ......@@ -11,7 +11,12 @@
          min-width: 100px;
          }
          .mapTool {
          width: 400px;
          width: 25%;
          overflow-y: scroll;
          overflow-x: hidden;
          transition-property: width;
          transition-duration: 0.5s;
          position: relative;
          .title {
          text-align: center;
          font-weight: 700;
          ......@@ -30,7 +35,21 @@
          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 {
          display: flex;
          align-items: center;
          ......@@ -59,4 +78,4 @@
          height: 20px;
          border: 1px solid rgb(241, 228, 32);
          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