@hzab/form-render 1.3.2 → 1.4.0-beta

package/src/components/LocationPicker/Map/AMap/common/loader.ts

@@ -1,5 +1,5 @@
 const defaultVersion = "2.0";
-const defaultPlugins = ["AMap.Geocoder", "AMap.AutoComplete"];
+const defaultPlugins = ["AMap.Geocoder", "AMap.AutoComplete", "AMap.PolygonEditor", "AMap.PolylineEditor"];
 
 if (!window._AMapLoaderTemp) {
   window._AMapLoaderTemp = {};

package/src/components/LocationPicker/Map/AMap/common/utils.ts

@@ -1,6 +1,8 @@
+import * as turf from "@turf/turf";
+import { nanoid } from "nanoid";
+
 import AMapLoader from "./loader";
 import { markerIconBase64 } from "../../../assets/svg-icon";
-import { nanoid } from "nanoid";
 
 if (!window._AMapLoaderTemp) {
   window._AMapLoaderTemp = {};
@@ -53,8 +55,15 @@ export class MapUtils {
   public pickerMarker;
   public markerIconConf;
   public markerConf;
+  public polyEditor = {
+    PolygonEditor: undefined,
+    PolylineEditor: undefined,
+  };
+  public polygonEnum;
+  public polygonConf;
+  public mapDomRef;
 
-  constructor({ map, AMap, markerIconConf, markerConf }) {
+  constructor({ map, AMap, mapDomRef, markerIconConf, markerConf, polygonConf }) {
     if (!map) {
       throw new Error("请传入地图实例");
     }
@@ -62,6 +71,9 @@ export class MapUtils {
     this.AMap = AMap;
     this.markerIconConf = markerIconConf || {};
     this.markerConf = markerConf || {};
+    this.polygonEnum = {};
+    this.polygonConf = polygonConf || {};
+    this.mapDomRef = mapDomRef;
   }
 
   /**
@@ -127,6 +139,7 @@ export class MapUtils {
       console.warn("setMarker 请传入正确的经纬度");
       return;
     }
+
     const position = new AMap.LngLat(lon, lat);
     let _marker = marker || this.markers[id];
 
@@ -167,6 +180,114 @@ export class MapUtils {
     return _m;
   }
 
+  /**
+   * 创建绘制实例
+   */
+  createPoly(element) {
+    if (element !== "Polypoint") {
+      // 同时绘制多种形状问题修复
+      if (this.polyEditor[`${element}Editor`]) {
+        return this.polyEditor[`${element}Editor`];
+      }
+      this.polyEditor[`${element}Editor`] = new this.AMap[`${element}Editor`](this.map, undefined, {
+        createOptions: {
+          strokeColor: "#1791fc",
+          strokeWeight: 2,
+          fillOpacity: 0.4,
+          fillColor: "#1791fc",
+        },
+        editOptions: {
+          strokeColor: "#1791fc",
+          strokeWeight: 2,
+          fillOpacity: 0.4,
+          fillColor: "#1791fc",
+        },
+        ...this.polygonConf,
+      });
+    }
+  }
+
+  /**
+   * 按points绘制元素实例
+   */
+  setPolygon(opt) {
+    const { points, id, onClick, element = "Polygon", map = this.map, AMap = this.AMap } = opt;
+
+    if (!(AMap && map)) {
+      throw new Error("请传入地图实例和 AMap");
+    }
+
+    const marker = this.polygonEnum[id];
+    if (marker) {
+      return;
+    }
+
+    const graphical = new this.AMap[element]({
+      path: points,
+      strokeColor: "#1791fc",
+      strokeWeight: 2,
+      fillOpacity: 0.4,
+      fillColor: "#1791fc",
+    });
+
+    graphical.id = id;
+    // 多边形绘制完毕保存中心点
+    graphical.path = points;
+    graphical.center = this.getPolygonCenter(points);
+    this.polygonEnum[id] = graphical;
+    this.map.add([graphical]);
+    graphical.on("click", onClick);
+  }
+
+  /**
+   * 创建手动绘制实例
+   */
+  startPolygon(opt) {
+    const { onClick, element = "Polygon" } = opt;
+    this.polyEditor[`${element}Editor`].on("add", (data) => {
+      const id = nanoid();
+      data.target.id = id;
+      const graphical = data.target;
+      this.polygonEnum[id] = graphical;
+      graphical.on("click", onClick);
+    });
+
+    this.polyEditor[`${element}Editor`].on("end", (data) => {
+      // 多边形绘制完毕保存中心点
+      const graphical = data.target;
+      if (graphical.type === "AMap.Overlay") {
+        graphical.path = graphical.getPath().map((item) => [item.lng, item.lat]);
+        graphical.center = this.getPolygonCenter(graphical.path);
+      }
+    });
+  }
+
+  /**
+   * 手动开始绘制函数
+   */
+  setDrawPolygon({ map = this.map, AMap = this.AMap, element = "Polygon" }) {
+    if (!(AMap && map)) {
+      throw new Error("请传入地图实例和 AMap");
+    }
+    this.polyEditor[`${element}Editor`].close();
+    this.polyEditor[`${element}Editor`].setTarget();
+    this.polyEditor[`${element}Editor`].open();
+  }
+
+  /**
+   * 编辑态
+   * @param item
+   */
+  setEditPolygon({ id, element = "Polygon" }) {
+    const target = this.polygonEnum[id];
+    if (!target) {
+      console.warn("setEditPolygon 找不到目标对象：", id);
+      return;
+    }
+    this.polyEditor[`${element}Editor`].setTarget(target);
+    this.polyEditor[`${element}Editor`].open();
+  }
+
   setMarkerIcon(
     id,
     opt = {
@@ -194,6 +315,13 @@ export class MapUtils {
     marker.setOffset(new AMap.Pixel(...offset));
   }
 
+  rmPolygon(id, element = "Polygon") {
+    this.map.remove(this.polygonEnum[id]);
+    this.polyEditor[`${element}Editor`].close();
+    this.polyEditor[`${element}Editor`].setTarget();
+    delete this.polygonEnum[id];
+  }
+
   /**
    * 删除指定 marker
    * @param id
@@ -256,11 +384,22 @@ export class MapUtils {
    * @returns
    */
   setPickerMarker(lon, lat, opt?: any) {
-    const { marker = this.pickerMarker } = opt || {};
-    this.pickerMarker = this.setMarker(lon, lat, {
-      ...opt,
-      marker,
-    });
+    if (lon && lat) {
+      const { marker = this.pickerMarker } = opt || {};
+      this.pickerMarker = this.setMarker(lon, lat, {
+        ...opt,
+        marker,
+      });
+    }
+  }
+
+  getPolygonCenter(coordinate) {
+    if (coordinate.length > 0) {
+      let features = turf.featureCollection(coordinate.map((item) => turf.point(item)));
+      let center = turf.center(features).geometry.coordinates;
+      return center;
+    }
+    return [];
   }
 
   on(...args) {

package/src/components/LocationPicker/Map/AMap/index.jsx

@@ -27,12 +27,13 @@ function AMapCom(props) {
       mapRef.current = new AMap.Map(mapDomRef.current, {
         zoom: zoom || 14,
         center: center || [120.160217, 30.243861],
+        doubleClickZoom: false,
       });
       init &&
         init({
           mapDomRef,
           map: mapRef.current,
-          mapUtils: new MapUtils({ map: mapRef.current, AMap, markerIconConf }),
+          mapUtils: new MapUtils({ map: mapRef.current, AMap, markerIconConf, mapDomRef }),
           AMap,
         });
     });

package/src/components/LocationPicker/README.md

@@ -22,6 +22,7 @@ export default function AMap(props) {
 | 参数               | 类型    | 必填 | 默认值    | 说明                                             |
 | ------------------ | ------- | ---- | --------- | ------------------------------------------------ |
 | mode               | string  | 否   | dialog    | 地图显示的类型， dialog 弹窗显示、 show 直接显示 |
+| element            | string  | 否   | Polypoint | 地图绘制的元素名Polypoint&Polyline&Polygon |
 | layout             | string  | 否   | ver       | 选择器和地图的布局 hor 水平、 ver 垂直           |
 | hasSearch          | boolean | 否   | true      | 是否允许搜索                                     |
 | isAutoFixAddr      | boolean | 否   | false     | 打开地图时是否根据经纬度自动修正已填的地址       |

package/src/components/LocationPicker/common/utils.ts

@@ -11,15 +11,18 @@
     }
  */
 export function getPropsValue(value = {}, opt) {
-  const { lonKey = "longitude", latKey = "latitude", addrKey = "address" } = opt || {};
+  const { lonKey = "longitude", latKey = "latitude", addrKey = "address", pointsKey = "points" } = opt || {};
+
   let lon = value[lonKey];
   let lat = value[latKey];
   let addr = value[addrKey];
-  // 数据和其他子项平级的情况
+  let points = value[pointsKey];
+
   const res = {
     lon,
     lat,
     addr,
+    points
   };
   return res;
 }

package/src/components/LocationPicker/components/ModalContent/index.tsx

@@ -19,6 +19,7 @@ import "./index.less";
 export const ModalContent = observer((props: any) => {
   const {
     mode,
+    element = "Polypoint",
     /**
      * 选择器和地图的布局
      * 水平 输入框在前 hor
@@ -36,6 +37,7 @@ export const ModalContent = observer((props: any) => {
     lonKey = "longitude",
     latKey = "latitude",
     addrKey = "address",
+    pointsKey = "points",
     value,
     // 搜索框是否自动搜索
     isAutoSearch = true,
@@ -48,6 +50,7 @@ export const ModalContent = observer((props: any) => {
     icons,
     markerIconConf,
     getCurPositionConf,
+    init,
   } = props;
 
   const mapUtilsRef = useRef<MapUtils>();
@@ -59,8 +62,9 @@ export const ModalContent = observer((props: any) => {
         lonKey,
         latKey,
         addrKey,
+        pointsKey,
       }),
-    [lonKey, latKey, addrKey, value, value?.[lonKey], value?.[latKey], value?.[addrKey]],
+    [lonKey, latKey, addrKey, pointsKey, value, value?.[pointsKey], value?.[lonKey], value?.[latKey], value?.[addrKey]],
   );
 
   const [loading, setLoading] = useState(props.loading || false);
@@ -81,6 +85,7 @@ export const ModalContent = observer((props: any) => {
       // mode === 'show' 的情况
       let _lon = formatVal.lon;
       let _lat = formatVal.lat;
+      let _points = formatVal.points;
       formatValRef.current = {
         ...formatVal,
       };
@@ -88,12 +93,20 @@ export const ModalContent = observer((props: any) => {
         // 解决关闭弹窗之后点位不居中的问题
         if (window.AMap && window.AMap.LngLat) {
           setMapCenter(_lon, _lat);
-          setPickPoint(_lon, _lat, { isAutoFixAddr: false, addr: formatVal.addr });
+          if (element === "Polypoint") {
+            setPickPoint(_lon, _lat, { isAutoFixAddr: false, addr: formatVal.addr });
+          } else {
+            setDrawEditor(_points || []);
+          }
         } else {
           // 解决刷新页面 AMap 未加载导致的异常问题
           window._AMapLoaderTemp?.promise?.then(() => {
             setMapCenter(_lon, _lat);
-            setPickPoint(_lon, _lat, { isAutoFixAddr: false, addr: formatVal.addr });
+            if (element === "Polypoint") {
+              setPickPoint(_lon, _lat, { isAutoFixAddr: false, addr: formatVal.addr });
+            } else {
+              setDrawEditor(_points || []);
+            }
           });
         }
       }
@@ -101,6 +114,7 @@ export const ModalContent = observer((props: any) => {
       // 处理弹窗展示数据回显逻辑
       let _lon = defaultLocation.lon;
       let _lat = defaultLocation.lat;
+      let _points = defaultLocation.points || [];
       let addr = defaultLocation.addr;
       if (formatVal.lon && formatVal.lat) {
         _lon = formatVal.lon;
@@ -117,40 +131,119 @@ export const ModalContent = observer((props: any) => {
         });
       }
       if (_lon && _lat && _lon !== pickerInfoRef.current?.lon && _lat !== pickerInfoRef.current?.lat) {
-        setPickPoint(_lon, _lat, { isAutoFixAddr: false, addr: addr });
+        if (element === "Polypoint") {
+          setPickPoint(_lon, _lat, { isAutoFixAddr: false, addr: addr });
+        } else {
+          setDrawEditor(_points || []);
+        }
+      }
+    }
+    init({ editDone: onMapDbClick });
+    return () => {
+      // 取消监听
+      mapUtilsRef.current?.off("dblclick", onMapDbClick);
+      mapUtilsRef.current?.off("click", onClickMap);
+    };
+  }, []);
+
+  async function onMapDbClick() {
+    if (element !== "Polypoint") {
+      const graphical = mapUtilsRef.current.polyEditor[`${element}Editor`].getTarget();
+      if (graphical) {
+        const points = graphical.getPath().map((item) => [item.lng, item.lat]);
+        const center = mapUtilsRef.current.getPolygonCenter(points);
+        const addr = await getAddr(center[0], center[1]);
+        mapUtilsRef.current.polyEditor[`${element}Editor`].close();
+        mapUtilsRef.current.polyEditor[`${element}Editor`].setTarget();
+        props.setPickInfo &&
+          props.setPickInfo({
+            points,
+            addr,
+            lon: center[0],
+            lat: center[1],
+          });
+        setPickInfo({
+          points,
+          addr,
+          lon: center[0],
+          lat: center[1],
+        });
       }
     }
-  }, [visibleKey, formatVal, isShowMode]);
+  }
 
   function mapInit({ map, mapUtils }) {
     mapUtilsRef.current = mapUtils;
+    mapUtilsRef.current.on("dblclick", onMapDbClick);
     let _lon = defaultLocation.lon;
     let _lat = defaultLocation.lat;
+    let _points = defaultLocation.points;
     if (pickInfo.lon && pickInfo.lat) {
       _lon = pickInfo.lon;
       _lat = pickInfo.lat;
+      _points = pickInfo.points;
     } else if (formatValRef.current?.lon && formatValRef.current?.lat) {
       _lon = formatValRef.current?.lon;
       _lat = formatValRef.current?.lat;
+      _points = formatValRef.current?.points;
     }
 
     setMapCenter(_lon, _lat);
 
     setLoading(props.loading || false);
-
     if (!(disabled || readOnly)) {
-      mapUtilsRef.current?.setPickerMarker(_lon, _lat);
-      // 点击选中点位的情况
-      mapUtilsRef.current.on("click", function (ev) {
-        const { lng: evLon, lat: evLat } = ev.lnglat || {};
-        setPickPoint(evLon, evLat, { changeCenter: true });
-      });
+      if (element === "Polypoint") {
+        mapUtilsRef.current?.setPickerMarker(_lon, _lat);
+        // 点击选中点位的情况
+        mapUtilsRef.current.on("click", onClickMap);
+      } else {
+        mapUtilsRef.current?.createPoly(element);
+        if (_points.length == 0) {
+          mapUtilsRef.current?.startPolygon({
+            onClick: onPolygonClick,
+            element,
+          });
+          mapUtilsRef.current.setDrawPolygon({ element });
+        }
+        setDrawEditor(_points);
+      }
     } else {
       // 禁用、只读情况使用 marker 展示点位
-      mapUtilsRef.current?.setPickerMarker(_lon, _lat);
+      if (element === "Polypoint") {
+        mapUtilsRef.current?.setPickerMarker(_lon, _lat);
+      } else {
+        setDrawEditor(_points, true);
+      }
     }
   }
 
+  function onClickMap(ev) {
+    const { lng: evLon, lat: evLat } = ev.lnglat || {};
+    if (element === "Polypoint") {
+      console.log(evLon, evLat);
+      setPickPoint(evLon, evLat, { changeCenter: true });
+    }
+  }
+
+  function setDrawEditor(_points, disabled = false) {
+    if (!mapUtilsRef.current) {
+      return;
+    }
+    mapUtilsRef.current?.createPoly(element);
+    if (_points && _points.length > 0) {
+      const graphical = mapUtilsRef.current?.setPolygon({
+        points: _points,
+        id: "setDrawEditor",
+        element,
+        onClick: !disabled && onPolygonClick,
+      });
+    }
+  }
+
+  function onPolygonClick(e) {
+    mapUtilsRef.current.setEditPolygon({ ...e.target, element });
+  }
+
   /**
    * 设置地图中心点
    * @param lon
@@ -228,33 +321,27 @@ export const ModalContent = observer((props: any) => {
   // 展示获取当前定位按钮 props.showGetPositionBtn !== false 且非禁用、只读模式
   const showGetPositionBtn = props.showGetPositionBtn !== false && !(disabled || readOnly);
 
-  const pickInfoRender = function () {
-    /* 点击/移动 地图选中的数据 */
-    return (
+  const { markerIcon, positionIcon, resetIcon } = icons || {};
+
+  return (
+    <div className={`location-picker-modal-content location-mode-${mode} location-modal-content-layout-${layout}`}>
       <PickerInfo
+        element={element}
         pickInfo={pickInfo}
         setPickInfo={setPickInfo}
         setPoint={setPickPoint}
         addrLoading={addrLoading}
         defaultLocation={defaultLocation}
         disabled={disabled}
-        readOnly={readOnly}
+        readOnly={element !== "Polypoint" ? true : readOnly}
       />
-    );
-  };
-
-  const { markerIcon, positionIcon, resetIcon } = icons || {};
-
-  return (
-    <div className={`location-picker-modal-content location-mode-${mode} location-modal-content-layout-${layout}`}>
-      {pickInfoRender()}
       <div className="location-picker-map-wrap">
         <div className="location-picker-map">
           {/* 关闭弹窗之后清除搜索内容 */}
-          {hasSearch ? (
+          {hasSearch && !disabled && !readOnly ? (
             <MapSearch
               key={visible}
-              setPoint={readOnly || disabled ? setMapCenter : setPickPoint}
+              setPoint={element !== "Polypoint" && (readOnly || disabled) ? setMapCenter : setPickPoint}
               isAutoSearch={isAutoSearch}
             />
           ) : null}
@@ -269,7 +356,7 @@ export const ModalContent = observer((props: any) => {
               )}
             </div>
             {/* 获取当前经纬度 */}
-            {showGetPositionBtn ? (
+            {showGetPositionBtn && element === "Polypoint" ? (
               <div className="actions-icon-box center-icon-box" onClick={getPosition}>
                 {typeof positionIcon === "string" ? (
                   <img className="center-icon" src={positionIcon} />

package/src/components/LocationPicker/components/PickerInfo/index.tsx

@@ -3,7 +3,16 @@ import { InputNumber, Spin } from "antd";
 import "./index.less";
 
 export const PickerInfo = (props) => {
-  const { pickInfo, setPickInfo, setPoint, addrLoading, defaultLocation, disabled, readOnly } = props;
+  const { element, pickInfo, setPickInfo, setPoint, addrLoading, defaultLocation, disabled, readOnly } = props;
+
+  if (element === "Polyline") {
+    const handlePoints = (points) => {
+      if (points && points.length > 0) {
+        return points.join(", ");
+      }
+    };
+    return <div>经纬度：[ {handlePoints(pickInfo.points)} ]</div>;
+  }
 
   function onPILonChange(e) {
     const val = e?.target?.value ?? e;

package/src/components/LocationPicker/components/ResInfo/index.less

@@ -1,8 +1,12 @@
 .location-value-box {
   .location-value-head-box {
     display: flex;
+
     .location-lon-lat {
       flex: 1;
+      white-space: nowrap;
+      overflow: hidden;
+      text-overflow: ellipsis;
     }
   }
 
@@ -10,12 +14,15 @@
     padding: 4px 0;
     padding-left: 5px;
     line-height: 1;
+
     &:focus {
       background: transparent;
     }
+
     .location-picker-icon-box {
       display: inline-block;
       margin-right: 4px;
+
       svg,
       img {
         width: 16px;
@@ -23,9 +30,10 @@
         vertical-align: middle;
       }
     }
+
     .location-picker-text {
       display: inline-block;
       vertical-align: middle;
     }
   }
-}
+}

package/src/components/LocationPicker/components/ResInfo/index.tsx

@@ -1,5 +1,5 @@
 import { useMemo } from "react";
-import { Button } from "antd";
+import { Button, Divider } from "antd";
 import { observer } from "@formily/react";
 
 import { pickerIcon as pickerIconDefault } from "../../assets/svg-icon";
@@ -13,7 +13,7 @@ import "./index.less";
  * @returns
  */
 export const ResInfo = observer((props: any) => {
-  const { onShow, lonKey, latKey, addrKey, value, pickerText = "选点", pickerIcon } = props || {};
+  const { onShow, lonKey, latKey, addrKey, pointsKey, value, pickerIcon, element } = props || {};
 
   // 数据格式转为内部格式，方便存取
   const formatVal = useMemo(
@@ -22,16 +22,30 @@ export const ResInfo = observer((props: any) => {
         lonKey,
         latKey,
         addrKey,
+        pointsKey,
       }),
-    [lonKey, latKey, addrKey, value, value?.[lonKey], value?.[latKey], value?.[addrKey]],
+    [lonKey, latKey, addrKey, value, pointsKey, value?.[pointsKey], value?.[lonKey], value?.[latKey], value?.[addrKey]],
   );
 
+  const handlePoints = (points) => {
+    if (points && points.length > 0) {
+      return points.join(", ");
+    }
+  };
+
   return (
     <div className="location-value-box">
       <div className="location-value-head-box">
         <div className="location-lon-lat">
-          <div>经度：{formatVal.lon} </div>
-          <div>纬度：{formatVal.lat}</div>
+          {element === "Polyline" ? (
+            <div>经纬度：[ {handlePoints(formatVal.points)} ]</div>
+          ) : (
+            <div>
+              <div>经度：{formatVal.lon} </div>
+              <div>纬度：{formatVal.lat}</div>
+              <div>地址：{formatVal.addr}</div>
+            </div>
+          )}
         </div>
         <Button className="location-btn" color="primary" type="text" onClick={onShow}>
           <span className="location-picker-icon-box">
@@ -41,10 +55,9 @@ export const ResInfo = observer((props: any) => {
               pickerIcon || pickerIconDefault
             )}
           </span>
-          <span className="location-picker-text">{pickerText}</span>
+          <span className="location-picker-text">{element === "Polypoint" ? "选点" : "绘制"}</span>
         </Button>
       </div>
-      <div>地址：{formatVal.addr}</div>
     </div>
   );
 });