@hzab/form-render 1.6.18 → 1.6.20

package/src/components/LocationListPicker/index.tsx

@@ -1,520 +1,521 @@
-// @ts-nocheck
-import { useEffect, useRef, useState } from "react";
-import { Button, message, Alert } from "antd";
-import { observer } from "@formily/react";
-import * as turf from "@turf/turf";
-import { nanoid } from "nanoid";
-
-import AddrList from "./components/AddrList";
-import Popup from "./components/Popup";
-
-import AMapCom from "../LocationPicker/Map/AMap";
-import MapSearch from "../LocationPicker/components/MapSearch";
-import { MapUtils } from "../LocationPicker/Map/AMap/common/utils";
-import { getAddress } from "../LocationPicker/servers";
-import { markerIconBase64 } from "../LocationPicker/assets/svg-icon";
-
-import { iconCircle0080ff } from "./assets/icon";
-
-import "./index.less";
-
-export const LocationListPicker = observer((props) => {
-  const {
-    value,
-    readOnly,
-    disabled,
-    listProps,
-    popupProps,
-    ItemRender,
-    markerIconConf,
-    isAutoSearch,
-    /** 是否支持新增多边形 */
-    hasPolygon,
-    /** 是否支持新增点位 */
-    hasPoint = true,
-    onChange,
-  } = props;
-
-  const [loading, setLoading] = useState(props.loading || false);
-  const [showTip, setShowTip] = useState(false);
-  const [tipText, setTipText] = useState("点击选择地址");
-  const [tipPosition, setTipPosition] = useState({});
-  const [activeId, setActiveId] = useState();
-  const mapDomRef = useRef();
-  const mapUtilsRef = useRef<MapUtils>();
-  const listRef = useRef(value);
-  const statusRef = useRef();
-  const drawType = useRef("marker");
-  const currentItemRef = useRef();
-  const popupRef = useRef();
-  const isEditingRef = useRef();
-  const mapBoxRef = useRef(null);
-
-  useEffect(() => {
-    return () => {
-      // 取消监听
-      mapUtilsRef.current?.off("click", onMapClick);
-      mapUtilsRef.current?.off("dblclick", onMapDbClick);
-      mapDomRef.current.current.removeEventListener("mousemove", onMouseMove);
-    };
-  }, []);
-
-  useEffect(() => {
-    if (!Array.isArray(value) || value?.length == 0) {
-      return;
-    }
-    // 处理 id
-    value?.forEach((it) => {
-      if (!it.id) {
-        it.id = nanoid();
-      }
-    });
-    listRef.current = value || [];
-    if (!mapUtilsRef.current) {
-      return;
-    }
-    renderMarker();
-  }, [value]);
-
-  function renderMarker() {
-    listRef.current?.forEach((item) => {
-      if (item.type === "polygon") {
-        mapUtilsRef.current.setPolygon({
-          ...item,
-          onClick: onPolygonClick,
-        });
-      } else {
-        mapUtilsRef.current.setMarker(item.longitude, item.latitude, {
-          ...item,
-          data: item,
-          onClick: onMarkerClick,
-        });
-        mapUtilsRef.current.setCircle(item.longitude, item.latitude, item.range, { ...item, onClick: handleMarker });
-      }
-    });
-    mapUtilsRef.current.setFitView();
-    clearActive();
-  }
-
-  function mapInit({ map, mapUtils, mapDomRef: _mapDomRef }) {
-    mapDomRef.current = _mapDomRef;
-    _mapDomRef.current.addEventListener("mousemove", onMouseMove);
-    mapUtilsRef.current = mapUtils;
-    mapUtilsRef.current?.createPoly("Polygon");
-    // 启动监听事件
-    mapUtilsRef.current.on("click", onMapClick);
-    mapUtilsRef.current.on("dblclick", onMapDbClick);
-
-    mapUtilsRef.current.startPolygon({
-      onClick: onPolygonClick,
-    });
-
-    renderMarker();
-  }
-
-  function onAddClick() {
-    if (isEditingRef.current) {
-      message.warn("请先完成上次操作");
-      return;
-    }
-    clearActive();
-    setTipText("点击选择地址");
-    setShowTip(true);
-    drawType.current = "marker";
-    statusRef.current = "add";
-  }
-
-  function onDrawClick() {
-    if (isEditingRef.current) {
-      message.warn("请先完成上次操作");
-      return;
-    }
-    isEditingRef.current = true;
-    setTipText("点击绘制区域 双击完成绘制");
-    setDrawPolygon();
-    setShowTip(true);
-    drawType.current = "polygon";
-    statusRef.current = "add";
-  }
-
-  function setDrawPolygon() {
-    mapUtilsRef.current.setDrawPolygon({});
-  }
-
-  function setInactivePolygon(item) {
-    mapUtilsRef.current.setEditPolygon(item);
-  }
-
-  function onMapDbClick(e) {
-    if (drawType.current !== "polygon") {
-      return;
-    }
-    const graphical = mapUtilsRef.current.polyEditor?.PolygonEditor?.getTarget();
-    if (graphical) {
-      let points = [];
-      let center = [];
-      if (graphical.getPath().length > 0) {
-        const coordinate = graphical.getPath().map((item) => [item.lng, item.lat]);
-        points = coordinate;
-        center = getPolygonCenter(coordinate);
-      }
-      mapUtilsRef.current.polyEditor?.PolygonEditor?.close();
-      mapUtilsRef.current.polyEditor?.PolygonEditor?.setTarget();
-      handlePolygon({
-        type: "polygon",
-        id: graphical.id,
-        points,
-        longitude: center[0],
-        latitude: center[1],
-      });
-    }
-  }
-
-  function 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 [];
-  }
-
-  async function handlePolygon(item) {
-    const status = statusRef.current;
-    const isAdd = status === "add";
-    const isEdit = status === "edit";
-    if (isAdd) {
-      currentItemRef.current = item;
-    }
-    // 接口获取地址
-    item.address = await getAddress(item.longitude, item.latitude);
-    const list = [...(listRef.current || [])];
-    if (isAdd) {
-      list.push(item);
-    } else if (isEdit) {
-      const idx = list.findIndex((it) => it.id === item.id);
-      list.splice(idx, 1, item);
-    }
-    onChange && onChange(list);
-    clearStatus();
-  }
-
-
-  // 地图单击除现有元素范围外添加点位地址
-  function onMapClick(e) {
-    mapUtilsRef.current.isContains(e, handleMarker);
-  }
-
-  // 处理 marker、范围 绘制填写逻辑
-  async function handleMarker(e) {
-    if (drawType.current !== "marker") {
-      return;
-    }
-
-    const status = statusRef.current;
-    const isAdd = status === "add";
-    const isEdit = status === "edit";
-    setShowTip(false);
-    if (!isAdd && !isEdit) {
-      return;
-    }
-    isEditingRef.current = true;
-
-    const { lng, lat } = e.lnglat || {};
-
-    const preItem = currentItemRef.current;
-    const id = isAdd ? nanoid() : preItem?.id;
-
-    let item = {
-      id,
-      longitude: lng,
-      latitude: lat,
-      address: "",
-      range: "",
-      ...preItem,
-    };
-
-    // 解决新增时点击修改重复创建的问题
-    if (isAdd) {
-      item.longitude = lng;
-      item.latitude = lat;
-      currentItemRef.current = item;
-    }
-
-    // 接口获取地址
-    item.address = await getAddress(lng, lat);
-
-    // 更新地图状态
-    mapUtilsRef.current.setMarker(lng, lat, {
-      ...item,
-      onClick: onMarkerClick,
-      data: item,
-    });
-    // 回显范围
-    mapUtilsRef.current.setCircle(lng, lat, item.range, { ...item });
-
-    // 根据经纬度获取弹窗位置
-    const { x, y } = mapUtilsRef.current.map.lngLatToContainer([lng, lat]);
-    const mapDomRect = mapDomRef.current?.current?.getBoundingClientRect();
-    // 获取屏幕 x y
-    const screenX = mapDomRect?.left + x;
-    const screenY = mapDomRect?.top + y;
-    let res = {};
-    try {
-      res = await popupRef.current?.onShow({
-        type: "marker",
-        top: screenY,
-        left: screenX,
-        address: item.address,
-        range: item.range,
-        item,
-      });
-    } catch (error) {
-      // 新增状态，取消时清除已添加的 marker circle
-      isAdd && mapUtilsRef.current.rmMarker(item.id);
-      // 编辑状态恢复数据
-      if (isEdit) {
-        mapUtilsRef.current.setMarker(preItem.longitude, preItem.latitude, {
-          ...preItem,
-          data: item,
-        });
-        mapUtilsRef.current.setCircle(preItem.longitude, preItem.latitude, preItem.range, { ...preItem });
-      }
-      clearStatus(item.id);
-      return;
-    }
-
-    // 设置范围
-    mapUtilsRef.current.setCircle(lng, lat, res.range, { ...item });
-
-    item = Object.assign(item, res);
-
-    const list = [...(listRef.current || [])];
-
-    if (isAdd) {
-      list.push(item);
-    } else if (isEdit) {
-      const idx = list.findIndex((it) => it.id === id);
-      list.splice(idx, 1, item);
-    }
-
-    onChange && onChange(list);
-    clearStatus();
-  }
-
-  function onPolygonClick(e) {
-    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 && statusRef.current !== "add") {
-      setShowTip(false);
-      isEditingRef.current = false;
-      const { id } = e.target.getExtData() || {};
-      setActiveId(id);
-      setActiveMarkerIcon(id);
-    }
-  }
-
-  /**
-   * 选中态
-   * @param item
-   */
-  function setActivePolygon(item) {
-    clearActive();
-    const target = mapUtilsRef.current.polygonEnum[item.id];
-    const center = mapUtilsRef.current.getPolygonCenter(target.getPath()?.map((it) => [it.lng, it.lat]));
-    mapUtilsRef.current.setCenter(center?.[0], center?.[1]);
-    target?.setOptions({
-      strokeColor: "#403ef5",
-      strokeWeight: 4,
-    });
-  }
-
-  function clearActive() {
-    // 多边形清除选中态
-    Object.keys(mapUtilsRef.current.polygonEnum).forEach((key) => {
-      const item = mapUtilsRef.current.polygonEnum[key];
-      item?.setOptions({
-        strokeColor: "#1791fc",
-        strokeWeight: 2,
-      });
-    });
-    // Marker 清除选中态
-    Object.keys(mapUtilsRef.current.markers).forEach((key) => {
-      mapUtilsRef.current.setMarkerIcon(key, {
-        image: iconCircle0080ff,
-        size: [12, 12],
-        offset: [-6, -6],
-      });
-    });
-  }
-
-  function clearEdit(id) {
-    mapUtilsRef.current.polyEditor?.PolygonEditor?.close();
-    mapUtilsRef.current.polyEditor?.PolygonEditor?.setTarget();
-  }
-
-  function clearStatus(id) {
-    clearActive();
-    isEditingRef.current = false;
-    // 清除状态，解决重复创建的问题
-    statusRef.current = null;
-    // 编辑状态清除数据
-    currentItemRef.current = null;
-    setShowTip(false);
-    popupRef.current.onCancel();
-  }
-
-  function onItemClick(item, i) {
-    drawType.current = item.type || "marker";
-    clearActive();
-    clearStatus(item.id);
-    setActiveId(item.id);
-    const mapUtils = mapUtilsRef.current;
-    if (item.type == "polygon") {
-      // 选中态
-      setActivePolygon(item);
-    } else {
-      const marker = mapUtils.markers[item.id];
-      const position = marker?.getPosition();
-      position && mapUtils.setCenter(position.lng, position.lat);
-      setActiveMarkerIcon(item.id);
-    }
-  }
-
-  function setActiveMarkerIcon(id) {
-    mapUtilsRef.current.setMarkerIcon(id, {
-      image: markerIconBase64,
-      size: [34, 34],
-      offset: [-17, -34],
-    });
-  }
-
-  function onEdit(item, i) {
-    if (isEditingRef.current) {
-      message.warn("请先完成上次操作");
-      return;
-    }
-    clearActive();
-    drawType.current = item.type || "marker";
-    setShowTip(true);
-    mapUtilsRef.current.setCenter(item.longitude, item.latitude, { immediately: true });
-    clearEdit(item.id);
-    // 多边形清除选中态
-    statusRef.current = "edit";
-    currentItemRef.current = item;
-    if (item.type == "polygon") {
-      setTipText("点击绘制区域 双击完成绘制");
-      setInactivePolygon(item);
-      isEditingRef.current = true;
-    } else {
-      setTipText("点击选择地址");
-      setActiveMarkerIcon(item.id);
-      handleMarker({
-        lnglat: {
-          lng: item.longitude,
-          lat: item.latitude,
-        },
-      });
-    }
-  }
-
-  function onDelClick(item, i) {
-    clearActive();
-    drawType.current = item.type || "marker";
-    mapUtilsRef.current.setCenter(item.longitude, item.latitude, { immediately: true });
-    if (item.type !== "polygon") {
-      setActiveId(item.id);
-      setActiveMarkerIcon(item.id);
-    }
-  }
-
-  function onDel(item, i) {
-    drawType.current = item.type || "marker";
-    const list = [...(listRef.current || [])];
-    listRef.current?.splice(i, 1);
-    list?.splice(i, 1);
-    onChange && onChange(list);
-    if (item.type === "polygon") {
-      mapUtilsRef.current.rmPolygon(item.id);
-    } else {
-      // 清除对应的 marker
-      mapUtilsRef.current.rmMarker(item.id);
-      // 清除对应的 circle
-      mapUtilsRef.current.rmCircle(item.id);
-    }
-  }
-
-  function onDelCancel(item, i) {
-    drawType.current = item.type || "marker";
-    if (item.type !== "polygon") {
-      clearActive();
-      setActiveId(null);
-    }
-  }
-
-  function setPoint(lng, lat) {
-    mapUtilsRef.current.setCenter(lng, lat, { immediately: true });
-    statusRef.current = "add";
-    handleMarker({
-      lnglat: {
-        lng,
-        lat,
-      },
-    });
-  }
-
-  function onMouseMove(e) {
-    const { offsetX, offsetY } = e;
-    setTipPosition({ left: offsetX + 10, top: offsetY + 10 });
-  }
-
-  return (
-    <div className="location-list-picker">
-      <div className="map-box" ref={mapBoxRef}>
-        <AMapCom init={mapInit} loading={loading} markerIconConf={markerIconConf} />
-        {!readOnly && !disabled && <MapSearch setPoint={setPoint} isAutoSearch={isAutoSearch} />}
-        {showTip && (
-          <Alert className="location-list-picker-notice-bar" message={tipText} type="info" style={tipPosition} />
-        )}
-        {hasPolygon && !readOnly && (
-          <Button className="add-polygon-btn" onClick={onDrawClick} disabled={disabled}>
-            新增区域
-          </Button>
-        )}
-        {hasPoint !== false && !readOnly && (
-          <Button className="add-btn" onClick={onAddClick} disabled={disabled}>
-            新增地址
-          </Button>
-        )}
-        <Popup ref={popupRef} mountElement={mapBoxRef.current} {...popupProps} />
-      </div>
-      <AddrList
-        {...listProps}
-        readOnly={readOnly}
-        disabled={disabled}
-        mapUtilsRef={mapUtilsRef}
-        activeId={activeId}
-        list={value}
-        ItemRender={ItemRender}
-        onItemClick={onItemClick}
-        onEdit={onEdit}
-        onDel={onDel}
-        onDelClick={onDelClick}
-        onDelCancel={onDelCancel}
-      />
-    </div>
-  );
-});
-
-export default LocationListPicker;
+// @ts-nocheck
+import { useEffect, useRef, useState } from "react";
+import { Button, message, Alert } from "antd";
+import { observer } from "@formily/react";
+import * as turf from "@turf/turf";
+import { nanoid } from "nanoid";
+
+import AddrList from "./components/AddrList";
+import Popup from "./components/Popup";
+
+import AMapCom from "../LocationPicker/Map/AMap";
+import MapSearch from "../LocationPicker/components/MapSearch";
+import { MapUtils } from "../LocationPicker/Map/AMap/common/utils";
+import { getAddress } from "../LocationPicker/servers";
+import { markerIconBase64 } from "../LocationPicker/assets/svg-icon";
+
+import { iconCircle0080ff } from "./assets/icon";
+
+import "./index.less";
+
+export const LocationListPicker = observer((props) => {
+  const {
+    value,
+    readOnly,
+    disabled,
+    listProps,
+    popupProps,
+    ItemRender,
+    markerIconConf,
+    isAutoSearch,
+    /** 是否支持新增多边形 */
+    hasPolygon,
+    /** 是否支持新增点位 */
+    hasPoint = true,
+    onChange,
+  } = props;
+
+  const [loading, setLoading] = useState(props.loading || false);
+  const [showTip, setShowTip] = useState(false);
+  const [tipText, setTipText] = useState("点击选择地址");
+  const [tipPosition, setTipPosition] = useState({});
+  const [activeId, setActiveId] = useState();
+  const mapDomRef = useRef();
+  const mapUtilsRef = useRef<MapUtils>();
+  const listRef = useRef(value);
+  const statusRef = useRef();
+  const drawType = useRef("marker");
+  const currentItemRef = useRef();
+  const popupRef = useRef();
+  const isEditingRef = useRef();
+  const mapBoxRef = useRef(null);
+
+  useEffect(() => {
+    return () => {
+      // 取消监听
+      mapUtilsRef.current?.off("click", onMapClick);
+      mapUtilsRef.current?.off("dblclick", onMapDbClick);
+      mapDomRef.current.current.removeEventListener("mousemove", onMouseMove);
+    };
+  }, []);
+
+  useEffect(() => {
+    if (!Array.isArray(value) || value?.length == 0) {
+      return;
+    }
+    // 处理 id
+    value?.forEach((it) => {
+      if (!it.id) {
+        it.id = nanoid();
+      }
+    });
+    listRef.current = value || [];
+    if (!mapUtilsRef.current) {
+      return;
+    }
+    renderMarker();
+  }, [value]);
+
+  function renderMarker() {
+    listRef.current?.forEach((item) => {
+      if (item.type === "polygon") {
+        mapUtilsRef.current.setPolygon({
+          ...item,
+          onClick: onPolygonClick,
+        });
+      } else {
+        mapUtilsRef.current.setMarker(item.longitude, item.latitude, {
+          ...item,
+          data: item,
+          onClick: onMarkerClick,
+        });
+        mapUtilsRef.current.setCircle(item.longitude, item.latitude, item.range, { ...item, onClick: handleMarker });
+      }
+    });
+    mapUtilsRef.current.setFitView();
+    clearActive();
+  }
+
+  function mapInit({ map, mapUtils, mapDomRef: _mapDomRef }) {
+    mapDomRef.current = _mapDomRef;
+    _mapDomRef.current.addEventListener("mousemove", onMouseMove);
+    mapUtilsRef.current = mapUtils;
+    mapUtilsRef.current?.createPoly("Polygon");
+    // 启动监听事件
+    mapUtilsRef.current.on("click", onMapClick);
+    mapUtilsRef.current.on("dblclick", onMapDbClick);
+
+    mapUtilsRef.current.startPolygon({
+      onClick: onPolygonClick,
+    });
+
+    renderMarker();
+  }
+
+  function onAddClick() {
+    if (isEditingRef.current) {
+      message.warn("请先完成上次操作");
+      return;
+    }
+    clearActive();
+    setTipText("点击选择地址");
+    setShowTip(true);
+    drawType.current = "marker";
+    statusRef.current = "add";
+  }
+
+  function onDrawClick() {
+    if (isEditingRef.current) {
+      message.warn("请先完成上次操作");
+      return;
+    }
+    isEditingRef.current = true;
+    setTipText("点击绘制区域 双击完成绘制");
+    setDrawPolygon();
+    setShowTip(true);
+    drawType.current = "polygon";
+    statusRef.current = "add";
+  }
+
+  function setDrawPolygon() {
+    mapUtilsRef.current.setDrawPolygon({});
+  }
+
+  function setInactivePolygon(item) {
+    mapUtilsRef.current.setEditPolygon(item);
+  }
+
+  function onMapDbClick(e) {
+    if (drawType.current !== "polygon") {
+      return;
+    }
+    const graphical = mapUtilsRef.current.polyEditor?.PolygonEditor?.getTarget();
+    if (graphical) {
+      let points = [];
+      let center = [];
+      if (graphical.getPath().length > 0) {
+        const coordinate = graphical.getPath().map((item) => [item.lng, item.lat]);
+        points = coordinate;
+        center = getPolygonCenter(coordinate);
+      }
+      mapUtilsRef.current.polyEditor?.PolygonEditor?.close();
+      mapUtilsRef.current.polyEditor?.PolygonEditor?.setTarget();
+      handlePolygon({
+        type: "polygon",
+        id: graphical.id,
+        points,
+        longitude: center[0],
+        latitude: center[1],
+      });
+    }
+  }
+
+  function 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 [];
+  }
+
+  async function handlePolygon(item) {
+    const status = statusRef.current;
+    const isAdd = status === "add";
+    const isEdit = status === "edit";
+    if (isAdd) {
+      currentItemRef.current = item;
+    }
+    // 接口获取地址
+    item.address = await getAddress(item.longitude, item.latitude);
+    const list = [...(listRef.current || [])];
+    if (isAdd) {
+      list.push(item);
+    } else if (isEdit) {
+      const idx = list.findIndex((it) => it.id === item.id);
+      list.splice(idx, 1, item);
+    }
+    onChange && onChange(list);
+    clearStatus();
+  }
+
+  // 地图单击除现有元素范围外添加点位地址
+  function onMapClick(e) {
+    mapUtilsRef.current.isContains(e, handleMarker);
+  }
+
+  // 处理 marker、范围 绘制填写逻辑
+  async function handleMarker(e) {
+    if (drawType.current !== "marker") {
+      return;
+    }
+
+    const status = statusRef.current;
+    const isAdd = status === "add";
+    const isEdit = status === "edit";
+    setShowTip(false);
+    if (!isAdd && !isEdit) {
+      return;
+    }
+    isEditingRef.current = true;
+
+    const { lng, lat } = e.lnglat || {};
+
+    const preItem = currentItemRef.current;
+    const id = isAdd ? nanoid() : preItem?.id;
+
+    let item = {
+      id,
+      longitude: lng,
+      latitude: lat,
+      address: "",
+      range: "",
+      ...preItem,
+    };
+
+    // 接口获取地址
+    item.address = await getAddress(lng, lat);
+
+    // 解决新增时点击修改重复创建的问题
+    if (isAdd) {
+      item.longitude = lng;
+      item.latitude = lat;
+      currentItemRef.current = item;
+    }
+
+    // 更新地图状态
+    mapUtilsRef.current.setMarker(lng, lat, {
+      ...item,
+      onClick: onMarkerClick,
+      data: item,
+    });
+    // 回显范围
+    mapUtilsRef.current.setCircle(lng, lat, item.range, { ...item });
+
+    // 根据经纬度获取弹窗位置
+    const { x, y } = mapUtilsRef.current.map.lngLatToContainer([lng, lat]);
+    const mapDomRect = mapDomRef.current?.current?.getBoundingClientRect();
+    // 获取屏幕 x y
+    const screenX = mapDomRect?.left + x;
+    const screenY = mapDomRect?.top + y;
+    let res = {};
+    try {
+      res = await popupRef.current?.onShow({
+        type: "marker",
+        top: screenY,
+        left: screenX,
+        address: item.address,
+        range: item.range,
+        item,
+      });
+    } catch (error) {
+      // 新增状态，取消时清除已添加的 marker circle
+      isAdd && mapUtilsRef.current.rmMarker(item.id);
+      // 编辑状态恢复数据
+      if (isEdit) {
+        mapUtilsRef.current.setMarker(preItem.longitude, preItem.latitude, {
+          ...preItem,
+          data: item,
+        });
+        mapUtilsRef.current.setCircle(preItem.longitude, preItem.latitude, preItem.range, { ...preItem });
+      }
+      clearStatus(item.id);
+      return;
+    }
+
+    // 设置范围
+    mapUtilsRef.current.setCircle(lng, lat, res.range, { ...item });
+
+    item = Object.assign(item, res);
+
+    const list = [...(listRef.current || [])];
+
+    if (isAdd) {
+      list.push(item);
+    } else if (isEdit) {
+      const idx = list.findIndex((it) => it.id === id);
+      list.splice(idx, 1, item);
+    }
+
+    onChange && onChange(list);
+    clearStatus();
+  }
+
+  function onPolygonClick(e) {
+    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 && statusRef.current !== "add") {
+      setShowTip(false);
+      isEditingRef.current = false;
+      const { id } = e.target.getExtData() || {};
+      setActiveId(id);
+      setActiveMarkerIcon(id);
+    }
+  }
+
+  /**
+   * 选中态
+   * @param item
+   */
+  function setActivePolygon(item) {
+    clearActive();
+    const target = mapUtilsRef.current.polygonEnum[item.id];
+    const center = mapUtilsRef.current.getPolygonCenter(target.getPath()?.map((it) => [it.lng, it.lat]));
+    mapUtilsRef.current.setCenter(center?.[0], center?.[1]);
+    target?.setOptions({
+      strokeColor: "#403ef5",
+      strokeWeight: 4,
+    });
+  }
+
+  function clearActive() {
+    // 多边形清除选中态
+    Object.keys(mapUtilsRef.current.polygonEnum).forEach((key) => {
+      const item = mapUtilsRef.current.polygonEnum[key];
+      item?.setOptions({
+        strokeColor: "#1791fc",
+        strokeWeight: 2,
+      });
+    });
+    // Marker 清除选中态
+    Object.keys(mapUtilsRef.current.markers).forEach((key) => {
+      mapUtilsRef.current.setMarkerIcon(key, {
+        image: iconCircle0080ff,
+        size: [12, 12],
+        offset: [-6, -6],
+      });
+    });
+  }
+
+  function clearEdit(id) {
+    mapUtilsRef.current.polyEditor?.PolygonEditor?.close();
+    mapUtilsRef.current.polyEditor?.PolygonEditor?.setTarget();
+  }
+
+  function clearStatus(id) {
+    clearActive();
+    isEditingRef.current = false;
+    // 清除状态，解决重复创建的问题
+    statusRef.current = null;
+    // 编辑状态清除数据
+    currentItemRef.current = null;
+    setShowTip(false);
+    popupRef.current.onCancel();
+  }
+
+  function onItemClick(item, i) {
+    drawType.current = item.type || "marker";
+    clearActive();
+    clearStatus(item.id);
+    setActiveId(item.id);
+    const mapUtils = mapUtilsRef.current;
+    if (item.type == "polygon") {
+      // 选中态
+      setActivePolygon(item);
+    } else {
+      const marker = mapUtils.markers[item.id];
+      const position = marker?.getPosition();
+      position && mapUtils.setCenter(position.lng, position.lat);
+      setActiveMarkerIcon(item.id);
+    }
+  }
+
+  function setActiveMarkerIcon(id) {
+    mapUtilsRef.current.setMarkerIcon(id, {
+      image: markerIconBase64,
+      size: [34, 34],
+      offset: [-17, -34],
+    });
+  }
+
+  function onEdit(item, i) {
+    if (isEditingRef.current) {
+      message.warn("请先完成上次操作");
+      return;
+    }
+    clearActive();
+    drawType.current = item.type || "marker";
+    setShowTip(true);
+    mapUtilsRef.current.setCenter(item.longitude, item.latitude, { immediately: true });
+    clearEdit(item.id);
+    // 多边形清除选中态
+    statusRef.current = "edit";
+    currentItemRef.current = item;
+    if (item.type == "polygon") {
+      setTipText("点击绘制区域 双击完成绘制");
+      setInactivePolygon(item);
+      isEditingRef.current = true;
+    } else {
+      setTipText("点击选择地址");
+      setActiveMarkerIcon(item.id);
+      handleMarker({
+        lnglat: {
+          lng: item.longitude,
+          lat: item.latitude,
+        },
+      });
+    }
+  }
+
+  function onDelClick(item, i) {
+    clearActive();
+    drawType.current = item.type || "marker";
+    mapUtilsRef.current.setCenter(item.longitude, item.latitude, { immediately: true });
+    if (item.type !== "polygon") {
+      setActiveId(item.id);
+      setActiveMarkerIcon(item.id);
+    }
+  }
+
+  function onDel(item, i) {
+    drawType.current = item.type || "marker";
+    const list = [...(listRef.current || [])];
+    listRef.current?.splice(i, 1);
+    list?.splice(i, 1);
+    onChange && onChange(list);
+    if (item.type === "polygon") {
+      mapUtilsRef.current.rmPolygon(item.id);
+    } else {
+      // 清除对应的 marker
+      mapUtilsRef.current.rmMarker(item.id);
+      // 清除对应的 circle
+      mapUtilsRef.current.rmCircle(item.id);
+    }
+  }
+
+  function onDelCancel(item, i) {
+    drawType.current = item.type || "marker";
+    if (item.type !== "polygon") {
+      clearActive();
+      setActiveId(null);
+    }
+  }
+
+  function setPoint(lng, lat) {
+    mapUtilsRef.current.setCenter(lng, lat, { immediately: true });
+    statusRef.current = "add";
+    currentItemRef.current = null;
+    popupRef.current?.onCancel();
+    handleMarker({
+      lnglat: {
+        lng,
+        lat,
+      },
+    });
+  }
+
+  function onMouseMove(e) {
+    const { offsetX, offsetY } = e;
+    setTipPosition({ left: offsetX + 10, top: offsetY + 10 });
+  }
+
+  return (
+    <div className="location-list-picker">
+      <div className="map-box" ref={mapBoxRef}>
+        <AMapCom init={mapInit} loading={loading} markerIconConf={markerIconConf} />
+        {!readOnly && !disabled && <MapSearch setPoint={setPoint} isAutoSearch={isAutoSearch} />}
+        {showTip && (
+          <Alert className="location-list-picker-notice-bar" message={tipText} type="info" style={tipPosition} />
+        )}
+        {hasPolygon && !readOnly && (
+          <Button className="add-polygon-btn" onClick={onDrawClick} disabled={disabled}>
+            新增区域
+          </Button>
+        )}
+        {hasPoint !== false && !readOnly && (
+          <Button className="add-btn" onClick={onAddClick} disabled={disabled}>
+            新增地址
+          </Button>
+        )}
+        <Popup ref={popupRef} mountElement={mapBoxRef.current} {...popupProps} />
+      </div>
+      <AddrList
+        {...listProps}
+        readOnly={readOnly}
+        disabled={disabled}
+        mapUtilsRef={mapUtilsRef}
+        activeId={activeId}
+        list={value}
+        ItemRender={ItemRender}
+        onItemClick={onItemClick}
+        onEdit={onEdit}
+        onDel={onDel}
+        onDelClick={onDelClick}
+        onDelCancel={onDelCancel}
+      />
+    </div>
+  );
+});
+
+export default LocationListPicker;