gdmap-utils 1.2.0 → 1.2.3

package/src/layers/clusterMarkerLayer/MarkerClusterLayer.ts

@@ -0,0 +1,53 @@
+import type {
+  mapIns,
+  MarkerClusterDataOptions,
+  MarkerClusterOptions,
+} from '@/types/index.d';
+
+class MarkerClusterLayer {
+  rawLayer: any; //高德未提供cluster的类型
+
+  map: mapIns;
+
+  constructor(
+    map: mapIns,
+    dataOptions: Array<MarkerClusterDataOptions>,
+    opts: MarkerClusterOptions
+  ) {
+    this.map = map;
+    //@ts-expect-error
+    this.rawLayer = new AMap.MarkerCluster(map, dataOptions, opts);
+  }
+
+  bindEventMarker(clickType: AMap.EventType, callback: () => void) {
+    this.rawLayer.on(clickType, callback);
+  }
+
+  add(dataOption: MarkerClusterDataOptions) {
+    this.rawLayer.addData(dataOption);
+  }
+
+  remove(dataOptions: Array<MarkerClusterDataOptions>) {
+    this.rawLayer.setData(dataOptions);
+  }
+
+  hide() {
+    this.rawLayer.setData([]);
+  }
+
+  show(dataOptions: Array<MarkerClusterDataOptions>) {
+    this.rawLayer.setData(dataOptions);
+  }
+
+  destroy() {
+    this.rawLayer.setData([]);
+    this.rawLayer.setMap(null);
+    this.rawLayer = null;
+  }
+
+  clearAllOvl() {
+    this.rawLayer.setData([]);
+  }
+}
+
+export default MarkerClusterLayer;

package/src/layers/clusterMarkerLayer/index.ts

@@ -0,0 +1,177 @@
+import MarkerClusterLayer from './MarkerClusterLayer';
+import type {
+  MarkerClusterLayerType,
+  OverlayData, //OverLayerData图层公共接口
+  MarkerClusterDataOptions,
+  ClusterMarkerLayerInfo,
+  ClusterMarkerLayerOpts,
+} from '@/types';
+import { MapUtils } from '@/MapUtils';
+import type { mapUtilsIns } from '@/MapUtils';
+
+class ClusterMarkerLayer<
+  U extends object,
+  T extends MarkerClusterLayerType = 'markerClusterLayer',
+  V extends ClusterMarkerLayerInfo[T] = ClusterMarkerLayerInfo[T],
+> {
+  // 图层类型与控制器类的映射关系
+  static layerClassMap = new Map<string, ClusterMarkerLayerTypeClass>();
+  /**
+   * 注册图层类型与控制器类的关联
+   * @param {string} layerType - 图层类型
+   * @param {Function} layerClass - 图层控制器类
+   */
+  static registerLayer(
+    layerType: MarkerClusterLayerType,
+    layerClass: ClusterMarkerLayerTypeClass
+  ) {
+    if (typeof layerType !== 'string' || typeof layerClass !== 'function') {
+      MapUtils.error('[LayerManager Error]: Invalid layer type or layer class');
+      return;
+    }
+
+    ClusterMarkerLayer.layerClassMap.set(layerType, layerClass);
+  }
+
+  overlayList: Array<OverlayData<U>>;
+  // 策略模式
+  rawLayerIns: V['layerIns'];
+
+  layerVisible: boolean = true;
+
+  layerName: string;
+
+  mapUtils: mapUtilsIns;
+
+  layerType: MarkerClusterLayerType;
+
+  constructor(opts: ClusterMarkerLayerOpts<U, T>, mapUtils: mapUtilsIns) {
+    const { layerType, layerName, ...rest } = opts;
+
+    const OverlaysLayer = ClusterMarkerLayer.layerClassMap.get(layerType);
+
+    if (OverlaysLayer) {
+      // 将OverlayData转换为MarkerClusterDataOptions
+      const clusterData = this.convertOverlayDataToClusterData(
+        opts.overlayList
+      );
+
+      this.rawLayerIns = new OverlaysLayer(
+        mapUtils.map,
+        clusterData,
+        opts.layerOpts
+      );
+    } else {
+      throw new Error(
+        `[ClusterMarkerLayer Error]: Invalid layer type ${layerType}`
+      );
+    }
+
+    this.layerName = layerName;
+
+    this.mapUtils = mapUtils; //上层,mapUtils的实例
+
+    this.overlayList = opts.overlayList;
+
+    this.layerType = opts.layerType;
+
+    Object.assign(this, rest);
+  }
+
+  /**
+   * 将覆盖物数据转换为聚合标记所需的数据格式
+   * @param overlayList 覆盖物数据列表
+   * @returns 聚合标记数据列表
+   */
+  private convertOverlayDataToClusterData(
+    overlayList: Array<OverlayData<U>>
+  ): Array<MarkerClusterDataOptions> {
+    return overlayList.map(item => {
+      return {
+        lnglat: [item.overlayData.lon, item.overlayData.lat],
+        weight: item.overlayData.weight || 1,
+      };
+    });
+  }
+
+  bindEventOverlays(clickType: AMap.EventType, callback: () => void) {
+    this.rawLayerIns.bindEventMarker(clickType, callback);
+  }
+
+  hide() {
+    this.layerVisible = false;
+    this.rawLayerIns.hide();
+  }
+
+  show() {
+    this.layerVisible = true;
+    const clusterData = this.convertOverlayDataToClusterData(this.overlayList);
+    this.rawLayerIns.show(clusterData);
+  }
+
+  destroy() {
+    // @ts-ignore
+    this.mapUtils.removeLayer(this); //从MapUtils中移除
+    this.rawLayerIns.destroy(); //地图层面移除
+    this.overlayList = [];
+  }
+
+  clearAllOverlay() {
+    this.overlayList = [];
+    this.rawLayerIns.clearAllOvl();
+  }
+
+  add(overlayList: Array<OverlayData<U>>) {
+    const clusterData = this.convertOverlayDataToClusterData(overlayList);
+
+    this.overlayList.push(...overlayList);
+
+    // 逐个添加聚合数据
+    clusterData.forEach(data => {
+      this.rawLayerIns.add(data);
+    });
+  }
+
+  remove(ovs: Array<number | string>) {
+    if (Array.isArray(ovs)) {
+      // 根据ID移除覆盖物
+      const ids = ovs as Array<string | number>;
+
+      // 更新本地覆盖物列表
+      this.overlayList = this.overlayList.filter(
+        item => !ids.includes(item.id)
+      );
+
+      // 重新设置聚合数据
+      const clusterData = this.convertOverlayDataToClusterData(
+        this.overlayList
+      );
+      this.rawLayerIns.remove(clusterData);
+    }
+    // 聚合图层不支持直接移除单个实例
+  }
+
+  // 返回原始图层对象
+  getRawLayer() {
+    return this.rawLayerIns.rawLayer;
+  }
+}
+
+// 注册聚合图层类型
+ClusterMarkerLayer.registerLayer('markerClusterLayer', MarkerClusterLayer);
+
+// MarkerClusterLayer 类型
+export type MarkerClusterLayerIns = InstanceType<typeof MarkerClusterLayer>;
+
+// 所有聚合图层类型的联合类型
+export type ClusterMarkerLayerTypeIns = MarkerClusterLayerIns;
+
+export type ClusterMarkerLayerTypeClass = typeof MarkerClusterLayer;
+
+export type ClusterMarkerLayerClass = typeof ClusterMarkerLayer;
+
+export type ClusterMarkerLayerIns = InstanceType<ClusterMarkerLayerClass>;
+
+export { MarkerClusterLayer };
+
+export default ClusterMarkerLayer;

package/src/layers/index.ts

@@ -2,4 +2,8 @@
 // 从baseMarkerLayer目录导入BaseMarkerLayer相关内容并重新导出
 export type * from './baseMarkerLayer';
 
+export type * from './clusterMarkerLayer';
+
 export { default as BaseMarkerLayer } from './baseMarkerLayer';
+
+export { default as ClusterMarkerLayer } from './clusterMarkerLayer';

package/src/types/clusterMarkerLayer.d.ts

@@ -0,0 +1,88 @@
+import type { MarkerClusterLayerIns } from '@/layers/clusterMarkerLayer/index.ts';
+import type { OverlayData } from './BaseMarkerLayer';
+//定义聚合图层类型
+type MarkerClusterLayerType = 'markerClusterLayer';
+
+//!------------markerClusterLayer.ts类型代码如下------------------
+// 图层配置信息
+interface MarkerClusterOptions {
+  /** 聚合计算时网格的像素大小，默认 60 */
+  gridSize?: number;
+  /** 最大聚合级别，大于该级别不再聚合，默认 18 */
+  maxZoom?: number;
+  /**
+   * 聚合图标位置是否取所有点（或权重最大点）的中心。
+   * 默认为 true。
+   */
+  averageCenter?: boolean;
+  /** 地图缩放过程中是否实时重算聚合，默认 false */
+  clusterByZoomChange?: boolean;
+  /**
+   * 聚合图标样式数组，按聚合数量区间 1-10、11-100、101-1000… 顺序给出。
+   * 当数量超出给定样式时，剩余区间使用默认样式。
+   */
+  styles?: Array<{
+    /** 图标图片地址（必选） */
+    url: string;
+    /** 图标尺寸（必选） */
+    size: AMap.Size;
+    /** 图标定位偏移，默认 (0,0) */
+    offset?: AMap.Pixel;
+    /** 图片背景偏移，等同 CSS background-position，默认 (0,0) */
+    imageOffset?: AMap.Pixel;
+    /** 文字颜色，默认 "#000000" */
+    textColor?: string;
+    /** 文字大小，默认 10 */
+    textSize?: number;
+  }>;
+  /**
+   * 自定义聚合点绘制逻辑，指定后 styles 失效。
+   * @param context 聚合上下文
+   */
+  renderClusterMarker?: (context: {
+    /** 当前聚合包含的 Marker 数量 */
+    count: number;
+    /** 当前聚合所对应的 Marker 对象（可进一步修改其 Icon、内容等） */
+    marker: AMap.Marker;
+  }) => void;
+  /**
+   * 自定义非聚合点绘制逻辑。
+   * @param context 非聚合点上下文
+   */
+  renderMarker?: (context: {
+    /** 非聚合的 Marker 对象 */
+    marker: AMap.Marker;
+  }) => void;
+}
+
+type MarkerClusterDataOptions<T extends {} = {}> = {
+  weight: number;
+  lnglat: [number, number];
+} & T;
+
+type ClusterMarkerLayerInfo = {
+  markerClusterLayer: {
+    layerIns: MarkerClusterLayerIns;
+    layerOpts: MarkerClusterOptions;
+  };
+};
+
+interface ClusterMarkerLayerOpts<
+  U = {},
+  T extends MarkerClusterLayerType = 'markerClusterLayer',
+  V = ClusterMarkerLayerInfo[T],
+> {
+  layerType: T;
+  layerName: string;
+  overlayList: Array<OverlayData<U>>;
+  layerOpts: V['layerOpts'];
+}
+
+export type {
+  MarkerClusterLayerType,
+  MarkerClusterOptions,
+  MarkerClusterDataOptions,
+  // 图层定义类型代码
+  ClusterMarkerLayerInfo,
+  ClusterMarkerLayerOpts,
+};

package/src/types/index.d.ts

@@ -4,6 +4,8 @@ export type * from './MapUtils';
 // 从BaseMarkerLayer.d.ts导入并重新导出类型
 export type * from './BaseMarkerLayer';
 
+export type * from './clusterMarkerLayer';
+
 interface Window {
   _AMapSecurityConfig?: {
     securityJsCode: string;

package/src/gdMapUtils.js

@@ -1,377 +0,0 @@
-import AMapLoader from '@amap/amap-jsapi-loader';
-import gdHelperMixin from './gdHelper.js'; //抽取的高德mixin工具函数
-import OverlayGroupManager from './layers/OverlayGroupManager.js';
-import eventMixin from '../eventMixin.js';
-import LayerManager from './LayerManager.js';
-
-/**
- * 针对高德的二次封装
- * 目前高德地图使用的是 GCJ-02 坐标，如果你采集的是 WGS84 坐标或者其他，请先进行坐标转换
- */
-class GdMapUtils {
-  // 地图实例对象
-  map = null;
-  //高德AMap对象
-  AMap = null;
-  // 地图Ui对象
-  AMapUI = null;
-  // loadOpts加载的配置信息 地图配置和加载地图配置分开
-  loadOpts = {};
-  // 地图容器id
-  id = '';
-  // 地图的配置对象
-  mapOpts = {};
-
-  mapTitleLayers = {}; //图层map对象  第三方图层
-
-  // 缓存实例集合
-  static mapInstance = new Map();
-
-  overlayGroupManagerMap = new Map(); //HACK 是否移入到OverlayGroupManager中。
-
-  // 图层实例映射
-  layerInstances = new Map();
-
-  // 图层管理器
-  layerManager = LayerManager;
-
-  /**
-   * 加载地图和初始化地图分开
-   * @param {Object} options 加载高德初始化地图配置
-   */
-  //TODO  构造函数能够接收this.map对象
-  constructor(options) {
-    if (!options) {
-      this.error('请传入配置对象');
-    }
-    // 某些API加载前必须设置秘钥
-    window._AMapSecurityConfig = {
-      securityJsCode: process.env.VUE_APP_GD_MAP_CODE, // 安全密钥
-    };
-    options.key = process.env.VUE_APP_GD_MAP_KEY;
-    this.loadOpts = options;
-    this.clickMapRestMarkers = options.clickMapRestMarkers ?? true;
-  }
-
-  error(msg) {
-    console.error(`[AmapUtils Error]:${msg}`);
-  }
-
-  /**
-   * 异步加载地图插件
-   * @param {String} plugins  AMap.ToolBar
-   * @returns {Promise}
-   * @memberof GdMapUtils
-   */
-  loadPlugins(plugins) {
-    return new Promise((resolve, reject) => {
-      this.AMap.plugin(plugins, function (result) {
-        resolve(result);
-      });
-    });
-  }
-
-  /**
-   * 异步加载UI插件
-   * @param {String} plugins overlay/AwesomeMarker
-   * @return {Promise}
-   * @memberof GdMapUtils
-   */
-  loadUIPlugins(plugins) {
-    return new Promise((resolve, reject) => {
-      if (!this.AMapUI) {
-        reject(new Error('AMapUI is not initialized.')); // 提供错误信息
-        return;
-      }
-      this.AMapUI.loadUI(plugins, function (result) {
-        if (result) {
-          resolve(result);
-        } else {
-          reject(new Error('Failed to load UI plugin.')); // 处理加载失败的情况
-        }
-      });
-    });
-  }
-
-  /**
-   * 初始化地图
-   * @param {String} id  DOM 的id
-   * @param {Object} options Map地图配置项
-   * @return {Promise}
-   * @memberof GdMapUtils
-   */
-  initMap(id, options) {
-    this.id = id;
-    this.mapOpts = options;
-    return new Promise((resolve, reject) => {
-      // 确保每次的AMap都是合法的所以不分开创建
-      AMapLoader.load(this.loadOpts)
-        .then(AMap => {
-          // 将 AMap 全局对象挂载到 window 上
-          window.AMap = AMap;
-
-          this.AMapUI = window.AMapUI;
-
-          this.AMap = AMap;
-
-          this.map = new AMap.Map(this.id, this.mapOpts); //"container"为 <div> 容器的 id
-
-          resolve(this.map);
-          // 将当前实例存储到 mapInstance 中
-          GdMapUtils.mapInstance.set(id, this);
-
-          this.bindMapClickEvent(); //初始化绑定事件
-        })
-        .catch(e => {
-          reject(e);
-          console.error(e);
-          throw new Error(e);
-        });
-    });
-  }
-  /**
-   * 连接到已有地图
-   * @param {String} id  DOM 的id
-   * @param {Object} map 已经存在的地图实例
-   * @return {Promise}
-   * @memberof GdMapUtils
-   */
-  linkToExistMap(id, gdMapIns) {
-    if (!id || !('options' in gdMapIns)) {
-      //HACK map上挂属性标识他为地图实例
-      return this.error('请传入正确的地图id和地图实例');
-    }
-
-    this.id = id;
-    // 关联地图配置
-    this.mapOpts = gdMapIns.options;
-
-    this.AMap = AMap; //HACK 异步获取AMap对象, 根据map获取当前地图AMap
-
-    this.AMapUI = window.AMapUI; //HACK  AMapUI 是个啥
-
-    this.map = gdMapIns; // 关联地图实例
-
-    this.bindMapClickEvent(); //初始化绑定事件
-    // 将当前实例存储到 mapInstance 中
-    GdMapUtils.mapInstance.set(id, this);
-
-    return this.map;
-  }
-
-  // 初始化绑定地图事件
-  bindMapClickEvent() {
-    this.map.on('click', () => {
-      if (this.clickMapRestMarkers) {
-        this.overlayGroupManagerMap.forEach(overlayGroup => {
-          overlayGroup.resetActiveMarker(); // 清除图层上的所有覆盖物
-        });
-      }
-    });
-
-    // 绑定缩放时间获取当前层级
-    this.map.on('zoomchange', () => {
-      const zoom = this.map.getZoom(); // 获取当前缩放级别
-    });
-  }
-
-  //给所有的marker绑定事件
-  bindEventMarker(type, clickType, callback) {
-    if (!this.getOverlayGroupManager(type)) {
-      return this.error('图层不存在，请检查输入!');
-    }
-    this.getOverlayGroupManager(type).bindEventMarker(clickType, callback); // 绑定事件到图层管理器
-  }
-
-  //创建点位
-  createMarker(type, Opts) {
-    const overlayGroupManager = this.createOverlayGroupManager(Opts, type); // 关联图层管理器
-    // 创建图标
-    const marker = new AMap.Marker(Opts);
-
-    // marker上地图
-    overlayGroupManager.addOverlay(marker);
-
-    return marker;
-  }
-
-  // 关联图层管理器
-  createOverlayGroupManager(overlays, overlayType) {
-    const overlayManager = this.getOverlayGroupManager(overlayType); //获取图层管理器
-
-    if (overlayManager) return overlayManager; //图层已经关联了
-
-    const overlayGroupManager = new OverlayGroupManager({
-      overlays,
-      overlayType,
-      map: this.map,
-    });
-
-    this.overlayGroupManagerMap.set(overlayType, overlayGroupManager); //保存图层管理器
-
-    return overlayGroupManager;
-  }
-
-  // 获取图层管理器
-  getOverlayGroupManager(overlayType) {
-    if (typeof overlayType !== 'string' && overlayType.length === 0) {
-      return this.error('请传入图层类型');
-    }
-
-    return this.overlayGroupManagerMap.get(overlayType);
-  }
-
-  updateMarker(marker, Opts) {
-    if (!marker) {
-      return this.error('参数错误');
-    }
-    // 获取旧marker的类型
-    const { type } = marker.getExtData();
-    // 移除点位数据
-    this.removeMarker(type, marker);
-    // 更新Marker
-    this.createMarker(type, Opts);
-  }
-  //移除某一个marker或者多个marker
-  removeMarker(overlayType, overlay) {
-    if (!this.overlayGroupManagerMap.has(overlayType)) {
-      return this.error('图层不存在，请检查输入!');
-    }
-
-    const overlayGroupManager = this.getOverlayGroupManager(overlayType);
-
-    overlayGroupManager.removeOverlay(overlay); // 关联图层管理器
-  }
-
-  // 清楚所有覆盖物
-  removeAllOverlay() {
-    //BUG 这里只能移除用overlayGroupManagerManager管理的图层
-    this.overlayGroupManagerMap.forEach(overlayGroup => {
-      overlayGroup.OverlayGroup.clearOverlays(); // 清除图层上的所有覆盖物
-    });
-  }
-
-  // 高德地图添加覆盖物
-  mapToAdd(overlay, autoFit = true) {
-    this.map.add(overlay);
-    // 调整到合适的视角
-    // autoFit && this.map.setFitView();
-  }
-
-  // 创建海量点图层
-  createMarkerCluster(data, options) {
-    return new AMap.MarkerCluster(this.map, data, options);
-  }
-
-  // 创建标签图层
-  createLabelLayer(options) {
-    return new AMap.LabelLayer(options);
-  }
-
-  /**
-   * 通过图层类型创建图层
-   * @param {string} layerType - 图层类型
-   * @param {Object} options - 图层配置选项
-   * @returns {Object} 图层控制器实例
-   */
-  createLayer(layerType, options) {
-    // 使用图层管理器创建图层控制器实例
-    const layerController = this.layerManager.createLayer(layerType, options);
-
-    if (layerController) {
-      // 存储图层实例
-      this.layerInstances.set(
-        options?.config?.name || layerType,
-        layerController
-      );
-
-      // 初始化创建图层
-      layerController.createLayer(this).catch(err => {
-        console.error(
-          `[GdMapUtils Error]: Failed to create layer '${layerType}':`,
-          err
-        );
-      });
-    }
-
-    return layerController;
-  }
-
-  /**
-   * 获取指定名称的图层实例
-   * @param {string} layerName - 图层名称
-   * @returns {Object|null} 图层控制器实例
-   */
-  getLayer(layerName) {
-    return this.layerInstances.get(layerName);
-  }
-
-  /**
-   * 移除指定名称的图层
-   * @param {string} layerName - 图层名称
-   * @returns {boolean} 是否移除成功
-   */
-  removeLayer(layerName) {
-    const layerController = this.layerInstances.get(layerName);
-
-    if (layerController) {
-      // 隐藏图层
-      if (typeof layerController.hideLayer === 'function') {
-        layerController.hideLayer();
-      }
-
-      // 从映射中移除
-      this.layerInstances.delete(layerName);
-      return true;
-    }
-
-    return false;
-  }
-
-  /**
-   * 获取所有图层实例
-   * @returns {Array} 图层控制器实例数组
-   */
-  getAllLayers() {
-    return Array.from(this.layerInstances.values());
-  }
-
-  /**
-   * 显示指定名称的图层
-   * @param {string} layerName - 图层名称
-   * @returns {boolean} 是否显示成功
-   */
-  showLayer(layerName) {
-    const layerController = this.layerInstances.get(layerName);
-
-    if (layerController && typeof layerController.showLayer === 'function') {
-      layerController.showLayer();
-      return true;
-    }
-
-    return false;
-  }
-
-  /**
-   * 隐藏指定名称的图层
-   * @param {string} layerName - 图层名称
-   * @returns {boolean} 是否隐藏成功
-   */
-  hideLayer(layerName) {
-    const layerController = this.layerInstances.get(layerName);
-
-    if (layerController && typeof layerController.hideLayer === 'function') {
-      layerController.hideLayer();
-      return true;
-    }
-
-    return false;
-  }
-}
-// 加载工具类方法到gdMapUtils中
-Object.assign(GdMapUtils.prototype, {
-  ...eventMixin,
-  ...gdHelperMixin,
-});
-
-export default GdMapUtils;