@hzab/form-render 1.6.18 → 1.6.19

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

@@ -1,431 +1,431 @@
-import * as turf from "@turf/turf";
-import { nanoid } from "nanoid";
-
-import AMapLoader from "./loader";
-import { markerIconBase64 } from "../../../assets/svg-icon";
-
-if (!window._AMapLoaderTemp) {
-  window._AMapLoaderTemp = {};
-}
-
-export function setKey(key, securityJsCode) {
-  window._AMapLoaderTemp.key = key;
-  window._AMapLoaderTemp.securityJsCode = securityJsCode;
-}
-
-export function setServerKey(key, securityJsCode) {
-  window._AMapLoaderTemp.serverKey = key;
-  window._AMapLoaderTemp.serverSecurityJsCode = securityJsCode;
-}
-
-export function setSecurityJsCode(securityJsCode) {
-  window._AMapLoaderTemp.securityJsCode = securityJsCode;
-  window._AMapSecurityConfig = {
-    securityJsCode: securityJsCode,
-  };
-}
-
-export interface IMarker {
-  setIcon: Function;
-  setSize: Function;
-  setOffset: Function;
-  getPosition: Function;
-}
-
-export type setMarkerOptT = {
-  id?: number | string;
-  marker?: IMarker;
-  map?: Object;
-  AMap?: Object;
-  markerIconConf?: Object;
-  markerConf?: Object;
-  onClick?: Function;
-  data?: Object;
-};
-
-export type markersT = {
-  [k: number | string]: IMarker;
-};
-
-export class MapUtils {
-  public map;
-  public AMap;
-  public markers: markersT = {};
-  public circles = {};
-  public pickerMarker;
-  public markerIconConf;
-  public markerConf;
-  public polyEditor = {
-    PolygonEditor: undefined,
-    PolylineEditor: undefined,
-  };
-  public polygonEnum = {};
-  public polygonConf;
-  public mapDomRef;
-
-  constructor({ map, AMap, mapDomRef, markerIconConf, markerConf, polygonConf }) {
-    if (!map) {
-      throw new Error("请传入地图实例");
-    }
-    this.map = map;
-    this.AMap = AMap;
-    this.markerIconConf = markerIconConf || {};
-    this.markerConf = markerConf || {};
-    this.polygonEnum = {};
-    this.polygonConf = polygonConf || {};
-    this.mapDomRef = mapDomRef;
-  }
-
-  /**
-   * 获取地图中心点
-   * @param map
-   * @returns { lng: Number, lat: Number }
-   */
-  getCenter(map = this.map) {
-    if (!map) {
-      throw new Error("请传入地图实例和 AMap");
-    }
-    return map && map.getCenter && map.getCenter();
-  }
-
-  /**
-   * 设置地图中心点
-   * @param lon
-   * @param lat
-   * @param opt
-   */
-  setCenter(
-    lon,
-    lat,
-    opt = { immediately: undefined, duration: undefined, map: this.map, AMap: this.AMap || window.AMap },
-  ) {
-    const { map = this.map, AMap = this.AMap || window.AMap, immediately, duration } = opt || {};
-    if (!(AMap && map)) {
-      throw new Error("请传入地图实例和 AMap");
-    }
-    const position = new window.AMap.LngLat(lon, lat);
-    // 设置中心点
-    map.setCenter(position, immediately, duration);
-  }
-
-  setFitView() {
-    // 调整地图以适应所有标记点
-    this.map.setFitView();
-  }
-
-  /**
-   * 创建或修改 Marker
-   * @param lon
-   * @param lat
-   * @param opt
-   * @returns
-   */
-  setMarker(lon, lat, opt?: setMarkerOptT) {
-    const {
-      data,
-      id = nanoid(),
-      marker,
-      map = this.map,
-      AMap = this.AMap,
-      markerIconConf = {},
-      markerConf = {},
-      onClick,
-    } = opt || {};
-
-    if (!(AMap && map)) {
-      throw new Error("请传入地图实例和 AMap");
-    }
-    if (lon === null || lon === undefined || lat === null || lat === undefined) {
-      console.warn("setMarker 请传入正确的经纬度");
-      return;
-    }
-
-    const position = new AMap.LngLat(lon, lat);
-    let _marker = marker || this.markers[id];
-
-    // 创建 Marker 或修改位置
-    if (_marker) {
-      // @ts-ignore
-      _marker.setPosition(position);
-      return _marker;
-    }
-
-    const size = new AMap.Size(34, 34);
-    const icon = new AMap.Icon({
-      size, //图标尺寸
-      image: markerIconBase64, // Icon 的图像
-      imageSize: size, // 根据所设置的大小拉伸或压缩图片
-      ...this.markerIconConf,
-      ...markerIconConf,
-    });
-    const _m = new AMap.Marker({
-      offset: new AMap.Pixel(-17, -34),
-      icon,
-      position,
-      extData: {
-        id,
-        data,
-      },
-      ...this.markerConf,
-      ...markerConf,
-    });
-
-    this.markers[id] = _m;
-
-    if (onClick) {
-      _m.on("click", onClick);
-    }
-
-    map?.add(_m);
-    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 = {
-      size: null,
-      image: null,
-      offset: null,
-    },
-  ) {
-    const marker = this.markers[id];
-    if (!marker) {
-      return;
-    }
-    const { image, offset } = opt || {};
-    const AMap = this.AMap;
-
-    const size = new AMap.Size(...opt?.size);
-    const icon = new AMap.Icon({
-      size, //图标尺寸
-      image: image, // Icon 的图像
-      imageSize: size, // 根据所设置的大小拉伸或压缩图片
-    });
-
-    marker.setIcon(icon);
-    marker.setSize(size);
-    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
-   */
-  rmMarker(id) {
-    this.map.remove(this.markers[id]);
-    delete this.markers[id];
-  }
-
-  setCircle(lon, lat, radius, opt?) {
-    const { id = nanoid(), circle, map = this.map, AMap = this.AMap, onClick, circleConf = {} } = opt || {};
-    if (!(AMap && map)) {
-      throw new Error("请传入地图实例和 AMap");
-    }
-    if (lon === null || lon === undefined || lat === null || lat === undefined) {
-      console.warn("setMarker 请传入正确的经纬度");
-      return;
-    }
-    // circles
-
-    const center = new AMap.LngLat(lon, lat);
-    let _circle = circle || this.circles[id];
-
-    // 创建 Marker 或修改位置
-    if (_circle) {
-      // @ts-ignore
-      _circle.setCenter(center);
-      _circle.setRadius(radius);
-      return _circle;
-    }
-
-    //创建圆形 Circle 实例
-    const _c = new AMap.Circle({
-      center: center, // 圆心
-      radius: radius, // 半径
-      borderWeight: 1, // 描边的宽度
-      strokeColor: "#0080FF", // 轮廓线颜色
-      strokeWeight: 1, // 轮廓线宽度
-      fillOpacity: 0.1, // 圆形填充透明度
-      fillColor: "#0080FF", // 圆形填充颜色
-      zIndex: 100, // 圆形的叠加顺序
-      ...circleConf,
-    });
-    _c.on("click", onClick);
-    this.circles[id] = _c;
-    map?.add(_c);
-    return _c;
-  }
-
-  rmCircle(id) {
-    this.map.remove(this.circles[id]);
-    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 中唯一
-   * @param lon
-   * @param lat
-   * @param opt
-   * @returns
-   */
-  setPickerMarker(lon, lat, opt?: any) {
-    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) {
-    return this.map?.on(...args);
-  }
-
-  off(...args) {
-    return this.map?.off(...args);
-  }
-}
-
-export { AMapLoader };
+import * as turf from "@turf/turf";
+import { nanoid } from "nanoid";
+
+import AMapLoader from "./loader";
+import { markerIconBase64 } from "../../../assets/svg-icon";
+
+if (!window._AMapLoaderTemp) {
+  window._AMapLoaderTemp = {};
+}
+
+export function setKey(key, securityJsCode) {
+  window._AMapLoaderTemp.key = key;
+  window._AMapLoaderTemp.securityJsCode = securityJsCode;
+}
+
+export function setServerKey(key, securityJsCode) {
+  window._AMapLoaderTemp.serverKey = key;
+  window._AMapLoaderTemp.serverSecurityJsCode = securityJsCode;
+}
+
+export function setSecurityJsCode(securityJsCode) {
+  window._AMapLoaderTemp.securityJsCode = securityJsCode;
+  window._AMapSecurityConfig = {
+    securityJsCode: securityJsCode,
+  };
+}
+
+export interface IMarker {
+  setIcon: Function;
+  setSize: Function;
+  setOffset: Function;
+  getPosition: Function;
+}
+
+export type setMarkerOptT = {
+  id?: number | string;
+  marker?: IMarker;
+  map?: Object;
+  AMap?: Object;
+  markerIconConf?: Object;
+  markerConf?: Object;
+  onClick?: Function;
+  data?: Object;
+};
+
+export type markersT = {
+  [k: number | string]: IMarker;
+};
+
+export class MapUtils {
+  public map;
+  public AMap;
+  public markers: markersT = {};
+  public circles = {};
+  public pickerMarker;
+  public markerIconConf;
+  public markerConf;
+  public polyEditor = {
+    PolygonEditor: undefined,
+    PolylineEditor: undefined,
+  };
+  public polygonEnum = {};
+  public polygonConf;
+  public mapDomRef;
+
+  constructor({ map, AMap, mapDomRef, markerIconConf, markerConf, polygonConf }) {
+    if (!map) {
+      throw new Error("请传入地图实例");
+    }
+    this.map = map;
+    this.AMap = AMap;
+    this.markerIconConf = markerIconConf || {};
+    this.markerConf = markerConf || {};
+    this.polygonEnum = {};
+    this.polygonConf = polygonConf || {};
+    this.mapDomRef = mapDomRef;
+  }
+
+  /**
+   * 获取地图中心点
+   * @param map
+   * @returns { lng: Number, lat: Number }
+   */
+  getCenter(map = this.map) {
+    if (!map) {
+      throw new Error("请传入地图实例和 AMap");
+    }
+    return map && map.getCenter && map.getCenter();
+  }
+
+  /**
+   * 设置地图中心点
+   * @param lon
+   * @param lat
+   * @param opt
+   */
+  setCenter(
+    lon,
+    lat,
+    opt = { immediately: undefined, duration: undefined, map: this.map, AMap: this.AMap || window.AMap },
+  ) {
+    const { map = this.map, AMap = this.AMap || window.AMap, immediately, duration } = opt || {};
+    if (!(AMap && map)) {
+      throw new Error("请传入地图实例和 AMap");
+    }
+    const position = new window.AMap.LngLat(lon, lat);
+    // 设置中心点
+    map.setCenter(position, immediately, duration);
+  }
+
+  setFitView() {
+    // 调整地图以适应所有标记点
+    this.map.setFitView();
+  }
+
+  /**
+   * 创建或修改 Marker
+   * @param lon
+   * @param lat
+   * @param opt
+   * @returns
+   */
+  setMarker(lon, lat, opt?: setMarkerOptT) {
+    const {
+      data,
+      id = nanoid(),
+      marker,
+      map = this.map,
+      AMap = this.AMap,
+      markerIconConf = {},
+      markerConf = {},
+      onClick,
+    } = opt || {};
+
+    if (!(AMap && map)) {
+      throw new Error("请传入地图实例和 AMap");
+    }
+    if (lon === null || lon === undefined || lat === null || lat === undefined) {
+      console.warn("setMarker 请传入正确的经纬度");
+      return;
+    }
+
+    const position = new AMap.LngLat(lon, lat);
+    let _marker = marker || this.markers[id];
+
+    // 创建 Marker 或修改位置
+    if (_marker) {
+      // @ts-ignore
+      _marker.setPosition(position);
+      return _marker;
+    }
+
+    const size = new AMap.Size(34, 34);
+    const icon = new AMap.Icon({
+      size, //图标尺寸
+      image: markerIconBase64, // Icon 的图像
+      imageSize: size, // 根据所设置的大小拉伸或压缩图片
+      ...this.markerIconConf,
+      ...markerIconConf,
+    });
+    const _m = new AMap.Marker({
+      offset: new AMap.Pixel(-17, -34),
+      icon,
+      position,
+      extData: {
+        id,
+        data,
+      },
+      ...this.markerConf,
+      ...markerConf,
+    });
+
+    this.markers[id] = _m;
+
+    if (onClick) {
+      _m.on("click", onClick);
+    }
+
+    map?.add(_m);
+    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 = {
+      size: null,
+      image: null,
+      offset: null,
+    },
+  ) {
+    const marker = this.markers[id];
+    if (!marker) {
+      return;
+    }
+    const { image, offset } = opt || {};
+    const AMap = this.AMap;
+
+    const size = new AMap.Size(...opt?.size);
+    const icon = new AMap.Icon({
+      size, //图标尺寸
+      image: image, // Icon 的图像
+      imageSize: size, // 根据所设置的大小拉伸或压缩图片
+    });
+
+    marker.setIcon(icon);
+    marker.setSize(size);
+    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
+   */
+  rmMarker(id) {
+    this.map.remove(this.markers[id]);
+    delete this.markers[id];
+  }
+
+  setCircle(lon, lat, radius, opt?) {
+    const { id = nanoid(), circle, map = this.map, AMap = this.AMap, onClick, circleConf = {} } = opt || {};
+    if (!(AMap && map)) {
+      throw new Error("请传入地图实例和 AMap");
+    }
+    if (lon === null || lon === undefined || lat === null || lat === undefined) {
+      console.warn("setMarker 请传入正确的经纬度");
+      return;
+    }
+    // circles
+
+    const center = new AMap.LngLat(lon, lat);
+    let _circle = circle || this.circles[id];
+
+    // 创建 Marker 或修改位置
+    if (_circle) {
+      // @ts-ignore
+      _circle.setCenter(center);
+      _circle.setRadius(radius);
+      return _circle;
+    }
+
+    //创建圆形 Circle 实例
+    const _c = new AMap.Circle({
+      center: center, // 圆心
+      radius: radius, // 半径
+      borderWeight: 1, // 描边的宽度
+      strokeColor: "#0080FF", // 轮廓线颜色
+      strokeWeight: 1, // 轮廓线宽度
+      fillOpacity: 0.1, // 圆形填充透明度
+      fillColor: "#0080FF", // 圆形填充颜色
+      zIndex: 100, // 圆形的叠加顺序
+      ...circleConf,
+    });
+    _c.on("click", onClick);
+    this.circles[id] = _c;
+    map?.add(_c);
+    return _c;
+  }
+
+  rmCircle(id) {
+    this.map.remove(this.circles[id]);
+    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 中唯一
+   * @param lon
+   * @param lat
+   * @param opt
+   * @returns
+   */
+  setPickerMarker(lon, lat, opt?: any) {
+    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) {
+    return this.map?.on(...args);
+  }
+
+  off(...args) {
+    return this.map?.off(...args);
+  }
+}
+
+export { AMapLoader };