星图地图--结合antd_table组件使用

持续创作，加速成长！这是我参与「掘金日新计划 · 10 月更文挑战」的第1天

需求1：默认展示一个数据源的table列表，手动触发新增列表，列表内有地图选点按钮，配合星图可以在地图上选点并回显坐标，再次选点可编辑。

需求2：table列表每一项可展开，展开后是一些约束条件，需要将对应的约束条件发给后端。

需求3：table列表勾选，列表上方有独立的批量编辑按钮，可以对勾选项的展开项的内容统一编辑。

需求4：table列表勾选，列表上方有独立的地图显示按钮，可以将勾选的点在地图导航绘制一条线。

需求5：批量编辑按钮和table展开后的确定、重置按钮需要前端保存数据，最下方的保存按钮才将所有数据发送给后端。

原型图

思路：1.首先应用antd的默认组件。可展开可选择功能。通过点击按钮，新增数据源的方式，增加行。

2.通过列表渲染，渲染出input框，和后方的选点按钮。当点击选点按钮，将弹窗隐藏，在地图上选点完毕后，显示弹窗，回显坐标。

3.地图显示线路，需要具备的是两个点才会显示线路，当勾选的列表大于等于两个并且地图选择按钮勾选。就会在地图上绘制线路，这里的选点只能根据index来区分。需要注意监听时间，input坐标改变，按钮是否选中，更新线路

4.列表展开项内容，不可使用form表单。尝试失败，因为这是遍历出来的多个表单。通过设置一个数组，将内容都放入其中，通过维护数组，修改不同展开项内内的数据。需要注意展开项的保存按钮将数据保存在前端。重置和保存按钮更新全局状态。进去页面首先取出全局状态数据，通过state控制。

5.批量编辑时，修改的是全局状态

效果图

代码参考

    export default function Left() {
      const group = useSelector((state) => state.commomMap.Map);
      const groupView = useSelector((state) => state.commomMap.MapGroup);
      const [form] = Form.useForm();
      const [tabKey, setTabKey] = useState('1');

      // 列表选择
      const [selectedRowKeys, setSelectedRowKeys] = useState([]);
      const [selectRow, setSelectRow] = useState([]);

      // 控制弹窗显示隐藏
      const [visibleAdd, setVisibleAdd] = useState(false);
      const [visibleList, setVisibleList] = useState(true);
      const [addVisible, setAddVisible] = useState(false);
      const [leftVisible, setLeftVisible] = useState(false);

      // 控制显示地图模型选中按钮
      const [showModal, setShowModal] = useState(false);

      // 控制列表长度--增加一行
      const data = [        {          index: 0,          key: 1,          order: 1,          pathLine: '经纬度(°)',        }      ];
      const [sourceData, setSourceData] = useState([...data])

      // 列表图标在地图上选点
      const [ifSelectPoint, setIfSelectPoint] = useState(false);
      const [selectIndex, setSelectIndex] = useState(0);

      // 控制输入框内容
      const [inputContent, setInputContent] = useState([]);

      // 获取表单数据
      const roadFormData = useSelector((state) => state.roadData.roadFormData);

      // 控制展开项内的状态
      const [roadContentData, setRoadContentData] = useState([]);

      // 批量编辑弹窗
      const [visible, setVisible] = useState(false);

      const dispatch = useDispatch();
      const dataaaa = useSelector((state) => state.planArea.list);

      // 监听地图上选点
      useEffect(() => {
        if (ifSelectPoint) {
          // 监听地图选点，回显坐标
    
      }, [ifSelectPoint]);

      // 监听列表选择，显示模型
      useEffect(() => {
        // showModal--地图显示路径按钮 selectRow--列表选择的点 inputContent--点坐标变化
        if (showModal && selectRow.length > 1) {
          
      }, [showModal, selectRow, inputContent]);


      // 手动修改坐标时，地图模型对应发生改变
      const inputHandle =(e,index) => {
       
      }

      // 自定义实现
      const tableContent = (index) => {
    
        );
      };
  
      return (
       <Table
            columns={columns}
            showHeader={false}
            rowSelection={{ ...rowSelection }}
            expandable={{
              expandedRowRender: (record, index) => tableContent(index),
              onExpand: (expanded, record) => {
                console.log(
                  expanded,
                  record,
                  '点击展开图标时判断当前展开的行，获取编号',
                );
              },
            }}
            pagination={false}
            dataSource={sourceData}
          />
      );
    }