如何为React Admin开发基于Mapbox GL的自定义GeoJSON输入组件

解决方案 #

你只需要借助react-admin提供的useInput钩子，把地图绘制的GeoJSON数据绑定到表单字段即可，具体修改步骤如下：

1. 修改MapInput组件代码（components/MapboxGl.tsx）

import * as React from 'react';
import { useInput } from 'react-admin'; // 新增导入react-admin的useInput钩子
import '@mapbox/mapbox-gl-draw/dist/mapbox-gl-draw.css';
import ReactMapboxGl from 'react-mapbox-gl';
import DrawControl from 'react-mapbox-gl-draw';
const Map = ReactMapboxGl({
  accessToken: '你的MAPBOX_ACCESS_TOKEN'
});

export const MapInput = ({ source }: { source: string }) => {
  // 调用useInput绑定对应source字段，获取表单值操作方法
  const { field } = useInput({ source });

  // 处理多边形创建事件
  const onDrawCreate = (e: any) => {
    const geometry = e.features[0].geometry;
    // 将绘制的GeoJSON写入表单字段
    field.onChange(geometry);
  };

  // 处理多边形更新/删除事件
  const onDrawUpdate = (e: any) => {
    if (e.features.length) {
      field.onChange(e.features[0].geometry);
    } else {
      // 多边形被删除时清空字段值
      field.onChange(null);
    }
  };

  return (
    <Map
      style="mapbox://styles/mapbox/streets-v11"
      containerStyle={{
        height: '400px',
        width: '800px'
      }}
    >
      <DrawControl
        displayControlsDefault={false}
        controls={{
          trash: true,
          polygon: true
        }}
        onDrawCreate={onDrawCreate}
        onDrawUpdate={onDrawUpdate}
        onDrawDelete={onDrawUpdate} // 删除事件也绑定同一个处理函数
      />
    </Map>
  );
};

2. 修改创建页面的MapInput调用（components/CreateMyArea.tsx）

给MapInput加上source="geometry"属性，和其他内置输入组件的用法完全一致：

import React from 'react';
import { Create, SimpleForm, TextInput } from 'react-admin';
import { MapInput } from '../components/MapboxGl';

export const CreateMyArea = (props: any) => {
  return (
    <Create title="Create my area" {...props}>
      <SimpleForm>
        <TextInput label="名称" source="name" />
        <TextInput multiline label="描述" source="description" />
        <MapInput source="geometry" /> {/* 新增source属性绑定geometry字段 */}
      </SimpleForm>
    </Create>
  );
};

可选扩展（编辑场景回显）

如果需要在编辑页回显已保存的多边形，只需要在Map组件加载完成后，通过DrawControl的API把field.value对应的GeoJSON添加到地图中即可。

内容的提问来源于stack exchange，提问作者Drejc