约束初始化参数

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 地图专用
-   * @param internet 表示互联网2D
-   * @param affairs 表示政务网2D
-   * @param local3D 表示局域网3D
-   * @param affairs3D 表示政务网3D
-   * @param njdl 表示南京东路政务网3D
+   * 在SMap中作为appKey使用
+   * 在AIMap中作为accessToken使用
    */
-  netType: 'internet' | 'affairs' | 'local3D' | 'affairs3D' | 'njdl'
+  appKey: string
+} & Partial<{
     /** 地图模式 */
     mode: '2D' | '3D'
     /** 地图初始中心点位 */
@@ -29,16 +26,25 @@ export type MapConfig = Partial<{
     pitchs: [number, number]
     /** 地图样式 */
     style: string
-  /**
-   * 在SMap中作为appKey使用
-   * 在AIMap中作为accessToken使用
-   */
-  appKey: string
     showBuildingBlock: boolean
     rotateEnable: boolean
-  baseApiUrl: string
     family: string
-}>
+  }>
+
+export type SMapConfig = {
+  /**
+   * SMap 地图专用
+   * @param internet 表示互联网2D
+   * @param affairs 表示政务网2D
+   * @param local3D 表示局域网3D
+   * @param affairs3D 表示政务网3D
+   * @param njdl 表示南京东路政务网3D
+   */
+  netType: 'internet' | 'affairs' | 'local3D' | 'affairs3D' | 'njdl'
+}
+export type AIMapConfig = {
+  baseApiUrl: string
+}
 
 export type Location = [number, number] | [number, number, number]