react+openyers crea elementos de punto en función de las coordenadas de entrada del formulario y juzga si los elementos de punto están dentro del rango (campo)

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("坐标不位于田块内!")
        }
       }     
    })
   }

Supongo que te gusta

Origin blog.csdn.net/qq_37967853/article/details/129581467
Recomendado
Clasificación