1、需求描述
目前公司前端使用的是react和ts作为前端的一个主要技术,现有一个坐标转换的需求,需要批量将坐标转换成想要的坐标,如下图:
2、代码实现
//重点方法
const onFinish = async (values: any) => {
//将文本内容转成数组
const coordinatePairs = form.getFieldValue('gpsLocations').split('\n'); // 假设坐标数据使用换行符分隔
const formattedCoordinates = coordinatePairs.map(pair => {
const [lng, lat] = pair.split(',');
//实现
return { "lng": parseFloat(lng), "lat": parseFloat(lat) };
});
const parms = {
type: form.getFieldValue('type'),
gpsLocations:JSON.parse(JSON.stringify(formattedCoordinates))
};
const newVar = await convertLocation(parms);
//转换前端展示格式
const formattedData = newVar.map(item => `${item.lng} , ${item.lat}`).join('\n');
form.setFieldValue("conversionResults",formattedData)
};
/**
* 转换坐标
* @param params
*/
export async function convertLocation(params: any) {
const { data } = await request(`/api/front/convertLocation`, { data: params, method: 'POST' });
return data;
}
return (
<PageContainer title="坐标转换">
<Card>
<ProForm
form={form}
layout="horizontal"
{...formMainLayout}
onFinish={onFinish}
submitter={{
render: renderSubmit,
}}
>
<ProFormRadio.Group
label="原始坐标系"
name="type"
rules={[
{
required: true,
message: `请选择原始坐标系`,
},
]}
valueEnum={coordinateEnum}
fieldProps={{
onChange: (e) => setDirection(e.target.value),
}}
/>
<ProFormTextArea
label="原始坐标"
name="gpsLocations"
placeholder="原始坐标"
rules={[{required: true, message: '原始坐标'}]}
extra={<div dangerouslySetInnerHTML={{ __html: extraContent }} />}
/>
<ProFormTextArea
label="转换结果"
name="conversionResults"
extra={<span>转换结果,',' 前表示经度,后表示纬度</span>}
/>
</ProForm>
</Card>
</PageContainer>
);