@sl-utils/map 1.0.9 → 1.0.10

package/demo/main.ts

@@ -1,5 +1,5 @@
 import { createApp } from 'vue'
 import './style.css'
-import App from './App.vue'
+import App from './plugin-draw.vue'
 
 createApp(App).mount('#app')

package/demo/{App.vue → plugin-draw.vue}

@@ -1,44 +1,44 @@
-<script setup lang="ts">
-import { SLUMap, MapPluginDraw } from "@sl-utils/map";
-import { ref, onMounted } from "vue";
-
-onMounted(() => {
-  const map4 = new SLUMap("map", { type: "A" });
-  setTimeout(() => {
-    const draw = new MapPluginDraw(map4.map);
-    draw.addRect({
-      latlngs: [
-        [26.3, 110.5],
-        [27.3, 112.5],
-      ],
-      width: 500,
-      height: 50,
-    });
-    draw.addArc({
-      latlng: [22.5, 114.0],
-      size: 100,
-    });
-  }, 1000);
-  // const map1 = new MapCanvasDraw()
-  // const map2 = new MapCanvasEvent()
-  // const map3 = new MapCanvasLayer()
-  // SLUCanvasText.drawText({},{})
-});
-</script>
-
-
-<template>
-  <div id="map" class="card"></div>
-</template>
-
-<style scoped>
-.card {
-  position: absolute;
-  z-index: 100;
-  width: 100%;
-  height: 100%;
-  left: 0px;
-  top: 0px;
-  overflow: hidden;
-}
-</style>
+<script setup lang="ts">
+import { SLUMap, MapPluginDraw } from "@sl-utils/map";
+import { ref, onMounted } from "vue";
+
+onMounted(() => {
+  const map4 = new SLUMap("map");
+  map4.init({ type: "A" }).then(()=>{
+ const draw = new MapPluginDraw(map4.map);
+    draw.addRect({
+      latlngs: [
+        [26.3, 110.5],
+        [27.3, 112.5],
+      ],
+      width: 500,
+      height: 50,
+    });
+    draw.addArc({
+      latlng: [22.5, 114.0],
+      size: 100,
+    });
+  })
+  // const map1 = new MapCanvasDraw()
+  // const map2 = new MapCanvasEvent()
+  // const map3 = new MapCanvasLayer()
+  // SLUCanvasText.drawText({},{})
+});
+</script>
+
+
+<template>
+  <div id="map" class="card"></div>
+</template>
+
+<style scoped>
+.card {
+  position: absolute;
+  z-index: 100;
+  width: 100%;
+  height: 100%;
+  left: 0px;
+  top: 0px;
+  overflow: hidden;
+}
+</style>

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sl-utils/map",
-  "version": "1.0.9",
+  "version": "1.0.10",
   "description": "",
   "main": "index.cjs",
   "module": "./src/sl-utils-map.ts",

package/src/map/canvas-map.ts

@@ -4,16 +4,31 @@ import { SLEMap, SLULeafletNetMap } from '../leaflet';
 declare var AMap: any;
 
 export class SLUMap {
-    constructor(ele: string)
     constructor(ele: string)
     constructor(ele: string, options: Partial<SLPMapOpt> = {}) {
-        this.createMap(ele, options)
+        this.ele = ele;
+    }
+    private ele:string;
+    /**地图实例 */
+    private _map:L.Map | AMAP.Map;
+    public get map(){
+        return this._map
     }
-
-    private map: L.Map | AMAP.Map;
     /**当前正在显示的网络图层 */
     private curs: Partial<{ [key in SLEMap]: SLULeafletNetMap | undefined }> = Object.create(null);
-
+    /**初始实例化地图
+     * @param options 地图初始化参数
+     */
+    public async init(options: Partial<SLPMapOpt> = {}){
+        const { type } = options,ele = this.ele;
+        let map: L.Map | AMAP.Map;
+        switch (type) {
+            case "A": this._map = await this.initAmap(ele, options); break;
+            default: this._map = await this.initLeaflet(ele, options);
+                this.showMap([SLEMap.tianDiTuNormalMap, SLEMap.tianDiTuNormalAnnotion]);
+                break;
+        }
+    }
     /**显示指定的网络图层 */
     public showMap(names: Array<SLEMap> = []): this {
         const { map, curs } = this;
@@ -40,16 +55,6 @@ export class SLUMap {
         }
         return this
     }
-    private async createMap(ele: string, options: Partial<SLPMapOpt>) {
-        const { type } = options;
-        let map: L.Map | AMAP.Map;
-        switch (type) {
-            case "A": this.map = await this.initAmap(ele, options); break;
-            default: this.map = await this.initLeaflet(ele, options);
-                this.showMap([SLEMap.tianDiTuNormalMap, SLEMap.tianDiTuNormalAnnotion]);
-                break;
-        }
-    }
     /**---------------leaflet地图的相关方法------------------- */
     private initLeaflet(ele: string, opt: Partial<SLPMapOpt>) {
         const { zoom = 11, minZoom = 2, maxZoom = 20, center: [lat, lng] = [22.68471, 114.12027], dragging = true, zoomControl = false, attributionControl = false, doubleClickZoom = false, closePopupOnClick = false } = opt;

package/types/sl-utils-map.d.ts

@@ -1,8 +1,12 @@
 declare module '@sl-utils/map' {
   /**leaflet 需要开发者在样式表中挂载leaflet样式 */
   export class SLUMap {
-    constructor(ele: string, options?: Partial<SLPMapOpt>);
+    constructor(ele: string,);
     map: AMAP.Map | L.Map
+    /**初始实例化地图
+      * @param options 地图初始化参数
+      */
+    public init(options?: Partial<SLPMapOpt>): Promise<void>
   }
   // 添加其他导出...
   export class MapCanvasDraw {

package/demo/app.d.ts

@@ -1,3 +0,0 @@
-declare module "UU" {
-    export class UU { }
-}

package/demo/main.js

@@ -1,7 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-const vue_1 = require("vue");
-require("./style.css");
-const App_vue_1 = require("./App.vue");
-(0, vue_1.createApp)(App_vue_1.default).mount('#app');
-//# sourceMappingURL=main.js.map

package/demo/main.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"main.js","sourceRoot":"","sources":["main.ts"],"names":[],"mappings":";;AAAA,6BAA+B;AAC/B,uBAAoB;AACpB,uCAA2B;AAE3B,IAAA,eAAS,EAAC,iBAAG,CAAC,CAAC,KAAK,CAAC,MAAM,CAAC,CAAA"}