react-base-client 1.0.151 → 1.1.0

package/src/components/AMap/index.tsx

@@ -20,7 +20,7 @@ const AMapComponent = React.forwardRef<any, AMapType.Props>((props, ref) => {
   const mapLayers = props.mapLayers || (wmsJSON?.layers || []);
   const realTime = props.realTime || undefined;
   const showLayersPanel = props.showLayersPanel || false
-  const [getMap, setMap] = useState<any>();
+  const mapRef = useRef<any>(null);
 
   const [getAMap, setAMap] = useState<any>();
 
@@ -32,7 +32,13 @@ const AMapComponent = React.forwardRef<any, AMapType.Props>((props, ref) => {
 
   const [intervalId, setIntervalId] = useState<NodeJS.Timeout | null>(null);
 
-  const [layers, setLayers] = useState({});
+  const [layers, setLayers] = useState<Record<string, any>>({});
+
+  // 新增：持久化 layers 的 ref
+  const layersRef = useRef(layers);
+  useEffect(() => {
+    layersRef.current = layers;
+  }, [layers]);
 
   const [isCollapsed, setIsCollapsed] = useState(true);
 
@@ -99,7 +105,7 @@ const AMapComponent = React.forwardRef<any, AMapType.Props>((props, ref) => {
 
   const handleLocationClick = () => {
     console.log('>>>> 用户点击定位按钮，当前 followUserLocation:', followUserLocation);
-    initMapCenter(getMap, true);
+    initMapCenter(mapRef.current, true);
     setFollowUserLocation(true);
     console.log('>>>> 已设置 followUserLocation 为 true');
   };
@@ -127,8 +133,8 @@ const AMapComponent = React.forwardRef<any, AMapType.Props>((props, ref) => {
     _lng: string | number,
     _lat: string | number,
   ) {
-    getMap?.setZoomAndCenter?.(_grade, [_lng, _lat]);
-    getMap?.getCenter?.();
+    mapRef.current?.setZoomAndCenter?.(_grade, [_lng, _lat]);
+    mapRef.current?.getCenter?.();
   }
   /**
    * 添加回调事件
@@ -207,7 +213,7 @@ const AMapComponent = React.forwardRef<any, AMapType.Props>((props, ref) => {
    */
   const upMapOnData = () => {
     for (const layerItem of getLayerAll) {
-      getMap?.remove(layerItem);
+      mapRef.current?.remove(layerItem);
     }
     const labelsLayer = new AMap.LabelsLayer({
       zooms: [3, 20],
@@ -224,7 +230,7 @@ const AMapComponent = React.forwardRef<any, AMapType.Props>((props, ref) => {
         rowItem.f_latitude
       ) {
         setZommAndCenterView(
-          getMap,
+          mapRef.current,
           15,
           rowItem.f_longitude,
           rowItem.f_latitude,
@@ -239,7 +245,7 @@ const AMapComponent = React.forwardRef<any, AMapType.Props>((props, ref) => {
         rowItem.f_latitude
       ) {
         setZommAndCenterView(
-          getMap,
+          mapRef.current,
           15,
           rowItem.f_longitude,
           rowItem.f_latitude,
@@ -304,11 +310,11 @@ const AMapComponent = React.forwardRef<any, AMapType.Props>((props, ref) => {
         });
         marker.setMap(getMap);
         initSimpleInfoWdw(getAMap, rowItem, marker, getMap, i === props.rowData.length - 1);*/
-        initSimpleInfoWdw(getAMap, rowItem, labelsMarker, getMap);
+        initSimpleInfoWdw(getAMap, rowItem, labelsMarker, mapRef.current);
       }
     }
     setLayerAll([labelsLayer, ...getLayerAll]);
-    getMap.add(labelsLayer);
+    mapRef.current?.add(labelsLayer);
   };
   /**
    * 初始化地图
@@ -328,7 +334,7 @@ const AMapComponent = React.forwardRef<any, AMapType.Props>((props, ref) => {
         LAYERS: layer,
         VERSION: wmsJSON.wms.version,
         SRS: wmsJSON.wms.srs
-      }
+      } as any
     });
   }
 
@@ -373,7 +379,7 @@ const AMapComponent = React.forwardRef<any, AMapType.Props>((props, ref) => {
         });
       } else {
         getLayerAll.forEach(layer => {
-          layer.setMap(getMap);
+          layer.setMap(mapRef.current);
         });
       }
       return;
@@ -387,7 +393,7 @@ const AMapComponent = React.forwardRef<any, AMapType.Props>((props, ref) => {
           layer.wms.setMap(null);
           layer.isShow = false;
         } else {
-          layer.wms.setMap(getMap);
+          layer.wms.setMap(mapRef.current);
           layer.isShow = true;
         }
       }
@@ -398,13 +404,13 @@ const AMapComponent = React.forwardRef<any, AMapType.Props>((props, ref) => {
   const [isMapSatellite, setIsMapSatellite] = useState(false);
   // 添加切换地图类型的函数
   const toggleMapType = () => {
-    if (getMap) {
+    if (mapRef.current) {
       if (isMapSatellite) {
         // 切换回矢量地图
-        getMap.setLayers([new AMap.TileLayer()]);
+        mapRef.current.setLayers([new AMap.TileLayer()]);
       } else {
         // 切换到卫星地图
-        getMap.setLayers([
+        mapRef.current.setLayers([
           new AMap.TileLayer.Satellite(),
           new AMap.TileLayer.RoadNet()
         ]);
@@ -412,29 +418,81 @@ const AMapComponent = React.forwardRef<any, AMapType.Props>((props, ref) => {
       // 重新添加之前显示的 WMS 图层
       Object.values(layers).forEach((layer: any) => {
         if (layer.isShow) {
-          layer.wms.setMap(getMap);
+          layer.wms.setMap(mapRef.current);
         }
       });
 
       setIsMapSatellite(!isMapSatellite);
     }
   };
-  // 修改setupMapEvents函数，使用正确的事件名称并添加日志
+  // 新增: 获取WMS图层feature属性
+  const handleMapClickForWMS = async (e: any) => {
+    if (!props.wmsJSON || !props.onWmsFeatureClick) return;
+    const wms = props.wmsJSON.wms;
+    if (!wms) return;
+    const map = mapRef.current;
+    if (!map) return;
+    const size = map.getSize();
+    const bounds = map.getBounds();
+    const sw = bounds.getSouthWest();
+    const ne = bounds.getNorthEast();
+    const bbox = [sw.lng, sw.lat, ne.lng, ne.lat].join(',');
+    const xy = map.lngLatToContainer([e.lnglat.lng, e.lnglat.lat]);
+    const version = wms.version || '1.1.1';
+
+    // 修改：始终获取最新的 layers
+    const visibleLayers = Object.values(layersRef.current).filter(l => l.isShow);
+
+    for (let i = 0; i < visibleLayers.length; i++) {
+      const layer = visibleLayers[i];
+      const params: any = {
+        SERVICE: 'WMS',
+        VERSION: version,
+        REQUEST: 'GetFeatureInfo',
+        FORMAT: 'image/png',
+        TRANSPARENT: 'true',
+        QUERY_LAYERS: layer.layerName,
+        LAYERS: layer.layerName,
+        TILED: 'true',
+        INFO_FORMAT: 'application/json',
+        CRS: 'EPSG:4326',
+        BBOX: bbox,
+        WIDTH: size.getWidth(),
+        HEIGHT: size.getHeight(),
+      };
+      if (version === '1.3.0') {
+        params.I = Math.round(xy.x);
+        params.J = Math.round(xy.y);
+      } else {
+        params.X = Math.round(xy.x);
+        params.Y = Math.round(xy.y);
+      }
+      const url = wms.phoneUrl + '?' + Object.keys(params).map(k => `${k}=${encodeURIComponent(params[k])}`).join('&');
+      try {
+        const res = await fetch(url);
+        const data = await res.json();
+        console.log('>>>> data: ', data);
+        if (data && data.features && data.features.length > 0) {
+          props.onWmsFeatureClick && props.onWmsFeatureClick(data.features[0].properties, data.features[0].geometry);
+          break; // 找到就退出
+        }
+      } catch (err) {
+        // 忽略错误，继续下一个
+      }
+    }
+  };
+  // 修改setupMapEvents，增加WMS点击监听
   const setupMapEvents = (map: any) => {
-
     map.on('dragend', () => {
-      // >>>> 地图被拖动
       setFollowUserLocation(false);
     });
-
     map.on('zoomend', () => {
-      // >>>> 地图缩放
       setFollowUserLocation(false);
     });
-
-    map.on('click', () => {
-      // >>>> 地图被点击
+    map.on('click', (e: any) => {
+      console.log('>>>> mapClick:');
       setFollowUserLocation(false);
+      handleMapClickForWMS(e);
     });
   };
 
@@ -456,7 +514,7 @@ const AMapComponent = React.forwardRef<any, AMapType.Props>((props, ref) => {
         });
 
         setAMap(AMap);
-        setMap(_map);
+        mapRef.current = _map;
 
         // 确保地图完全加载后再设置事件监听
         _map.on('complete', () => {
@@ -475,10 +533,10 @@ const AMapComponent = React.forwardRef<any, AMapType.Props>((props, ref) => {
 
         // 管线初始化
         if (wmsJSON != null) {
-          const layer = {}
-          wmsJSON.layers.forEach((item: { layerName: string | number; phoneShow: any; }) => {
+          const layer: Record<string, any> = {}
+          wmsJSON.layers.forEach((item: { layerName: string | number; phoneShow: any; value?: any; }) => {
             const wmsTileLayer = getWms(item.layerName, wmsJSON)
-            layer[item.layerName] = {
+            layer[item.layerName as string] = {
               isShow: item.phoneShow,
               wms: wmsTileLayer,
               layerName: item.layerName,
@@ -507,10 +565,10 @@ const AMapComponent = React.forwardRef<any, AMapType.Props>((props, ref) => {
   }, [props.mapId, props.wmsJSON, realTime]);
 
   useEffect(() => {
-    if (getMap) {
+    if (mapRef.current) {
       upMapOnData();
     }
-  }, [props.rowData, getMap]);
+  }, [props.rowData, mapRef.current]);
 
   useEffect(() => {
     positionPickerStartAndStop(getPositionPicker);
@@ -594,7 +652,7 @@ const AMapComponent = React.forwardRef<any, AMapType.Props>((props, ref) => {
           </button>
 
           {/* 只在展开状态下显示层按钮 */}
-          {!isCollapsed && mapLayers && mapLayers.map(layer => (
+          {!isCollapsed && mapLayers && mapLayers.map((layer: any) => (
             <button
               key={layer.layerName}
               onClick={() => toggleLayer(layer.layerName, layer)}

package/src/components/AMap/typing.d.ts

@@ -1,36 +1,41 @@
-import { CSSProperties } from "react";
-declare namespace AMapType {
-    type RowData = {
-        f_longitude: number; // 经度
-        f_latitude: number; // 纬度
-        f_title?: any; // 显示标题
-        f_context?: any; // 显示内容
-        f_icon?: any; // 图标
-        f_label?: any; // 标题
-        f_isclose_window?: boolean | undefined; // 是否点击图标按钮打开对应的窗口[true不显示 false显示]
-        callBack?: (event: any, rowData: any) => void;
-        windowEventClassAndCallback?: Array<{ class: string, callback: (event: any, rowData: any) => void }>; // 参数1 自定义windw监听的class值 参数2 自定义windw的回调事件
-        labelStyle?: TextStyle | undefined; // 标题样式
-        [key: string]: any; //其他扩展内容
-    }
-
-    type dragMapSettingType = {
-        mapModel: "dragMarker" | "dragMap" //地图模式 点拖拽和地图拖拽
-        dragMapSuccessCallBack?: (rowData: any) => void //地图选点成功
-        dragMapFailCallBack?: (rowData: any) => void //地图选点失败
-        isGetLocation: boolean //是否获取当前位置信息
-        getLoactionSuccessCallBack?: (rowData: any) => void // 获取当前位置信息成功
-        getLoactionFailCallBack?: (rowData: any) => void // 获取当前位置信息失败
-    }
-
-    type Props = {
-        realTime?: number | undefined
-        mapStyle?: CSSProperties | undefined;
-        mapId?: string | undefined;
-        rowData: Array<RowData>;
-        dragMapSetting?: dragMapSettingType;
-        wmsJSON?: JSON | {}
-        showLayersPanel?: boolean;
-    }
-
-}
+import { CSSProperties } from "react";
+declare namespace AMapType {
+    type RowData = {
+        f_longitude: number; // 经度
+        f_latitude: number; // 纬度
+        f_title?: any; // 显示标题
+        f_context?: any; // 显示内容
+        f_icon?: any; // 图标
+        f_label?: any; // 标题
+        f_isclose_window?: boolean | undefined; // 是否点击图标按钮打开对应的窗口[true不显示 false显示]
+        callBack?: (event: any, rowData: any) => void;
+        windowEventClassAndCallback?: Array<{ class: string, callback: (event: any, rowData: any) => void }>; // 参数1 自定义windw监听的class值 参数2 自定义windw的回调事件
+        labelStyle?: TextStyle | undefined; // 标题样式
+        [key: string]: any; //其他扩展内容
+    }
+
+    type dragMapSettingType = {
+        mapModel: "dragMarker" | "dragMap" //地图模式 点拖拽和地图拖拽
+        dragMapSuccessCallBack?: (rowData: any) => void //地图选点成功
+        dragMapFailCallBack?: (rowData: any) => void //地图选点失败
+        isGetLocation: boolean //是否获取当前位置信息
+        getLoactionSuccessCallBack?: (rowData: any) => void // 获取当前位置信息成功
+        getLoactionFailCallBack?: (rowData: any) => void // 获取当前位置信息失败
+    }
+
+    type Props = {
+        realTime?: number | undefined
+        mapStyle?: CSSProperties | undefined;
+        mapId?: string | undefined;
+        rowData: Array<RowData>;
+        dragMapSetting?: dragMapSettingType;
+        wmsJSON?: any;
+        showLayersPanel?: boolean;
+        mapLayers?: Array<any>;
+        /**
+         * 点击 WMS 图层要素时的回调，返回 feature 属性
+         */
+        onWmsFeatureClick?: (featureProps: any, geometry: any) => void;
+    }
+
+}

package/src/components/SubmitForm/index.tsx

@@ -1,133 +1,138 @@
-// @ts-ignore
-import {
-  Button,
-  Form,
-  FormItemProps,
-  FormProps,
-  Input,
-  InputProps,
-  TextArea,
-  TextAreaProps,
-} from 'antd-mobile';
-import { FormInstance } from 'rc-field-form/es/interface';
-import React, { ReactNode } from 'react';
-import './index.less';
-import XSelectPicker, { XSelectProps } from '../XSelectPicker';
-import XDatePicker, { XDatePickerProps } from '../XDatePicker';
-import XLngLatAddress, { XLngLatAddressProps } from '../XLngLatAddress';
-import XImageUpload, { XImageUploadProps } from '../XImageUpload';
-import XSelectList, { XSelectListProps } from '../XSelectList';
-import { generateUUID } from '../../utils/util';
-export type RenderFormProps = FormProps & {
-  items: Array<FormItem>;
-  title?: ReactNode;
-  id?: string;
-  onFinish?: (values: any) => void;
-  onValuesChange?: (changedValues: any, allValues: any) => void; // 添加这一行
-  initialValues?: Record<string, any>;
-  form?: FormInstance<any>;
-  children?: React.ReactNode;
-  hiddenSearch?: boolean;
-  buttonText?: ReactNode;
-  disabled?: boolean;
-};
-export type FormItem = FormItemProps & {
-  type:
-    | 'input'
-    | 'select'
-    | 'textarea'
-    | 'date'
-    | 'lnglat'
-    | 'image'
-    | 'selectlist';
-  name: string;
-  label: string;
-  props?:
-    | InputProps
-    | XSelectProps
-    | XDatePickerProps
-    | XLngLatAddressProps
-    | XImageUploadProps
-    | TextAreaProps
-    | XSelectListProps;
-};
-const RenderForm: React.FC<RenderFormProps> = (props) => {
-  const {
-    items,
-    title,
-    form,
-    buttonText,
-    onFinish,
-    children,
-    initialValues,
-    disabled = false,
-    hiddenSearch = false,
-    id = generateUUID(),
-  } = props;
-  function wrapperItem(Component: any, item: FormItem, placeholder?: string) {
-    const { name, label, props } = item;
-    return (
-      <div id={id + name} key={id + name}>
-        <Form.Item {...item}>
-          <Component {...props} placeholder={placeholder + label}></Component>
-        </Form.Item>
-      </div>
-    );
-  }
-  const [newForm] = Form.useForm(form);
-  return (
-    <div className="add-render">
-      <Form
-        {...props}
-        form={newForm}
-        initialValues={initialValues}
-        onFinish={onFinish}
-        onValuesChange={props.onValuesChange} // 添加这一行
-        disabled={disabled}
-        className={hiddenSearch ? '' : 'add-render-form'}
-        // {...hiddenConfig}
-      >
-        {title && <Form.Header>{title}</Form.Header>}
-        {items.map((item: FormItem) => {
-          const { type } = item;
-          switch (type) {
-            case 'input':
-              return wrapperItem(Input, item, '请输入');
-            case 'select':
-              return wrapperItem(XSelectPicker, item, '请选择');
-            case 'textarea':
-              return wrapperItem(TextArea, item, '请输入');
-            case 'date':
-              return wrapperItem(XDatePicker, item, '请选择');
-            case 'lnglat':
-              return wrapperItem(XLngLatAddress, item, '请选择');
-            case 'image':
-              return wrapperItem(XImageUpload, item);
-            case 'selectlist':
-              return wrapperItem(XSelectList, item, '请选择');
-            default:
-              return <></>;
-          }
-        })}
-        {children}
-      </Form>
-      {hiddenSearch ? (
-        <></>
-      ) : (
-        <div style={{ padding: '15px 10px' }}>
-          <Button
-            block
-            type="submit"
-            color="primary"
-            size="middle"
-            onClick={() => newForm.submit()}
-          >
-            {buttonText || '提交'}
-          </Button>
-        </div>
-      )}
-    </div>
-  );
-};
-
-export default RenderForm;
+// @ts-ignore
+import {
+  Button,
+  Form,
+  FormItemProps,
+  FormProps,
+  Input,
+  InputProps,
+  TextArea,
+  TextAreaProps,
+} from 'antd-mobile';
+import { FormInstance } from 'rc-field-form/es/interface';
+import React, { ReactNode } from 'react';
+import './index.less';
+import XSelectPicker, { XSelectProps } from '../XSelectPicker';
+import XDatePicker, { XDatePickerProps } from '../XDatePicker';
+import XLngLatAddress, { XLngLatAddressProps } from '../XLngLatAddress';
+import XImageUpload, { XImageUploadProps } from '../XImageUpload';
+import XSelectList, { XSelectListProps } from '../XSelectList';
+import XAMap, { XAMapProps } from '../XAMap';
+import { generateUUID } from '../../utils/util';
+export type RenderFormProps = FormProps & {
+  items: Array<FormItem>;
+  title?: ReactNode;
+  id?: string;
+  onFinish?: (values: any) => void;
+  onValuesChange?: (changedValues: any, allValues: any) => void; // 添加这一行
+  initialValues?: Record<string, any>;
+  form?: FormInstance<any>;
+  children?: React.ReactNode;
+  hiddenSearch?: boolean;
+  buttonText?: ReactNode;
+  disabled?: boolean;
+};
+export type FormItem = FormItemProps & {
+  type:
+    | 'input'
+    | 'select'
+    | 'textarea'
+    | 'date'
+    | 'lnglat'
+    | 'image'
+    | 'selectlist'
+    | 'aMap';
+  name: string;
+  label: string;
+  props?:
+    | InputProps
+    | XSelectProps
+    | XDatePickerProps
+    | XLngLatAddressProps
+    | XImageUploadProps
+    | TextAreaProps
+    | XSelectListProps
+    | XAMapProps;
+};
+const RenderForm: React.FC<RenderFormProps> = (props) => {
+  const {
+    items,
+    title,
+    form,
+    buttonText,
+    onFinish,
+    children,
+    initialValues,
+    disabled = false,
+    hiddenSearch = false,
+    id = generateUUID(),
+  } = props;
+  function wrapperItem(Component: any, item: FormItem, placeholder?: string) {
+    const { name, label, props } = item;
+    return (
+      <div id={id + name} key={id + name}>
+        <Form.Item {...item}>
+          <Component {...props} placeholder={placeholder + label}></Component>
+        </Form.Item>
+      </div>
+    );
+  }
+  const [newForm] = Form.useForm(form);
+  return (
+    <div className="add-render">
+      <Form
+        {...props}
+        form={newForm}
+        initialValues={initialValues}
+        onFinish={onFinish}
+        onValuesChange={props.onValuesChange} // 添加这一行
+        disabled={disabled}
+        className={hiddenSearch ? '' : 'add-render-form'}
+        // {...hiddenConfig}
+      >
+        {title && <Form.Header>{title}</Form.Header>}
+        {items.map((item: FormItem) => {
+          const { type } = item;
+          switch (type) {
+            case 'input':
+              return wrapperItem(Input, item, '请输入');
+            case 'select':
+              return wrapperItem(XSelectPicker, item, '请选择');
+            case 'textarea':
+              return wrapperItem(TextArea, item, '请输入');
+            case 'date':
+              return wrapperItem(XDatePicker, item, '请选择');
+            case 'lnglat':
+              return wrapperItem(XLngLatAddress, item, '请选择');
+            case 'image':
+              return wrapperItem(XImageUpload, item);
+            case 'selectlist':
+              return wrapperItem(XSelectList, item, '请选择');
+            case 'aMap':
+              return wrapperItem(XAMap, item, '点击查看');
+            default:
+              return <></>;
+          }
+        })}
+        {children}
+      </Form>
+      {hiddenSearch ? (
+        <></>
+      ) : (
+        <div style={{ padding: '15px 10px' }}>
+          <Button
+            block
+            type="submit"
+            color="primary"
+            size="middle"
+            onClick={() => newForm.submit()}
+          >
+            {buttonText || '提交'}
+          </Button>
+        </div>
+      )}
+    </div>
+  );
+};
+
+export default RenderForm;