ele-admin-plus 1.5.1-beta.4 → 1.6.0-beta.2

package/es/ele-map-picker/tmap-plugin.js

@@ -0,0 +1,287 @@
+import { debounce } from "../utils/common";
+import { defaultMarkerSrc } from "./util";
+const darkStyle = "black";
+class TMapPlugin {
+  /** 地图实例 */
+  mapIns;
+  /** POI检索实例 */
+  placeSearchIns;
+  /** 地图中心标记点 */
+  centerMarker;
+  /** 检索附近回调 */
+  searchNearByCallback;
+  constructor() {
+  }
+  /**
+   * 处理POI数据
+   * @param item 数据
+   */
+  formatPOI(item) {
+    const name = item.name || "";
+    const address = item.address || "";
+    const [lng, lat] = (item.lonlat || "").split(",");
+    const key = [name, address, lat, lng].join();
+    return {
+      ...item,
+      name,
+      address,
+      lat,
+      lng,
+      district: address,
+      key
+    };
+  }
+  /**
+   * 渲染地图
+   * @param mapEl 地图容器节点
+   * @param option 地图渲染参数
+   */
+  renderMap(mapEl, option) {
+    this.destroyMap();
+    if (!T) {
+      console.error("T is not defined");
+      return;
+    }
+    this.mapIns = new T.Map(mapEl);
+    this.mapIns.addEventListener("load", () => {
+      option.onComplete && option.onComplete();
+    });
+    const defaultZoom = option.zoom ?? 11;
+    if (option.center) {
+      const point = new T.LngLat(option.center[0], option.center[1]);
+      this.mapIns.centerAndZoom(point, defaultZoom);
+    } else {
+      const defaultCenter = new T.LngLat(116.40769, 39.89945);
+      this.mapIns.centerAndZoom(defaultCenter, defaultZoom);
+    }
+    const defaultStyle = option.darkMode ? darkStyle : void 0;
+    const mapStyle = option.mapStyle || defaultStyle;
+    if (mapStyle) {
+      this.mapIns.setStyle(mapStyle);
+    }
+    this.centerMarker = new T.Marker(
+      // @ts-ignore
+      new T.LngLat(116.404, 39.915),
+      {
+        // @ts-ignore
+        icon: new T.Icon({
+          iconUrl: option.markerSrc ?? defaultMarkerSrc,
+          // @ts-ignore
+          iconSize: new T.Point(26, 36.5),
+          // @ts-ignore
+          iconAnchor: new T.Point(13, 36.5)
+        })
+      }
+    );
+    this.placeSearchIns = new T.LocalSearch(this.mapIns, {
+      pageCapacity: option.poiLimit,
+      onSearchComplete: (result) => {
+        this.searchNearByCallback && this.searchNearByCallback(result);
+      }
+    });
+    this.mapIns.addEventListener(
+      "resize",
+      debounce(() => {
+        option.onResizeend && option.onResizeend();
+      }, 350)
+    );
+    this.mapIns.addEventListener("zoomend", () => {
+      option.onZoomend && option.onZoomend();
+    });
+    this.mapIns.addEventListener("dragend", () => {
+      option.onDragend && option.onDragend();
+    });
+    this.mapIns.addEventListener("click", (e) => {
+      option.onClick && option.onClick(e);
+    });
+    option.onRendered && option.onRendered(this.mapIns);
+  }
+  /**
+   * 销毁地图
+   */
+  destroyMap() {
+    this.centerMarker = null;
+    this.placeSearchIns = null;
+    this.mapIns = null;
+  }
+  /**
+   * 获取地图实例
+   */
+  getMapInstance() {
+    return this.mapIns;
+  }
+  /**
+   * 获取地图中心点
+   */
+  getMapCenter(returnRegions) {
+    return new Promise((resolve, reject) => {
+      if (!this.mapIns) {
+        reject(new Error("map instance is null"));
+        return;
+      }
+      const centerPoint = this.mapIns.getCenter() || {};
+      if (!returnRegions) {
+        resolve(centerPoint);
+        return;
+      }
+      const geo = new T.Geocoder();
+      geo.getLocation(centerPoint, (result) => {
+        const status = result.getStatus();
+        if (status == 0) {
+          const address = result.getAddressComponent() || {};
+          const addressComponent = address.addressComponent || {};
+          resolve({
+            ...centerPoint,
+            address: result.getAddress(),
+            city: {
+              district: addressComponent.county,
+              ...addressComponent
+            }
+          });
+        } else {
+          reject(new Error(`${status} ${result.getMsg()}`));
+        }
+      });
+    });
+  }
+  /**
+   * 设置地图中心点
+   * @param lng 经度
+   * @param lat 纬度
+   * @param zoom 缩放等级
+   */
+  setMapCenter(lng, lat, zoom) {
+    if (lng == null || lat == null) {
+      return;
+    }
+    if (!this.mapIns) {
+      console.error("map instance is null");
+      return;
+    }
+    const point = new T.LngLat(lng, lat);
+    this.mapIns.panTo(point, zoom);
+  }
+  /**
+   * 设置地图风格
+   * @param style 风格
+   */
+  setMapStyle(style) {
+    if (!this.mapIns) {
+      console.error("map instance is null");
+      return;
+    }
+    if (typeof style === "boolean") {
+      if (style) {
+        this.mapIns.setStyle(darkStyle);
+      } else {
+        this.mapIns.removeStyle();
+      }
+    } else if (style) {
+      this.mapIns.setStyle(style);
+    } else {
+      this.mapIns.removeStyle();
+    }
+  }
+  /**
+   * 显示地图中心标记点
+   * @param lng 经度
+   * @param lat 纬度
+   */
+  showCenterMarker(lng, lat) {
+    this.removeCenterMarker();
+    if (lng != null && lat != null) {
+      if (!this.centerMarker) {
+        console.error("centerMarker is null");
+        return;
+      }
+      if (!this.mapIns) {
+        console.error("map instance is null");
+        return;
+      }
+      this.centerMarker.setLngLat(new T.LngLat(lng, lat));
+      this.mapIns.addOverLay(this.centerMarker);
+    }
+  }
+  /**
+   * 移除地图中心标记点
+   */
+  removeCenterMarker() {
+    if (this.centerMarker && this.mapIns) {
+      this.mapIns.removeOverLay(this.centerMarker);
+    }
+  }
+  /**
+   * 根据关键字检索位置
+   * @param keyword 关键字
+   */
+  searchKeyword(keyword) {
+    return new Promise((resolve, reject) => {
+      if (!this.placeSearchIns) {
+        reject(new Error("LocalSearch instance is null"));
+        return;
+      }
+      this.searchNearByCallback = (result) => {
+        this.searchNearByCallback = void 0;
+        if (!result) {
+          reject(new Error(JSON.stringify(result)));
+          return;
+        }
+        const data = [];
+        (result.getPois() || []).forEach((poi) => {
+          if (poi) {
+            const item = this.formatPOI(poi);
+            if (item.lat != null && item.lng != null) {
+              data.push(item);
+            }
+          }
+        });
+        resolve(data);
+      };
+      this.placeSearchIns.search(keyword, 7);
+    });
+  }
+  /**
+   * 检索附近兴趣点
+   * @param option 参数
+   */
+  searchNearBy(option) {
+    return new Promise((resolve, reject) => {
+      if (!this.placeSearchIns) {
+        reject(new Error("LocalSearch instance is null"));
+        return;
+      }
+      this.searchNearByCallback = (result) => {
+        this.searchNearByCallback = void 0;
+        if (!result) {
+          reject(new Error(JSON.stringify(result)));
+          return;
+        }
+        const data = [];
+        (result.getPois() || []).forEach((poi) => {
+          if (poi) {
+            const item = this.formatPOI(poi);
+            if (item.lat != null && item.lng != null) {
+              data.push(item);
+            }
+          }
+        });
+        resolve(data);
+      };
+      this.placeSearchIns.searchNearby(
+        option.poiKeywords ?? option.poiType ?? "楼栋",
+        // @ts-ignore
+        new T.LngLat(option.lng, option.lat),
+        option.poiRadius
+      );
+    });
+  }
+  /**
+   * 通知地图更改容器大小
+   */
+  checkResize() {
+    this.mapIns && this.mapIns.checkResize();
+  }
+}
+export {
+  TMapPlugin
+};

package/es/ele-map-picker/types.d.ts

@@ -37,25 +37,149 @@ export interface PoiItem extends Record<string, any> {
   city?: City;
 }
 
+/**
+ * 地图点击事件数据
+ */
+export interface MapClickData {
+  /** 点击的坐标点 */
+  lnglat: Required<Pick<PoiItem, 'lat' | 'lng'>>;
+}
+
+/**
+ * 地图渲染参数
+ */
+export interface MapRenderOption {
+  /** 高德地图密钥 */
+  mapKey?: string;
+  /** 高德地图版本号 */
+  mapVersion?: string;
+  /** 缩放级别 */
+  zoom?: number;
+  /** 中心点 */
+  center?: [number, number];
+  /** 地图风格 */
+  mapStyle?: string | Record<string, any>;
+  /** 是否是深色模式 */
+  darkMode?: boolean;
+  /** 输入建议的城市范围 */
+  suggestionCity?: string;
+  /** POI检索兴趣点类别 */
+  poiType?: string;
+  /** POI检索最大数量 */
+  poiLimit?: number;
+  /** 地图中心图标地址 */
+  markerSrc?: string;
+  /** 地图加载完成事件 */
+  onComplete?: () => void;
+  /** 地图移动结束事件 */
+  onMoveend?: () => void;
+  /** 地图点击事件 */
+  onClick?: (data: MapClickData) => void;
+  /** 地图创建完成事件 */
+  onRendered?: (mapIns: any) => void;
+  /** 地图尺寸改变事件 */
+  onResizeend?: () => void;
+  /** 地图缩放结束事件 */
+  onZoomend?: () => void;
+  /** 地图拖动结束事件, 和 onMoveend 二选一 */
+  onDragend?: () => void;
+}
+
+/**
+ * 检索附近兴趣点参数
+ */
+export interface SearchNearByOption {
+  /** 经度 */
+  lng: number;
+  /** 纬度 */
+  lat: number;
+  /** POI检索半径 */
+  poiRadius: number;
+  /** POI检索关键字 */
+  poiKeywords?: string;
+  /** POI检索兴趣点类别 */
+  poiType?: string;
+}
+
+/**
+ * 地图插件
+ */
+export interface MapPlugin {
+  /**
+   * 渲染地图
+   * @param mapEl 地图容器节点
+   * @param option 地图渲染参数
+   */
+  renderMap: (mapEl: HTMLElement, option: MapRenderOption) => void;
+  /**
+   * 销毁地图
+   */
+  destroyMap: () => void;
+  /**
+   * 获取地图实例
+   */
+  getMapInstance: () => any;
+  /**
+   * 获取地图中心点
+   */
+  getMapCenter: (returnRegions?: boolean) => Promise<PoiItem>;
+  /**
+   * 设置地图中心点
+   * @param lng 经度
+   * @param lat 纬度
+   * @param zoom 缩放等级
+   */
+  setMapCenter: (lng?: number, lat?: number, zoom?: number) => void;
+  /**
+   * 设置地图风格
+   * @param style 风格
+   */
+  setMapStyle: (style?: boolean | string | Record<string, any>) => void;
+  /**
+   * 显示地图中心标记点
+   * @param lng 经度
+   * @param lat 纬度
+   */
+  showCenterMarker: (lng?: number, lat?: number) => void;
+  /**
+   * 移除地图中心标记点
+   */
+  removeCenterMarker: () => void;
+  /**
+   * 根据关键字检索位置
+   * @param keyword 关键字
+   */
+  searchKeyword: (keyword: string) => Promise<PoiItem[]>;
+  /**
+   * 检索附近兴趣点
+   * @param option 参数
+   */
+  searchNearBy: (option: SearchNearByOption) => Promise<PoiItem[]>;
+  /**
+   * 通知地图更改容器大小
+   */
+  checkResize?: () => void;
+}
+
+/**
+ * 地图插件构造函数
+ */
+export type MapPluginConstructor = new () => MapPlugin;
+
 /**
  * 实例
  */
 export interface MapState {
-  context?: any;
   /** 上次搜索建议 */
   lastSuggestion?: string;
   /** 选中的搜索建议 */
   selectedSuggestion?: PoiItem | null;
   /** 是否是选中条目移动地图 */
   isItemClickMove?: boolean;
-  /** 地图实例 */
-  mapIns?: any;
-  /** 检索实例 */
-  placeSearchIns?: any;
-  /** 搜索建议实例 */
-  autoCompleteIns?: any;
-  /** 地图标记点 */
-  centerMarker?: any;
+  /** 地图插件实例 */
+  mapPluginIns?: MapPlugin | null;
+  /** 地图位置 */
+  context?: any;
 }
 
 /**

package/es/ele-map-picker/util.d.ts

@@ -0,0 +1,11 @@
+import { City } from './types';
+
+/**
+ * 默认地图中心图标地址
+ */
+export declare const defaultMarkerSrc = "https://3gimg.qq.com/lightmap/components/locationPicker2/image/marker.png";
+/**
+ * 判断行政区数据是否为空
+ * @param city 行政区数据
+ */
+export declare function isNullCity(city?: City): boolean;

package/es/ele-map-picker/util.js

@@ -0,0 +1,11 @@
+const defaultMarkerSrc = "https://3gimg.qq.com/lightmap/components/locationPicker2/image/marker.png";
+function isNullCity(city) {
+  if (city == null || typeof city !== "object" || city.province == null && city.city == null && city.district == null && city.citycode == null) {
+    return true;
+  }
+  return false;
+}
+export {
+  defaultMarkerSrc,
+  isNullCity
+};