fix: 修改地图组件

src/components/MapScope/Map.jsx

+/* eslint-disable no-new */
+import React, { useEffect, useState, useRef } from 'react';
+import { ArcGISMap, Drawtool, geomUtils } from '@wisdom-map/arcgismap';
+
+// import { AMapScene, PointLayer } from '@wisdom-map/Amap';
+import {
+  Modal,
+  Form,
+  Input,
+  Slider,
+  InputNumber,
+  Select,
+  Button,
+  Cascader,
+  notification,
+} from 'antd';
+import classnames from 'classnames';
+import { GetWebSiteConfig } from '@/services/gis/gis';
+import { SetServiceConfig } from '@/services/webConfig/api';
+import styles from './index.less';
+const { Option } = Select;
+
+const Map = props => {
+  const { visible, onCancel, schemename } = props;
+  const [form] = Form.useForm();
+  const [canLoadMap, setCanLoadMap] = useState(false); // 是否加载地图
+  const [colorArr, setColorArr] = useState([
+    { color: '#ffffff', isCheck: false },
+    { color: '#000000', isCheck: false },
+    { color: '#9E9E9E', isCheck: false },
+    { color: '#009688', isCheck: false },
+    { color: '#2196f3', isCheck: false },
+    { color: '#19233c', isCheck: false },
+  ]);
+  const [schemeList, setSchemeList] = useState([]);
+  const [options, setOptions] = useState([]);
+  const [mapsettings, setMapsettings] = useState({});
+  const [flag, setFlag] = useState(0);
+  const mapRef = useRef();
+  const mapInfo = useRef(null);
+
+  useEffect(() => {
+    if (visible) {
+      GetWebSiteConfig({ client: 'sandbox' }).then(res => {
+        console.log(res.data[0].mapsettings, 'res.data[0].mapsettings');
+        setSchemeList(res.data[0].mapsettings.layers);
+        res.data[0].mapsettings.layers.forEach(item => {
+          if (item.schemename === schemename) {
+            item.layerType = 'PipenetLayer';
+          } else {
+            item.layerType = 'dynamic';
+          }
+        });
+        setMapsettings(res.data[0].mapsettings);
+        let setttings = {};
+        res.data[0].mapsettings.layers.forEach(item => {
+          if (item.schemename === schemename) {
+            setttings = item;
+          }
+        });
+        // res.data[0].mapsettings.areasettings = setttings;
+        // console.log(form);
+        setTimeout(() => {
+          form.setFieldsValue({
+            areaName: [setttings.areaName],
+            backgroundColor: setttings.backgroundColor,
+            backgroundOpacity: setttings.backgroundOpacity * 100,
+            boundColor: setttings.boundColor,
+            boundWidth: parseInt(setttings.boundWidth),
+            extent: setttings.extent,
+            schemename,
+          });
+          console.log(form.getFieldsValue());
+          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, '行政区划信息');
+          setOptions(result.districtList[0].districtList);
+        });
+      });
+
+      console.log('加载地图', props.schemename);
+    }
+  }, [visible]);
+
+  const getMapInfo = viewObject => {
+    mapInfo.current = viewObject;
+  };
+  // 选择颜色
+  const checkColor = color => {
+    form.setFieldsValue({ backgroundColor: color });
+    mapRef.current.updateAreaColor(color);
+    setFlag(flag + 1);
+  };
+  const changeValue = (changedFields, allFields) => {
+    console.log(changedFields, allFields);
+    let obj = JSON.parse(JSON.stringify(mapsettings));
+    const index = obj.layers.findIndex(item => item.schemename === schemename);
+    switch (changedFields[0].name[0]) {
+      case 'backgroundOpacity':
+        obj.layers[index].backgroundOpacity = changedFields[0].value / 100;
+        mapRef.current.changeBackgroundOpacity(obj.layers[index].backgroundOpacity);
+        break;
+      case 'boundWidth':
+        obj.layers[index].boundWidth = changedFields[0].value;
+        mapRef.current.changeBoundWidthValue(obj.layers[index].boundWidth);
+        break;
+      case 'areaName':
+        Drawtool.deactivate(false);
+        obj.layers[index].areaName = changedFields[0].value[changedFields[0].value.length - 1];
+        mapRef.current.changeAreaName(obj.layers[index].areaName);
+        break;
+      case 'schemename':
+        Drawtool.deactivate(false);
+        let setttings;
+        obj.layers.forEach(item => {
+          if (item.schemename === changedFields[0].value) {
+            item.layerType = 'PipenetLayer';
+            setttings = item;
+          } else {
+            item.layerType = 'dynamic';
+          }
+        });
+        form.setFieldsValue({
+          areaName: [setttings.areaName],
+          backgroundColor: setttings.backgroundColor,
+          backgroundOpacity: setttings.backgroundOpacity * 100,
+          boundColor: setttings.boundColor,
+          boundWidth: parseInt(setttings.boundWidth),
+          extent: setttings.extent,
+        });
+        setMapsettings(obj);
+        break;
+
+      default:
+        break;
+    }
+  };
+  // 选择范围
+  const onTangleClick = e => {
+    console.log(mapInfo.current);
+    Drawtool.activate({
+      view: mapInfo.current,
+      action: 'extent',
+      drawEnd: data => {
+        console.log(data);
+        const geom = geomUtils.toGeometry({
+          type: 'extent',
+          xmin: data.rings[0][0][0],
+          xmax: data.rings[0][2][0],
+          ymin: data.rings[0][0][1],
+          ymax: data.rings[0][1][1],
+        });
+        form.setFieldsValue({
+          extent: `${data.rings[0][0][0]},${data.rings[0][0][1]},${data.rings[0][2][0]},${
+            data.rings[0][1][1]
+          }`,
+        });
+        mapRef.current.gotoGeometry(geom);
+      },
+    });
+  };
+  const onFinish = () => {
+    console.log(form.getFieldValue('extent'));
+    console.log(Drawtool.graphic, 'Drawtool');
+    if (!Drawtool.graphic) {
+      notification.error({
+        message: '提示',
+        duration: 3,
+        description: '请选择复位范围再保存',
+      });
+      return;
+    }
+    const obj = form.getFieldsValue();
+
+    const jsConfig = {
+      extent: form.getFieldValue('extent'),
+      areaName: obj.areaName[obj.areaName.length - 1],
+      boundColor: '#86c8f8',
+      boundWidth: obj.boundWidth,
+      backgroundColor: obj.backgroundColor,
+      backgroundOpacity: obj.backgroundOpacity / 100,
+    };
+    SetServiceConfig({
+      schemename: obj.schemename,
+      terminalType: 'web',
+      isBaseMap: false,
+      jsonCfg: JSON.stringify(jsConfig),
+    }).then(res => {
+      notification.success({
+        message: '提示',
+        duration: 3,
+        description: '保存成功',
+      });
+      console.log(res, 'res');
+    });
+  };
+  return (
+    <div>
+      <Modal
+        title={schemename}
+        visible={visible}
+        width={1300}
+        onCancel={onCancel}
+        maskClosable={false}
+        onOk={onFinish}
+        destroyOnClose
+      >
+        <div className={styles.mapContent}>
+          <div className={styles.mapTool}>
+            <Form
+              form={form}
+              labelCol={{ span: 8 }}
+              wrapperCol={{ span: 16 }}
+              onFieldsChange={changeValue}
+            >
+              <Form.Item label="背景颜色" name="backgroundColor">
+                <div className={styles.colorContent}>
+                  {colorArr.map(item => (
+                    <div
+                      className={classnames(styles.colorBox, {
+                        [styles.currentColor]: item.color === form.getFieldValue('backgroundColor'),
+                      })}
+                      key={item.color}
+                      style={{ background: item.color }}
+                      onClick={() => checkColor(item.color)}
+                    />
+                  ))}
+                </div>
+              </Form.Item>
+              <Form.Item label="透明度修改" name="backgroundOpacity">
+                <Slider min={0} max={100} />
+              </Form.Item>
+              <Form.Item label="边界宽度修改" name="boundWidth">
+                <InputNumber min={1} max={10} />
+              </Form.Item>
+              <Form.Item label="切换方案" name="schemename">
+                <Select placeholder="请选择方案">
+                  {schemeList.map((item, index) => (
+                    <Option value={item.schemename} key={index}>
+                      {item.schemename}
+                    </Option>
+                  ))}
+                </Select>
+              </Form.Item>
+              <Form.Item label="地区" name="areaName">
+                <Cascader
+                  fieldNames={{
+                    label: 'name',
+                    value: 'name',
+                    children: 'districtList',
+                  }}
+                  showSearch
+                  options={options}
+                  placeholder="请选择行政区"
+                  changeOnSelect
+                  allowClear={false}
+                />
+              </Form.Item>
+              <Form.Item wrapperCol={{ offset: 8, span: 16 }}>
+                <Button type="primary" onClick={e => onTangleClick(e)}>
+                  复位范围修改
+                </Button>
+              </Form.Item>
+            </Form>
+          </div>
+          <div className={styles.mapBox}>
+            {canLoadMap && (
+              <ArcGISMap ref={mapRef} getMapInfo={e => getMapInfo(e)} config={mapsettings} />
+            )}
+          </div>
+        </div>
+      </Modal>
+    </div>
+  );
+};
+
+export default Map;

src/components/MapScope/index.less

-.indexContainer{
-    .anticon svg {
-        margin-top: 0px;
+.indexContainer {
+  .anticon svg {
+    margin-top: 0px;
+  }
+}
+.mapContent {
+  display: flex;
+  .mapTool {
+    width: 350px;
+    .title {
+      text-align: center;
+      font-weight: 700;
+      font-size: 14px;
     }
+    .colorContent {
+      width: 100%;
+      display: flex;
+      justify-content: space-between;
+      .colorBox {
+        width: 15px;
+        height: 15px;
+        border: 1px solid #ccc;
+      }
+      .currentColor {
+        border: 2px solid #faad14;
+      }
+    }
+  }
+  .mapBox {
+    display: flex;
+    align-items: center;
+    position: relative;
+    margin-left: 15px;
+    width: 100%;
+    height: 600px;
+  }
+}
+.ant-cascader-menu {
+  height: 330px;
 }
\ No newline at end of file

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

@@ -2,8 +2,8 @@
  * @Description:
  * @Author: leizhe
  * @Date: 2022-01-13 10:47:32
- * @LastEditTime: 2022-03-22 17:02:14
- * @LastEditors: leizhe
+ * @LastEditTime: 2022-05-05 17:24:25
+ * @LastEditors: Please set LastEditors
  */
 import { Tabs, Button } from 'antd';
 import React from 'react';
@@ -13,6 +13,7 @@ import TileConfig from './TileConfig/TileConfig';
 import VectorData from './VectorData/VectorData';
 import ProjectMessage from './projectMessage/projectMessage';
 import SolutionConfig from './solutionConfig/solutionConfig';
+import ScopeMap from './ScopeMap/index';
 
 const { TabPane } = Tabs;
 
@@ -22,11 +23,11 @@ const SchemeConfig = () => {
   return (
     <PageContainer>
       <div className={styles.container}>
-        <Tabs onChange={callback} type="card" style={{ width: '100%' }}>
-          <TabPane tab="瓦片数据配置" key="1">
+        <Tabs onChange={callback} type="card" style={{ width: '100%' }} destroyInactiveTabPane>
+          <TabPane tab="底图配置" key="1">
             <TileConfig />
           </TabPane>
-          <TabPane tab="矢量数据配置" key="2">
+          <TabPane tab="管网配置" key="2">
             <VectorData />
           </TabPane>
           <TabPane tab="方案管理" key="3">
@@ -35,6 +36,9 @@ const SchemeConfig = () => {
           <TabPane tab="方案配置" key="4">
             <SolutionConfig />
           </TabPane>
+          <TabPane tab="范围配置" key="5">
+            <ScopeMap />
+          </TabPane>
         </Tabs>
       </div>
     </PageContainer>

src/pages/platformCenter/gis/schemeConfig/ScopeMap/index.jsx

+/* eslint-disable no-new */
+import React, { useEffect, useState, useRef } from 'react';
+import { ArcGISMap, Drawtool, geomUtils } from '@wisdom-map/arcgismap';
+
+import { Form, Input, Slider, InputNumber, Select, Button, Cascader, notification } from 'antd';
+import classnames from 'classnames';
+import { GetWebSiteConfig } from '@/services/gis/gis';
+import { SetServiceConfig } from '@/services/webConfig/api';
+import styles from './index.less';
+const { Option } = Select;
+
+const Map = props => {
+  const { visible, onCancel, schemename } = props;
+  const [form] = Form.useForm();
+  const [canLoadMap, setCanLoadMap] = useState(false); // 是否加载地图
+  const [colorArr, setColorArr] = useState([
+    { color: '#ffffff', isCheck: false },
+    { color: '#000000', isCheck: false },
+    { color: '#9E9E9E', isCheck: false },
+    { color: '#009688', isCheck: false },
+    { color: '#2196f3', isCheck: false },
+    { color: '#19233c', isCheck: false },
+  ]);
+  const [schemeList, setSchemeList] = useState([]);
+  const [options, setOptions] = useState([]);
+  const [mapsettings, setMapsettings] = useState({});
+  const [flag, setFlag] = useState(0);
+  const mapRef = useRef();
+  const mapInfo = useRef(null);
+
+  useEffect(() => {
+    GetWebSiteConfig({ client: 'sandbox' }).then(res => {
+      console.log(res.data[0].mapsettings, 'res.data[0].mapsettings');
+      setSchemeList(res.data[0].mapsettings.layers);
+      setMapsettings(res.data[0].mapsettings);
+      let setttings = {};
+      res.data[0].mapsettings.layers.forEach(item => {
+        if (item.layerType === 'PipenetLayer') {
+          setttings = item;
+        }
+      });
+      setTimeout(() => {
+        form.setFieldsValue({
+          areaName: [setttings.areaName],
+          backgroundColor: setttings.backgroundColor,
+          backgroundOpacity: setttings.backgroundOpacity * 100,
+          boundColor: setttings.boundColor,
+          boundWidth: parseInt(setttings.boundWidth),
+          extent: setttings.extent,
+          schemename: setttings.schemename,
+        });
+
+        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, '行政区划信息');
+        setOptions(result.districtList[0].districtList);
+      });
+    });
+  }, []);
+  // 获取地图实例
+  const getMapInfo = viewObject => {
+    mapInfo.current = viewObject;
+  };
+  // 选择颜色
+  const checkColor = color => {
+    form.setFieldsValue({ backgroundColor: color });
+    mapRef.current.updateAreaColor(color);
+    setFlag(flag + 1);
+  };
+  // 表单修改后对地图进行配置
+  const changeValue = changedFields => {
+    let obj = JSON.parse(JSON.stringify(mapsettings));
+    const index = obj.layers.findIndex(
+      item => item.schemename === form.getFieldValue('schemename'),
+    );
+    switch (changedFields[0].name[0]) {
+      case 'backgroundOpacity':
+        obj.layers[index].backgroundOpacity = changedFields[0].value / 100;
+        mapRef.current.changeBackgroundOpacity(obj.layers[index].backgroundOpacity);
+        break;
+      case 'boundWidth':
+        obj.layers[index].boundWidth = changedFields[0].value;
+        mapRef.current.changeBoundWidthValue(obj.layers[index].boundWidth);
+        break;
+      case 'areaName':
+        Drawtool.deactivate(false);
+        obj.layers[index].areaName = changedFields[0].value[changedFields[0].value.length - 1];
+        mapRef.current.changeAreaName(obj.layers[index].areaName);
+        break;
+      case 'schemename':
+        Drawtool.deactivate(false);
+        let setttings;
+        obj.layers.forEach(item => {
+          if (item.schemename === changedFields[0].value) {
+            item.layerType = 'PipenetLayer';
+            setttings = item;
+          } else {
+            item.layerType = 'dynamic';
+          }
+        });
+        form.setFieldsValue({
+          areaName: [setttings.areaName],
+          backgroundColor: setttings.backgroundColor,
+          backgroundOpacity: setttings.backgroundOpacity * 100,
+          boundColor: setttings.boundColor,
+          boundWidth: parseInt(setttings.boundWidth),
+          extent: setttings.extent,
+        });
+        setMapsettings(obj);
+        break;
+
+      default:
+        break;
+    }
+  };
+  // 选择范围
+  const onTangleClick = e => {
+    Drawtool.activate({
+      view: mapInfo.current,
+      action: 'extent',
+      drawEnd: data => {
+        const geom = geomUtils.toGeometry({
+          type: 'extent',
+          xmin: data.rings[0][0][0],
+          xmax: data.rings[0][2][0],
+          ymin: data.rings[0][0][1],
+          ymax: data.rings[0][1][1],
+        });
+        form.setFieldsValue({
+          extent: `${data.rings[0][0][0]},${data.rings[0][0][1]},${data.rings[0][2][0]},${
+            data.rings[0][1][1]
+          }`,
+        });
+        mapRef.current.gotoGeometry(geom);
+      },
+    });
+  };
+  // 提交
+  const onFinish = () => {
+    if (!Drawtool.graphic) {
+      notification.error({
+        message: '提示',
+        duration: 3,
+        description: '请选择复位范围再保存',
+      });
+      return;
+    }
+    const obj = form.getFieldsValue();
+    const jsConfig = {
+      extent: form.getFieldValue('extent'),
+      areaName: obj.areaName[obj.areaName.length - 1],
+      boundColor: '#86c8f8',
+      boundWidth: `${obj.boundWidth}px`,
+      backgroundColor: obj.backgroundColor,
+      backgroundOpacity: obj.backgroundOpacity / 100,
+    };
+    SetServiceConfig({
+      schemename: obj.schemename,
+      terminalType: 'web',
+      isBaseMap: false,
+      jsonCfg: JSON.stringify(jsConfig),
+    }).then(res => {
+      if (res.code === 0) {
+        notification.success({
+          message: '提示',
+          duration: 3,
+          description: '保存成功',
+        });
+      } else {
+        notification.error({
+          message: '提示',
+          duration: 3,
+          description: res.msg,
+        });
+      }
+    });
+    SetServiceConfig({
+      schemename: obj.schemename,
+      terminalType: 'phone',
+      isBaseMap: false,
+      jsonCfg: JSON.stringify({ extent: form.getFieldValue('extent') }),
+    }).then();
+  };
+  return (
+    <div>
+      <div className={styles.mapContent}>
+        <div className={styles.mapTool}>
+          <Form
+            form={form}
+            labelCol={{ span: 8 }}
+            wrapperCol={{ span: 16 }}
+            onFieldsChange={changeValue}
+            onFinish={onFinish}
+          >
+            <Form.Item label="切换方案" name="schemename">
+              <Select placeholder="请选择方案">
+                {schemeList.map((item, index) => (
+                  <Option value={item.schemename} key={index}>
+                    {item.schemename}
+                  </Option>
+                ))}
+              </Select>
+            </Form.Item>
+            <Form.Item label="地区" name="areaName">
+              <Cascader
+                fieldNames={{
+                  label: 'name',
+                  value: 'name',
+                  children: 'districtList',
+                }}
+                showSearch
+                options={options}
+                placeholder="请选择行政区"
+                changeOnSelect
+                allowClear={false}
+              />
+            </Form.Item>
+
+            <Form.Item label="背景颜色" name="backgroundColor">
+              <div className={styles.colorContent}>
+                {colorArr.map(item => (
+                  <div
+                    className={classnames(styles.colorBox, {
+                      [styles.currentColor]: item.color === form.getFieldValue('backgroundColor'),
+                    })}
+                    key={item.color}
+                    style={{ background: item.color }}
+                    onClick={() => checkColor(item.color)}
+                  />
+                ))}
+              </div>
+            </Form.Item>
+            <Form.Item label="透明度修改" name="backgroundOpacity">
+              <Slider min={0} max={100} />
+            </Form.Item>
+            <Form.Item label="边界宽度修改" name="boundWidth">
+              <InputNumber min={1} max={10} />
+            </Form.Item>
+
+            <Form.Item wrapperCol={{ offset: 8, span: 16 }}>
+              <Button type="primary" onClick={e => onTangleClick(e)}>
+                复位范围修改
+              </Button>
+            </Form.Item>
+            <Form.Item wrapperCol={{ offset: 8, span: 16 }}>
+              <Button type="primary" htmlType="submit">
+                提交
+              </Button>
+            </Form.Item>
+          </Form>
+        </div>
+        <div className={styles.mapBox}>
+          {canLoadMap && (
+            <ArcGISMap ref={mapRef} getMapInfo={e => getMapInfo(e)} config={mapsettings} />
+          )}
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default Map;

src/pages/platformCenter/gis/schemeConfig/ScopeMap/index.less

+.indexContainer {
+  .anticon svg {
+    margin-top: 0px;
+  }
+}
+.mapContent {
+  display: flex;
+  width: 100%;
+  height: calc(100vh - 160px);
+  .mapTool {
+    width: 400px;
+    .title {
+      text-align: center;
+      font-weight: 700;
+      font-size: 14px;
+    }
+    .colorContent {
+      width: 100%;
+      display: flex;
+      justify-content: space-between;
+      .colorBox {
+        width: 15px;
+        height: 15px;
+        border: 1px solid #ccc;
+      }
+      .currentColor {
+        border: 2px solid #faad14;
+      }
+    }
+  }
+  .mapBox {
+    display: flex;
+    align-items: center;
+    position: relative;
+    margin-left: 15px;
+    width: 100%;
+    height: 100%;
+    canvas {
+      width: 100%;
+      height: 100%;
+    }
+  }
+}
+.ant-cascader-menu {
+  height: 530px;
+}

src/services/gis/gis.js

@@ -6,3 +6,5 @@ export const GetMetaData = param => get(`${CITY_SERVICE}/MapServer.svc/${param}`
 
 // 3.获取元数据新
 export const GetMetaDataNew = param => get(`${CITY_SERVICE}/MapServer.svc/${param}`);
+// 获取mapsetting配置
+export const GetWebSiteConfig = param => get(`${PUBLISH_SERVICE}/WebSite/GetWebSiteConfig`, param);