gdmap-utils 1.2.0 → 1.2.2

package/src/layers copy/MarkerLayer.js

@@ -1,267 +0,0 @@
-import GdMapUtils from '@/utils/gdMap/gdMapUtils.js';
-
-export default class MarkerLayer {
-  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 => {
-      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 copy/OverlayGroupManager.js

@@ -1,254 +0,0 @@
-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 中，可能会让混入的逻辑变得复杂，降低代码的可读性。
-*/