gdmap-utils 1.2.3 → 1.2.5

package/src/gdMap/gdHelper.ts

@@ -1,85 +1,113 @@
-const gdHelperMixin = {
-  /**
-   * 创建高德地图标注
-   * @param {AMap.MarkerOptions} options 标注配置
-   * @returns {AMap.Marker} 标注对象
-   */
-  createAMapMarker(options: AMap.MarkerOptions): AMap.Marker {
-    return new AMap.Marker({
-      ...options,
-    });
-  },
-
-  /**
-   * 创建一个图标
-   * @param {[number, number]} size - 图标尺寸，格式为 [width, height]
-   * @param {string} image - 图片的 URL 地址
-   * @param {[number, number]} imageSize - 图标所用图片的大小，格式为 [width, height]
-   * @param {[number, number]} imageOffset - 图标取图的偏移量，格式为 [x, y]
-   * @returns {AMap.Icon} 图标对象
-   */
-  createIcon(opts: {
-    size: [number, number];
-    image: string;
-    imageSize: [number, number];
-    imageOffset: [number, number];
-  }): AMap.Icon {
-    return new AMap.Icon({
-      size: this.Size(...opts.size),
-      image: opts.image,
-      imageSize: this.Size(...opts.imageSize),
-      imageOffset: this.Pixel(...opts.imageOffset),
-    });
-  },
-
-  /**
-   * 地物对象的像素尺寸
-   * @param {number} width 宽度
-   * @param {number} height 高度
-   * @returns {AMap.Size} 尺寸对象
-   */
-  Size(width: number, height: number): AMap.Size {
-    return new AMap.Size(width, height);
-  },
-
-  /**
-   * 像素坐标，确定地图上的一个像素点
-   * @param {number} x x坐标
-   * @param {number} y y坐标
-   * @returns {AMap.Pixel} 像素对象
-   */
-  Pixel(...rest: [number, number]): AMap.Pixel {
-    return new AMap.Pixel(...rest);
-  },
-
-  /**
-   * 经纬度坐标，用来描述地图上的一个点位置
-   * @param {number} lng 经度值
-   * @param {number} lat 纬度值
-   * @param {boolean} noWrap 是否不进行标准化处理
-   * @returns {AMap.LngLat} 经纬度对象
-   */
-  LngLat(lng: number, lat: number, noWrap?: boolean): AMap.LngLat {
-    return new AMap.LngLat(lng, lat, noWrap);
-  },
-
-  /*
-   创建点位信息窗体
-   */
-  createAMapInfoWindow(opts: ConstructorParameters<typeof AMap.InfoWindow>[0]) {
-    const defIsCustom = true;
-    const defCloseWhenClickMap = true;
-    const {
-      isCustom = defIsCustom,
-      closeWhenClickMap = defCloseWhenClickMap,
-      ...rest
-    } = opts!;
-    return new AMap.InfoWindow({
-      isCustom,
-      closeWhenClickMap,
-      ...rest,
-    });
-  },
-};
-
-export default gdHelperMixin;
+const gdHelperMixin = {
+  /**
+   * 创建高德地图标注
+   * @param {AMap.MarkerOptions} options 标注配置
+   * @returns {AMap.Marker} 标注对象
+   */
+  createAMapMarker(options: AMap.MarkerOptions): AMap.Marker {
+    return new AMap.Marker({
+      ...options,
+    });
+  },
+
+  /**
+   * 创建一个图标
+   * @param {[number, number]} size - 图标尺寸，格式为 [width, height]
+   * @param {string} image - 图片的 URL 地址
+   * @param {[number, number]} imageSize - 图标所用图片的大小，格式为 [width, height]
+   * @param {[number, number]} imageOffset - 图标取图的偏移量，格式为 [x, y]
+   * @returns {AMap.Icon} 图标对象
+   */
+  createIcon(opts: {
+    size: [number, number];
+    image: string;
+    imageSize: [number, number];
+    imageOffset: [number, number];
+  }): AMap.Icon {
+    return new AMap.Icon({
+      size: this.Size(...opts.size),
+      image: opts.image,
+      imageSize: this.Size(...opts.imageSize),
+      imageOffset: this.Pixel(...opts.imageOffset),
+    });
+  },
+
+  /**
+   * 地物对象的像素尺寸
+   * @param {number} width 宽度
+   * @param {number} height 高度
+   * @returns {AMap.Size} 尺寸对象
+   */
+  Size(width: number, height: number): AMap.Size {
+    return new AMap.Size(width, height);
+  },
+
+  /**
+   * 像素坐标，确定地图上的一个像素点
+   * @param {number} x x坐标
+   * @param {number} y y坐标
+   * @returns {AMap.Pixel} 像素对象
+   */
+  Pixel(...rest: [number, number]): AMap.Pixel {
+    return new AMap.Pixel(...rest);
+  },
+
+  /**
+   * 经纬度坐标，用来描述地图上的一个点位置
+   * @param {number} lng 经度值
+   * @param {number} lat 纬度值
+   * @param {boolean} noWrap 是否不进行标准化处理
+   * @returns {AMap.LngLat} 经纬度对象
+   */
+  LngLat(lng: number, lat: number, noWrap?: boolean): AMap.LngLat {
+    return new AMap.LngLat(lng, lat, noWrap);
+  },
+
+  /*
+   创建点位信息窗体
+   */
+  createAMapInfoWindow(opts: ConstructorParameters<typeof AMap.InfoWindow>[0]) {
+    const defIsCustom = true;
+    const defCloseWhenClickMap = true;
+    const {
+      isCustom = defIsCustom,
+      closeWhenClickMap = defCloseWhenClickMap,
+      ...rest
+    } = opts!;
+    return new AMap.InfoWindow({
+      isCustom,
+      closeWhenClickMap,
+      ...rest,
+    });
+  },
+
+  /**
+   * 创建高德地图折线
+   * @param {Object} options 折线配置
+   * @returns {AMap.Polyline} 折线对象
+   */
+  createAMapPolyline(options: AMap.PolylineOptions) {
+    const defOpts = {
+      showDir: true,
+      lineJoin: 'round',
+      strokeColor: '#28F', //蓝色
+      strokeOpacity: 1, //线透明度
+      strokeWeight: 6,
+    };
+
+    const opts = Object.assign(options, defOpts);
+
+    return new AMap.Polyline(opts);
+  },
+
+  loadPlugins(plugins: string | string[]) {
+    return new Promise(resolve => {
+      AMap.plugin(plugins, function () {
+        //@ts-expect-error
+        resolve();
+      });
+    });
+  },
+};
+
+export default gdHelperMixin;

package/src/index.ts

@@ -1 +1,3 @@
-export { initMapSource, createMapUtils, MapUtils } from './MapUtils';
+export { initMapSource, createMapUtils, MapUtils } from './MapUtils';
+export * from './layers';
+export type * from './types';

package/src/layers/baseMarkerLayer/LabelMarkerLayer.ts

@@ -1,240 +1,240 @@
-import type { OverlaysLayer, mapIns, OverlayData } from '@/types';
-import type { MapUtilsConstructor } from '@/MapUtils';
-import { MapUtils } from '@/MapUtils';
-
-class LabelMarkerLayer {
-  rawLayer: AMap.LabelsLayer;
-
-  map: mapIns;
-
-  events = new Map<AMap.EventType, () => void>();
-
-  constructor(map: mapIns, opts?: AMap.LabelsLayerOptions) {
-    this.map = map;
-
-    this.rawLayer = new AMap.LabelsLayer({
-      collision: true,
-      opacity: 1,
-      zIndex: 120,
-      allowCollision: true,
-      ...opts,
-    });
-
-    this.map.add(this.rawLayer);
-  }
-
-  /**
-   * 将覆盖物数据转换为标记配置
-   * @param item 覆盖物数据
-   * @param index 索引
-   * @param getIconUrl 获取图标URL的方法
-   * @param getOverlayOpts 动态获取覆盖物配置的方法
-   * @param MapUtils MapUtils构造函数
-   * @returns 标记配置
-   */
-  static convertOverlayDataToOvlOpts<U extends {}>(
-    item: OverlayData<U>,
-    index: number,
-    getIconUrl: (item: OverlayData<U>) => string,
-    getOverlayOpts: (
-      item: OverlayData<U>,
-      index: number,
-      MapUtils: MapUtilsConstructor
-    ) => any,
-    MapUtils: MapUtilsConstructor
-  ): AMap.LabelMarkerOptions {
-    const {
-      overlayData: { lon, lat, extData, title },
-    } = item;
-
-    // 获取当前覆盖物项的动态配置
-    const itemOpts = getOverlayOpts(item, index, MapUtils);
-
-    const ovlOpts: AMap.LabelMarkerOptions = {
-      position: [lon, lat],
-      extData,
-      ...itemOpts,
-    };
-
-    if (!item.labelShowed) {
-      const textOpts = ovlOpts.text ?? {
-        content: title,
-        direction: 'top',
-        style: {
-          fontSize: 16,
-          strokeWidth: 5,
-        },
-        zooms: [5, 20],
-      };
-
-      textOpts.content = '';
-
-      ovlOpts.text = textOpts;
-    } else {
-      ovlOpts.text = ovlOpts.text ?? {
-        content: title,
-        direction: 'top',
-        style: {
-          fontSize: 16,
-          strokeWidth: 5,
-        },
-        zooms: [5, 20],
-      };
-    }
-
-    const imageUrl = getIconUrl(item);
-
-    const icon = {
-      image: '',
-      size: [25, 34] as [number, number],
-      anchor: 'bottom-center',
-    };
-
-    ovlOpts.icon = ovlOpts.icon ?? icon;
-
-    ovlOpts.icon.image = imageUrl;
-
-    return ovlOpts as AMap.LabelMarkerOptions;
-  }
-
-  bindEventOverlay(clickType: AMap.EventType, callback: () => void) {
-    if (typeof callback !== 'function') {
-      MapUtils.error('Please provide an event callback function');
-      return;
-    }
-
-    this.on(clickType, callback);
-
-    this.events.set(clickType, callback);
-  }
-
-  addOverlayBindEvent(marker: InstanceType<typeof AMap.LabelMarker>) {
-    this.events.forEach((callback, clickType) => {
-      marker.on(clickType, callback);
-    });
-  }
-
-  createOverlays(ovOptList: Array<AMap.LabelMarkerOptions>) {
-    const labelMarkers = ovOptList.map(item => {
-      const labelMarker = new AMap.LabelMarker(item); //包装吗?
-      this.addOverlayBindEvent(labelMarker);
-      return labelMarker;
-    });
-
-    //@ts-expect-error
-    this.rawLayer.add(labelMarkers);
-
-    return labelMarkers;
-  }
-
-  add(markers: Array<AMap.LabelMarkerOptions>) {
-    this.createOverlays(markers);
-  }
-
-  remove(markers: Array<AMap.LabelMarker>) {
-    //@ts-expect-error
-    this.rawLayer.remove(markers);
-  }
-
-  hide() {
-    this.rawLayer.hide();
-  }
-
-  show() {
-    this.rawLayer.show();
-  }
-
-  getAllOverlay(): AMap.LabelMarker[] {
-    //@ts-expect-error
-    return this.rawLayer.getAllOverlays();
-  }
-
-  destroy() {
-    // @ts-expect-error
-    this.rawLayer.clear();
-
-    this.map.remove(this.rawLayer);
-    //@ts-expect-error
-    this.rawLayer = null;
-  }
-
-  reload() {
-    // @ts-expect-error
-    this.rawLayer.clear();
-  }
-
-  clearAllOvl() {
-    // @ts-expect-error
-    this.rawLayer.clear();
-  }
-
-  overlayFitMap() {
-    const labelMarkers = this.getAllOverlay();
-    this.map.setFitView(labelMarkers);
-  }
-
-  findLayerOverlay(markerId: string | number) {
-    if (!markerId) {
-      MapUtils.error('Please provide a markerId');
-      return null;
-    }
-
-    const labelMarkers: InstanceType<typeof AMap.LabelMarker>[] =
-      this.getAllOverlay();
-
-    const labelMarker = labelMarkers.find(item => {
-      return item.getExtData().id === markerId;
-    });
-
-    return labelMarker;
-  }
-
-  refreshOverlayIcon(
-    labelMarker: InstanceType<typeof AMap.LabelMarker>,
-    iconOpts: AMap.LabelMarkerIconOptions
-  ) {
-    if (!labelMarker) {
-      MapUtils.error('labelMarker is not found');
-      return;
-    }
-
-    labelMarker.setIcon(iconOpts);
-  }
-
-  refreshOverlayLabel(
-    labelMarker: InstanceType<typeof AMap.LabelMarker>,
-    labelOpts?: AMap.LabelMarkerTextOptions
-  ) {
-    if (!labelMarker) {
-      MapUtils.error('labelMarker is not found');
-      return;
-    }
-
-    if (labelOpts) {
-      labelMarker.setText(labelOpts);
-    } else {
-      const currentLabel = labelMarker.getText();
-      labelMarker.setText({
-        ...currentLabel,
-        content: '', //清空可以生效吗
-      });
-    }
-  }
-
-  /**
-   *
-   * labelLayer不存在on方法
-   * @param {AMap.EventType} clickType  事件类型
-   * @param {() => void} callback  事件函数
-   * @memberof LabelMarkerLayer
-   */
-  on(clickType: AMap.EventType, callback: () => void) {
-    const labelMarkers = this.getAllOverlay();
-
-    labelMarkers.forEach(labelMarker => {
-      labelMarker.on(clickType, callback);
-    });
-  }
-}
-
-export default LabelMarkerLayer;
+import type { OverlaysLayer, mapIns, OverlayData } from '@/types';
+import type { MapUtilsConstructor } from '@/MapUtils';
+import { MapUtils } from '@/MapUtils';
+
+class LabelMarkerLayer {
+  rawLayer: AMap.LabelsLayer;
+
+  map: mapIns;
+
+  events = new Map<AMap.EventType, () => void>();
+
+  constructor(map: mapIns, opts?: AMap.LabelsLayerOptions) {
+    this.map = map;
+
+    this.rawLayer = new AMap.LabelsLayer({
+      collision: true,
+      opacity: 1,
+      zIndex: 120,
+      allowCollision: true,
+      ...opts,
+    });
+
+    this.map.add(this.rawLayer);
+  }
+
+  /**
+   * 将覆盖物数据转换为标记配置
+   * @param item 覆盖物数据
+   * @param index 索引
+   * @param getIconUrl 获取图标URL的方法
+   * @param getOverlayOpts 动态获取覆盖物配置的方法
+   * @param MapUtils MapUtils构造函数
+   * @returns 标记配置
+   */
+  static convertOverlayDataToOvlOpts<U extends {}>(
+    item: OverlayData<U>,
+    index: number,
+    getIconUrl: (item: OverlayData<U>) => string,
+    getOverlayOpts: (
+      item: OverlayData<U>,
+      index: number,
+      MapUtils: MapUtilsConstructor
+    ) => any,
+    MapUtils: MapUtilsConstructor
+  ): AMap.LabelMarkerOptions {
+    const {
+      overlayData: { lon, lat, extData, title },
+    } = item;
+
+    // 获取当前覆盖物项的动态配置
+    const itemOpts = getOverlayOpts(item, index, MapUtils);
+
+    const ovlOpts: AMap.LabelMarkerOptions = {
+      position: [lon, lat],
+      extData,
+      ...itemOpts,
+    };
+
+    if (!item.labelShowed) {
+      const textOpts = ovlOpts.text ?? {
+        content: title,
+        direction: 'top',
+        style: {
+          fontSize: 16,
+          strokeWidth: 5,
+        },
+        zooms: [5, 20],
+      };
+
+      textOpts.content = '';
+
+      ovlOpts.text = textOpts;
+    } else {
+      ovlOpts.text = ovlOpts.text ?? {
+        content: title,
+        direction: 'top',
+        style: {
+          fontSize: 16,
+          strokeWidth: 5,
+        },
+        zooms: [5, 20],
+      };
+    }
+
+    const imageUrl = getIconUrl(item);
+
+    const icon = {
+      image: '',
+      size: [25, 34] as [number, number],
+      anchor: 'bottom-center',
+    };
+
+    ovlOpts.icon = ovlOpts.icon ?? icon;
+
+    ovlOpts.icon.image = imageUrl;
+
+    return ovlOpts as AMap.LabelMarkerOptions;
+  }
+
+  bindEventOverlay(clickType: AMap.EventType, callback: () => void) {
+    if (typeof callback !== 'function') {
+      MapUtils.error('Please provide an event callback function');
+      return;
+    }
+
+    this.on(clickType, callback);
+
+    this.events.set(clickType, callback);
+  }
+
+  addOverlayBindEvent(marker: InstanceType<typeof AMap.LabelMarker>) {
+    this.events.forEach((callback, clickType) => {
+      marker.on(clickType, callback);
+    });
+  }
+
+  createOverlays(ovOptList: Array<AMap.LabelMarkerOptions>) {
+    const labelMarkers = ovOptList.map(item => {
+      const labelMarker = new AMap.LabelMarker(item); //包装吗?
+      this.addOverlayBindEvent(labelMarker);
+      return labelMarker;
+    });
+
+    //@ts-expect-error
+    this.rawLayer.add(labelMarkers);
+
+    return labelMarkers;
+  }
+
+  add(markers: Array<AMap.LabelMarkerOptions>) {
+    this.createOverlays(markers);
+  }
+
+  remove(markers: Array<AMap.LabelMarker>) {
+    //@ts-expect-error
+    this.rawLayer.remove(markers);
+  }
+
+  hide() {
+    this.rawLayer.hide();
+  }
+
+  show() {
+    this.rawLayer.show();
+  }
+
+  getAllOverlay(): AMap.LabelMarker[] {
+    //@ts-expect-error
+    return this.rawLayer.getAllOverlays();
+  }
+
+  destroy() {
+    // @ts-expect-error
+    this.rawLayer.clear();
+
+    this.map.remove(this.rawLayer);
+    //@ts-expect-error
+    this.rawLayer = null;
+  }
+
+  reload() {
+    // @ts-expect-error
+    this.rawLayer.clear();
+  }
+
+  clearAllOvl() {
+    // @ts-expect-error
+    this.rawLayer.clear();
+  }
+
+  overlayFitMap() {
+    const labelMarkers = this.getAllOverlay();
+    this.map.setFitView(labelMarkers);
+  }
+
+  findLayerOverlay(markerId: string | number) {
+    if (!markerId) {
+      MapUtils.error('Please provide a markerId');
+      return null;
+    }
+
+    const labelMarkers: InstanceType<typeof AMap.LabelMarker>[] =
+      this.getAllOverlay();
+
+    const labelMarker = labelMarkers.find(item => {
+      return item.getExtData().id === markerId;
+    });
+
+    return labelMarker;
+  }
+
+  refreshOverlayIcon(
+    labelMarker: InstanceType<typeof AMap.LabelMarker>,
+    iconOpts: AMap.LabelMarkerIconOptions
+  ) {
+    if (!labelMarker) {
+      MapUtils.error('labelMarker is not found');
+      return;
+    }
+
+    labelMarker.setIcon(iconOpts);
+  }
+
+  refreshOverlayLabel(
+    labelMarker: InstanceType<typeof AMap.LabelMarker>,
+    labelOpts?: AMap.LabelMarkerTextOptions
+  ) {
+    if (!labelMarker) {
+      MapUtils.error('labelMarker is not found');
+      return;
+    }
+
+    if (labelOpts) {
+      labelMarker.setText(labelOpts);
+    } else {
+      const currentLabel = labelMarker.getText();
+      labelMarker.setText({
+        ...currentLabel,
+        content: '', //清空可以生效吗
+      });
+    }
+  }
+
+  /**
+   *
+   * labelLayer不存在on方法
+   * @param {AMap.EventType} clickType  事件类型
+   * @param {() => void} callback  事件函数
+   * @memberof LabelMarkerLayer
+   */
+  on(clickType: AMap.EventType, callback: () => void) {
+    const labelMarkers = this.getAllOverlay();
+
+    labelMarkers.forEach(labelMarker => {
+      labelMarker.on(clickType, callback);
+    });
+  }
+}
+
+export default LabelMarkerLayer;