gdmap-utils 1.1.4 → 1.1.5

package/src/layers copy/OverlayGroupManager.js

@@ -1,254 +1,254 @@
-import { addClassToDiv } from '@/utils/ruoyi.js';
-export default class OverlayGroupManager {
-  //
-
-  _overlayType = null; //统一管理的marker类型
-
-  OverlayGroup = null; //分组管理对象
-
-  events = new Map(); //保存事件的集合
-
-  activesMarkerIds = []; //保存激活的marker集合
-
-  overlayActiveIcon = null; //激活的图标
-
-  overlayDefaultIcon = null;
-
-  allPointTitlesShow = false; //标识点位title是否打开
-
-  map = null; //图层关联的Map对象
-  // 构造函数
-  constructor(options) {
-    if (!options || AMap === undefined) {
-      return this.error('AMap is undefined or options is undefined');
-    }
-
-    const { overlayType, overlays, map } = options;
-
-    this.OverlayGroup = new AMap.OverlayGroup(overlays);
-
-    this._overlayType = overlayType; //图层类型
-
-    this.overlayActiveIcon = overlays?.activeIcon || null; //图层激活的图标
-
-    this.overlayDefaultIcon = overlays?.defaultIcon || null; //图层默认的图标
-
-    this.map = map; //保存图层关联的Map对象
-
-    this.OverlayGroup.setMap(map); //设置图层的地图对象
-  }
-
-  // 添加覆盖物
-  addOverlay(overlays) {
-    if (!overlays) {
-      this.error('请传入图层对象');
-      return;
-    }
-
-    let overlayList = [].concat(overlays); // 处理传入的参数为数组
-
-    overlayList.forEach(item => {
-      this.addMarkerBindEvent(item); // 绑定事件
-    });
-
-    this.OverlayGroup.addOverlays(overlayList);
-  }
-  // 移除覆盖物
-  removeOverlay(overlays) {
-    if (!overlays) {
-      this.error('请传入图层对象');
-      return;
-    }
-
-    let overlayList = [].concat(overlays); // 处理传入的参数为数组
-
-    this.OverlayGroup.removeOverlays(overlayList);
-  }
-
-  hideOverlay() {
-    this?.OverlayGroup?.hide();
-  }
-
-  showOverlay() {
-    this?.OverlayGroup?.show();
-  }
-
-  //给所有的marker绑定事件
-  bindEventMarker(clickType, callback) {
-    if (typeof callback !== 'function') {
-      this.error('请传入事件回调函数');
-      return;
-    }
-
-    // 获取地图的所有点位，绑定上事件
-    this.OverlayGroup.on(clickType, callback);
-
-    // 保存事件
-    this.events.set(clickType, callback);
-  }
-
-  addMarkerBindEvent(marker) {
-    // 获取对应marker的事件，绑定给对应的marker
-    for (const element of this.events) {
-      // 遍历事件集合，给marker绑定事件
-      const [clickType, callback] = element;
-
-      marker.on(clickType, callback);
-    }
-  }
-
-  // 查找图层对象中的某一个marker
-  findLayerMarker(markerId) {
-    if (!markerId) {
-      this.error('请传入markerId');
-      return;
-    }
-    if (markerId instanceof AMap.Marker) {
-      return markerId; // 如果传入的是marker对象，直接返回
-    }
-    const marker = this.OverlayGroup.getOverlays().find(item => {
-      return item.getExtData().id === markerId;
-    });
-
-    return marker || null; // 如果没有找到，返回null
-  }
-
-  // 设置激活的marker
-  setActiveMarker(marker) {
-    if (this.overlayActiveIcon === null) return; //表明用户不需要激活
-    marker = this.findLayerMarker(marker); // 查找图层对象中的某一个marker
-
-    if (!marker) {
-      // 如果没有找到对应的marker
-      return this.error('marker is not found');
-    }
-
-    const curOpts = marker.getIcon()._opts;
-
-    const activeIcon = marker._originOpts.activeIcon;
-
-    const icon = this.createIcon(activeIcon, curOpts); // 创建新图标
-
-    // 获取点击的标记对象
-    marker.setIcon(icon);
-
-    const labelParams = marker.getLabel(); //保存配置
-
-    // 激活始终显示title
-    labelParams.content = labelParams.content.replace('display-none', '');
-
-    marker.setLabel(labelParams);
-
-    // 保存激活状态
-    this.activesMarkerIds.push(marker.getExtData().id);
-  }
-  //[ ]  待重构
-  toggleAllPointTitles(selector, val) {
-    // this.refreshMap(); //重新加载图层
-    const elms = document.querySelectorAll('.amap-marker'); //获取所有的marker元素
-    this.allPointTitlesShow = val;
-    if (!val) {
-      elms.forEach(elm => {
-        elm.querySelector(selector).classList.add('display-none');
-        elm.querySelector('.amap-marker-label').style.pointerEvents = 'none';
-      });
-    } else {
-      elms.forEach(elm => {
-        elm.querySelector(selector).classList.remove('display-none');
-        elm.querySelector('.amap-marker-label').style.pointerEvents = '';
-      });
-    }
-  }
-
-  //业务场景是单个图标为激活状态 重置激活的marker
-  resetActiveMarker() {
-    // 遍历所有的marker，重置 their icon
-    this.OverlayGroup.getOverlays().forEach(item => {
-      if (this.activesMarkerIds.includes(item.getExtData().id)) {
-        const curOpts = item.getIcon()._opts;
-
-        const defaultIcon = item._originOpts.defaultIcon;
-
-        const icon = this.createIcon(defaultIcon, curOpts); // 创建新图标
-
-        // 如果是激活的marker，重置图标
-        item.setIcon(icon); // 设置默认图标
-
-        let labelParams = item.getLabel();
-        if (!this.allPointTitlesShow) {
-          labelParams.content = addClassToDiv(
-            labelParams?.content || '',
-            'display-none'
-          );
-        } else {
-          labelParams.content = labelParams.content.replace('display-none', '');
-        }
-
-        item.setLabel(labelParams);
-      }
-    });
-    // 清空激活状态
-    this.activesMarkerIds = [];
-  }
-
-  // 获取点位存储的marker数据
-  getDataOfMarkers() {
-    if (!this.OverlayGroup) return [];
-    return this.OverlayGroup.getOverlays().map(item => item.getExtData());
-  }
-
-  // 错误提示
-  error(msg) {
-    console.error(`[OverlayGroupManager Error]:${msg}`);
-  }
-
-  //业务场景是单个图标为激活状态 重置激活的marker
-  resetActiveNavMarker() {
-    // 遍历所有的marker，重置 their icon
-    this.OverlayGroup.getOverlays().forEach(item => {
-      if (this.activesMarkerIds.includes(item.getExtData().id)) {
-        const curOpts = item.getIcon()._opts;
-
-        const markerOpts = item._opts;
-
-        const icon = this.createIcon(this.overlayDefaultIcon, curOpts); // 创建新图标
-
-        // 如果是激活的marker，重置图标
-        item.setIcon(icon); // 设置默认图标
-
-        item.setLabel(markerOpts.originLabel);
-      }
-    });
-    // 清空激活状态
-    this.activesMarkerIds = [];
-  }
-}
-
-const gdMixin = {
-  // 提取创建 Icon 的逻辑
-  createIcon(imageUrl, iconOpts) {
-    //HACK 单一原则
-    return new AMap.Icon({
-      image: imageUrl, // 图标图片 URL
-      size: new AMap.Size(...iconOpts.size), // 图标大小
-      imageSize: new AMap.Size(...iconOpts.imageSize), // 图片实际大小
-    });
-  },
-};
-
-// 混入mixin
-Object.assign(OverlayGroupManager.prototype, gdMixin);
-/*
-责单一原则：
-
-gdMixin 的职责是封装与 AMap.Icon 相关的逻辑，即创建图标。
-setIcon 是直接操作 marker 对象的方法，属于业务逻辑的一部分，与 AMap.Icon 的创建逻辑分离更符合职责单一原则。
-复用性
-
-createIcon 方法可以在多个地方复用，例如在 setActiveMarker 和 resetActiveMarker 中。
-setIcon 是直接操作 marker 的方法，通常只在特定的业务逻辑中使用，复用性较低。
-代码清晰性：
-
-将 setIcon 保留在业务逻辑中，可以让代码更直观，便于理解。
-如果将其放入 gdMixin 中，可能会让混入的逻辑变得复杂，降低代码的可读性。
-*/
+import { addClassToDiv } from '@/utils/ruoyi.js';
+export default class OverlayGroupManager {
+  //
+
+  _overlayType = null; //统一管理的marker类型
+
+  OverlayGroup = null; //分组管理对象
+
+  events = new Map(); //保存事件的集合
+
+  activesMarkerIds = []; //保存激活的marker集合
+
+  overlayActiveIcon = null; //激活的图标
+
+  overlayDefaultIcon = null;
+
+  allPointTitlesShow = false; //标识点位title是否打开
+
+  map = null; //图层关联的Map对象
+  // 构造函数
+  constructor(options) {
+    if (!options || AMap === undefined) {
+      return this.error('AMap is undefined or options is undefined');
+    }
+
+    const { overlayType, overlays, map } = options;
+
+    this.OverlayGroup = new AMap.OverlayGroup(overlays);
+
+    this._overlayType = overlayType; //图层类型
+
+    this.overlayActiveIcon = overlays?.activeIcon || null; //图层激活的图标
+
+    this.overlayDefaultIcon = overlays?.defaultIcon || null; //图层默认的图标
+
+    this.map = map; //保存图层关联的Map对象
+
+    this.OverlayGroup.setMap(map); //设置图层的地图对象
+  }
+
+  // 添加覆盖物
+  addOverlay(overlays) {
+    if (!overlays) {
+      this.error('请传入图层对象');
+      return;
+    }
+
+    let overlayList = [].concat(overlays); // 处理传入的参数为数组
+
+    overlayList.forEach(item => {
+      this.addMarkerBindEvent(item); // 绑定事件
+    });
+
+    this.OverlayGroup.addOverlays(overlayList);
+  }
+  // 移除覆盖物
+  removeOverlay(overlays) {
+    if (!overlays) {
+      this.error('请传入图层对象');
+      return;
+    }
+
+    let overlayList = [].concat(overlays); // 处理传入的参数为数组
+
+    this.OverlayGroup.removeOverlays(overlayList);
+  }
+
+  hideOverlay() {
+    this?.OverlayGroup?.hide();
+  }
+
+  showOverlay() {
+    this?.OverlayGroup?.show();
+  }
+
+  //给所有的marker绑定事件
+  bindEventMarker(clickType, callback) {
+    if (typeof callback !== 'function') {
+      this.error('请传入事件回调函数');
+      return;
+    }
+
+    // 获取地图的所有点位，绑定上事件
+    this.OverlayGroup.on(clickType, callback);
+
+    // 保存事件
+    this.events.set(clickType, callback);
+  }
+
+  addMarkerBindEvent(marker) {
+    // 获取对应marker的事件，绑定给对应的marker
+    for (const element of this.events) {
+      // 遍历事件集合，给marker绑定事件
+      const [clickType, callback] = element;
+
+      marker.on(clickType, callback);
+    }
+  }
+
+  // 查找图层对象中的某一个marker
+  findLayerMarker(markerId) {
+    if (!markerId) {
+      this.error('请传入markerId');
+      return;
+    }
+    if (markerId instanceof AMap.Marker) {
+      return markerId; // 如果传入的是marker对象，直接返回
+    }
+    const marker = this.OverlayGroup.getOverlays().find(item => {
+      return item.getExtData().id === markerId;
+    });
+
+    return marker || null; // 如果没有找到，返回null
+  }
+
+  // 设置激活的marker
+  setActiveMarker(marker) {
+    if (this.overlayActiveIcon === null) return; //表明用户不需要激活
+    marker = this.findLayerMarker(marker); // 查找图层对象中的某一个marker
+
+    if (!marker) {
+      // 如果没有找到对应的marker
+      return this.error('marker is not found');
+    }
+
+    const curOpts = marker.getIcon()._opts;
+
+    const activeIcon = marker._originOpts.activeIcon;
+
+    const icon = this.createIcon(activeIcon, curOpts); // 创建新图标
+
+    // 获取点击的标记对象
+    marker.setIcon(icon);
+
+    const labelParams = marker.getLabel(); //保存配置
+
+    // 激活始终显示title
+    labelParams.content = labelParams.content.replace('display-none', '');
+
+    marker.setLabel(labelParams);
+
+    // 保存激活状态
+    this.activesMarkerIds.push(marker.getExtData().id);
+  }
+  //[ ]  待重构
+  toggleAllPointTitles(selector, val) {
+    // this.refreshMap(); //重新加载图层
+    const elms = document.querySelectorAll('.amap-marker'); //获取所有的marker元素
+    this.allPointTitlesShow = val;
+    if (!val) {
+      elms.forEach(elm => {
+        elm.querySelector(selector).classList.add('display-none');
+        elm.querySelector('.amap-marker-label').style.pointerEvents = 'none';
+      });
+    } else {
+      elms.forEach(elm => {
+        elm.querySelector(selector).classList.remove('display-none');
+        elm.querySelector('.amap-marker-label').style.pointerEvents = '';
+      });
+    }
+  }
+
+  //业务场景是单个图标为激活状态 重置激活的marker
+  resetActiveMarker() {
+    // 遍历所有的marker，重置 their icon
+    this.OverlayGroup.getOverlays().forEach(item => {
+      if (this.activesMarkerIds.includes(item.getExtData().id)) {
+        const curOpts = item.getIcon()._opts;
+
+        const defaultIcon = item._originOpts.defaultIcon;
+
+        const icon = this.createIcon(defaultIcon, curOpts); // 创建新图标
+
+        // 如果是激活的marker，重置图标
+        item.setIcon(icon); // 设置默认图标
+
+        let labelParams = item.getLabel();
+        if (!this.allPointTitlesShow) {
+          labelParams.content = addClassToDiv(
+            labelParams?.content || '',
+            'display-none'
+          );
+        } else {
+          labelParams.content = labelParams.content.replace('display-none', '');
+        }
+
+        item.setLabel(labelParams);
+      }
+    });
+    // 清空激活状态
+    this.activesMarkerIds = [];
+  }
+
+  // 获取点位存储的marker数据
+  getDataOfMarkers() {
+    if (!this.OverlayGroup) return [];
+    return this.OverlayGroup.getOverlays().map(item => item.getExtData());
+  }
+
+  // 错误提示
+  error(msg) {
+    console.error(`[OverlayGroupManager Error]:${msg}`);
+  }
+
+  //业务场景是单个图标为激活状态 重置激活的marker
+  resetActiveNavMarker() {
+    // 遍历所有的marker，重置 their icon
+    this.OverlayGroup.getOverlays().forEach(item => {
+      if (this.activesMarkerIds.includes(item.getExtData().id)) {
+        const curOpts = item.getIcon()._opts;
+
+        const markerOpts = item._opts;
+
+        const icon = this.createIcon(this.overlayDefaultIcon, curOpts); // 创建新图标
+
+        // 如果是激活的marker，重置图标
+        item.setIcon(icon); // 设置默认图标
+
+        item.setLabel(markerOpts.originLabel);
+      }
+    });
+    // 清空激活状态
+    this.activesMarkerIds = [];
+  }
+}
+
+const gdMixin = {
+  // 提取创建 Icon 的逻辑
+  createIcon(imageUrl, iconOpts) {
+    //HACK 单一原则
+    return new AMap.Icon({
+      image: imageUrl, // 图标图片 URL
+      size: new AMap.Size(...iconOpts.size), // 图标大小
+      imageSize: new AMap.Size(...iconOpts.imageSize), // 图片实际大小
+    });
+  },
+};
+
+// 混入mixin
+Object.assign(OverlayGroupManager.prototype, gdMixin);
+/*
+责单一原则：
+
+gdMixin 的职责是封装与 AMap.Icon 相关的逻辑，即创建图标。
+setIcon 是直接操作 marker 对象的方法，属于业务逻辑的一部分，与 AMap.Icon 的创建逻辑分离更符合职责单一原则。
+复用性
+
+createIcon 方法可以在多个地方复用，例如在 setActiveMarker 和 resetActiveMarker 中。
+setIcon 是直接操作 marker 的方法，通常只在特定的业务逻辑中使用，复用性较低。
+代码清晰性：
+
+将 setIcon 保留在业务逻辑中，可以让代码更直观，便于理解。
+如果将其放入 gdMixin 中，可能会让混入的逻辑变得复杂，降低代码的可读性。
+*/

package/src/types/BaseMarkerLayer.d.ts

@@ -1,87 +1,87 @@
-import type { MarkerOptions } from './amap';
-import type { MapUtilsConstructor } from '../MapUtils';
-import type {
-  MarkerLayerIns,
-  LabelMarkerLayerIns,
-  MarkerClusterLayerIns,
-  BaseMarkerLayerTypeIns,
-} from '../layers/index';
-
-interface BaseMarkerLayerInfo {
-  markerLayer: {
-    layerIns: MarkerLayerIns;
-    overlayOpts: AMap.MarkerOptions;
-    ovIns: AMap.Marker;
-  };
-  labelMarkerLayer: {
-    layerIns: LabelMarkerLayerIns;
-    overlayOpts: AMap.LabelMarkerOptions;
-    ovIns: AMap.LabelMarker;
-  };
-}
-//定义图层信息
-type MarkerLayerBaseType = 'markerLayer' | 'labelMarkerLayer';
-
-export interface OverlayData<T extends object = {}> {
-  overlayData: {
-    lon: number;
-    lat: number;
-    title: string;
-    id: string;
-    extData: T;
-    weight?: number;
-  };
-  id: string;
-  // 覆盖物配置数据
-  labelShowed: boolean;
-  overlaySelected: boolean; // 当前marker是否被选中
-}
-
-interface LayerOpts<
-  U = {},
-  T extends MarkerLayerBaseType = 'markerLayer',
-  V = BaseMarkerLayerInfo[T],
-> {
-  layerType: T;
-  layerName: string;
-  overlayList: Array<OverlayData<U>>;
-  createOverlays: (mapUtilsIns) => Array<V['overlayIns']>; // 未使用上
-  getIconUrl: (item: OverlayData<U>) => string; //overlayList中优先级更高
-  getOverlayOpts: (
-    item: OverlayData<U>,
-    index: number,
-    MapUtils: MapUtilsConstructor
-  ) => V['overlayOpts']; //动态生成覆盖物配置
-  overlayLayer?: AMap.LabelsLayerOptions;
-}
-
-interface OverlaysLayer<T, U> {
-  rawLayer: U;
-
-  //创建覆盖物
-  createOverlays: (ovOptList: Array<any>) => Array<T>;
-
-  add(markers: Array<any>): void;
-
-  remove(markers: Array<T>): void;
-
-  hide(): void;
-
-  show(): void;
-
-  getAllOverlay(): void;
-
-  destroy: () => void;
-
-  reload: () => void;
-
-  //覆盖物自动适应
-  overlayFitMap: () => void;
-}
-
-export type {
-  BaseMarkerLayerInfo,
-  MarkerLayerBaseType,
-  LayerOpts,
-  OverlaysLayer,
-};
+import type { MarkerOptions } from './amap';
+import type { MapUtilsConstructor } from '../MapUtils';
+import type {
+  MarkerLayerIns,
+  LabelMarkerLayerIns,
+  MarkerClusterLayerIns,
+  BaseMarkerLayerTypeIns,
+} from '../layers/index';
+
+interface BaseMarkerLayerInfo {
+  markerLayer: {
+    layerIns: MarkerLayerIns;
+    overlayOpts: AMap.MarkerOptions;
+    ovIns: AMap.Marker;
+  };
+  labelMarkerLayer: {
+    layerIns: LabelMarkerLayerIns;
+    overlayOpts: AMap.LabelMarkerOptions;
+    ovIns: AMap.LabelMarker;
+  };
+}
+//定义图层信息
+type MarkerLayerBaseType = 'markerLayer' | 'labelMarkerLayer';
+
+export interface OverlayData<T extends object = {}> {
+  overlayData: {
+    lon: number;
+    lat: number;
+    title: string;
+    id: string;
+    extData: T;
+    weight?: number;
+  };
+  id: string;
+  // 覆盖物配置数据
+  labelShowed: boolean;
+  overlaySelected: boolean; // 当前marker是否被选中
+}
+
+interface LayerOpts<
+  U = {},
+  T extends MarkerLayerBaseType = 'markerLayer',
+  V = BaseMarkerLayerInfo[T],
+> {
+  layerType: T;
+  layerName: string;
+  overlayList: Array<OverlayData<U>>;
+  createOverlays: (mapUtilsIns) => Array<V['overlayIns']>; // 未使用上
+  getIconUrl: (item: OverlayData<U>) => string; //overlayList中优先级更高
+  getOverlayOpts: (
+    item: OverlayData<U>,
+    index: number,
+    MapUtils: MapUtilsConstructor
+  ) => V['overlayOpts']; //动态生成覆盖物配置
+  overlayLayer?: AMap.LabelsLayerOptions;
+}
+
+interface OverlaysLayer<T, U> {
+  rawLayer: U;
+
+  //创建覆盖物
+  createOverlays: (ovOptList: Array<any>) => Array<T>;
+
+  add(markers: Array<any>): void;
+
+  remove(markers: Array<T>): void;
+
+  hide(): void;
+
+  show(): void;
+
+  getAllOverlay(): void;
+
+  destroy: () => void;
+
+  reload: () => void;
+
+  //覆盖物自动适应
+  overlayFitMap: () => void;
+}
+
+export type {
+  BaseMarkerLayerInfo,
+  MarkerLayerBaseType,
+  LayerOpts,
+  OverlaysLayer,
+};