Pasos:
1) Obtener datos de coordenadas del formulario
2) Procesamiento del sistema de coordenadas geográficas
3) Elemento y creación de su estilo
4) Verificación del formato de entrada de longitud y latitud
5) En particular, es necesario juzgar si crear repetidamente (ya sea de entrada o dibujado). ), unicidad
6) Determinar si las coordenadas están dentro del campo
//经纬度输入格式校验
const lonlatValid = (e: string) => {
if (e !== '' && e != null && e !== undefined) {
if (isNaN(Number(e)) == false) {
var re = /\./g;
if (e.includes('.') && e.match(re)?.length == 1) {
const valnumber = String(e).split('.', 2);
//firstvalid(valnumber[0])
if (Number(valnumber[0].charAt(0)) == 0) {
message.error('经纬度首位输入有误!');
return false;
}
if (valnumber[0].length > 3 || valnumber[0].length < 2) {
formRef.setFieldsValue({
[inputId]: '' });
message.error('经纬度大小输入有误!');
return false;
}
if (valnumber[1].length <= 5) {
message.error('小数点后至少为6位!');
return false;
}
} else {
formRef.setFieldsValue({
[inputId]: '' });
message.error('输入值应有小数位!');
return false;
}
}
} else {
return false;
}
return true;
};
//创建点要素方法
const creatpoint = () => {
let rtkobj = formRef.getFieldsValue();
//创建点geometry
let point = new Point(
transform([Number(rtkobj.longitude), Number(rtkobj.latitude)], 'EPSG:4326', 'EPSG:3857')
);
// 创建feature要素,一个feature就是一个点
let pointFeature = new Feature(point);
// 设置要素的图标
pointFeature.setStyle(iconStyle);
pointFeature.setId('pointFeature');
//验证经纬度
if (lonlatValid(String(rtkobj.longitude)) && lonlatValid(String(rtkobj.latitude)) == true) {
if (
rtkobj.longitude !== undefined &&
rtkobj.latitude !== undefined &&
rtkobj.longitude !== '' &&
rtkobj.latitude !== ''
) {
//mapLayer.getSource().clear()
//删除多余layer要素
let layerarr = hxMap.mapInstance.getLayers().getArray();
if (layerarr[3].getSource()?.getFeatureById('drawfeature')) {
layerarr[3].getSource().forEachFeature((feature: any) => {
if (feature.id_ === 'drawfeature') {
let pointfeature = layerarr[3].getSource()?.getFeatureById('drawfeature');
layerarr[3].getSource().removeFeature(pointfeature);
layerarr[3].getSource().addFeatures([pointFeature]);
}
});
} else {
layerarr[3].getSource().addFeatures([pointFeature]);
}
if (layerarr[3].getSource()?.getFeatureById('pointFeature')) {
layerarr[3].getSource().forEachFeature((feature: any) => {
if (feature.id_ === 'pointFeature') {
let pointfeature = layerarr[3].getSource()?.getFeatureById('pointFeature');
layerarr[3].getSource().removeFeature(pointfeature);
layerarr[3].getSource().addFeatures([pointFeature]);
}
});
} else {
layerarr[3].getSource().addFeatures([pointFeature]);
}
if (rtkobj.latitude) {
let devicepoint = transform(
[Number(rtkobj.longitude), Number(rtkobj.latitude)],
'EPSG:4326',
'EPSG:3857'
);
//判断坐标是否位于田块内
coorinField(devicepoint);
}
hxMap.mapInstance
.getView()
.setCenter(
transform([Number(rtkobj.longitude), Number(rtkobj.latitude)], 'EPSG:4326', 'EPSG:3857')
);
hxMap.mapInstance.getView().setZoom(17.5);
}
}
};
//输入的坐标,判断其所属田块并让其高亮
const coorinField=(coordinate:any)=>{
let layerarr = hxMap.mapInstance.getLayers().getArray();
const userInfo = JSON.parse(localStorage.getItem('userInfo') || '{}');
const {
code } = userInfo.ffarmRespVO;
getCountByFarmCode({
farmCode:code}).then((res)=>{
let features_=layerarr[1].getSource().getFeatures()
if(features_.length=res.dcount){
let features=layerarr[1].getSource().getFeaturesAtCoordinate(coordinate)
if(features.length>0){
//删除上一个田块样式
clearselectstyle()
//重新设置样式
features[0].setStyle(selectFieldStyle(features[0]));
features[0].setId('readfeature');
formRef.setFieldsValue({
landCode: features[0].code });
}else{
message.error("坐标不位于田块内!")
}
}
})
}