gdmap-utils 1.0.0

package/package.json

@@ -0,0 +1,27 @@
+{
+  "name": "gdmap-utils",
+  "version": "1.0.0",
+  "description": "高德地图工具库",
+  "main": "dist/index.js",
+  "types": "dist/index.d.ts",
+  "scripts": {
+    "build": "webpack --mode production",
+    "dev": "webpack --mode development --watch",
+    "test": "echo \"Error: no test specified\" && exit 1"
+  },
+  "keywords": [
+    "map",
+    "utils",
+    "typescript"
+  ],
+  "author": "quyue",
+  "license": "ISC",
+  "devDependencies": {
+    "@types/node": "^24.10.1",
+    "html-webpack-plugin": "^5.6.5",
+    "ts-loader": "^9.5.4",
+    "typescript": "^5.9.3",
+    "webpack": "^5.103.0",
+    "webpack-cli": "^6.0.1"
+  }
+}

package/src/gdMap/gdHelper.js

@@ -0,0 +1,203 @@
+const gdHelperMixin = {
+  /**
+   * 设置地图中心
+   * @param lnglat [xxx,xx]
+   * @param zoom 地图层级
+   */
+  setCenter(lnglat, zoom) {
+    if (zoom !== undefined) {
+      this.map.setZoomAndCenter(zoom, lnglat); //同时设置地图层级与中心点
+    } else {
+      this.map.setCenter(lnglat, true);
+    }
+  },
+  /**
+   * 设置地图缩放级别
+   * @param zoom 地图层级
+   */
+  setZoom(zoom) {
+    this.map.setZoom(zoom);
+  },
+  /**
+   * 根据地图上添加的覆盖物分布情况，自动缩放地图到合适的视野级别
+   * @param {Array} overlays  [marker, marker1] 覆盖物数组 缺省为全部覆盖物
+   * @param {Boolean} immediately 是否立即过渡
+   * @param {Array<Number>} avoid [60,60,60,60] 四周边距，上、下、左、右
+   * @param {number} maxZoom 最大 地图zoom 级别 18
+   */
+  setFitView(...opts) {
+    // 地图适应到最佳视角
+    this.map.setFitView(...opts);
+  },
+  /**
+   * 创建一个图标
+   * @param {[number, number]} size - 图标尺寸，格式为 [width, height]
+   * @param {string} image - 图片的 URL 地址
+   * @param {[number, number]} imageSize - 图标所用图片的大小，格式为 [width, height]
+   * @param {[number, number]} imageOffset - 图标取图的偏移量，格式为 [x, y]
+   */
+  createIcon(size, image, imageSize, imageOffset = [0, 0]) {
+    return new this.AMap.Icon({
+      // 图标尺寸
+      size: this.Size(...size),
+      // 图标的取图地址
+      image: image,
+      // 图标所用图片大小
+      imageSize: this.Size(...imageSize),
+      // 图标取图偏移量
+      imageOffset: this.Pixel(...imageOffset),
+    });
+  },
+  /**
+   * 地物对象的像素尺寸
+   * @param {number} width 宽度
+   * @param {number} height 高度
+   */
+  Size(width, height) {
+    return new this.AMap.Size(width, height);
+  },
+  /**
+   * 像素坐标，确定地图上的一个像素点。
+   * @param {number} x
+   * @param {number} y
+   */
+  Pixel(x, y) {
+    return new this.AMap.Pixel(x, y);
+  },
+  /**
+   * 经纬度坐标，用来描述地图上的一个点位置
+   * @param {Number} lng 经度值
+   * @param {Number} lat 	纬度值
+   * @param {boolean} noWrap 是否自动将经度值修正到 [-180,180] 区间内
+   */
+  LngLat(lng, lat, noWrap = false) {
+    return new this.AMap.LngLat(lng, lat, noWrap);
+  },
+
+  // 加载第三方图层
+  createWMSTileLayer(options) {
+    let layer = new this.AMap.TileLayer.WMS({
+      url: options.wmstxdz,
+      blend: true,
+      tileSize: 256,
+      params: {
+        LAYERS: options.wmstcmc,
+        VERSION: '1.1.0',
+      },
+    });
+    // 设置图层的层级
+    layer.setzIndex(options.hierarchy);
+
+    layer.setMap(this.map);
+    // 保存图层信息
+    this.mapTitleLayers[options.id] = layer;
+  },
+  // 删除图层
+  removeWMSTileLayer(id) {
+    if (!this.mapTitleLayers[id]) {
+      return this.error('图层并不存在，请检查输入!');
+    }
+    // 删除图层信息
+    this.mapTitleLayers[id].setMap(null);
+    delete this.mapTitleLayers[id];
+  },
+
+  // 海量点数据
+  createLabelLayer({ zoom = [1, 20], zIndex = 1000, collision = true, layerClassName, ...rest }) {
+    const labelLayer = new this.AMap.LabelsLayer({
+      zIndex,
+      collision,
+      zoom,
+      ...rest,
+    });
+    labelLayer.setMap(this.map);
+    // HACK: labelLayer获取图层节点方式与原来不同，获取可以抽象marker图层,与labelLayer图层,实现多态
+    // this.overlayGroupManagerMap.set(layerClassName,labelLayer);
+    return labelLayer;
+  },
+  // 创建labelMarker标注
+  createLabelLayerMarker({ icon, text, position, ...rest }) {
+    const label = new this.AMap.LabelMarker({
+      icon: icon,
+      text: text,
+      position: position,
+      ...rest,
+    });
+    return label;
+  },
+
+  createMarkerCluster(points, { _renderClusterMarker, _renderMarker, gridSize }) {
+    return new AMap.MarkerCluster(this.map, points, {
+      gridSize: gridSize, // 设置网格像素大小
+      renderClusterMarker: _renderClusterMarker, // 自定义聚合点样式
+      renderMarker: _renderMarker, // 自定义非聚合点样式
+    });
+  },
+  /*
+    创建点位信息窗体
+    */
+  createInfoWindow({ content, isCustom = true, closeWhenClickMap = true, ...rest }) {
+    return new this.AMap.InfoWindow({
+      content: content,
+      isCustom,
+      closeWhenClickMap: closeWhenClickMap,
+      ...rest,
+    });
+  },
+  /*
+    清楚地图所有信息窗体
+    */
+  clearInfoWindow() {
+    this.map.clearInfoWindow();
+  },
+
+  /* 打开高德信息弹框 */
+  openInfoWindow(infoWindow, ...rest) {
+    infoWindow.open(this.map, ...rest);
+  },
+  // 绘制线路
+  drawPolyline(paths) {
+    return new this.AMap.Polyline({
+      map: this.map,
+      ...paths,
+    });
+  },
+  clearOverlays() {
+    this.map.clearMap(); // 清除地图上的所有覆盖物
+  },
+  removeSingleOverlay(overlay) {
+    this.map.remove(overlay); // 清除地图上某个覆盖物
+  },
+  /**
+   * 创建高德地图驾车导航
+   * @param {Object} options 导航配置
+   * @returns {AMap.Driving} 导航对象
+   */
+  createAMapDriving(options) {
+    return new this.AMap.Driving(options);
+  },
+  /**
+   * 创建高德地图标注
+   * @param {Object} options 标注配置
+   * @returns {AMap.Marker} 标注对象
+   */
+  createAMapMarker(options) {
+    return new this.AMap.Marker({
+      map: this.map,
+      ...options,
+    });
+  },
+  /**
+   * 创建高德地图折线
+   * @param {Object} options 折线配置
+   * @returns {AMap.Polyline} 折线对象
+   */
+  createAMapPolyline(options) {
+    return new this.AMap.Polyline({
+      map: this.map,
+      ...options,
+    });
+  },
+};
+
+export default gdHelperMixin;

package/src/gdMapUtils.js

@@ -0,0 +1,259 @@
+import AMapLoader from '@amap/amap-jsapi-loader';
+import gdHelperMixin from './gdHelper.js'; //抽取的高德mixin工具函数
+import OverlayGroupManager from './OverlayGroupManager.js';
+import eventMixin from '../eventMixin.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中。
+
+  /**
+   * 加载地图和初始化地图分开
+   * @param {Object} options 加载高德初始化地图配置
+   */
+  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();
+  }
+}
+// 加载工具类方法到gdMapUtils中
+Object.assign(GdMapUtils.prototype, {
+  ...eventMixin,
+  ...gdHelperMixin,
+});
+
+export default GdMapUtils;

package/src/index.html

@@ -0,0 +1,14 @@
+<!DOCTYPE html>
+<html lang="zh-CN">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title><%= htmlWebpackPlugin.options.title %></title>
+</head>
+<body>
+    <h1>地图工具库演示</h1>
+    <div id="app">
+        <p>使用 F12 打开控制台，查看 MapUtils 的使用示例。</p>
+    </div>
+</body>
+</html>

package/src/index.ts

@@ -0,0 +1,57 @@
+/**
+ * 地图工具库
+ */
+
+export class MapUtils {
+  /**
+   * 计算两个经纬度之间的距离
+   * @param lat1 第一个点的纬度
+   * @param lon1 第一个点的经度
+   * @param lat2 第二个点的纬度
+   * @param lon2 第二个点的经度
+   * @returns 距离（单位：米）
+   */
+  static calculateDistance(lat1: number, lon1: number, lat2: number, lon2: number): number {
+    const R = 6371e3; // 地球半径（单位：米）
+    const φ1 = lat1 * Math.PI / 180;
+    const φ2 = lat2 * Math.PI / 180;
+    const Δφ = (lat2 - lat1) * Math.PI / 180;
+    const Δλ = (lon2 - lon1) * Math.PI / 180;
+
+    const a = Math.sin(Δφ / 2) * Math.sin(Δφ / 2) +
+              Math.cos(φ1) * Math.cos(φ2) *
+              Math.sin(Δλ / 2) * Math.sin(Δλ / 2);
+    const c = 2 * Math.atan2(Math.sqrt(a), Math.sqrt(1 - a));
+
+    return R * c;
+  }
+
+  /**
+   * 将经纬度转换为墨卡托坐标
+   * @param lat 纬度
+   * @param lon 经度
+   * @returns 墨卡托坐标 [x, y]
+   */
+  static latLngToMercator(lat: number, lon: number): [number, number] {
+    const x = lon * 20037508.34 / 180;
+    let y = Math.log(Math.tan((90 + lat) * Math.PI / 360)) / (Math.PI / 180);
+    y = y * 20037508.34 / 180;
+    return [x, y];
+  }
+
+  /**
+   * 将墨卡托坐标转换为经纬度
+   * @param x 墨卡托坐标 x
+   * @param y 墨卡托坐标 y
+   * @returns 经纬度 [lat, lon]
+   */
+  static mercatorToLatLng(x: number, y: number): [number, number] {
+    const lon = x / 20037508.34 * 180;
+    let lat = y / 20037508.34 * 180;
+    lat = 180 / Math.PI * (2 * Math.atan(Math.exp(lat * Math.PI / 180)) - Math.PI / 2);
+    return [lat, lon];
+  }
+}
+console.log("你好世界哈哈哈");
+
+export default MapUtils;

package/src/layers/CollectionPointLayerController.js

@@ -0,0 +1,140 @@
+// import useEnvSanStore from "@/store/modules/envSan.js";
+import GdMapUtils from '@/utils/gdMap/gdMapUtils.js';
+
+/*
+CollectionPointLayerController
+*/
+// 海量点图层渲染封装
+export default class CollectionPointLayerController {
+  dataList = []; // 数据列表
+
+  // 去掉私有属性标识
+  layerInstance = null; // 图层实例
+
+  // 去掉私有属性标识
+  isLayerCreated = false; // 图层是否已创建
+
+  activeNames = []; // 存储激活图层显示name
+  /**
+   * 经纬度坐标，用来描述地图上的一个点位置
+   * @param {Object} config 图层的config
+   * @param {Function} createOverlay  创建marker的方法
+   * @param {Function} noWrap  requestCallback  拉去marker请求数据并按规定格式返回
+   * @param {Boolean} detectingPosition 是否检测位置变化
+   */
+  constructor({ config, createOverlay, requestCallback }) {
+    this.config = config ?? {}; //保存图层配置
+
+    this.createOverlay = createOverlay;
+
+    this.requestCallback = requestCallback;
+
+    this.activeNames = [...(this?.config?.extraActiveName ?? []), this.config.name]; //图层额外的激活数组
+  }
+
+  // 获取地图工具类实例
+  getGdMapUtilsIns(id = 'gisMap') {
+    return GdMapUtils.mapInstance.get(id);
+  }
+
+  // 创建图层
+  async createLayer(gdMapUtils) {
+    // 获取数据
+    this.dataList = await this.requestCallback();
+
+    const { dataList, config } = this; //保存数据
+
+    if (!this.shouldCreationLayer(config.name)) return; //避免网络时间过长用户切换到切tab
+
+    // 创建海量点渲染
+    this.layerInstance = gdMapUtils.createMarkerCluster(dataList, {
+      gridSize: 80,
+      _renderClusterMarker(context) {
+        // 绘制聚合点时调用
+        const count = dataList.length;
+        const factor = Math.pow(context.count / count, 1 / 18);
+        const div = document.createElement('div');
+        const Hue = 180 - factor * 180;
+        const bgColor = 'hsla(' + Hue + ',100%,50%,0.7)';
+        const fontColor = 'hsla(' + Hue + ',100%,20%,1)';
+        const borderColor = 'hsla(' + Hue + ',100%,40%,1)';
+        const shadowColor = 'hsla(' + Hue + ',100%,50%,1)';
+        div.style.backgroundColor = bgColor;
+        const size = Math.round(30 + Math.pow(context.count / count, 1 / 5) * 20);
+        div.style.width = div.style.height = size + 'px';
+        div.style.border = 'solid 1px ' + borderColor;
+        div.style.borderRadius = size / 2 + 'px';
+        div.style.boxShadow = '0 0 1px ' + shadowColor;
+        div.innerHTML = context.count;
+        div.style.lineHeight = size + 'px';
+        div.style.color = fontColor;
+        div.style.fontSize = '14px';
+        div.style.textAlign = 'center';
+        const Pixel = gdMapUtils.Size(-size / 2, -size / 2);
+        context.marker.setOffset(Pixel);
+        context.marker.setContent(div);
+      }, // 自定义聚合点样式
+      _renderMarker: (context) => {
+        // 外部控制单个marker的样式
+        this.createOverlay({ context, gdMapUtils, config }); // 创建marker
+      },
+    });
+
+    // 绑定监听控制label显示
+    this.layerInstance.on('click', (e) => {
+      const { lnglat, marker, clusterData } = e;
+
+      if (clusterData.length > 1) {
+        //点击集合样式地图放大一级
+        gdMapUtils.setCenter(lnglat, false);
+        gdMapUtils.map.zoomIn(); // 放大地图
+      }
+
+      if (marker instanceof AMap.Marker) {
+        // marker?.dom?.querySelector('.sydw-label').classList.remove('display-none');
+        gdMapUtils.trigger('pointerClick', marker, e, gdMapUtils.map, this.config);
+      }
+    });
+
+    this.isLayerCreated = true; // 设置图层创建状态为true
+  }
+
+  // 显示图层
+  showLayer(v) {
+    if (this.layerInstance && this.dataList.length && this.shouldCreationLayer(v)) {
+      this.layerInstance.setData(this.dataList);
+    }
+  }
+  // 判断是否跳过图层创建
+  shouldCreationLayer(activeName) {
+    return this.activeNames.includes(activeName);
+  }
+
+  // 隐藏图层
+  hideLayer() {
+    if (this.layerInstance && this.dataList.length) {
+      this.layerInstance.setData([]);
+    }
+  }
+
+  // 监听地图类型变化
+  handleMapTypeChange(newVal, oldVal) {
+    let gdMapUtils = this.getGdMapUtilsIns(); // 获取地图实例
+
+    if (!gdMapUtils) return; // 如果地图实例不存在，则不执行后续操作
+
+    if (this.shouldCreationLayer(newVal)) {
+      if (this.isLayerCreated) {
+        this.showLayer(newVal); // 显示图层
+      } else {
+        this.createLayer(gdMapUtils); // 创建图层
+      }
+    } else {
+      this.hideLayer(); // 隐藏图层
+    }
+  }
+
+  get dataOfLayer() {
+    return this.dataList;
+  }
+}

package/src/layers/MarkerPointerController.js

@@ -0,0 +1,243 @@
+import GdMapUtils from '@/utils/gdMap/gdMapUtils.js';
+
+export default class MarkerLayerRender {
+  dataList = []; // 数据列表
+
+  // 去掉私密属性标识
+  updatePointerTimer = null;
+
+  layerInstance = null; // 图层实例
+
+  isLayerCreated = false; // 图层是否已创建
+
+  detectingPosition = null; //检测位置的变化
+
+  activeNames = [];
+  /**
+   * 经纬度坐标，用来描述地图上的一个点位置
+   * @param {Object} config 图层的config
+   * @param {Function} createOverlay  创建marker的方法
+   * @param {Function} noWrap  requestCallback  拉去marker请求数据并按规定格式返回
+   * @param {Boolean} detectingPosition 是否检测位置变化
+   */
+  constructor({
+    //!没有文档还需要了解内部细节,耗费时间精力
+    config,
+    createOverlay,
+    requestCallback,
+    detectingPosition = false,
+  }) {
+    this.config = config ?? {}; //保存图层配置
+
+    this.createOverlay = createOverlay;
+
+    this.requestCallback = requestCallback; //
+
+    this.detectingPosition = detectingPosition; // 是否检测位置变化
+
+    this.activeNames = [...(this?.config?.extraActiveName ?? []), this.config.name];
+
+    // 添加页面可见性变化监听
+    document.addEventListener('visibilitychange', this.handleVisibilityChange.bind(this));
+  }
+
+  // 获取地图工具类实例
+  getGdMapUtilsIns(id = 'gisMap') {
+    return GdMapUtils.mapInstance.get(id);
+  }
+
+  // 处理页面可见性变化
+  handleVisibilityChange() {
+    const gdMapUtils = this.getGdMapUtilsIns();
+    if (document.hidden) {
+      // 页面隐藏时停止检测
+      this.stopDetectingPositionChange();
+    } else {
+      // 页面显示时启动检测
+      if (this.detectingPosition && this.layerInstance) {
+        this.startDetectingPositionChange(gdMapUtils);
+      }
+    }
+  }
+
+  // 创建图层
+  async createLayer(gdMapUtils) {
+    // 获取数据
+    this.dataList = await this.requestCallback();
+
+    if (!this.shouldCreationLayer(this.config.name)) return; // 接口请求缓慢,避免用户切换菜单
+
+    // 处理数据
+    this.dataList.forEach((item) => {
+      //   const { jd, wd, title } = item;
+      // 创建标记 用户自己决定创建marker类型
+
+      this.createOverlay(gdMapUtils, this.config, item);
+    });
+
+    this.layerInstance = gdMapUtils.getOverlayGroupManager(this.config.className); // 获取图层对象
+
+    const markers = this.layerInstance.OverlayGroup.getOverlays();
+    //HACK 名字不够可读
+    gdMapUtils.trigger('markerShowed', markers);
+
+    //! 不需要响应click的marker如何处理
+    gdMapUtils.bindEventMarker(this.config.className, 'click', (e) => {
+      const marker = e.target;
+
+      if (marker.getExtData().type === this.config.className) {
+        this.layerInstance.resetActiveMarker(); // 重置激活的标记
+        this.layerInstance.setActiveMarker(marker); // 设置激活的标记
+        marker.setzIndex(1001);
+        gdMapUtils.trigger('pointerClick', marker, e, gdMapUtils.map, this.config);
+      }
+    });
+
+    // 检测车辆经纬度是否发生变化
+    this.startDetectingPositionChange(gdMapUtils);
+
+    this.isLayerCreated = true; // 设置图层显示状态为true
+  }
+
+  // 显示图层
+  showLayer() {
+    if (this.layerInstance && this.dataList.length && this.shouldCreationLayer()) {
+      this.layerInstance.showOverlay(); // 显示图层
+    }
+  }
+
+  // 隐藏图层
+  hideLayer() {
+    if (this.layerInstance && this.dataList.length) {
+      this.layerInstance.hideOverlay(); // 隐藏图层
+    }
+  }
+
+  // 手动触发高亮某个点位
+  highlightMarker(id) {
+    const layerInstance = this.layerInstance;
+
+    if (!layerInstance) return; // 如果图层不存在，则不执行后续操作
+
+    const marker = layerInstance.findLayerMarker(id);
+    if (marker) {
+      layerInstance.resetActiveMarker(); // 重置激活的标记
+      layerInstance.setActiveMarker(marker); // 设置激活的标记
+      marker.setzIndex(1001); // 设置zIndex
+    }
+  }
+
+  // 由get 访问器描述符  相较于getter函数不能传递更多参数
+  shouldCreationLayer(activeName = this.config.name) {
+    return this.activeNames.includes(activeName);
+  }
+  // 启动检测车辆经纬度变化
+  startDetectingPositionChange(getGdMapUtilsIns) {
+    if (!this.layerInstance || !this.detectingPosition) return;
+    this.stopDetectingPositionChange(); //先停止在开启,避免多次执行
+    // 修改定时器属性引用
+    this.updatePointerTimer = setInterval(
+      () => this.updatePointer(getGdMapUtilsIns),
+      this.config.updateTime,
+    );
+  }
+
+  // 停止检测车辆经纬度变化
+  stopDetectingPositionChange() {
+    // 修改定时器属性引用
+    clearInterval(this.updatePointerTimer);
+  }
+
+  // 更新车辆位置
+  async updatePointer(getGdMapUtilsIns) {
+    if (!this.layerInstance) return; // 如果图层不存在，则不执行后续操作
+    // 获取车辆数据
+    const newestDataList = await this.requestCallback();
+
+    if (this.config.name !== this.envSanStore.mapActiveType) return; // 接口请求缓慢,避免用户切换菜单
+
+    // 比较新旧数据，找出需要更新的标记
+    const changedData = this.differenceWith(newestDataList, this.dataList);
+
+    changedData.forEach((item) => {
+      const marker = this.layerInstance.findLayerMarker(item.id);
+
+      const iconImage = item.extData.onLine ? this.config.onLineIcon : this.config.icon;
+      // 激活图标不需要更新位置和图标
+      const activesMarkerIds = this.layerInstance.activesMarkerIds; // 获取激活的markerId
+
+      if (!activesMarkerIds.includes(item.id)) {
+        if (marker) {
+          //存在的marker需要更新位置和图标
+
+          marker.setPosition(getGdMapUtilsIns.LngLat(item.jd, item.wd));
+
+          const icon = getGdMapUtilsIns.createIcon(this.config.size, iconImage, this.config.size);
+
+          marker.setIcon(icon);
+        } else {
+          //没有的marker需要重新创建
+          this.createOverlay(getGdMapUtilsIns, iconImage, item);
+        }
+      }
+    });
+
+    this.dataList = newestDataList; // 更新数据列表
+  }
+
+  // 比较新旧数据，找出经纬度发生变化的项
+  differenceWith(newData, oldData) {
+    return newData.filter((nItem) => {
+      const oldItem = oldData.find((oItem) => oItem.id === nItem.id); // 没有直接返回
+      return !oldItem || nItem.jd !== oldItem.jd || nItem.wd !== oldItem.wd;
+    });
+  }
+
+  // 处理地图类型变化
+  handleMapTypeChange(newVal, oldVal, id) {
+    const gdMapUtils = this.getGdMapUtilsIns(id); // 获取地图实例
+
+    if (!gdMapUtils) return; // 如果地图实例不存在，则不执行后续操作
+    if (this.shouldCreationLayer(newVal)) {
+      if (this.isLayerCreated) {
+        this.showLayer(); // 显示图层
+      } else {
+        this.createLayer(gdMapUtils); // 创建图层
+      }
+    } else {
+      this.hideLayer(); // 隐藏图层
+    }
+
+    // 离开中转页时，停止检测车辆经纬度变化
+    if (this.shouldCreationLayer(oldVal) && !this.shouldCreationLayer(newVal)) {
+      this.stopDetectingPositionChange();
+    }
+
+    // 进入中转页时，启动检测车辆经纬度变化
+    if (this.shouldCreationLayer(newVal) && !this.shouldCreationLayer(oldVal)) {
+      this.startDetectingPositionChange(gdMapUtils);
+    }
+  }
+
+  // 销毁实例时移除事件监听
+  destroy() {
+    document.removeEventListener('visibilitychange', this.handleVisibilityChange.bind(this));
+
+    this.layerInstance.OverlayGroup.clearOverlays();
+  }
+
+  // 获取所有marker
+  get markerList() {
+    //HACK  暂时注释掉
+    if (!this.layerInstance) return;
+
+    const markers = this.layerInstance.OverlayGroup.getOverlays();
+
+    return markers;
+  }
+
+  get dataOfLayer() {
+    return this.dataList;
+  }
+}
+// 扩展事件

package/src/layers/OverlayGroupManager.js

@@ -0,0 +1,252 @@
+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), // 图片实际大小
+      // anchor: "bottom-center", // 图标锚点位置
+    });
+  },
+};
+
+// 混入mixin
+Object.assign(OverlayGroupManager.prototype, gdMixin);
+/*
+责单一原则：
+
+gdMixin 的职责是封装与 AMap.Icon 相关的逻辑，即创建图标。
+setIcon 是直接操作 marker 对象的方法，属于业务逻辑的一部分，与 AMap.Icon 的创建逻辑分离更符合职责单一原则。
+复用性
+
+createIcon 方法可以在多个地方复用，例如在 setActiveMarker 和 resetActiveMarker 中。
+setIcon 是直接操作 marker 的方法，通常只在特定的业务逻辑中使用，复用性较低。
+代码清晰性：
+
+将 setIcon 保留在业务逻辑中，可以让代码更直观，便于理解。
+如果将其放入 gdMixin 中，可能会让混入的逻辑变得复杂，降低代码的可读性。
+*/

package/tsconfig.json

@@ -0,0 +1,22 @@
+{
+  "compilerOptions": {
+    "target": "ES5",
+    "module": "ESNext",
+    "lib": ["ES5", "ES2015", "ES2016", "ES2017", "DOM"],
+    "declaration": true,
+    "declarationMap": true,
+    "sourceMap": true,
+    "outDir": "./dist",
+    "rootDir": "./src",
+    "strict": true,
+    "esModuleInterop": true,
+    "skipLibCheck": true,
+    "forceConsistentCasingInFileNames": true,
+    "moduleResolution": "node",
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "noEmit": false
+  },
+  "include": ["src/**/*"],
+  "exclude": ["node_modules", "dist"]
+}

package/webpack.config.js

@@ -0,0 +1,51 @@
+const path = require('path');
+const HtmlWebpackPlugin = require('html-webpack-plugin');
+
+module.exports = {
+  entry: './src/index.ts',
+  output: {
+    // 打包后的文件名
+    filename: 'index.js',
+    // 输出目录路径
+    path: path.resolve(__dirname, 'dist'),
+    // 库的全局变量名，在浏览器中可以通过 window.MapUtils 访问
+    library: 'MapUtils',
+    // 库的输出格式，umd 是一种兼容多种模块系统的格式（CommonJS、AMD、ES modules）
+    libraryTarget: 'umd',
+    // 浏览器: window node.js:global  Web Worker: self
+    globalObject: 'this',
+    // 为 UMD 模块命名，提高可读性
+    umdNamedDefine: true,
+    // 构建前清理输出目录
+    clean: true
+  },
+  resolve: {
+    extensions: ['.ts', '.tsx', '.js', '.jsx']
+  },
+  externals: {
+    '@amap/amap-jsapi-loader': { // 外部依赖，不打包进 bundle
+      commonjs: '@amap/amap-jsapi-loader',
+      commonjs2: '@amap/amap-jsapi-loader',
+      amd: '@amap/amap-jsapi-loader',
+      root: 'AMapLoader'
+    }
+  },
+  module: {
+    rules: [
+      {
+        test: /\.tsx?$/,
+        use: 'ts-loader',
+        exclude: /node_modules/
+      }
+    ]
+  },
+  plugins: [
+    new HtmlWebpackPlugin({
+      title: 'Map Utils Demo',
+      template: path.resolve(__dirname, 'src', 'index.html'),
+      filename: 'index.html'
+    })
+  ],
+  devtool: 'source-map',
+  mode: 'production'
+};