@hzab/form-render 1.6.12 → 1.6.13

package/CHANGELOG.md

@@ -1,3 +1,7 @@
+# @hzab/form-render@1.6.13
+
+feat:locationListPicker在已有元素范围内可新增地址标记
+
 # @hzab/form-render@1.6.12
 
 feat: PersonnelSelect组件优化传值方式，支持复数据传入、返回

package/package.json

@@ -1,11 +1,12 @@
 {
   "name": "@hzab/form-render",
-  "version": "1.6.12",
+  "version": "1.6.13",
   "description": "",
   "main": "src",
   "scripts": {
     "dev": "webpack serve -c ./config/webpack.config.js --env local",
     "build": "webpack -c ./config/webpack.config.js --env production",
+    "publish-beta": "npm publish --beta",
     "publish-patch": "npm version patch && npm publish --access public",
     "publish-minor": "npm version minor && npm publish --access public",
     "publish-major": "npm version major && npm publish --access public"

package/src/components/LocationListPicker/index.tsx

@@ -89,7 +89,7 @@ export const LocationListPicker = observer((props) => {
           data: item,
           onClick: onMarkerClick,
         });
-        mapUtilsRef.current.setCircle(item.longitude, item.latitude, item.range, { ...item });
+        mapUtilsRef.current.setCircle(item.longitude, item.latitude, item.range, { ...item, onClick: handleMarker });
       }
     });
     mapUtilsRef.current.setFitView();
@@ -199,8 +199,14 @@ export const LocationListPicker = observer((props) => {
     clearStatus();
   }
 
+
+  // 地图单击除现有元素范围外添加点位地址
+  function onMapClick(e) {
+    mapUtilsRef.current.isContains(e, handleMarker);
+  }
+
   // 处理 marker、范围 绘制填写逻辑
-  async function onMapClick(e) {
+  async function handleMarker(e) {
     if (drawType.current !== "marker") {
       return;
     }
@@ -297,18 +303,20 @@ export const LocationListPicker = observer((props) => {
   }
 
   function onPolygonClick(e) {
-    if (!isEditingRef.current) {
+    if (!isEditingRef.current && statusRef.current !== "add") {
       drawType.current = "polygon";
       const id = e.target.id;
       clearEdit(id);
       setActiveId(id);
       setActivePolygon(e.target);
+    } else if (statusRef.current === "add") {
+      handleMarker(e);
     }
   }
 
   function onMarkerClick(e, ...args) {
     clearActive();
-    if (!isEditingRef.current) {
+    if (!isEditingRef.current && statusRef.current !== "add") {
       setShowTip(false);
       isEditingRef.current = false;
       const { id } = e.target.getExtData() || {};
@@ -412,7 +420,7 @@ export const LocationListPicker = observer((props) => {
     } else {
       setTipText("点击选择地址");
       setActiveMarkerIcon(item.id);
-      onMapClick({
+      handleMarker({
         lnglat: {
           lng: item.longitude,
           lat: item.latitude,
@@ -458,7 +466,7 @@ export const LocationListPicker = observer((props) => {
   function setPoint(lng, lat) {
     mapUtilsRef.current.setCenter(lng, lat, { immediately: true });
     statusRef.current = "add";
-    onMapClick({
+    handleMarker({
       lnglat: {
         lng,
         lat,

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

@@ -59,7 +59,7 @@ export class MapUtils {
     PolygonEditor: undefined,
     PolylineEditor: undefined,
   };
-  public polygonEnum;
+  public polygonEnum = {};
   public polygonConf;
   public mapDomRef;
 
@@ -332,7 +332,7 @@ export class MapUtils {
   }
 
   setCircle(lon, lat, radius, opt?) {
-    const { id = nanoid(), circle, map = this.map, AMap = this.AMap, circleConf = {} } = opt || {};
+    const { id = nanoid(), circle, map = this.map, AMap = this.AMap, onClick, circleConf = {} } = opt || {};
     if (!(AMap && map)) {
       throw new Error("请传入地图实例和 AMap");
     }
@@ -362,9 +362,10 @@ export class MapUtils {
       strokeWeight: 1, // 轮廓线宽度
       fillOpacity: 0.1, // 圆形填充透明度
       fillColor: "#0080FF", // 圆形填充颜色
-      zIndex: 50, // 圆形的叠加顺序
+      zIndex: 100, // 圆形的叠加顺序
       ...circleConf,
     });
+    _c.on("click", onClick);
     this.circles[id] = _c;
     map?.add(_c);
     return _c;
@@ -375,6 +376,22 @@ export class MapUtils {
     delete this.circles[id];
   }
 
+
+  // 判断当前点击点位是否在地图现有元素范围内，并回调函数返回值
+  isContains(e, callBack) {
+    const element = {
+      ...this.circles,
+      ...this.polygonEnum,
+    };
+    const { lng, lat } = e.lnglat || {};
+    const point = new this.AMap.LngLat(lng, lat);
+    const isRange = Object.keys(element).some((key) => element[key].contains(point));
+    if (!isRange) {
+      callBack && callBack(e);
+    }
+    return isRange;
+  }
+
   /**
    * 创建或修改地图选点的 Marker
    * 在当前 utils 中唯一