点击事件回调参数统一化

src/components/main.vue

@@ -18,27 +18,27 @@ let map: MyMap
 onMounted(async () => {
   await nextTick()
 
-  // map = useMap('SMap').with({
-  //   el: 'container',
-  //   center: [0, 0],
-  //   zoom: 5,
-  //   style: 'smap://styles/dark',
-  //   appKey: 'ACF69EDK17LON63GHPF081',
-  //   netType: 'internet',
-  // })
-
-  map = useMap('AIMap').with({
+  map = useMap('SMap').with({
     el: 'container',
-    center: [121.612846, 31.205494],
-    zoom: 13,
-    style: 'aimap://styles/aimap/darkblue-v4',
-    appKey: 'gt8XidVe5upHf7cirkJwwXTCWj20zfu3',
-    baseApiUrl: 'https://location-dev.newayz.com',
+    center: [0, 0],
+    zoom: 5,
+    style: 'smap://styles/dark',
+    appKey: 'ACF69EDK17LON63GHPF081',
+    netType: 'internet',
   })
 
+  // map = useMap('AIMap').with({
+  //   el: 'container',
+  //   center: [121.612846, 31.205494],
+  //   zoom: 13,
+  //   style: 'aimap://styles/aimap/darkblue-v4',
+  //   appKey: 'gt8XidVe5upHf7cirkJwwXTCWj20zfu3',
+  //   baseApiUrl: 'https://location-dev.newayz.com',
+  // })
+
   map
     .on('load', addControls)
-    .on('click', (a, b) => console.log('click', a, b, map))
+    .on('click', (a, b) => console.log('click', a, b))
     .on('zoom', (e) => console.log('zoom: ', e))
     .on('move', (e) => console.log('move: ', e))
     .on('blur', (e) => console.log('blur: ', e))

src/map/ai-map.ts

@@ -7,6 +7,7 @@ import {
   ZoomOptions,
   FocusOptions,
   Location,
+  ClickCallBack,
 } from './types'
 
 declare const aimap: {
@@ -41,14 +42,13 @@ export default class AI_Map extends MyMap {
       bearing: config.bearing || 0,
       style: config.style,
       localIdeographFontFamily: config.family,
-      spatialReference: 'cgcs2000',
     })
     super(instance)
-    this.setListeners()
-    this.setControls()
+    this._setListeners()
+    this._setControls()
   }
 
-  private setListeners() {
+  private _setListeners() {
     const _listeners: Partial<Listeners> = {
       load: (cb: CallBack) => {
         this.map.on('load', cb)
@@ -71,14 +71,24 @@ export default class AI_Map extends MyMap {
       resize: (cb: CallBack) => {
         this.map.on('resize', cb)
       },
-      click: (cb: CallBack) => {
-        this.map.on('click', cb)
+      click: (cb: ClickCallBack) => {
+        this.map.on('click', (e: any) => {
+          const arg = {
+            type: e.type,
+            center: [e.lngLat.lng, e.lngLat.lat],
+            event: e.originalEvent,
+            clientX: e.point.x,
+            clientY: e.point.y,
+            originData: e,
+          }
+          cb(arg)
+        })
       },
     }
     this._listeners = Object.assign(this._listeners, _listeners)
   }
 
-  private setControls() {
+  private _setControls() {
     const _controls = {
       compass: (options: ControlOptions) => {
         this.map.addControl(new aimap.CompassControl(), options.position)

src/map/s-map.ts

@@ -51,19 +51,19 @@ export default class S_Map extends MyMap {
       rotateEnable: config.rotateEnable,
     })
     super(instance)
-    this.setListeners()
-    this.setControls()
-    this.on('load', this.clearFooter)
+    this._setListeners()
+    this._setControls()
+    this.on('load', this._clearFooter)
   }
 
-  private clearFooter() {
+  private _clearFooter() {
     const footer = document.querySelector(
       '.esri-ui-manual-container>.esri-component',
     )
     footer && ((footer as HTMLElement).style.display = 'none')
   }
 
-  private setListeners() {
+  private _setListeners() {
     const _listeners: Partial<Listeners> = {
       load: (cb: CallBack) => {
         this.map.on(SMap.MapEvent.maploaded, cb)
@@ -81,33 +81,41 @@ export default class S_Map extends MyMap {
         this.map.on(SMap.MapEvent.focus, cb)
       },
       drag: (cb: CallBack) => {
-        this.map.on(SMap.MapEvent.drag, cb)
+        this._addEvent(SMap.MapEvent.drag, cb)
       },
       resize: (cb: CallBack) => {
         this.map.on(SMap.MapEvent.resize, cb)
       },
       click: (cb: CallBack) => {
-        this.event(SMap.MapEvent.click, cb)
+        this._addEvent(SMap.MapEvent.click, cb)
       },
       dblclick: (cb: CallBack) => {
-        this.event(SMap.MapEvent.doubleclick, cb)
+        this._addEvent(SMap.MapEvent.doubleclick, cb)
       },
       mousewheel: (cb: CallBack) => {
-        this.event(SMap.MapEvent.mousewheel, cb)
+        this._addEvent(SMap.MapEvent.mousewheel, cb)
       },
     }
     this._listeners = Object.assign(this._listeners, _listeners)
   }
 
-  private event(event: unknown, cb: CallBack) {
-    this.map.on(event, (view: any, eventParamter: any) => {
-      view.hitTest(eventParamter).then((res: any) => {
-        cb(res.results, eventParamter.mapPoint)
+  private _addEvent(event: unknown, cb: CallBack) {
+    this.map.on(event, (view: any, e: any) => {
+      const arg = {
+        type: e.type,
+        center: [e.mapPoint?.longitude, e.mapPoint?.latitude],
+        event: e.native,
+        clientX: e.x,
+        clientY: e.y,
+        originData: e,
+      }
+      view.hitTest(e).then((res: any) => {
+        cb(arg, res.results)
       })
     })
   }
 
-  private setControls() {
+  private _setControls() {
     const _controls = {
       home: (options: ControlOptions) => {
         this.map.addControl(

src/map/types.ts

@@ -47,6 +47,25 @@ export type Location = [number, number] | [number, number, number]
  */
 export type CallBack = (arg: any, oth?: any) => unknown
 
+/** 经过封装的返回统一参数的点击回调 */
+export type ClickCallBack = (
+  arg: {
+    /** 事件类型 */
+    type: string
+    /** 地图初始中心点位 */
+    center: number[]
+    /** 鼠标事件 */
+    event: PointerEvent
+    /** 触发时鼠标x位置 */
+    clientX: number
+    /** 触发时鼠标y位置 */
+    clientY: number
+    /** 地图触发事件的原始数据（即未经封装前的数据） */
+    originData: any
+  },
+  oth?: any,
+) => unknown
+
 /**
  * 监听事件
  */
@@ -66,7 +85,7 @@ export interface Listeners {
   /** 视图大小变化触发 */
   resize: (cb: CallBack) => unknown
   /** 点击触发 */
-  click: (cb: CallBack) => unknown
+  click: (cb: ClickCallBack) => unknown
   /** 双击触发 */
   dblclick: (cb: CallBack) => unknown
   /** 滚轮触发 */