React-BMapGL 相关问题汇总

最新推荐文章于 2024-08-16 07:49:01 发布

HOOLOO

最新推荐文章于 2024-08-16 07:49:01 发布

阅读量512

点赞数 1

分类专栏：前端文章标签： react.js javascript 前端

本文链接：https://blog.csdn.net/hooloo/article/details/130310767

版权

前端专栏收录该内容

3 篇文章 0 订阅

订阅专栏

文章描述了在React应用中使用React-BMapGL库时遇到的问题，即如何重置用户画的任意形状的Polygon为正方形。作者通过useState和useEffect管理状态，实现了点击重置按钮时将Polygon的路径恢复为默认正方形路径的功能。由于BMapGL库的限制，作者没有直接使用setPath方法，而是通过更新状态变量来实现效果。

摘要由CSDN通过智能技术生成

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<void>;
  fenceModalVisible: boolean;
  values: Partial<any>;
};

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

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

  }, [props]);

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

  return (
    <ModalForm
      title="电子围栏"
      width="960px"
      formRef={formRef}
      visible={props.fenceModalVisible}
      onFinish={async (values) => {
        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 [
            <Button type="default" key="redraw" htmlType="button" onClick={onRedraw}>
              重置电子围栏
            </Button>,
            ...dom,
          ];
        },
      }}
      style={{ height: '800px' }}
    >
      <Map
        enableScrollWheelZoom={true}
        center={{
          lng: props.values.address?.longitude || 0,
          lat: props.values.address?.latitude || 0,
        }}
        zoom="14"
        style={{ height: 800 }}
      >
        <Marker
          position={{
            lng: props.values.address?.longitude || 0,
            lat: props.values.address?.latitude || 0,
          }}
        />
        <Polygon
          ref={(e: any) => {
            console.log('polygon ref: ', e);
            setRefMap(e);
          }}
          enableEditing={true}
          strokeColor="red"
          path={mPath}
        />
      </Map>
    </ModalForm>
  );
};

export default FenceForm;

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