添加控件

src/components/main.vue

@@ -4,33 +4,33 @@
 
 <script lang="ts" setup>
 import useMap from '@/map'
+import MyMap from '@/map/my-map'
 import { nextTick, onMounted } from 'vue'
-let map
+let map: MyMap
 onMounted(async () => {
   await nextTick()
+
   // map = useMap('SMap').with({
   //   el: 'container',
-  //   mode: '2D',
   //   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,
-    zooms: [3, 20],
-    pitch: 0,
-    bearing: 0,
     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))
-    .on('load', (e) => console.log('load: ', e))
     .on('zoom', (e) => console.log('zoom: ', e))
     .on('move', (e) => console.log('move: ', e))
     .on('blur', (e) => console.log('blur: ', e))
@@ -39,6 +39,21 @@ onMounted(async () => {
     .on('resize', (e) => console.log('resize: ', e))
     .on('dblclick', (e) => console.log('dblclick: ', e))
     .on('mousewheel', (e) => console.log('mousewheel: ', e))
+
+  function addControls() {
+    map
+      .set('home')
+      .set('compass', { position: 'top-left' })
+      .set('zoom')
+      .set('scale', { unit: 'imperial' })
+      .set('fullScreen')
+      .set('layerList')
+      .set('measureLine')
+      .set('measureArea')
+      .set('basemapToggle')
+      .set('underguroundSwitch')
+      .set('bMapGallery')
+  }
 })
 </script>
 

src/map/ai-map.ts

 import MyMap from './my-map'
-import { CallBack, MapConfig, Listeners } from './types'
+import { CallBack, MapConfig, Listeners, ControlOptions } from './types'
 
 declare const aimap: {
   Map: any
-  accessToken?: string
-  baseApiUrl?: string
+  accessToken: string
+  baseApiUrl: string
+  NavigationControl: any
+  CompassControl: any
+  ScaleControl: any
 }
+
 export default class AI_Map extends MyMap {
   constructor(config: MapConfig) {
+    if (!config.appKey) {
+      throw new Error('AIMap需要设置appKey参数！')
+    }
     aimap.accessToken = config.appKey
+    if (!config.baseApiUrl) {
+      throw new Error('AIMap需要设置baseApiUrl参数！')
+    }
     aimap.baseApiUrl = config.baseApiUrl
 
     const instance = new aimap.Map({
@@ -17,14 +27,15 @@ export default class AI_Map extends MyMap {
       zoom: config.zoom,
       minZoom: config.zooms?.[0],
       maxZoom: config.zooms?.[1],
-      pitch: config.pitch,
+      pitch: config.pitch || 0,
       minPitch: config.pitchs?.[0],
       maxPitch: config.pitchs?.[1],
-      bearing: config.bearing,
+      bearing: config.bearing || 0,
       style: config.style,
     })
     super(instance)
     this.setListeners()
+    this.setControls()
   }
 
   private setListeners() {
@@ -56,4 +67,32 @@ export default class AI_Map extends MyMap {
     }
     this.listeners = Object.assign(this.listeners, listeners)
   }
+
+  private setControls() {
+    const controls = {
+      compass: (options: ControlOptions) => {
+        this.map.addControl(new aimap.CompassControl(), options.position)
+      },
+      zoom: (options: ControlOptions) => {
+        this.map.addControl(
+          new aimap.NavigationControl({
+            showZoom: options.show,
+            showCompass: false,
+            visualizePitch: false,
+          }),
+          options.position,
+        )
+      },
+      scale: (options: ControlOptions) => {
+        this.map.addControl(
+          new aimap.ScaleControl({
+            maxWidth: options.maxWidth || 80,
+            unit: options.unit || 'metric',
+          }),
+          options.position,
+        )
+      },
+    }
+    this.controls = Object.assign(this.controls, controls)
+  }
 }

src/map/my-map.ts

-import { CallBack, Listeners } from './types'
+import { CallBack, ControlOptions, Controls, Listeners } from './types'
 
 export default class MyMap {
   protected map
   protected listeners: Listeners
+  protected controls: Controls
+
   constructor(instance: any) {
     this.map = instance
     this.listeners = {
@@ -37,6 +39,44 @@ export default class MyMap {
         console.error('on：此地图不存在 mousewheel 监听事件！')
       },
     }
+    this.controls = {
+      home: () => {
+        console.error('set：此地图不存在 home 控件！')
+      },
+      zoom: () => {
+        console.error('set：此地图不存在 home 控件！')
+      },
+      compass: () => {
+        console.error('set：此地图不存在 home 控件！')
+      },
+      scale: () => {
+        console.error('set：此地图不存在 scale 控件！')
+      },
+      fullScreen: () => {
+        console.error('set：此地图不存在 fullScreen 控件！')
+      },
+      layerList: () => {
+        console.error('set：此地图不存在 layerList 控件！')
+      },
+      measureLine: () => {
+        console.error('set：此地图不存在 measureLine 控件！')
+      },
+      measureArea: () => {
+        console.error('set：此地图不存在 measureArea 控件！')
+      },
+      basemapToggle: () => {
+        console.error('set：此地图不存在 basemapToggle 控件！')
+      },
+      underguroundSwitch: () => {
+        console.error('set：此地图不存在 underguroundSwitch 控件！')
+      },
+      bMapGallery: () => {
+        console.error('set：此地图不存在 bMapGallery 控件！')
+      },
+      bMapGalleryexpand: () => {
+        console.error('set：此地图不存在 bMapGalleryexpand 控件！')
+      },
+    }
   }
 
   /**
@@ -56,4 +96,16 @@ export default class MyMap {
     this.listeners[name](cb)
     return this
   }
+
+  /**
+   * 添加控件
+   * @param name 控件名称
+   * @param options 控件参数:
+   */
+  set<K extends keyof Controls>(name: K, options: ControlOptions = {}) {
+    if (options.show === undefined) options.show = true
+    if (options.position === undefined) options.position = 'top-right'
+    this.controls[name](options)
+    return this
+  }
 }

src/map/s-map.ts

 import MyMap from './my-map'
-import { CallBack, MapConfig, Listeners } from './types'
+import { CallBack, MapConfig, Listeners, ControlOptions } from './types'
 
 declare const SMap: {
   Map: any
@@ -9,6 +9,17 @@ declare const SMap: {
   Label: any
   Marker: any
   Network: any
+  Home: any
+  Zoom: any
+  Compass: any
+  Fullscreen: any
+  LayerListControl: any
+  MeasureLine: any
+  MeasureArea: any
+  BasemapToggle: any
+  UndergroundSwitch: any
+  BMapGallery: any
+  BMapGalleryExpand: any
 }
 declare const Plugins: {
   MaskBoundary: any
@@ -33,6 +44,7 @@ export default class S_Map extends MyMap {
     })
     super(instance)
     this.setListeners()
+    this.setControls()
     this.on('load', this.clearFooter)
   }
 
@@ -42,6 +54,7 @@ export default class S_Map extends MyMap {
     )
     footer && ((footer as HTMLElement).style.display = 'none')
   }
+
   private setListeners() {
     const listeners: Partial<Listeners> = {
       load: (cb: CallBack) => {
@@ -85,4 +98,98 @@ export default class S_Map extends MyMap {
       })
     })
   }
+
+  private setControls() {
+    const controls = {
+      home: (options: ControlOptions) => {
+        this.map.addControl(
+          new SMap.Home({
+            visible: options.show,
+            position: options.position,
+          }),
+        )
+      },
+      compass: (options: ControlOptions) => {
+        this.map.addControl(
+          new SMap.Compass({
+            visible: options.show,
+            position: options.position,
+          }),
+        )
+      },
+      zoom: (options: ControlOptions) => {
+        this.map.addControl(
+          new SMap.Zoom({
+            visible: options.show,
+            position: options.position,
+          }),
+        )
+      },
+      fullScreen: (options: ControlOptions) => {
+        this.map.addControl(
+          new SMap.Fullscreen({
+            visible: options.show,
+            position: options.position,
+          }),
+        )
+      },
+      layerList: (options: ControlOptions) => {
+        this.map.addControl(
+          new SMap.LayerListControl({
+            visible: options.show,
+            position: options.position,
+          }),
+        )
+      },
+      measureLine: (options: ControlOptions) => {
+        this.map.addControl(
+          new SMap.MeasureLine({
+            visible: options.show,
+            position: options.position,
+          }),
+        )
+      },
+      measureArea: (options: ControlOptions) => {
+        this.map.addControl(
+          new SMap.MeasureArea({
+            visible: options.show,
+            position: options.position,
+          }),
+        )
+      },
+      basemapToggle: (options: ControlOptions) => {
+        this.map.addControl(
+          new SMap.BasemapToggle({
+            visible: options.show,
+            position: options.position,
+          }),
+        )
+      },
+      underguroundSwitch: (options: ControlOptions) => {
+        this.map.addControl(
+          new SMap.UndergroundSwitch({
+            visible: options.show,
+            position: options.position,
+          }),
+        )
+      },
+      bMapGallery: (options: ControlOptions) => {
+        this.map.addControl(
+          new SMap.BMapGallery({
+            visible: options.show,
+            position: options.position,
+          }),
+        )
+      },
+      bMapGalleryexpand: (options: ControlOptions) => {
+        this.map.addControl(
+          new SMap.BMapGalleryExpand({
+            visible: options.show,
+            position: options.position,
+          }),
+        )
+      },
+    }
+    this.controls = Object.assign(this.controls, controls)
+  }
 }

src/map/types.ts

@@ -16,7 +16,7 @@ export type MapConfig = Partial<{
   /** 地图模式 */
   mode: '2D' | '3D'
   /** 地图初始中心点位 */
-  center: [number, number]
+  center: Location
   /** 地图初始zoom等级 */
   zoom: number
   /** 地图zoom允许范围 */
@@ -39,10 +39,12 @@ export type MapConfig = Partial<{
   baseApiUrl: string
 }>
 
+type Location = [number, number] | [number, number, number]
+
 /**
  * 监听回调函数
  */
-export type CallBack = (arg: any, oth?: any) => void
+export type CallBack = (arg: any, oth?: any) => unknown
 
 /**
  * 监听事件
@@ -69,3 +71,28 @@ export interface Listeners {
   /** 滚轮触发 */
   mousewheel: (cb: CallBack) => unknown
 }
+
+type Position = 'top-left' | 'top-right' | 'bottom-left' | 'bottom-right'
+export interface ControlOptions {
+  show?: boolean
+  /** 控件位置 */
+  position?: Position
+  /** ScaleControl控件的最大长度，以像素为单位 */
+  maxWidth?: number
+  /** ScaleControl控件的距离单位 */
+  unit?: 'imperial' | 'metric' | 'nautical'
+}
+export interface Controls {
+  home: (options?: ControlOptions) => unknown
+  compass: (options?: ControlOptions) => unknown
+  zoom: (options?: ControlOptions) => unknown
+  scale: (options?: ControlOptions) => unknown
+  fullScreen: (options?: ControlOptions) => unknown
+  layerList: (options?: ControlOptions) => unknown
+  measureLine: (options?: ControlOptions) => unknown
+  measureArea: (options?: ControlOptions) => unknown
+  basemapToggle: (options?: ControlOptions) => unknown
+  underguroundSwitch: (options?: ControlOptions) => unknown
+  bMapGallery: (options?: ControlOptions) => unknown
+  bMapGalleryexpand: (options?: ControlOptions) => unknown
+}