@hzab/map-combine 0.4.1 → 0.4.2-alpha.1

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");
   }
-}
+}

package/src/basic/Polyline.ts

@@ -1,194 +1,204 @@
-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 PolylineOption<K> extends MapElementOption {
-  show: boolean
-  cursor: string
-  coordinates?: number[][]
-  editable: boolean
-  userdata: K
-  silent: boolean
-  lineWidth: number
-  stroke: string
-  dash: boolean
+  show: boolean;
+  cursor: string;
+  coordinates?: number[][];
+  editable: boolean;
+  userdata: K;
+  silent: boolean;
+  lineWidth: number;
+  stroke: string;
+  dash: boolean;
   menu?: ContextMenuItem[];
-  icon: string
-  flow: boolean
+  icon: string;
+  flow: boolean;
+  height?: number;
 }
 
-export class Polyline<K = undefined> extends MapElement<PolylineOption<K>>{
-
-
-  type = 'Polyline'
+export class Polyline<K = undefined> extends MapElement<PolylineOption<K>> {
+  type = "Polyline";
   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 icon() {
-    return this._option.icon
+    return this._option.icon;
   }
 
   set icon(val) {
     if (this._option.icon != val) {
-      this._option.icon = val
-      this._update('icon')
+      this._option.icon = val;
+      this._update("icon");
     }
   }
 
   get flow() {
-    return this._option.flow
+    return this._option.flow;
   }
 
   set flow(val) {
     if (this._option.flow != val) {
-      this._option.flow = val
-      this._update('flow')
+      this._option.flow = val;
+      this._update("flow");
     }
   }
 
+  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<PolylineOption<K>> = {}) {
-    super(map, Object.assign({ ...Polyline.option }, option))
+    super(map, Object.assign({ ...Polyline.option }, option));
   }
 
   static option: PolylineOption<undefined> = {
-    name: '线',
+    name: "线",
     show: true,
     editable: false,
-    cursor: 'pointer',
+    cursor: "pointer",
     userdata: undefined,
     silent: false,
     lineWidth: 2,
-    stroke: '#FA792A',
+    stroke: "#FA792A",
     dash: false,
-    icon: '',
+    icon: "",
     flow: false,
-  }
+    height: 2,
+  };
 
-  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");
   }
-}
+}

package/src/basic/ReactPopup.tsx

@@ -2,14 +2,13 @@ import { ReactElement } from "react";
 import ReactDOM from "react-dom";
 import { MapCombine } from "./MapCombine";
 
-
 export interface ReactPopupOption {
   /** 弹框内容 */
   element: ReactElement;
   /** 层高 */
   zIndex?: number;
   show?: boolean;
-  name?: string
+  name?: string;
 }
 
 export class ReactPopup {
@@ -17,16 +16,19 @@ export class ReactPopup {
   option: ReactPopupOption;
   node: HTMLDivElement;
   map: MapCombine;
-  constructor(map, option: ReactPopupOption = {
-    element: <></>,
-    zIndex: 10,
-    show: true,
-    name: "bubble"
-  }) {
+  constructor(
+    map,
+    option: ReactPopupOption = {
+      element: <></>,
+      zIndex: 10,
+      show: true,
+      name: "bubble",
+    },
+  ) {
     this.map = map;
     this.dom = document.createElement("div");
     this.option = option;
-    const coordinate = map.geographyTcanvas(map.event.geography)
+    const coordinate = map.geographyTcanvas(map.event.geography);
     this.dom.style.position = "absolute";
     this.dom.style.top = coordinate[1] + "px";
     this.dom.style.left = coordinate[0] + "px";
@@ -45,7 +47,7 @@ export class ReactPopup {
     }
   }
   showAt(lon, lat) {
-    const coordinate = this.map.geographyTcanvas([lon, lat, 0])
+    const coordinate = this.map.geographyTcanvas([lon, lat, 0]);
     this.dom.style.position = "absolute";
     this.dom.style.top = coordinate[1] + "px";
     this.dom.style.left = coordinate[0] + "px";