地图的事件监听

src/map/ai-map.ts

 import MyMap from './my-map'
-import { CallBack, Listener, MapConfig } from './types'
+import { CallBack, MapConfig, Listeners } from './types'
 
 declare const aimap: {
   Map: any
@@ -9,7 +9,7 @@ declare const aimap: {
 export default class AI_Map extends MyMap {
   constructor(config: MapConfig) {
     aimap.accessToken = config.appKey
-    aimap.accessToken = config.appKey
+    aimap.baseApiUrl = config.baseApiUrl
 
     const instance = new aimap.Map({
       container: config.el,
@@ -24,44 +24,36 @@ export default class AI_Map extends MyMap {
       style: config.style,
     })
     super(instance)
+    this.setListeners()
   }
 
-  on<K extends keyof Listener>(name: K, cb: CallBack) {
-    const eventName = `on${name.slice(0, 1).toUpperCase()}${name
-      .slice(1)
-      .toLowerCase()}` as Listener[K]
-    ;(this[eventName] as Function)(cb)
-    return this
-  }
-
-  private onClick(cb: CallBack) {
-    this.map.on('click', cb)
-  }
-  private onLoad(cb: CallBack) {
+  private setListeners() {
+    const listeners: Partial<Listeners> = {
+      load: (cb: CallBack) => {
         this.map.on('load', cb)
-  }
-  private onZoom(cb: CallBack) {
+      },
+      zoom: (cb: CallBack) => {
         this.map.on('zoom', cb)
-  }
-  private onMove(cb: CallBack) {
+      },
+      move: (cb: CallBack) => {
         this.map.on('move', cb)
-  }
-  private onBlur(cb: CallBack) {
+      },
+      blur: (cb: CallBack) => {
         this.map.on('blur', cb)
-  }
-  private onFocus(cb: CallBack) {
+      },
+      focus: (cb: CallBack) => {
         this.map.on('focus', cb)
-  }
-  private onDrag(cb: CallBack) {
+      },
+      drag: (cb: CallBack) => {
         this.map.on('drag', cb)
-  }
-  private onResize(cb: CallBack) {
+      },
+      resize: (cb: CallBack) => {
         this.map.on('resize', cb)
+      },
+      click: (cb: CallBack) => {
+        this.map.on('click', cb)
+      },
     }
-  private onDblClick(cb: CallBack) {
-    this.map.on('dblclick', cb)
-  }
-  private onMouseWheel(cb: CallBack) {
-    this.map.on('mousewheel', cb)
+    this.listeners = Object.assign(this.listeners, listeners)
   }
 }

src/map/my-map.ts

+import { CallBack, Listeners } from './types'
+
 export default class MyMap {
   protected map
+  protected listeners: Listeners
   constructor(instance: any) {
     this.map = instance
+    this.listeners = {
+      load: (cb: CallBack) => {
+        console.error('on：此地图不存在 load 监听事件！')
+      },
+      zoom: (cb: CallBack) => {
+        console.error('on：此地图不存在 zoom 监听事件！')
+      },
+      move: (cb: CallBack) => {
+        console.error('on：此地图不存在 move 监听事件！')
+      },
+      blur: (cb: CallBack) => {
+        console.error('on：此地图不存在 blur 监听事件！')
+      },
+      focus: (cb: CallBack) => {
+        console.error('on：此地图不存在 focus 监听事件！')
+      },
+      drag: (cb: CallBack) => {
+        console.error('on：此地图不存在 drag 监听事件！')
+      },
+      resize: (cb: CallBack) => {
+        console.error('on：此地图不存在 resize 监听事件！')
+      },
+      click: (cb: CallBack) => {
+        console.error('on：此地图不存在 click 监听事件！')
+      },
+      dblclick: (cb: CallBack) => {
+        console.error('on：此地图不存在 dblclick 监听事件！')
+      },
+      mousewheel: (cb: CallBack) => {
+        console.error('on：此地图不存在 mousewheel 监听事件！')
+      },
+    }
   }
 
   /**
@@ -11,4 +46,14 @@ export default class MyMap {
   get instance(): any {
     return this.map
   }
+
+  /**
+   * 监听事件
+   * @param name 事件名称
+   * @param cb 回调函数
+   */
+  on<K extends keyof Listeners>(name: K, cb: CallBack) {
+    this.listeners[name](cb)
+    return this
+  }
 }

src/map/s-map.ts

 import MyMap from './my-map'
-import { CallBack, MapConfig, Listener, EventName } from './types'
+import { CallBack, MapConfig, Listeners } from './types'
 
 declare const SMap: {
   Map: any
@@ -14,8 +14,6 @@ declare const Plugins: {
   MaskBoundary: any
 }
 
-type Fn = (cb: CallBack) => void
-
 export default class S_Map extends MyMap {
   constructor(config: MapConfig) {
     if (!config.netType) {
@@ -34,6 +32,7 @@ export default class S_Map extends MyMap {
       rotateEnable: config.rotateEnable,
     })
     super(instance)
+    this.setListeners()
     this.on('load', this.clearFooter)
   }
 
@@ -43,35 +42,40 @@ export default class S_Map extends MyMap {
     )
     footer && ((footer as HTMLElement).style.display = 'none')
   }
-
-  on<K extends keyof Listener>(name: K, cb: CallBack) {
-    const eventName = `on${name.slice(0, 1).toUpperCase()}${name
-      .slice(1)
-      .toLowerCase()}` as Listener[K]
-    this[eventName](cb)
-    return this
-  }
-
-  private onLoad(cb: CallBack) {
+  private setListeners() {
+    const listeners: Partial<Listeners> = {
+      load: (cb: CallBack) => {
         this.map.on(SMap.MapEvent.maploaded, cb)
-  }
-  private onZoom(cb: CallBack) {
+      },
+      zoom: (cb: CallBack) => {
         this.map.on(SMap.MapEvent.zoomchanged, cb)
-  }
-  private onMove(cb: CallBack) {
+      },
+      move: (cb: CallBack) => {
         this.map.on(SMap.MapEvent.centerchanged, cb)
-  }
-  private onBlur(cb: CallBack) {
+      },
+      blur: (cb: CallBack) => {
         this.map.on(SMap.MapEvent.blur, cb)
-  }
-  private onFocus(cb: CallBack) {
+      },
+      focus: (cb: CallBack) => {
         this.map.on(SMap.MapEvent.focus, cb)
-  }
-  private onDrag(cb: CallBack) {
+      },
+      drag: (cb: CallBack) => {
         this.map.on(SMap.MapEvent.drag, cb)
-  }
-  private onResize(cb: CallBack) {
+      },
+      resize: (cb: CallBack) => {
         this.map.on(SMap.MapEvent.resize, cb)
+      },
+      click: (cb: CallBack) => {
+        this.event(SMap.MapEvent.click, cb)
+      },
+      dblclick: (cb: CallBack) => {
+        this.event(SMap.MapEvent.doubleclick, cb)
+      },
+      mousewheel: (cb: CallBack) => {
+        this.event(SMap.MapEvent.mousewheel, cb)
+      },
+    }
+    this.listeners = Object.assign(this.listeners, listeners)
   }
 
   private event(event: unknown, cb: CallBack) {
@@ -81,14 +85,4 @@ export default class S_Map extends MyMap {
       })
     })
   }
-
-  private onClick(cb: CallBack): void {
-    this.event(SMap.MapEvent.click, cb)
-  }
-  private onDblClick(cb: CallBack): void {
-    this.event(SMap.MapEvent.doubleclick, cb)
-  }
-  private onMouseWheel(cb: CallBack): void {
-    this.event(SMap.MapEvent.mousewheel, cb)
-  }
 }

src/map/types.ts

-export type MapConfig = Partial<MapOptions>
-
-export interface MapOptions {
+/**
+ * 地图配置
+ */
+export type MapConfig = Partial<{
+  /** 地图容器（需要有宽高） */
   el: string
   /**
    * SMap 地图专用
@@ -11,13 +13,21 @@ export interface MapOptions {
    * @param njdl 表示南京东路政务网3D
    */
   netType: 'internet' | 'affairs' | 'local3D' | 'affairs3D' | 'njdl'
+  /** 地图模式 */
   mode: '2D' | '3D'
+  /** 地图初始中心点位 */
   center: [number, number]
+  /** 地图初始zoom等级 */
   zoom: number
+  /** 地图zoom允许范围 */
   zooms: [number, number]
+  /** 地图初始旋转角度 */
   bearing: number
+  /** 地图初始仰角（3D用） */
   pitch: number
+  /** 地图仰角允许范围 */
   pitchs: [number, number]
+  /** 地图样式 */
   style: string
   /**
    * 在SMap中作为appKey使用
@@ -27,19 +37,35 @@ export interface MapOptions {
   showBuildingBlock: boolean
   rotateEnable: boolean
   baseApiUrl: string
-}
+}>
 
-export type CallBack = (arg: unknown, oth?: unknown) => void
+/**
+ * 监听回调函数
+ */
+export type CallBack = (arg: any, oth?: any) => void
 
-export type Listener = {
-  load: 'onLoad'
-  zoom: 'onZoom'
-  move: 'onMove'
-  blur: 'onBlur'
-  focus: 'onFocus'
-  drag: 'onDrag'
-  resize: 'onResize'
-  click: 'onClick'
-  dblclick: 'onDblClick'
-  mousewheel: 'onMouseWheel'
+/**
+ * 监听事件
+ */
+export interface Listeners {
+  /** 加载完成触发 */
+  load: (cb: CallBack) => unknown
+  /** zoom变化触发 */
+  zoom: (cb: CallBack) => unknown
+  /** 地图移动 */
+  move: (cb: CallBack) => unknown
+  /** 失焦触发 */
+  blur: (cb: CallBack) => unknown
+  /** 聚焦触发 */
+  focus: (cb: CallBack) => unknown
+  /** 拖动触发 */
+  drag: (cb: CallBack) => unknown
+  /** 视图大小变化触发 */
+  resize: (cb: CallBack) => unknown
+  /** 点击触发 */
+  click: (cb: CallBack) => unknown
+  /** 双击触发 */
+  dblclick: (cb: CallBack) => unknown
+  /** 滚轮触发 */
+  mousewheel: (cb: CallBack) => unknown
 }