@hzab/map-combine 0.4.0-alpha.0 → 0.4.2-alpha.0

package/src/basic/Point.ts

@@ -1,173 +1,173 @@
-import Eventful from "zrender/lib/core/Eventful";
-
-import { MapElement, MapElementOption } from "./MapElement";
-import { MapCombine } from "./MapCombine";
-
-export interface PointOption<K> extends MapElementOption {
-  show: boolean;
-  cursor: string;
-  coordinates?: number[];
-  src: string;
-  center: number[];
-  size: number[];
-  rotation: number;
-  editable: boolean;
-  userdata: K;
-  silent: boolean;
-  height: number;
-}
-
-export class Point<K = undefined> extends MapElement<PointOption<K>> {
-  type = "Point";
-  event = new Eventful<{
-    "data-loaded": () => void;
-    "data-update": () => void;
-    "pointer-in": () => void;
-    "pointer-out": () => void;
-    "left-click": () => void;
-    "right-click": () => void;
-    update: (keys: Set<string>) => void;
-    destroy: () => void;
-  }>();
-
-  get userdata() {
-    return this._option.userdata;
-  }
-
-  get cursor() {
-    return this._option.cursor;
-  }
-
-  get show() {
-    return this._option.show;
-  }
-
-  set show(val) {
-    if (this._option.show != val) {
-      this._option.show = val;
-      this._update("show");
-    }
-  }
-
-  get silent() {
-    return this._option.silent;
-  }
-
-  set silent(val) {
-    if (this._option.silent != val) {
-      this._option.silent = val;
-      this._update("silent");
-    }
-  }
-
-  get editable() {
-    return this._option.editable;
-  }
-
-  set editable(val) {
-    if (this._option.editable != val) {
-      this._option.editable = val;
-      this._update("editable");
-    }
-  }
-
-  get coordinates() {
-    return this._option.coordinates;
-  }
-
-  set coordinates(val) {
-    if (this._option.coordinates != val) {
-      this._option.coordinates = val;
-      this._update("coordinates");
-    }
-  }
-
-  get src() {
-    return this._option.src;
-  }
-
-  set src(val) {
-    if (this._option.src != val) {
-      this._option.src = val;
-      this._update("src");
-    }
-  }
-
-  get size() {
-    return this._option.size;
-  }
-
-  set size(val) {
-    if (this._option.size != val) {
-      this._option.size = val;
-      this._update("size");
-    }
-  }
-  get center() {
-    return this._option.center;
-  }
-
-  set center(val) {
-    if (this._option.center != val) {
-      this._option.center = val;
-      this._update("center");
-    }
-  }
-
-  get height() {
-    return this._option.height;
-  }
-
-  set height(val) {
-    if (this._option.height != val) {
-      this._option.height = val;
-      this._update("height");
-    }
-  }
-
-  get rotation() {
-    return this._option.rotation;
-  }
-
-  set rotation(val) {
-    if (this._option.rotation != val) {
-      this._option.rotation = val;
-      this._update("rotation");
-    }
-  }
-
-  constructor(map: MapCombine, option: Partial<PointOption<K>> = {}) {
-    super(map, Object.assign({ ...Point.option }, option));
-  }
-
-  static option: PointOption<undefined> = {
-    name: "点",
-    show: true,
-    src: "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAAXNSR0IArs4c6QAAAIxJREFUOE+tU4ENgCAM6y5TL1MuEy+bmQjChAjIEkKAretIS1DBwAy3pnuXDAvgIGDT+RRfsEtYdZI6mxgoAFQWe6wAcgE0FicgHoA/aJeeF+rs/rBgYI9+u5WIFQa99K9mQwB+j1AjntLfGBlBZCssmoMAGiOkDjWmUvbcK0WVN1PGlS87i63JWTvECRNBLcaa3Jq0AAAAAElFTkSuQmCC",
-    center: [0.5, 0.5],
-    editable: false,
-    size: [16, 16],
-    rotation: 0,
-    cursor: "pointer",
-    userdata: undefined,
-    silent: false,
-    height: 0,
-  };
-
-  private _needUpdate?: Set<string>;
-  private _update(key: string) {
-    if (this._needUpdate) {
-      this._needUpdate.add(key);
-    } else {
-      this._needUpdate = new Set([key]);
-      setTimeout(() => {
-        this.event.trigger("update", this._needUpdate);
-        this._needUpdate = undefined;
-      });
-    }
-  }
-
-  protected _onDestroy(): void {
-    this.event.trigger("destroy");
-  }
-}
+import Eventful from "zrender/lib/core/Eventful";
+
+import { MapElement, MapElementOption } from "./MapElement";
+import { MapCombine } from "./MapCombine";
+
+export interface PointOption<K> extends MapElementOption {
+  show: boolean;
+  cursor: string;
+  coordinates?: number[];
+  src: string;
+  center: number[];
+  size: number[];
+  rotation: number;
+  editable: boolean;
+  userdata: K;
+  silent: boolean;
+  height: number;
+}
+
+export class Point<K = undefined> extends MapElement<PointOption<K>> {
+  type = "Point";
+  event = new Eventful<{
+    "data-loaded": () => void;
+    "data-update": () => void;
+    "pointer-in": () => void;
+    "pointer-out": () => void;
+    "left-click": () => void;
+    "right-click": () => void;
+    update: (keys: Set<string>) => void;
+    destroy: () => void;
+  }>();
+
+  get userdata() {
+    return this._option.userdata;
+  }
+
+  get cursor() {
+    return this._option.cursor;
+  }
+
+  get show() {
+    return this._option.show;
+  }
+
+  set show(val) {
+    if (this._option.show != val) {
+      this._option.show = val;
+      this._update("show");
+    }
+  }
+
+  get silent() {
+    return this._option.silent;
+  }
+
+  set silent(val) {
+    if (this._option.silent != val) {
+      this._option.silent = val;
+      this._update("silent");
+    }
+  }
+
+  get editable() {
+    return this._option.editable;
+  }
+
+  set editable(val) {
+    if (this._option.editable != val) {
+      this._option.editable = val;
+      this._update("editable");
+    }
+  }
+
+  get coordinates() {
+    return this._option.coordinates;
+  }
+
+  set coordinates(val) {
+    if (this._option.coordinates != val) {
+      this._option.coordinates = val;
+      this._update("coordinates");
+    }
+  }
+
+  get src() {
+    return this._option.src;
+  }
+
+  set src(val) {
+    if (this._option.src != val) {
+      this._option.src = val;
+      this._update("src");
+    }
+  }
+
+  get size() {
+    return this._option.size;
+  }
+
+  set size(val) {
+    if (this._option.size != val) {
+      this._option.size = val;
+      this._update("size");
+    }
+  }
+  get center() {
+    return this._option.center;
+  }
+
+  set center(val) {
+    if (this._option.center != val) {
+      this._option.center = val;
+      this._update("center");
+    }
+  }
+
+  get height() {
+    return this._option.height;
+  }
+
+  set height(val) {
+    if (this._option.height != val) {
+      this._option.height = val;
+      this._update("height");
+    }
+  }
+
+  get rotation() {
+    return this._option.rotation;
+  }
+
+  set rotation(val) {
+    if (this._option.rotation != val) {
+      this._option.rotation = val;
+      this._update("rotation");
+    }
+  }
+
+  constructor(map: MapCombine, option: Partial<PointOption<K>> = {}) {
+    super(map, Object.assign({ ...Point.option }, option));
+  }
+
+  static option: PointOption<undefined> = {
+    name: "点",
+    show: true,
+    src: "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAAXNSR0IArs4c6QAAAIxJREFUOE+tU4ENgCAM6y5TL1MuEy+bmQjChAjIEkKAretIS1DBwAy3pnuXDAvgIGDT+RRfsEtYdZI6mxgoAFQWe6wAcgE0FicgHoA/aJeeF+rs/rBgYI9+u5WIFQa99K9mQwB+j1AjntLfGBlBZCssmoMAGiOkDjWmUvbcK0WVN1PGlS87i63JWTvECRNBLcaa3Jq0AAAAAElFTkSuQmCC",
+    center: [0.5, 0.5],
+    editable: false,
+    size: [16, 16],
+    rotation: 0,
+    cursor: "pointer",
+    userdata: undefined,
+    silent: false,
+    height: 3,
+  };
+
+  private _needUpdate?: Set<string>;
+  private _update(key: string) {
+    if (this._needUpdate) {
+      this._needUpdate.add(key);
+    } else {
+      this._needUpdate = new Set([key]);
+      setTimeout(() => {
+        this.event.trigger("update", this._needUpdate);
+        this._needUpdate = undefined;
+      });
+    }
+  }
+
+  protected _onDestroy(): void {
+    this.event.trigger("destroy");
+  }
+}

package/src/basic/PointAggregation.tsx

@@ -67,6 +67,7 @@ export class PointAggregation {
   private _current = 0;
   private _map: MapCombine;
   private _option: PointAggregationOption;
+  private _onAfterViewChange;
 
   /** 唯一标识 */
   get name() {
@@ -89,10 +90,10 @@ export class PointAggregation {
     this._map = map;
     this._option = option;
     const { event } = map;
+    // _onAfterViewChange 解决元素销毁 事件取消监听异常问题
+    this._onAfterViewChange = this.onAfterViewChange.bind(this);
     this.onAfterViewChange();
-    event.on("view-moveEnd", () => {
-      this.onAfterViewChange();
-    });
+    event.on("view-moveEnd", this._onAfterViewChange);
   }
 
   private _turnon(zoom: number) {
@@ -182,7 +183,7 @@ export class PointAggregation {
   /** 销毁组件 */
   destroy() {
     const { event } = this._map;
-    event.on("view-moveEnd", null);
+    event.off("view-moveEnd", this._onAfterViewChange);
     this._map.elements.delete(this.name);
     this._cache.forEach((e) => {
       e.forEach((f) => {

package/src/basic/Polygon.ts

@@ -1,180 +1,191 @@
-import Eventful from "zrender/lib/core/Eventful"
+import Eventful from "zrender/lib/core/Eventful";
 
-import { MapElement, MapElementOption } from "./MapElement"
-import { MapCombine } from "./MapCombine"
-import { ContextMenuItem } from "./ContextMenu"
+import { MapElement, MapElementOption } from "./MapElement";
+import { MapCombine } from "./MapCombine";
+import { ContextMenuItem } from "./ContextMenu";
 
 export interface PolygonOption<K> extends MapElementOption {
-  show: boolean
-  cursor: string
-  coordinates?: number[][]
-  editable: boolean
-  userdata: K
-  silent: boolean
-  lineWidth: number
-  stroke: string
-  dash: boolean
-  fill: string
+  show: boolean;
+  cursor: string;
+  coordinates?: number[][];
+  editable: boolean;
+  userdata: K;
+  silent: boolean;
+  lineWidth: number;
+  stroke: string;
+  dash: boolean;
+  fill: string;
   menu?: ContextMenuItem[];
+  height?: number;
 }
 
 export class Polygon<K = undefined> extends MapElement<PolygonOption<K>> {
-  type = 'Polygon'
+  type = "Polygon";
   event = new Eventful<{
-    'data-loaded': () => void
-    'pointer-in': () => void
-    'pointer-out': () => void
-    'left-click': () => void
-    'right-click': () => void
-    'start-edit': () => void
-    'stop-edit': () => void
-    'update': (keys: Set<string>) => void
-    'destroy': () => void
-  }>()
+    "data-loaded": () => void;
+    "pointer-in": () => void;
+    "pointer-out": () => void;
+    "left-click": () => void;
+    "right-click": () => void;
+    "start-edit": () => void;
+    "stop-edit": () => void;
+    update: (keys: Set<string>) => void;
+    destroy: () => void;
+  }>();
 
   get userdata() {
-    return this._option.userdata
+    return this._option.userdata;
   }
 
   get cursor() {
-    return this._option.cursor
+    return this._option.cursor;
   }
 
   get show() {
-    return this._option.show
+    return this._option.show;
   }
-  
+
   set show(val) {
     if (this._option.show != val) {
-      this._option.show = val
-      this._update('show')
+      this._option.show = val;
+      this._update("show");
     }
   }
 
   get menu() {
-    return this._option.menu
+    return this._option.menu;
   }
 
   set menu(val) {
-    this._option.menu = val
+    this._option.menu = val;
   }
 
   get silent() {
-    return this._option.silent
+    return this._option.silent;
   }
 
   set silent(val) {
     if (this._option.silent != val) {
-      this._option.silent = val
-      this._update('silent')
+      this._option.silent = val;
+      this._update("silent");
     }
   }
 
   get editable() {
-    return this._option.editable
+    return this._option.editable;
   }
 
   set editable(val) {
     if (this._option.editable != val) {
-      this._option.editable = val
-      this._update('editable')
+      this._option.editable = val;
+      this._update("editable");
     }
   }
 
   get coordinates() {
-    return this._option.coordinates
+    return this._option.coordinates;
   }
 
   set coordinates(val) {
     if (this._option.coordinates != val) {
-      this._option.coordinates = val
-      this._update('coordinates')
+      this._option.coordinates = val;
+      this._update("coordinates");
     }
   }
 
   get lineWidth() {
-    return this._option.lineWidth
+    return this._option.lineWidth;
   }
 
   set lineWidth(val) {
     if (this._option.lineWidth != val) {
-      this._option.lineWidth = val
-      this._update('lineWidth')
+      this._option.lineWidth = val;
+      this._update("lineWidth");
     }
   }
 
   get stroke() {
-    return this._option.stroke
+    return this._option.stroke;
   }
 
   set stroke(val) {
     if (this._option.stroke != val) {
-      this._option.stroke = val
-      this._update('stroke')
+      this._option.stroke = val;
+      this._update("stroke");
     }
   }
   get dash() {
-    return this._option.dash
+    return this._option.dash;
   }
 
   set dash(val) {
     if (this._option.dash != val) {
-      this._option.dash = val
-      this._update('dash')
+      this._option.dash = val;
+      this._update("dash");
     }
   }
 
   get fill() {
-    return this._option.fill
+    return this._option.fill;
   }
 
   set fill(val) {
     if (this._option.fill != val) {
-      this._option.fill = val
-      this._update('fill')
+      this._option.fill = val;
+      this._update("fill");
     }
   }
 
+  get height() {
+    return this._option.height;
+  }
+
+  set height(val) {
+    if (this._option.height != val) {
+      this._option.height = val;
+      this._update("height");
+    }
+  }
 
   constructor(map: MapCombine, option: Partial<PolygonOption<K>> = {}) {
-    super(map, Object.assign({ ...Polygon.option }, option))
+    super(map, Object.assign({ ...Polygon.option }, option));
   }
 
   static option: PolygonOption<undefined> = {
-    name: '线',
+    name: "线",
     show: true,
     editable: false,
-    cursor: 'pointer',
+    cursor: "pointer",
     userdata: undefined,
     silent: false,
     lineWidth: 2,
-    stroke: '#FA792A',
+    stroke: "#FA792A",
     dash: false,
-    fill: '#43F65588',
-  }
+    fill: "#43F65588",
+    height: 1,
+  };
 
-  private _needUpdate?: Set<string>
+  private _needUpdate?: Set<string>;
   private _update(key: string) {
     if (this._needUpdate) {
-      this._needUpdate.add(key)
+      this._needUpdate.add(key);
     } else {
-      this._needUpdate = new Set([key])
+      this._needUpdate = new Set([key]);
       setTimeout(() => {
-        this.event.trigger('update', this._needUpdate)
-        this._needUpdate = undefined
+        this.event.trigger("update", this._needUpdate);
+        this._needUpdate = undefined;
       });
     }
   }
 
   protected _onDestroy(): void {
-    this.event.trigger('destroy')
+    this.event.trigger("destroy");
   }
 
-
   startEdit() {
-    this.event.trigger('start-edit')
+    this.event.trigger("start-edit");
   }
   stopEdit() {
-    this.event.trigger('stop-edit')
+    this.event.trigger("stop-edit");
   }
-}
+}