@sl-utils/map 1.0.8 → 1.0.10

package/package.json

@@ -1,11 +1,11 @@
 {
   "name": "@sl-utils/map",
-  "version": "1.0.8",
+  "version": "1.0.10",
   "description": "",
   "main": "index.cjs",
   "module": "./src/sl-utils-map.ts",
   "type": "module",
-  "types": "./src/sl-utils-map.d.ts",
+  "types": "./types/sl-utils-map.d.ts",
   "scripts": {
     "test": "echo \"Error: no test specified\" && exit 1",
     "build": "npm run build:cjs",
@@ -32,7 +32,7 @@
   "exports": {
     "./package.json": "./package.json",
     ".": {
-      "types": "./src/sl-utils-map.d.ts",
+      "types": "./types/sl-utils-map.d.ts",
       "import": "./src/sl-utils-map.ts"
     }
   },

package/src/map/canvas-map.ts

@@ -5,15 +5,30 @@ declare var AMap: any;
 
 export class SLUMap {
     constructor(ele: string)
-    constructor(ele: string)
-    constructor(ele: string, options: Partial<SLSMapOpt> = {}) {
-        this.createMap(ele, options)
+    constructor(ele: string, options: Partial<SLPMapOpt> = {}) {
+        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,18 +55,8 @@ export class SLUMap {
         }
         return this
     }
-    private async createMap(ele: string, options: Partial<SLSMapOpt>) {
-        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<SLSMapOpt>) {
+    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;
         let param: L.MapOptions = {
             dragging,
@@ -69,7 +74,7 @@ export class SLUMap {
         return Promise.resolve(map)
     }
     /**---------------高德地图的相关方法------------------- */
-    private async initAmap(ele: string, opt: Partial<SLSMapOpt>) {
+    private async initAmap(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, showLabel = true } = opt;
         return AMapLoader.load({
             "key": "87e1b1e9aa88724f69208972546fdd57",   // 申请好的Web端开发者Key，首次调用 load 时必填
@@ -101,27 +106,3 @@ export class SLUMap {
     }
 }
 
-interface SLSMapOpt {
-    /**地图的类型 @param L leaflet插件 @param A 高德地图 @param B 百度地图  @default L*/
-    type: 'L' | 'A' | 'B',
-    /**地图中心点 [lat,lng] @default [22.68471,114.12027] */
-    center: [number, number],
-    /**地图初始层级 @default 11*/
-    zoom: number,
-    /**最小层级 @default 2*/
-    minZoom: number,
-    /**最大层级 @default 20*/
-    maxZoom: number,
-    /**拖拽功能 @default true */
-    dragging: boolean,
-    /**显示层级控制器 @default false */
-    zoomControl: boolean,
-    /**显示属性控制器 @default false */
-    attributionControl: boolean,
-    /**双击放大层级 @default false */
-    doubleClickZoom: boolean,
-    /**点击关闭弹窗 @default false */
-    closePopupOnClick: boolean,
-    /**显示标签(省会、地名等) @param AMap @default true  */
-    showLabel: boolean,
-}

package/src/map/index.ts

@@ -0,0 +1,4 @@
+export * from "./canvas-draw"
+export * from "./canvas-event"
+export * from "./canvas-layer"
+export * from "./canvas-map"

package/src/plugins/index.ts

@@ -0,0 +1 @@
+export * from './plugin-draw'

package/src/plugins/plugin-draw.ts

@@ -0,0 +1,123 @@
+import { MapCanvasDraw, MapCanvasLayer } from "../map";
+
+/**地图插件----绘制 */
+export class MapPluginDraw extends MapCanvasLayer {
+    constructor(map: AMAP.Map | L.Map, options?: AMAP.CustomLayerOption | MapCanvasPara) {
+        super(map, options);
+        this._draw = new MapCanvasDraw(map, this.canvas);
+    }
+    /**地图绘制控制类 */
+    protected _draw: MapCanvasDraw;
+    /**地图事件引起的重绘绘制 */
+    protected override renderFixedData() {
+        this.resetCanvas();
+        this.drawMapAll();
+    }
+    /**绘制所有需要绘制的类 */
+    public drawMapAll() {
+        this._draw.drawMapAll();
+        return this;
+    }
+    /**设置原点 */
+    public setAllArcs(arcs: MapArc[]) {
+        this._draw.setAllArcs(arcs);
+        return this;
+    }
+    /**设置线数据 */
+    public setAllLines(lines: MapLine[]) {
+        this._draw.setAllLines(lines);
+        return this;
+    }
+    /**设置贝塞尔曲线数据 */
+    public setAllBezierLines(lines: MapLine[]) {
+        this._draw.setAllBezierLines(lines);
+        return this;
+    }
+    /**设置多边形数据 */
+    public setAllRects(rects: MapRect[]) {
+        this._draw.setAllRects(rects);
+        return this;
+    }
+    /**设置文本数据 */
+    public setAllTexts(texts: MapText[]) {
+        this._draw.setAllTexts(texts);
+        return this;
+    }
+    /**设置图片数据 */
+    public setAllImgs(imgs: MapImage[]) {
+        this._draw.setAllImgs(imgs);
+        return this;
+    }
+    /**设置gif数据 */
+    public setAllGifs(gifs: MapGif[]) {
+        this._draw.setAllGifs(gifs);
+        return this;
+    }
+    /**增加原点 */
+    public addArc(arc: MapArc) {
+        this._draw.addArc(arc);
+        return this;
+    }
+    /**增加线 */
+    public addLine(line: MapLine) {
+        this._draw.addLine(line);
+        return this;
+    }
+    /**增加贝塞尔曲线 */
+    public addBezierLine(line: MapLine) {
+        this._draw.addBezierLine(line);
+        return this;
+    }
+    /**增加多边形 */
+    public addRect(rect: MapRect) {
+        this._draw.addRect(rect);
+        return this;
+    }
+    /**增加文本 */
+    public addText(text: MapText) {
+        this._draw.addText(text);
+        return this;
+    }
+    /**增加图片 */
+    public addImg(img: MapImage) {
+        this._draw.addImg(img);
+        return this;
+    }
+    /**删除指定圆点 */
+    public delArc(arc: MapArc) {
+        this._draw.delArc(arc);
+        return this;
+    }
+    /**删除指定线 */
+    public delLine(line: MapLine) {
+        this._draw.delLine(line);
+        return this;
+    }
+    /**删除指定贝塞尔曲线 */
+    public delBezierLine(line: MapLine) {
+        this._draw.delBezierLine(line);
+        return this;
+    }
+    /**删除指定多边形 */
+    public delRect(rect: MapRect) {
+        this._draw.delRect(rect);
+        return this;
+    }
+    /**删除指定多边形 */
+    public delText(text: MapText) {
+        this._draw.delText(text);
+        return this;
+    }
+    /**删除指定Img */
+    public delImg(img: MapImage) {
+        this._draw.delImg(img);
+        return this;
+    }
+    /**清空
+     * @param type 不填清空所有内容数据
+     */
+    public delAll(type: 'all' | 'arc' | 'line' | 'bezier' | 'rect' | 'img' | 'gif' = 'all') {
+        this._draw.delAll(type);
+        return this;
+    }
+}

package/src/sl-utils-map.ts

@@ -1,4 +1,5 @@
 export * from './canvas'
+export * from './plugins'
 export { MapCanvasDraw } from './map/canvas-draw'
 export { MapCanvasEvent } from './map/canvas-event'
 export { MapCanvasLayer } from './map/canvas-layer'

package/tsconfig.json

@@ -15,17 +15,12 @@
       "dom"
     ],
     "paths": {
-      "@/*": ["src/*"],
-      "@sl-utils/*": ["src/utils/*"]  // 添加这行
+      "@sl-utils/map": ["types/sl-utils-map.d.ts"]  // 添加这行
     }
   },
   "include": [
     "src/**/*",
     "types/**/*",
-    "src/**/*.ts",
-    "src/**/*.d.ts",
-    "src/**/*.tsx",
-    "src/**/*.vue"
   ],
   "exclude": []
 }

package/types/core.d.ts

@@ -164,6 +164,31 @@ interface CanvasLine<I = any> extends SLPCanvas {
 }
 
 /**canvas绘图类型空间 */
+
+interface SLPMapOpt {
+    /**地图的类型 @param L leaflet插件 @param A 高德地图 @param B 百度地图  @default L*/
+    type: 'L' | 'A' | 'B',
+    /**地图中心点 [lat,lng] @default [22.68471,114.12027] */
+    center: [number, number],
+    /**地图初始层级 @default 11*/
+    zoom: number,
+    /**最小层级 @default 2*/
+    minZoom: number,
+    /**最大层级 @default 20*/
+    maxZoom: number,
+    /**拖拽功能 @default true */
+    dragging: boolean,
+    /**显示层级控制器 @default false */
+    zoomControl: boolean,
+    /**显示属性控制器 @default false */
+    attributionControl: boolean,
+    /**双击放大层级 @default false */
+    doubleClickZoom: boolean,
+    /**点击关闭弹窗 @default false */
+    closePopupOnClick: boolean,
+    /**显示标签(省会、地名等) @param AMap @default true  */
+    showLabel: boolean,
+}
 declare namespace SLTCanvas {
     /**canvse上的点位信息 */
     type Point = CanvasPoint | CanvasPoints;

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

@@ -0,0 +1,134 @@
+declare module '@sl-utils/map' {
+  /**leaflet 需要开发者在样式表中挂载leaflet样式 */
+  export class SLUMap {
+    constructor(ele: string,);
+    map: AMAP.Map | L.Map
+    /**初始实例化地图
+      * @param options 地图初始化参数
+      */
+    public init(options?: Partial<SLPMapOpt>): Promise<void>
+  }
+  // 添加其他导出...
+  export class MapCanvasDraw {
+    constructor();
+  }
+  export class MapCanvasEvent {
+    constructor();
+  }
+
+  /** 地图canvas基础图层类(基本所有插件都要继承此类) 删除永远比新增简单 */
+  export class MapCanvasLayer {
+    constructor(MAP: L.Map, opt?: MapCanvasPara)
+    constructor(MAP: AMAP.Map, opt?: AMAP.CustomLayerOption)
+    constructor(MAP: AMAP.Map | L.Map, opt?: AMAP.CustomLayerOption | MapCanvasPara)
+    /**开发自己设置项目使用了的地图插件类型Leaflet(0)、高德(1)、百度(2),防止网络加载的第三方插件再使用instanceof是为define*/
+    protected readonly type: 0 | 1 | 2;
+    protected readonly map: AMAP.Map | L.Map;
+    private layer: L.Layer | AMAP.CustomLayer;
+    protected readonly canvas: HTMLCanvasElement;
+    protected readonly ctx: CanvasRenderingContext2D;
+    protected width: number;
+    protected height: number;
+    public readonly options: SLPMap.Canvas;
+    /**动画循环的id标识 */
+    protected flagAnimation: number;
+    /**移除图层 */
+    public onRemove(): MapCanvasLayer;
+    /** 清空并重新设置画布 */
+    public resetCanvas(): void
+    /**添加或关闭地图特定的监听事件(_eventSwitch事件后自动调用) */
+    protected addMapEvents(map: AMAP.Map | L.Map, key: 'on' | 'off'): void
+    /**绘制静态数据推荐使用此方法(固定的图) */
+    protected renderFixedData(): void
+    /** 推荐使用此方法绘制动态图(跟随鼠标拖动，移动时需要立刻绘制时)
+     ** 动画图层绘制前的画布清空、计算等均在此方法中自行计算 
+     ** 与renderFixedData本质是一样的
+     */
+    protected renderAnimation(): void
+    /** */
+    protected on(key: string, cb: Function): void
+    /** */
+    protected off(key: string, cb: Function): void
+    /**初始化canvas */
+    private initCanvas(): void
+    /** 将图层添加到map实例中显示 */
+    private onAdd(): this
+    /**基础的监听事件   
+    * @param flag true开启重绘事件监听 false 关闭重绘事件监听
+    **/
+    private _eventSwitch(flag?: boolean): void
+    /**基础绘制 */
+    /** 重绘(子类重写也无效)
+     ** 清空之前的绘制
+     ** ①高德地图渲染配置alwaysRender:true后拖动缩放会多次渲染
+     */
+    protected _redraw: () => {};
+    /**------------------------------高德地图的实现------------------------------*/
+    private _onAmapAdd(): void
+    private _onAmapRemove(): void
+    /**------------------------------Leaflet地图的实现------------------------------*/
+    /**初始化画布并添加到Pane中 */
+    private initLeafletCanvas(): void
+    /**移除 */
+    private _onLeafletRemove(): void
+    private addLeafletEvent(flag?: boolean): void
+    /**重设画布,并重新渲染*/
+    private _reset(): void
+    /**缩放动画 */
+    private _animateZoom(e: any): void
+    private _onCanvasLoad(): void
+  }
+
+  /**地图插件----绘制 */
+  export class MapPluginDraw extends MapCanvasLayer {
+    constructor(map: AMAP.Map | L.Map, options?: AMAP.CustomLayerOption | MapCanvasPara)
+    /**地图绘制控制类 */
+    protected _draw: MapCanvasDraw;
+    /**地图事件引起的重绘绘制 */
+    protected override renderFixedData(): void
+    /**绘制所有需要绘制的类 */
+    public drawMapAll(): this
+    /**设置原点 */
+    public setAllArcs(arcs: MapArc[]): this
+    /**设置线数据 */
+    public setAllLines(lines: MapLine[]): this
+    /**设置贝塞尔曲线数据 */
+    public setAllBezierLines(lines: MapLine[]): this
+    /**设置多边形数据 */
+    public setAllRects(rects: MapRect[]): this
+    /**设置文本数据 */
+    public setAllTexts(texts: MapText[]): this
+    /**设置图片数据 */
+    public setAllImgs(imgs: MapImage[]): this
+    /**设置gif数据 */
+    public setAllGifs(gifs: MapGif[]): this
+    /**增加原点 */
+    public addArc(arc: MapArc): this
+    /**增加线 */
+    public addLine(line: MapLine): this
+    /**增加贝塞尔曲线 */
+    public addBezierLine(line: MapLine): this
+    /**增加多边形 */
+    public addRect(rect: MapRect): this
+    /**增加文本 */
+    public addText(text: MapText): this
+    /**增加图片 */
+    public addImg(img: MapImage): this
+    /**删除指定圆点 */
+    public delArc(arc: MapArc): this
+    /**删除指定线 */
+    public delLine(line: MapLine): this
+    /**删除指定贝塞尔曲线 */
+    public delBezierLine(line: MapLine): this
+    /**删除指定多边形 */
+    public delRect(rect: MapRect): this
+    /**删除指定多边形 */
+    public delText(text: MapText): this
+    /**删除指定Img */
+    public delImg(img: MapImage): this
+    /**清空
+     * @param type 不填清空所有内容数据
+     */
+    public delAll(type?: 'all' | 'arc' | 'line' | 'bezier' | 'rect' | 'img' | 'gif'): this;
+  }
+}

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"}

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

@@ -1,16 +0,0 @@
-declare module '@sl-utils/map' {
-  /**leaflet 需要开发者在样式表中挂载leaflet样式 */
-  export class SLUMap {
-    constructor(ele: string);
-  }
-  // 添加其他导出...
-  export class MapCanvasDraw {
-    constructor();
-  }
-  export class MapCanvasEvent {
-    constructor();
-  }
-  export class MapCanvasLayer {
-    constructor();
-  }
-}