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' }}
    >
      
        
         {
            console.log('polygon ref: ', e);
            setRefMap(e);
          }}
          enableEditing={true}
          strokeColor="red"
          path={mPath}
        />
      
    
  );
};

export default FenceForm;

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

你可能感兴趣的:(前端,react.js,javascript,前端)