npm - gdmap-utils - Versions diffs - 1.2.0 → 1.2.3 - Mend

gdmap-utils 1.2.0 → 1.2.3

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (21) hide show

package/README.md +1 -49
package/dist/index.js +17 -6
package/dist/index.js.map +1 -1
package/package.json +4 -1
package/src/LayerManager.ts +13 -5
package/src/MapUtils.ts +15 -2
package/src/layers/baseMarkerLayer/LabelMarkerLayer.ts +2 -0
package/src/layers/baseMarkerLayer/MarkerLayer.ts +2 -0
package/src/layers/clusterMarkerLayer/MarkerClusterLayer.ts +53 -0
package/src/layers/clusterMarkerLayer/index.ts +177 -0
package/src/layers/index.ts +4 -0
package/src/types/clusterMarkerLayer.d.ts +88 -0
package/src/types/index.d.ts +2 -0
package/src/gdMapUtils.js +0 -377
package/src/index.html +0 -14
package/src/layers/MarkerClusterLayer.ts +0 -30
package/src/layers copy/LabelMarkerLayer.js +0 -122
package/src/layers copy/MarkerClusterLayer.js +0 -155
package/src/layers copy/MarkerLayer.js +0 -267
package/src/layers copy/OverlayGroupManager.js +0 -254
package/src/layers copy/index.ts +0 -0

package/src/index.html DELETED Viewed

@@ -1,14 +0,0 @@
-<!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/layers/MarkerClusterLayer.ts DELETED Viewed

@@ -1,30 +0,0 @@
-class MarkerClusterLayer {
-  rawLayer = new AMap.OverlayGroup();
-  constructor() {}
-  createOverlays() {
-    return [];
-  }
-  bindEventMarker(clickType: AMap.EventType, callback: () => void) {}
-  add(markers: Array<AMap.Marker>) {}
-  remove(markers: Array<AMap.Marker>) {}
-  highlightOverLay() {}
-  hide() {}
-  show() {}
-  getAllOverlay() {}
-  destroy() {}
-  reload() {}
-  overlayFitMap() {}
-}
-export default MarkerClusterLayer;

package/src/layers copy/LabelMarkerLayer.js DELETED Viewed

@@ -1,122 +0,0 @@
-import useEnvSanStore from '@/store/modules/envSan.js';
-import GdMapUtils from '@/utils/gdMap/gdMapUtils.js';
-// 海量点图层渲染封装
-export default class LabelMarkerLayer {
-  dataList = []; // 数据列表
-  // 去掉私有属性标识
-  layerInstance = null; // 图层实例
-  // 去掉私有属性标识
-  isLayerCreated = false; // 图层是否已创建
-  envSanStore = useEnvSanStore(); // 使用环境状态存储
-  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();
-    if (!this.shouldSkipLayerCreation) return; //避免网络时间过长用户切换到切tab
-    // 创建地图图层
-    this.layerInstance = gdMapUtils.createLabelLayer(this.config.layerOptions);
-    // 创建标记
-    let markers = this.dataList.map(item => {
-      return this.createOverlay(gdMapUtils, this.config, item);
-    });
-    this.layerInstance.add(markers); // 添加标记到图层
-    //HACK  labelLayer没有统一绑定事件的方法
-    markers.forEach(overlay => {
-      overlay.on('click', e => {
-        const marker = e.target;
-        if (marker.getExtData().type === this.config.className) {
-          // 触发全局的地图弹框
-          gdMapUtils.trigger(
-            'pointerClick',
-            marker,
-            e,
-            gdMapUtils.map,
-            this.config
-          );
-        }
-      });
-    });
-    this.isLayerCreated = true; // 设置图层创建状态为true
-    markers = null; // 释放内存
-  }
-  // 显示图层
-  showLayer() {
-    if (
-      this.layerInstance &&
-      this.dataList.length &&
-      this.shouldSkipLayerCreation
-    ) {
-      this.layerInstance.show(); // 显示图层
-    }
-  }
-  get shouldSkipLayerCreation() {
-    return this.activeNames.includes(this.envSanStore.mapActiveType);
-  }
-  // 隐藏图层
-  hideLayer() {
-    if (this.layerInstance && this.dataList.length) {
-      this.layerInstance.hide(); // 隐藏图层
-    }
-  }
-  // 监听地图类型变化
-  handleMapTypeChange(newVal, oldVal) {
-    let gdMapUtils = this.getGdMapUtilsIns(); // 获取地图实例
-    if (!gdMapUtils) return; // 如果地图实例不存在，则不执行后续操作
-    if (this.shouldSkipLayerCreation) {
-      if (this.isLayerCreated) {
-        this.showLayer(); // 显示图层
-      } else {
-        this.createLayer(gdMapUtils); // 创建图层
-      }
-    } else {
-      this.hideLayer(); // 隐藏图层
-    }
-  }
-  get dataOfLayer() {
-    return this.dataList;
-  }
-}

package/src/layers copy/MarkerClusterLayer.js DELETED Viewed

@@ -1,155 +0,0 @@
-// import useEnvSanStore from "@/store/modules/envSan.js";
-import GdMapUtils from '@/utils/gdMap/gdMapUtils.js';
-/*
-CollectionPointLayerController
-*/
-// 海量点图层渲染封装
-export default class MarkerClusterLayer {
-  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 copy/MarkerLayer.js DELETED Viewed

@@ -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;
-  }
-}
-// 扩展事件