React-BMapGL 相关问题汇总

React-BMapGL 这货确实不好用，github啥也解决不了。文档简单，得看百度的接口文档，还不一定能用在这个上面。

一、如果在界面画了一个polygon，现在要加一个重置功能，也就是把画的乱七八糟的图形恢复成一个正方形，怎么办？

我的做法是useState一个变量mPath，把后台传来的不管是什么形状的path数组在useEffect中赋给mPath, 然后这个mPath设置给Poylgon的path属性。

再添加一个重置按钮，当点击时，把默认的正方形的path数组赋给mPath，这样，就算是重置了。

代码如下：

import React, { useRef, useState, useEffect } from 'react';
import { ModalForm } from '@ant-design/pro-form';
import type { ProFormInstance } from '@ant-design/pro-form';
import { Map, Marker, Polygon } from 'react-bmapgl';
import { Button } from 'antd';

export type FenceFormProps = {
  onCancel: (flag?: boolean, formVals?: any) => void;
  onSubmit: (values: any) => Promise;
  fenceModalVisible: boolean;
  values: Partial;
};

const FenceForm: React.FC = (props) => {
  const formRef = useRef();
  const [refMap, setRefMap] = useState(null);
  const [mPath, setMPath] = useState([]);

  useEffect(() => {
      if (props.values.id != undefined) {
        setMPath(props.values.polygon);
      }

  }, [props]);

  const onRedraw = () => {
    setMPath(props.values.default_polygon);
  };

  return (
     {
        let path = null;
        if (refMap) {
          path = refMap.overlay.getPath();
        }
        const ret = props.onSubmit({ path: path, id: props.values.id });
        return true;
      }}
      modalProps={{
        destroyOnClose: true,
        onCancel: () => {
          props.onCancel();
        },
      }}
      submitter={{
        render: (prop, dom) => {
          return [
            
              重置电子围栏
            ,
            ...dom,
          ];
        },
      }}
      style={{ height: '800px' }}
    >
      
    
  );
};

export default FenceForm;

在《百度地图JSAPI WebGL v1.0类参考》中，polygon中有setPath(path: Array< Point >)方法，可是，调用后，整个polygon都没了，控制台也不报错，所以，就想出了上述方法。