使用 mapgox-gl 接口编写我自己的 GeoJSON 输入组件

Question

嘿。我想创建一个 react admin 输入组件 MapInput ，其中我得到了一个带有绘图控件的地图 github。在那里我可以绘制我的多边形并得到 GeoJSON 作为结果，然后我可以将其发送到我的后端 REST API 服务器（json-server）。

我的系统由我的 React 客户端程序和一个带有 REST API 的 json-服务器组成。我的 REST 中的一个区域示例 API:

{
  "id": "4",
  "name": "Area 4",
  "description": "This is area 4.",
  "geometry": {
    "type": "Polygon",
    "coordinates": [
      [
        [-1.8017578124999998, 52.45600939264076],
        [0.406494140625, 52.20760667286523],
        [0.560302734375, 53.48804553605622],
        [-1.8017578124999998, 52.45600939264076]
      ]
    ]
  }
}

目前，使用我的 MapInput 标签，我可以绘制一个多边形并且可以记录 GeoJSON，但我不知道如何将它传递给 React admin dataProvider，因为它能够将其发送到我的服务器。

我关注这个instructions。

在我的 components/CreateMyArea.tsx 组件中 (POST)

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="Name" source="name" />
        <TextInput multiline label="Description" source="description" />
        <MapInput />
      </SimpleForm>
    </Create>
  );
};

在 MapInput 标签中，如何像在源标签中传递“名称”和“描述”（JSON 示例）一样传递“几何”参数？

在我的 components/MapboxGl.tsx 组件中

import * as React from 'react';
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:
    'ACCESS-TOKEN'
});
//...
export const MapInput = () => {
return (
    <Map
      style="mapbox://styles/mapbox/streets-v11"
      containerStyle={{
        height: '400px',
        width: '800px'
      }}
    >
      <DrawControl
        displayControlsDefault={false}
        controls={{
          trash: true,
          polygon: true
        }}
        //onDrawCreate={onDrawCreate} // with this method I can console.log created geoJson
        //onDrawUpdate={onDrawUpdate}
      />
    </Map>
  );
};

Answer 1

您的自定义输入组件必须显示并允许更改多边形。此数据处于表单状态，由 react-final-form 处理。因此，您需要使用 react-final-form 的 useField() 钩子来获取输入值并更改回调：

import { useField } from 'react-final-form';

export const MapInput = () => {
   const { input, meta } = useField('geometry');
   const { value, onChange } = input;
   // do what you want with value and onChange

在这个例子中，我没有自定义字段名称 ('geometry')。如果你想为不同的来源重用相同的输入组件，添加对 source 道具的支持 - 就像 react-admin 输入组件：

export const MapInput = ({ source }) => {
   const { input, meta } = useField(source);
   const { value, onChange } = input;
   // do what you want with value and onChange

您可以在 react-admin 文档中了解有关编写自己的输入组件的更多信息：

https://marmelab.com/react-admin/Inputs.html#writing-your-own-input-component

使用 mapgox-gl 接口编写我自己的 GeoJSON 输入组件

Writing my own GeoJSON input component with a mapgox-gl interface

reactjs

react-admin