约束初始化参数

src/components/main.vue

@@ -17,7 +17,6 @@ let map: MyMap
 
 onMounted(async () => {
   await nextTick()
-
   map = useMap('SMap').with({
     el: 'container',
     center: [0, 0],

src/map/ai-map.ts

@@ -8,6 +8,8 @@ import {
   FocusOptions,
   Location,
   ClickCallBack,
+  Controls,
+  AIMapConfig,
 } from './types'
 
 declare const aimap: {
@@ -20,7 +22,7 @@ declare const aimap: {
 }
 
 export default class AI_Map extends MyMap {
-  constructor(config: MapConfig) {
+  constructor(config: MapConfig<AIMapConfig>) {
     if (!config.appKey) {
       throw new Error('AIMap需要设置appKey参数！')
     }
@@ -89,27 +91,27 @@ export default class AI_Map extends MyMap {
   }
 
   private _setControls() {
-    const _controls = {
-      compass: (options: ControlOptions) => {
-        this.map.addControl(new aimap.CompassControl(), options.position)
+    const _controls: Partial<Controls> = {
+      compass: (options?: ControlOptions) => {
+        this.map.addControl(new aimap.CompassControl(), options?.position)
       },
-      zoom: (options: ControlOptions) => {
+      zoom: (options?: ControlOptions) => {
         this.map.addControl(
           new aimap.NavigationControl({
-            showZoom: options.show,
+            showZoom: options?.show,
             showCompass: false,
             visualizePitch: false,
           }),
-          options.position,
+          options?.position,
         )
       },
-      scale: (options: ControlOptions) => {
+      scale: (options?: ControlOptions) => {
         this.map.addControl(
           new aimap.ScaleControl({
-            maxWidth: options.maxWidth || 80,
-            unit: options.unit || 'metric',
+            maxWidth: options?.maxWidth || 80,
+            unit: options?.unit || 'metric',
           }),
-          options.position,
+          options?.position,
         )
       },
     }

src/map/index.ts

-import { MapConfig } from './types'
+import { AIMapConfig, MapConfig, SMapConfig } from './types'
 import S_Map from './s-map'
 import AI_Map from './ai-map'
 
 const whichMap = {
   SMap: {
-    with: (config: MapConfig) => new S_Map(config),
+    /**
+     * 使用配置初始化地图
+     * @param config 地图配置
+     */
+    with: (config: MapConfig<SMapConfig>) => new S_Map(config),
   },
   AIMap: {
-    with: (config: MapConfig) => new AI_Map(config),
+    /**
+     * 使用配置初始化地图
+     * @param config 地图配置
+     */
+    with: (config: MapConfig<AIMapConfig>) => new AI_Map(config),
   },
 }
 
+/**
+ * 创建地图
+ * @param key 地图关键字:
+ *
+ * 'SMap': 测绘院地图
+ *
+ * 'AIMap': 维智地图
+ *
+ */
 export default function useMap<K extends keyof typeof whichMap>(key: K) {
   return whichMap[key]
 }

src/map/s-map.ts

@@ -4,9 +4,10 @@ import {
   MapConfig,
   Listeners,
   ControlOptions,
-  ZoomOptions,
   Location,
   FocusOptions,
+  Controls,
+  SMapConfig,
 } from './types'
 
 declare const SMap: {
@@ -34,7 +35,7 @@ declare const Plugins: {
 }
 
 export default class S_Map extends MyMap {
-  constructor(config: MapConfig) {
+  constructor(config: MapConfig<SMapConfig>) {
     if (!config.netType) {
       throw new Error('SMap需要设置netType参数！')
     }
@@ -116,92 +117,92 @@ export default class S_Map extends MyMap {
   }
 
   private _setControls() {
-    const _controls = {
-      home: (options: ControlOptions) => {
+    const _controls: Partial<Controls> = {
+      home: (options?: ControlOptions) => {
         this.map.addControl(
           new SMap.Home({
-            visible: options.show,
-            position: options.position,
+            visible: options?.show,
+            position: options?.position,
           }),
         )
       },
-      compass: (options: ControlOptions) => {
+      compass: (options?: ControlOptions) => {
         this.map.addControl(
           new SMap.Compass({
-            visible: options.show,
-            position: options.position,
+            visible: options?.show,
+            position: options?.position,
           }),
         )
       },
-      zoom: (options: ControlOptions) => {
+      zoom: (options?: ControlOptions) => {
         this.map.addControl(
           new SMap.Zoom({
-            visible: options.show,
-            position: options.position,
+            visible: options?.show,
+            position: options?.position,
           }),
         )
       },
-      fullScreen: (options: ControlOptions) => {
+      fullScreen: (options?: ControlOptions) => {
         this.map.addControl(
           new SMap.Fullscreen({
-            visible: options.show,
-            position: options.position,
+            visible: options?.show,
+            position: options?.position,
           }),
         )
       },
-      layerList: (options: ControlOptions) => {
+      layerList: (options?: ControlOptions) => {
         this.map.addControl(
           new SMap.LayerListControl({
-            visible: options.show,
-            position: options.position,
+            visible: options?.show,
+            position: options?.position,
           }),
         )
       },
-      measureLine: (options: ControlOptions) => {
+      measureLine: (options?: ControlOptions) => {
         this.map.addControl(
           new SMap.MeasureLine({
-            visible: options.show,
-            position: options.position,
+            visible: options?.show,
+            position: options?.position,
           }),
         )
       },
-      measureArea: (options: ControlOptions) => {
+      measureArea: (options?: ControlOptions) => {
         this.map.addControl(
           new SMap.MeasureArea({
-            visible: options.show,
-            position: options.position,
+            visible: options?.show,
+            position: options?.position,
           }),
         )
       },
-      basemapToggle: (options: ControlOptions) => {
+      basemapToggle: (options?: ControlOptions) => {
         this.map.addControl(
           new SMap.BasemapToggle({
-            visible: options.show,
-            position: options.position,
+            visible: options?.show,
+            position: options?.position,
           }),
         )
       },
-      underguroundSwitch: (options: ControlOptions) => {
+      underguroundSwitch: (options?: ControlOptions) => {
         this.map.addControl(
           new SMap.UndergroundSwitch({
-            visible: options.show,
-            position: options.position,
+            visible: options?.show,
+            position: options?.position,
           }),
         )
       },
-      bMapGallery: (options: ControlOptions) => {
+      bMapGallery: (options?: ControlOptions) => {
         this.map.addControl(
           new SMap.BMapGallery({
-            visible: options.show,
-            position: options.position,
+            visible: options?.show,
+            position: options?.position,
           }),
         )
       },
-      bMapGalleryexpand: (options: ControlOptions) => {
+      bMapGalleryexpand: (options?: ControlOptions) => {
         this.map.addControl(
           new SMap.BMapGalleryExpand({
-            visible: options.show,
-            position: options.position,
+            visible: options?.show,
+            position: options?.position,
           }),
         )
       },

src/map/types.ts

 /**
  * 地图配置
  */
-export type MapConfig = Partial<{
+export type MapConfig<T> = T & {
   /** 地图容器（需要有宽高） */
   el: string
+  /**
+   * 在SMap中作为appKey使用
+   * 在AIMap中作为accessToken使用
+   */
+  appKey: string
+} & Partial<{
+    /** 地图模式 */
+    mode: '2D' | '3D'
+    /** 地图初始中心点位 */
+    center: Location
+    /** 地图初始zoom等级 */
+    zoom: number
+    /** 地图zoom允许范围 */
+    zooms: [number, number]
+    /** 地图初始旋转角度 */
+    bearing: number
+    /** 地图初始仰角（3D用） */
+    pitch: number
+    /** 地图仰角允许范围 */
+    pitchs: [number, number]
+    /** 地图样式 */
+    style: string
+    showBuildingBlock: boolean
+    rotateEnable: boolean
+    family: string
+  }>
+
+export type SMapConfig = {
   /**
    * SMap 地图专用
    * @param internet 表示互联网2D
@@ -13,32 +41,10 @@ export type MapConfig = Partial<{
    * @param njdl 表示南京东路政务网3D
    */
   netType: 'internet' | 'affairs' | 'local3D' | 'affairs3D' | 'njdl'
-  /** 地图模式 */
-  mode: '2D' | '3D'
-  /** 地图初始中心点位 */
-  center: Location
-  /** 地图初始zoom等级 */
-  zoom: number
-  /** 地图zoom允许范围 */
-  zooms: [number, number]
-  /** 地图初始旋转角度 */
-  bearing: number
-  /** 地图初始仰角（3D用） */
-  pitch: number
-  /** 地图仰角允许范围 */
-  pitchs: [number, number]
-  /** 地图样式 */
-  style: string
-  /**
-   * 在SMap中作为appKey使用
-   * 在AIMap中作为accessToken使用
-   */
-  appKey: string
-  showBuildingBlock: boolean
-  rotateEnable: boolean
+}
+export type AIMapConfig = {
   baseApiUrl: string
-  family: string
-}>
+}
 
 export type Location = [number, number] | [number, number, number]