@hzab/map-combine 0.2.7 → 0.3.0-alpha.0

package/src/basic/Point.ts

@@ -1,176 +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: 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");
+  }
+}

package/src/basic/ReactPoint.tsx

@@ -20,6 +20,8 @@ export interface ReactPointOption<K> extends MapElementOption {
 export class ReactPoint<K = undefined> extends MapElement<ReactPointOption<K>> {
   type: "ReactPoint";
   event = new Eventful<{
+    "data-loaded": () => void;
+    "data-update": () => void;
     "pointer-in": () => void;
     "pointer-out": () => void;
     "left-click": () => void;
@@ -167,6 +169,7 @@ export class ReactPoint<K = undefined> extends MapElement<ReactPointOption<K>> {
 
 export function drawReactPoint(map: MapCombine, point: ReactPoint<unknown>) {
   const { event, htmllayer } = map;
+  /** 当前点位的状态 0:初始态  1:编辑态  2:显示态  3:拖动态   */
   let status = 0;
   let skip = 0;
 
@@ -197,7 +200,6 @@ export function drawReactPoint(map: MapCombine, point: ReactPoint<unknown>) {
     status == 2 && point.event.trigger("right-click");
   });
   ReactDOM.render(point.element(point.props), root);
-
   let delay = 0;
 
   root.addEventListener("pointerdown", () => {
@@ -210,13 +212,15 @@ export function drawReactPoint(map: MapCombine, point: ReactPoint<unknown>) {
       }, 300);
     }
   });
-
   if (point.coordinates) {
     status = 2;
     const p = map.geographyTcanvas(point.coordinates);
     root.style.left = `${p[0]}px`;
     root.style.top = `${p[1]}px`;
     htmllayer.appendChild(root);
+    setTimeout(() => {
+      point.event.trigger("data-loaded");
+    });
   }
 
   const onViewChange = () => {
@@ -320,6 +324,7 @@ export function drawReactPoint(map: MapCombine, point: ReactPoint<unknown>) {
       status = 2;
       skip++;
       point.coordinates = event.geography;
+      point.event.trigger("data-loaded");
     }
   };
 
@@ -334,6 +339,7 @@ export function drawReactPoint(map: MapCombine, point: ReactPoint<unknown>) {
       root.style.pointerEvents = point.silent ? "none" : "all";
       skip++;
       point.coordinates = event.geography;
+      point.event.trigger("data-update");
     }
   };
 

package/src/cesium/CesiumEvent.ts

@@ -47,6 +47,10 @@ export function bindEvent(map: CesiumMap) {
     event.trigger("pointer-down");
   }, Cesium.ScreenSpaceEventType.LEFT_DOWN);
 
+  // 解决 ReactPoint 点击事件无法触发的问题
+  container.addEventListener("click", () => {
+    event.trigger("left-click");
+  });
   container.addEventListener("pointerup", () => {
     if (target) {
       target.onPointerUp?.();

package/src/cesium/CesiumMap.ts

@@ -166,7 +166,6 @@ export class CesiumMap extends MapCombine {
   private _createLayer() {
     const { url, subdomains, proj, minZoomLevel, maxZoomLevel } = this.option;
     let layer: any;
-    console.log("url", url);
     let options = {
       ...this.option,
     };