@hzab/map-combine 0.2.6 → 0.2.8

package/CHANGELOG.md

@@ -1,3 +1,11 @@
+# @hzab/map-combine0.2.8
+
+fix: reactpoint 添加状态回调
+
+# @hzab/map-combine0.2.7
+
+fix: flyToViewer 支持配置 minRadius 最小判断半径
+
 # @hzab/map-combine0.2.6
 
 fix: flyToViewer 修复点位过近导致高度异常问题

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hzab/map-combine",
-  "version": "0.2.6",
+  "version": "0.2.8",
   "description": "地图组件",
   "main": "src",
   "scripts": {

package/src/basic/Point.ts

@@ -1,176 +1,173 @@
-import Eventful from "zrender/lib/core/Eventful"
+import Eventful from "zrender/lib/core/Eventful";
 
-import { MapElement, MapElementOption } from "./MapElement"
-import { MapCombine } from "./MapCombine"
+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
+  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'
+  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
-  }>()
+    "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
+    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 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 src() {
-    return this._option.src
+    return this._option.src;
   }
 
   set src(val) {
     if (this._option.src != val) {
-      this._option.src = val
-      this._update('src')
+      this._option.src = val;
+      this._update("src");
     }
   }
 
   get size() {
-    return this._option.size
+    return this._option.size;
   }
 
   set size(val) {
     if (this._option.size != val) {
-      this._option.size = val
-      this._update('size')
+      this._option.size = val;
+      this._update("size");
     }
   }
   get center() {
-    return this._option.center
+    return this._option.center;
   }
 
   set center(val) {
     if (this._option.center != val) {
-      this._option.center = val
-      this._update('center')
+      this._option.center = val;
+      this._update("center");
     }
   }
 
   get height() {
-    return this._option.height
+    return this._option.height;
   }
 
   set height(val) {
     if (this._option.height != val) {
-      this._option.height = val
-      this._update('height')
+      this._option.height = val;
+      this._update("height");
     }
   }
 
   get rotation() {
-    return this._option.rotation
+    return this._option.rotation;
   }
 
   set rotation(val) {
     if (this._option.rotation != val) {
-      this._option.rotation = val
-      this._update('rotation')
+      this._option.rotation = val;
+      this._update("rotation");
     }
   }
 
-
-
   constructor(map: MapCombine, option: Partial<PointOption<K>> = {}) {
-    super(map, Object.assign({ ...Point.option }, option))
+    super(map, Object.assign({ ...Point.option }, option));
   }
 
   static option: PointOption<undefined> = {
-    name: '点',
+    name: "点",
     show: true,
-    src: 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAAXNSR0IArs4c6QAAAIxJREFUOE+tU4ENgCAM6y5TL1MuEy+bmQjChAjIEkKAretIS1DBwAy3pnuXDAvgIGDT+RRfsEtYdZI6mxgoAFQWe6wAcgE0FicgHoA/aJeeF+rs/rBgYI9+u5WIFQa99K9mQwB+j1AjntLfGBlBZCssmoMAGiOkDjWmUvbcK0WVN1PGlS87i63JWTvECRNBLcaa3Jq0AAAAAElFTkSuQmCC',
+    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',
+    cursor: "pointer",
     userdata: undefined,
     silent: false,
-    height: 0
-  }
+    height: 0,
+  };
 
-  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");
   }
-}
+}

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;
@@ -197,7 +199,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 +211,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 +323,7 @@ export function drawReactPoint(map: MapCombine, point: ReactPoint<unknown>) {
       status = 2;
       skip++;
       point.coordinates = event.geography;
+      point.event.trigger("data-loaded");
     }
   };
 
@@ -334,6 +338,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/CesiumMap.ts

@@ -13,7 +13,13 @@ import { drawPolyline } from "./CesiumPolyline";
 import { drawTile3D } from "./CesiumTile3D";
 
 const $m = 20037508.34278924;
+/**
+ * flyToViewer 最小判断半径（米）
+ */
 const MIN_RADIUS = 500;
+/**
+ * flyToViewer 最大缩放层级
+ */
 const MAX_ZOOM = 18;
 
 export class CesiumMap extends MapCombine {
@@ -255,8 +261,24 @@ export class CesiumMap extends MapCombine {
    * @param points
    * @param opt
    * @param {Array<number> = [0,0,0,0]} opt.avoid 距离边框的内边距，顺序：上、下、左、右
+   * @param {Array<number> = [0,0,0,0]} opt.minRadius flyToViewer 最小范围（米）
+   * @param {Array<number> = [0,0,0,0]} opt.maxZoom flyToViewer 最大缩放层级
    */
-  flyToViewer(points, opt = { avoid: [0, 0, 0, 0], maxZoom: MAX_ZOOM }) {
+  flyToViewer(
+    points,
+    opt = {
+      avoid: [0, 0, 0, 0],
+
+      /**
+       * flyToViewer 最小判断半径（米）
+       */
+      minRadius: MIN_RADIUS,
+      /**
+       * flyToViewer 最大缩放层级
+       */
+      maxZoom: MAX_ZOOM,
+    },
+  ) {
     if (points?.length === 0) {
       return this.flyTo(points[0], opt);
     }
@@ -278,7 +300,7 @@ export class CesiumMap extends MapCombine {
 
     let destination = rectangle;
     // 点位距离小于指定范围使用固定高度
-    if (radius < MIN_RADIUS) {
+    if (radius < MIN_RADIUS || (opt?.minRadius && radius < opt.minRadius)) {
       const center = Cesium.Rectangle.center(rectangle);
       destination = Cesium.Cartesian3.fromRadians(
         center.longitude,