react+openyers实现根据表单输入坐标创建点要素，并判断点要素是否位于范围（田块）内

步骤：
1）拿到表单坐标数据
2）geo坐标系处理
3）要素及其样式创建
4）经纬度输入格式验证
5）特别的，要判断是否重复创建（不论是输入的还是绘制的），唯一性
6）判断坐标是否位于田块内

//经纬度输入格式校验
  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("坐标不位于田块内！")
        }
       }     
    })
   }