zoom相关方法

src/components/main.vue

 <template>
-  <div id="container" />
+  <div id="container">
+    <div class="btns">
+      <div @click="zoomIn">+</div>
+      <div @click="zoomOut">-</div>
+      <div @click="zoomTo">To</div>
+      <div @click="move">Move</div>
+    </div>
+  </div>
 </template>
 
 <script lang="ts" setup>
@@ -7,6 +14,7 @@ import useMap from '@/map'
 import MyMap from '@/map/my-map'
 import { nextTick, onMounted } from 'vue'
 let map: MyMap
+
 onMounted(async () => {
   await nextTick()
 
@@ -30,7 +38,7 @@ onMounted(async () => {
 
   map
     .on('load', addControls)
-    .on('click', (a, b) => console.log('click', a, b))
+    .on('click', (a, b) => console.log('click', a, b, map))
     .on('zoom', (e) => console.log('zoom: ', e))
     .on('move', (e) => console.log('move: ', e))
     .on('blur', (e) => console.log('blur: ', e))
@@ -39,27 +47,55 @@ 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')
-  }
 })
+
+function addControls() {
+  map
+    .set('home')
+    .set('compass', { position: 'bottom-right' })
+    .set('zoom')
+    .set('scale', { unit: 'imperial' })
+    .set('fullScreen')
+    .set('layerList')
+    .set('measureLine')
+    .set('measureArea')
+    .set('basemapToggle')
+    .set('underguroundSwitch')
+    .set('bMapGallery')
+}
+
+function zoomIn() {
+  map.zoomIn()
+}
+function zoomOut() {
+  map.zoomOut()
+}
+function zoomTo() {
+  map.zoomTo(20)
+}
+function move() {
+  map.focus([121.59751247938203, 29.835174764721145], { zoom: 16 })
+}
 </script>
 
 <style scoped>
 #container {
   width: 100vw;
   height: 100vh;
+  position: relative;
+}
+.btns {
+  z-index: 100;
+  position: absolute;
+  top: 0;
+  left: 0;
+}
+.btns > div {
+  margin: 10px;
+  background: #fff;
+  color: #000;
+  min-width: 20px;
+  text-align: center;
+  cursor: pointer;
 }
 </style>

src/map/ai-map.ts

 import MyMap from './my-map'
-import { CallBack, MapConfig, Listeners, ControlOptions } from './types'
+import {
+  CallBack,
+  MapConfig,
+  Listeners,
+  ControlOptions,
+  ZoomOptions,
+  FocusOptions,
+  Location,
+} from './types'
 
 declare const aimap: {
   Map: any
@@ -32,6 +40,8 @@ export default class AI_Map extends MyMap {
       maxPitch: config.pitchs?.[1],
       bearing: config.bearing || 0,
       style: config.style,
+      localIdeographFontFamily: config.family,
+      spatialReference: 'cgcs2000',
     })
     super(instance)
     this.setListeners()
@@ -39,7 +49,7 @@ export default class AI_Map extends MyMap {
   }
 
   private setListeners() {
-    const listeners: Partial<Listeners> = {
+    const _listeners: Partial<Listeners> = {
       load: (cb: CallBack) => {
         this.map.on('load', cb)
       },
@@ -65,11 +75,11 @@ export default class AI_Map extends MyMap {
         this.map.on('click', cb)
       },
     }
-    this.listeners = Object.assign(this.listeners, listeners)
+    this._listeners = Object.assign(this._listeners, _listeners)
   }
 
   private setControls() {
-    const controls = {
+    const _controls = {
       compass: (options: ControlOptions) => {
         this.map.addControl(new aimap.CompassControl(), options.position)
       },
@@ -93,6 +103,22 @@ export default class AI_Map extends MyMap {
         )
       },
     }
-    this.controls = Object.assign(this.controls, controls)
+    this._controls = Object.assign(this._controls, _controls)
+  }
+
+  zoomIn(options: ZoomOptions) {
+    this.map.zoomIn(options)
+  }
+  zoomOut(options: ZoomOptions) {
+    this.map.zoomOut(options)
+  }
+  zoomTo(level: number, options: ZoomOptions) {
+    this.map.zoomTo(level, options)
+  }
+  focus(location: Location, options?: FocusOptions) {
+    this.map.flyTo({
+      center: location,
+      ...options,
+    })
   }
 }

src/map/my-map.ts

-import { CallBack, ControlOptions, Controls, Listeners } from './types'
+import {
+  CallBack,
+  ControlOptions,
+  Controls,
+  Listeners,
+  ZoomOptions,
+  FocusOptions,
+  Location,
+} from './types'
 
-export default class MyMap {
+export default abstract class MyMap {
   protected map
-  protected listeners: Listeners
-  protected controls: Controls
+  protected _listeners: Listeners
+  protected _controls: Controls
 
   constructor(instance: any) {
     this.map = instance
-    this.listeners = {
+    this._listeners = {
       load: (cb: CallBack) => {
         console.error('on：此地图不存在 load 监听事件！')
       },
@@ -39,7 +47,7 @@ export default class MyMap {
         console.error('on：此地图不存在 mousewheel 监听事件！')
       },
     }
-    this.controls = {
+    this._controls = {
       home: () => {
         console.error('set：此地图不存在 home 控件！')
       },
@@ -93,7 +101,7 @@ export default class MyMap {
    * @param cb 回调函数
    */
   on<K extends keyof Listeners>(name: K, cb: CallBack) {
-    this.listeners[name](cb)
+    this._listeners[name](cb)
     return this
   }
 
@@ -105,7 +113,30 @@ export default class MyMap {
   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)
+    this._controls[name](options)
     return this
   }
+
+  /**
+   * zoom in
+   * @param options 参数
+   */
+  abstract zoomIn(options?: ZoomOptions): unknown
+  /**
+   * zoom out
+   * @param options 参数
+   */
+  abstract zoomOut(options?: ZoomOptions): unknown
+  /**
+   * zoom to
+   * @param level 等级
+   * @param options 参数
+   */
+  abstract zoomTo(level: number, options?: ZoomOptions): unknown
+  /**
+   * 聚焦
+   * @param location 坐标
+   * @param options 参数
+   */
+  abstract focus(location: Location, options?: FocusOptions): unknown
 }

src/map/s-map.ts

 import MyMap from './my-map'
-import { CallBack, MapConfig, Listeners, ControlOptions } from './types'
+import {
+  CallBack,
+  MapConfig,
+  Listeners,
+  ControlOptions,
+  ZoomOptions,
+  Location,
+  FocusOptions,
+} from './types'
 
 declare const SMap: {
   Map: any
@@ -56,7 +64,7 @@ export default class S_Map extends MyMap {
   }
 
   private setListeners() {
-    const listeners: Partial<Listeners> = {
+    const _listeners: Partial<Listeners> = {
       load: (cb: CallBack) => {
         this.map.on(SMap.MapEvent.maploaded, cb)
       },
@@ -88,7 +96,7 @@ export default class S_Map extends MyMap {
         this.event(SMap.MapEvent.mousewheel, cb)
       },
     }
-    this.listeners = Object.assign(this.listeners, listeners)
+    this._listeners = Object.assign(this._listeners, _listeners)
   }
 
   private event(event: unknown, cb: CallBack) {
@@ -100,7 +108,7 @@ export default class S_Map extends MyMap {
   }
 
   private setControls() {
-    const controls = {
+    const _controls = {
       home: (options: ControlOptions) => {
         this.map.addControl(
           new SMap.Home({
@@ -190,6 +198,20 @@ export default class S_Map extends MyMap {
         )
       },
     }
-    this.controls = Object.assign(this.controls, controls)
+    this._controls = Object.assign(this._controls, _controls)
+  }
+
+  zoomIn() {
+    this.map.zoomIn()
+  }
+  zoomOut() {
+    this.map.zoomOut()
+  }
+  zoomTo(level: number) {
+    this.map.setZoom(level)
+  }
+  focus(location: Location, options?: FocusOptions) {
+    const level = options?.zoom || this.map.getZoom()
+    this.map.setZoomAndCenter(level, location)
   }
 }

src/map/types.ts

@@ -37,9 +37,10 @@ export type MapConfig = Partial<{
   showBuildingBlock: boolean
   rotateEnable: boolean
   baseApiUrl: string
+  family: string
 }>
 
-type Location = [number, number] | [number, number, number]
+export type Location = [number, number] | [number, number, number]
 
 /**
  * 监听回调函数
@@ -96,3 +97,30 @@ export interface Controls {
   bMapGallery: (options?: ControlOptions) => unknown
   bMapGalleryexpand: (options?: ControlOptions) => unknown
 }
+export interface ZoomOptions {
+  /** 如果 false ，则没有动画效果（默认true） */
+  animate?: boolean
+  /** 动态转换的持续时间，按毫秒计算（默认3000） */
+  duration?: number
+  /** 该函数持续的时间在 0~1 之间， 返回一个表示状态的数字，初始状态为 0，最终状态为 1 */
+  easing?: (t?: number) => number | void
+  /** 动态转换结束后，目标中心与实际地图容器中心间的偏差，单位为像素 */
+  offset?: [number, number]
+}
+
+export interface FocusOptions {
+  /**地图缩放等级（默认当前等级） */
+  zoom?: number
+  /** 地图倾斜角度（默认当前角度） */
+  pitch?: number
+  /** 地图旋转角度（默认当前角度） */
+  bearing?: number
+  /** 图层距离容器四周距离(单位像素) */
+  padding?: { top?: number; bottom?: number; left?: number; right?: number }
+  /** 动画速度（默认1.2） */
+  speed?: number
+  /** 默认1.42 */
+  curve?: number
+  /** 整个fly动画持续毫秒时间（默认3000） */
+  maxDuration?: number
+}