@hzab/map-combine 0.4.2-alpha.3 → 0.4.2-alpha.5

package/CHANGELOG.md

@@ -5,6 +5,7 @@ fix: openlayer getFromLonLat this 指向修复
 break: PointAggregation datas 改为数组对象
 fix: cesium flyTo height 计算
 feat: map.bussinesses onFrame 事件回调
+fix: AmapPoint drawPoint 逻辑修复
 
 # @hzab/map-combine@0.4.1
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hzab/map-combine",
-  "version": "0.4.2-alpha.3",
+  "version": "0.4.2-alpha.5",
   "description": "地图组件",
   "main": "src",
   "scripts": {
@@ -29,7 +29,7 @@
     "@amap/amap-jsapi-loader": "^1.0.1",
     "@hzab/permissions": "0.1.1",
     "@hzab/webpack-config": "^0.2.1",
-    "@turf/turf": "6.5",
+    "@turf/turf": "6.5.0",
     "@types/amap-js-api": "^1.4.16",
     "@types/react": "^17.0.62",
     "@types/react-dom": "^17.0.20",
@@ -51,8 +51,9 @@
     "lib": "lib"
   },
   "peerDependencies": {
-    "@turf/turf": "6.5",
+    "@turf/turf": "6.5.0",
     "coordtransform": "^2.1.2",
+    "nanoid": "^3.3.7",
     "lodash": ">=4.17.21",
     "react-dom": "^17.0.2",
     "zrender": "^5.4.4"

package/src/amap/AMap.ts

@@ -1,306 +1,313 @@
-import { MapCombine } from "../basic/MapCombine";
-import { PointOption, Point } from "../basic/Point";
-import { PointAggregationOption, PointAggregation } from "../basic/PointAggregation";
-import { ReactPointOption, ReactPoint, drawReactPoint } from "../basic/ReactPoint";
-import { PolylineOption, Polyline } from "../basic/Polyline";
-import { PolygonOption, Polygon } from "../basic/Polygon";
-import { Tile3DOption, Tile3D } from "../basic/Tile3D";
-
-import AMapLoader from "./loader";
-import { bindEvent } from "./AMapEvent";
-import { drawPoint } from "./AMapPoint";
-import { drawPolyline } from "./AMapPolyline";
-import { drawPolygon } from "./AMapPolygon";
-
-export interface IAMapOption {
-  container: HTMLDivElement;
-  url?: string | string[];
-  center?: number[];
-  zoom?: number;
-  maxZoom?: number;
-  minZoom?: number;
-  /** 地图瓦片转换规则 GCJ02 转 WGS84 */
-  proj?: "GCJ02->WGS84";
-  /** 高德地图 key */
-  key: string;
-  /** 高德地图 securityJsCode */
-  securityJsCode: string;
-  /** 加载的插件列表 */
-  plugins?: [string];
-  /** loader 配置参数 */
-  loaderOpt?: Object;
-  /** 地图初始化 配置参数 */
-  mapOpt?: Object;
-}
-
-export interface IFlyToViewerOpt {
-  /**
-   * 立即缩放到指定位置
-   */
-  immediately?: boolean;
-  /**
-   * (Array<number> = [0,0,0,0]) 距离边框的内边距，顺序：上、下、左、右
-   */
-  avoid?: [number, number, number, number];
-  /**
-   * 最大缩放级别
-   */
-  maxZoom?: number;
-  /**
-   * 动画时间
-   */
-  duration?: number;
-}
-
-export class AMap extends MapCombine {
-  viewer: any;
-  container: HTMLDivElement = null;
-  option: any = {};
-  offset: number[];
-  fov = 0.9272952180016121;
-  isFromLonLat = true;
-  LbsAMap: any;
-  get cursor(): string {
-    return this.container.style.cursor;
-  }
-  set cursor(val: string) {
-    this.container.style.cursor = val;
-  }
-
-  get moveable(): boolean {
-    return this.viewer?.getStatus()?.dragEnable;
-  }
-  set moveable(val: boolean) {
-    this.viewer?.setStatus({ dragEnable: val });
-  }
-
-  get center(): number[] {
-    return this.viewer?.getCenter();
-  }
-  set center(val: number[]) {
-    this.viewer?.setCenter(val);
-  }
-  get zoom(): number {
-    return this.viewer?.getZoom();
-  }
-  set zoom(val: number) {
-    this.viewer?.setZoom(val);
-  }
-
-  constructor(viewer = undefined) {
-    super();
-    viewer && this._initParamsEvent(viewer);
-  }
-
-  private _initParamsEvent(viewer) {
-    if (!viewer) {
-      return;
-    }
-    this.viewer = viewer;
-
-    this.container = this.viewer.getContainer();
-    // this.markers = this.viewer.scene.primitives.add(new Cesium.BillboardCollection());
-
-    bindEvent(this);
-  }
-
-  init(opt: IAMapOption) {
-    this.option = opt;
-    const {
-      container,
-      center = [120.2288892, 30.2349677, 0],
-      zoom = 13,
-      url,
-      maxZoom,
-      minZoom,
-      proj,
-      key,
-      securityJsCode,
-      plugins,
-    } = opt || {};
-
-    this.loadPromise = new Promise((resolve, reject) => {
-      AMapLoader({
-        ...opt.loaderOpt,
-        key,
-        securityJsCode,
-        plugins,
-      })
-        .then((LbsAMap: any) => {
-          this.LbsAMap = LbsAMap;
-          let _urls = Array.isArray(url) ? url : [url];
-          this.viewer = new LbsAMap.Map(container, {
-            ...opt.mapOpt,
-            zoom: zoom || 14,
-            center: center || [120.160217, 30.243861],
-            doubleClickZoom: false,
-            zooms: minZoom && maxZoom && [minZoom, maxZoom],
-            layers: url
-              ? _urls.map((it: any) => {
-                  let opt = { tileUrl: "", getTileUrl: undefined };
-                  if (typeof it === "string") {
-                    opt.tileUrl = it;
-                  } else {
-                    opt = it;
-                  }
-                  // 使用 getTileUrl 解决接口地址强制改为 https 的问题
-                  opt.getTileUrl = function (x, y, z) {
-                    return opt.tileUrl.replace("{x}", x).replace("{y}", y).replace("{z}", z);
-                  };
-
-                  return new LbsAMap.TileLayer(opt);
-                })
-              : undefined,
-          });
-          this.viewer.on("complete", () => {
-            resolve(this);
-          });
-
-          this._initParamsEvent(this.viewer);
-          return this;
-        })
-        .catch(reject);
-    });
-    this.loadPromise.then(() => {
-      this.container.appendChild(this.htmllayer);
-    });
-    return this.loadPromise;
-  }
-
-  createPoint<K>(option?: Partial<PointOption<K>>): Point<K> {
-    const e = new Point(this, option);
-    this.loadPromise.then(() => {
-      drawPoint(this, e);
-    });
-    return e;
-  }
-
-  createPointAggregation(option?: PointAggregationOption): PointAggregation {
-    const e = new PointAggregation(this, option);
-    return e;
-  }
-
-  createReactPoint<K>(option?: Partial<ReactPointOption<K>>): ReactPoint<K> {
-    const e = new ReactPoint(this, option);
-    this.loadPromise.then(() => {
-      drawReactPoint(this, e);
-    });
-    return e;
-  }
-
-  createPolyline<K>(option?: Partial<PolylineOption<K>>): Polyline<K> {
-    const e = new Polyline(this, option);
-    this.loadPromise.then(() => {
-      drawPolyline(this, e);
-    });
-    return e;
-  }
-  createPolygon<K>(option?: Partial<PolygonOption<K>>): Polygon<K> {
-    const e = new Polygon(this, option);
-    this.loadPromise.then(() => {
-      drawPolygon(this, e);
-    });
-    return e;
-  }
-  createTile3D(option?: Partial<Tile3DOption>): Tile3D {
-    throw new Error("Method not implemented.");
-  }
-
-  /**
-   * 将高德地图 Canvas 像素坐标转换为经纬度
-   * @param {Array} p - canvas 点位数组 [x, y]
-   * @returns {Array} p - 经纬度数组 [lng, lat]
-   */
-  canvasTgeography(p: number[]) {
-    const mapInstance = this.viewer;
-    if (!mapInstance) {
-      this.loadPromise.then(() => {
-        this.canvasTgeography(p);
-      });
-      return [];
-    }
-    try {
-      const lngLat = this.viewer.lngLatToContainer(p);
-      return [lngLat.x, lngLat.y];
-    } catch (error) {
-      console.error("canvasPixelToLngLat 转换出错:", error);
-      return [];
-    }
-  }
-
-  /**
-   * 经纬度转换为高德地图 Canvas 像素坐标
-   * @param {Array} p - 经纬度数组 [lng, lat]
-   * @returns {Array} Canvas 像素坐标 [x, y]
-   */
-  geographyTcanvas(p: number[]): number[] {
-    const mapInstance = this.viewer;
-    if (!mapInstance) {
-      this.loadPromise.then(() => {
-        this.geographyTcanvas(p);
-      });
-      return [];
-    }
-    try {
-      const containerPixel = this.viewer.lngLatToContainer(p);
-      return [containerPixel.x, containerPixel.y];
-    } catch (error) {
-      console.error("lngLatToCanvasPixel 转换出错:", error);
-      return [];
-    }
-  }
-  /**
-   * 所有点位移动至视口，调整位置及层级
-   * @param points
-   * @param opt
-   * @param {Array<number> = [0,0,0,0]} opt.avoid 距离边框的内边距，顺序：上、下、左、右
-   */
-  flyToViewer(points: number[][], opt: IFlyToViewerOpt = { avoid: [0, 0, 0, 0], immediately: true }): void {
-    this.loadPromise.then(() => {
-      const [zoom, center] = this.viewer.getFitZoomAndCenterByBounds(
-        this.getBounds(points, { canvas: this.viewer.canvas, ...opt }),
-        opt?.avoid,
-        opt.maxZoom,
-      );
-
-      this.viewer.setZoomAndCenter(zoom, center, opt?.immediately, opt?.duration);
-    });
-  }
-
-  /**
-   * 将点集视野调整至容器内，支持相对边距（百分比）
-   * @param {number[][]} points - 经纬度数组 [[lng, lat], ...]
-   * @param {Object} opt
-   * @param {number[]} opt.avoid - 相对边距 [上, 下, 左, 右]，取值范围 0~1，默认 [0,0,0,0]
-   * @param {boolean} opt.immediately - 是否立即跳转，默认 false（带动画）
-   */
-  flyToViewerPercent(points: number[][], opt = { avoid: [0, 0, 0, 0], immediately: false }) {
-    if (!points?.length) return;
-
-    // 计算原始经纬度范围
-    let west = Infinity,
-      east = -Infinity,
-      south = Infinity,
-      north = -Infinity;
-    points.forEach(([lng, lat]) => {
-      west = Math.min(west, lng);
-      east = Math.max(east, lng);
-      south = Math.min(south, lat);
-      north = Math.max(north, lat);
-    });
-
-    // 应用相对边距
-    const [top, bottom, left, right] = opt.avoid;
-    const lngSpan = east - west;
-    const latSpan = north - south;
-
-    const bounds = this.LbsAMap.Bounds(
-      [west - lngSpan * left, south - latSpan * bottom],
-      [east + lngSpan * right, north + latSpan * top],
-    );
-
-    this.viewer.setBounds(bounds, opt.immediately);
-  }
-
-  flyTo() {}
-}
+import { MapCombine } from "../basic/MapCombine";
+import { PointOption, Point } from "../basic/Point";
+import { PointAggregationOption, PointAggregation } from "../basic/PointAggregation";
+import { ReactPointOption, ReactPoint, drawReactPoint } from "../basic/ReactPoint";
+import { PolylineOption, Polyline } from "../basic/Polyline";
+import { PolygonOption, Polygon } from "../basic/Polygon";
+import { Tile3DOption, Tile3D } from "../basic/Tile3D";
+
+import AMapLoader from "./loader";
+import { bindEvent } from "./AMapEvent";
+import { drawPoint } from "./AMapPoint";
+import { drawPolyline } from "./AMapPolyline";
+import { drawPolygon } from "./AMapPolygon";
+
+export interface IAMapOption {
+  container: HTMLDivElement;
+  url?: string | string[];
+  center?: number[];
+  zoom?: number;
+  maxZoom?: number;
+  minZoom?: number;
+  /** 地图瓦片转换规则 GCJ02 转 WGS84 */
+  proj?: "GCJ02->WGS84";
+  /** 高德地图 key */
+  key: string;
+  /** 高德地图 securityJsCode */
+  securityJsCode: string;
+  /** 加载的插件列表 */
+  plugins?: [string];
+  /** loader 配置参数 */
+  loaderOpt?: Object;
+  /** 地图初始化 配置参数 */
+  mapOpt?: Object;
+}
+
+export interface IFlyToViewerOpt {
+  /**
+   * 立即缩放到指定位置
+   */
+  immediately?: boolean;
+  /**
+   * (Array<number> = [0,0,0,0]) 距离边框的内边距，顺序：上、下、左、右
+   */
+  avoid?: [number, number, number, number];
+  /**
+   * 最大缩放级别
+   */
+  maxZoom?: number;
+  /**
+   * 动画时间
+   */
+  duration?: number;
+}
+
+export class AMap extends MapCombine {
+  viewer: any;
+  container: HTMLDivElement = null;
+  option: any = {};
+  offset: number[];
+  fov = 0.9272952180016121;
+  isFromLonLat = true;
+  LbsAMap: any;
+  get cursor(): string {
+    return this.container.style.cursor;
+  }
+  set cursor(val: string) {
+    this.container.style.cursor = val;
+  }
+
+  get moveable(): boolean {
+    return this.viewer?.getStatus()?.dragEnable;
+  }
+  set moveable(val: boolean) {
+    this.viewer?.setStatus({ dragEnable: val });
+  }
+
+  _center;
+
+  get center(): number[] {
+    return this.viewer?.getCenter();
+  }
+  set center(val: number[]) {
+    this._center = val;
+    this.viewer?.setCenter(val);
+  }
+  get zoom(): number {
+    return this.viewer?.getZoom();
+  }
+  set zoom(val: number) {
+    this.viewer?.setZoom(val);
+  }
+
+  constructor(viewer = undefined) {
+    super();
+    viewer && this._initParamsEvent(viewer);
+  }
+
+  private _initParamsEvent(viewer) {
+    if (!viewer) {
+      return;
+    }
+    this.viewer = viewer;
+
+    this.container = this.viewer.getContainer();
+    // this.markers = this.viewer.scene.primitives.add(new Cesium.BillboardCollection());
+
+    bindEvent(this);
+  }
+
+  init(opt: IAMapOption) {
+    this.option = opt;
+    const {
+      container,
+      center = [120.2288892, 30.2349677, 0],
+      zoom = 13,
+      url,
+      maxZoom,
+      minZoom,
+      proj,
+      key,
+      securityJsCode,
+      plugins,
+    } = opt || {};
+
+    this.loadPromise = new Promise((resolve, reject) => {
+      AMapLoader({
+        ...opt.loaderOpt,
+        key,
+        securityJsCode,
+        plugins,
+      })
+        .then((LbsAMap: any) => {
+          this.LbsAMap = LbsAMap;
+          let _urls = Array.isArray(url) ? url : [url];
+          this.viewer = new LbsAMap.Map(container, {
+            ...opt.mapOpt,
+            zoom: zoom || 14,
+            // _center 解决异步初始化 导致设置 center 无效的问题
+            center: this._center || center || [120.160217, 30.243861],
+            doubleClickZoom: false,
+            zooms: minZoom && maxZoom && [minZoom, maxZoom],
+            layers: url
+              ? _urls.map((it: any) => {
+                  let opt = { tileUrl: "", getTileUrl: undefined };
+                  if (typeof it === "string") {
+                    opt.tileUrl = it;
+                  } else {
+                    opt = it;
+                  }
+                  // 使用 getTileUrl 解决接口地址强制改为 https 的问题
+                  opt.getTileUrl = function (x, y, z) {
+                    return opt.tileUrl.replace("{x}", x).replace("{y}", y).replace("{z}", z);
+                  };
+
+                  return new LbsAMap.TileLayer(opt);
+                })
+              : undefined,
+          });
+          this.viewer.on("complete", () => {
+            resolve(this);
+          });
+
+          this._initParamsEvent(this.viewer);
+          return this;
+        })
+        .catch(reject);
+    });
+    this.loadPromise.then(() => {
+      this.container.appendChild(this.htmllayer);
+    });
+    return this.loadPromise;
+  }
+
+  createPoint<K>(option?: Partial<PointOption<K>>): Point<K> {
+    const e = new Point(this, option);
+    this.loadPromise.then(() => {
+      drawPoint(this, e);
+    });
+    return e;
+  }
+
+  createPointAggregation(option?: PointAggregationOption): PointAggregation {
+    const e = new PointAggregation(this, option);
+    return e;
+  }
+
+  createReactPoint<K>(option?: Partial<ReactPointOption<K>>): ReactPoint<K> {
+    const e = new ReactPoint(this, option);
+    this.loadPromise.then(() => {
+      drawReactPoint(this, e);
+    });
+    return e;
+  }
+
+  createPolyline<K>(option?: Partial<PolylineOption<K>>): Polyline<K> {
+    const e = new Polyline(this, option);
+    this.loadPromise.then(() => {
+      drawPolyline(this, e);
+    });
+    return e;
+  }
+  createPolygon<K>(option?: Partial<PolygonOption<K>>): Polygon<K> {
+    const e = new Polygon(this, option);
+    this.loadPromise.then(() => {
+      drawPolygon(this, e);
+    });
+    return e;
+  }
+  createTile3D(option?: Partial<Tile3DOption>): Tile3D {
+    throw new Error("Method not implemented.");
+  }
+
+  /**
+   * 将高德地图 Canvas 像素坐标转换为经纬度
+   * @param {Array} p - canvas 点位数组 [x, y]
+   * @returns {Array} p - 经纬度数组 [lng, lat]
+   */
+  canvasTgeography(p: number[]) {
+    const mapInstance = this.viewer;
+    if (!mapInstance) {
+      this.loadPromise.then(() => {
+        this.canvasTgeography(p);
+      });
+      return [];
+    }
+    try {
+      const lngLat = this.viewer.lngLatToContainer(p);
+      return [lngLat.x, lngLat.y];
+    } catch (error) {
+      console.error("canvasPixelToLngLat 转换出错:", error);
+      return [];
+    }
+  }
+
+  /**
+   * 经纬度转换为高德地图 Canvas 像素坐标
+   * @param {Array} p - 经纬度数组 [lng, lat]
+   * @returns {Array} Canvas 像素坐标 [x, y]
+   */
+  geographyTcanvas(p: number[]): number[] {
+    const mapInstance = this.viewer;
+    if (!mapInstance) {
+      this.loadPromise.then(() => {
+        this.geographyTcanvas(p);
+      });
+      return [];
+    }
+    try {
+      const containerPixel = this.viewer.lngLatToContainer(p);
+      return [containerPixel.x, containerPixel.y];
+    } catch (error) {
+      console.error("lngLatToCanvasPixel 转换出错:", error);
+      return [];
+    }
+  }
+  /**
+   * 所有点位移动至视口，调整位置及层级
+   * @param points
+   * @param opt
+   * @param {Array<number> = [0,0,0,0]} opt.avoid 距离边框的内边距，顺序：上、下、左、右
+   */
+  flyToViewer(points: number[][], opt: IFlyToViewerOpt = { avoid: [0, 0, 0, 0], immediately: true }): void {
+    this.loadPromise.then(() => {
+      const [zoom, center] = this.viewer.getFitZoomAndCenterByBounds(
+        this.getBounds(points, { canvas: this.viewer.canvas, ...opt }),
+        opt?.avoid,
+        opt.maxZoom,
+      );
+
+      this.viewer.setZoomAndCenter(zoom, center, opt?.immediately, opt?.duration);
+    });
+  }
+
+  /**
+   * 将点集视野调整至容器内，支持相对边距（百分比）
+   * @param {number[][]} points - 经纬度数组 [[lng, lat], ...]
+   * @param {Object} opt
+   * @param {number[]} opt.avoid - 相对边距 [上, 下, 左, 右]，取值范围 0~1，默认 [0,0,0,0]
+   * @param {boolean} opt.immediately - 是否立即跳转，默认 false（带动画）
+   */
+  flyToViewerPercent(points: number[][], opt = { avoid: [0, 0, 0, 0], immediately: false }) {
+    if (!points?.length) return;
+
+    // 计算原始经纬度范围
+    let west = Infinity,
+      east = -Infinity,
+      south = Infinity,
+      north = -Infinity;
+    points.forEach(([lng, lat]) => {
+      west = Math.min(west, lng);
+      east = Math.max(east, lng);
+      south = Math.min(south, lat);
+      north = Math.max(north, lat);
+    });
+
+    // 应用相对边距
+    const [top, bottom, left, right] = opt.avoid;
+    const lngSpan = east - west;
+    const latSpan = north - south;
+
+    const bounds = this.LbsAMap.Bounds(
+      [west - lngSpan * left, south - latSpan * bottom],
+      [east + lngSpan * right, north + latSpan * top],
+    );
+
+    this.viewer.setBounds(bounds, opt.immediately);
+  }
+
+  flyTo(point: number[], opt?: { immediately: false; duration: undefined }) {
+    const { immediately, duration } = opt || {};
+    this.viewer.setCenter(point, immediately, duration);
+  }
+}

package/src/amap/AMapPoint.ts

@@ -1,89 +1,76 @@
 import { Point } from "../basic/Point";
 import { AMap } from "./AMap";
 
-const RD = 0.017453292519943295;
-
 export function drawPoint(map: AMap, point: Point<unknown>) {
   const { viewer, event, LbsAMap } = map;
   let status = 0;
-  let marker = null;
-  const _event = {
-    onPointerIn() {
-      point.event.trigger("pointer-in");
-    },
-    onPointerOut() {
-      point.event.trigger("pointer-out");
-    },
-    onLClick() {
-      point.event.trigger("left-click");
-    },
-    onRClick(e) {
-      event.canvas = [e.pixel.x, e.pixel.y];
-      point.event.trigger("right-click");
-    },
-    onPointerDown() {
-      if (point.editable && status == 2) {
-        status = 3;
-        map.moveable = false;
-      }
-    },
-    onPointerUp() {
-      if (point.editable && status == 3) {
-        status = 2;
-        map.moveable = true;
-        point.coordinates = [event.geography[0], event.geography[1], point.coordinates[2] ?? point.height];
-        point.event.trigger("data-update");
-      }
+  let skip = 0;
+
+  const { size, center } = point;
+  const pointOffset = [-size[0] * center[0], -size[1] * center[1]];
+  const marker = new LbsAMap.Marker({
+    position: new LbsAMap.LngLat(0, 0),
+    height: point.height,
+    title: point._option.name,
+    icon: new LbsAMap.Icon({
+      image: point.src,
+      size: point.size,
+      imageSize: point.size,
+    }),
+    angle: point.rotation,
+    anchor: point.center,
+    draggable: point.editable,
+    extData: {
+      cursor: point.cursor,
+      silent: point.silent,
     },
-  };
+    offset: pointOffset,
+  });
+  setIcon();
+  viewer.add([marker]);
 
-  const bindEvent = (graphical) => {
-    graphical.on("click", _event.onLClick);
-    graphical.on("rightclick", _event.onRClick);
-    graphical.on("mouseover", _event.onPointerIn);
-    graphical.on("mouseout", _event.onPointerOut);
-  };
+  if (point.coordinates) {
+    status = 2;
+    marker.setPosition(point.coordinates);
+    if (point.show) {
+      marker.show();
+    } else {
+      marker.hide();
+    }
+  }
 
-  const darwMarker = (opt) => {
-    marker = new LbsAMap.Marker({
-      ...opt,
-      title: point._option.name,
-      icon: new LbsAMap.Icon({
-        image: point.src,
-        size: point.size,
-        imageSize: point.size,
-      }),
-      angle: point.rotation * RD,
-      anchor: point.center,
-      draggable: point.editable,
-      extData: {
-        cursor: point.cursor,
-        silent: point.silent,
-      },
-    });
-    bindEvent(marker);
-    viewer.add([marker]);
+  const onMouseMove = () => {
+    switch (status) {
+      case 0:
+        status = 1;
+        marker.setPosition(event.geography);
+        if (point.show) {
+          marker.show();
+        } else {
+          marker.hide();
+        }
+        break;
+      case 1:
+      case 3:
+        marker.setPosition(event.geography);
+        break;
+    }
   };
 
-  const eventMarker = (e) => {
-    darwMarker({
-      position: new LbsAMap.LngLat(e.lnglat.lng, e.lnglat.lat),
-      height: point.coordinates[2] ?? point.height,
-    });
-    viewer.off("click", eventMarker);
+  const onClick = () => {
+    if (status == 1) {
+      status = 2;
+      skip++;
+      point.coordinates = event.geography;
+      point.event.trigger("pointer-in");
+    }
   };
 
-  if (point.coordinates) {
-    darwMarker({
-      position: new LbsAMap.LngLat(point.coordinates[0], point.coordinates[1]),
-      height: point.coordinates[2] ?? point.height,
-    });
-  } else {
-    viewer.on("click", eventMarker);
-  }
-
   const onUpdate = (e: Set<string>) => {
-    const keys = new Set();
+    if (skip) {
+      skip--;
+      return;
+    }
     e.forEach((key) => {
       switch (key) {
         case "show":
@@ -110,40 +97,41 @@ export function drawPoint(map: AMap, point: Point<unknown>) {
           }
           break;
         case "src":
-          keys.add("icon");
+          setIcon();
           break;
         case "size":
-          keys.add("icon");
+          setIcon();
           break;
         case "center":
           marker.setAnchor(point.center);
           break;
         case "rotation":
-          marker.setAngle(point.rotation * RD);
+          marker.setAngle(point.rotation);
           break;
         default:
           throw new Error(`${key} 还不支持修改`);
       }
     });
-
-    keys.forEach((e) => {
-      switch (e) {
-        case "icon":
-          marker.setIcon(
-            new LbsAMap.Icon({
-              image: point.src,
-              size: point.size,
-              imageSize: point.size,
-            }),
-          );
-          break;
-      }
-    });
   };
 
+  function setIcon() {
+    marker.setIcon(
+      new LbsAMap.Icon({
+        image: point.src,
+        size: point.size,
+        imageSize: point.size,
+      }),
+    );
+  }
+
   const onDestroy = () => {
     marker.remove();
     point.event.off("update", onUpdate);
     point.event.off("destroy", onDestroy);
   };
+
+  event.on("pointer-move", onMouseMove);
+  event.on("left-click", onClick);
+  point.event.on("update", onUpdate);
+  point.event.on("destroy", onDestroy);
 }

package/src/cesium/CesiumMap.ts

@@ -16,10 +16,6 @@ import { drawTile3D } from "./CesiumTile3D";
 import { CesiumModel } from "./CesiumModel";
 
 const $m = 20037508.34278924;
-/**
- * flyToViewer 最小判断半径（米）
- */
-const MIN_RADIUS = 500;
 /**
  * flyToViewer 最大缩放层级
  */
@@ -280,10 +276,6 @@ export class CesiumMap extends MapCombine {
     opt = {
       avoid: [0, 0, 0, 0],
 
-      /**
-       * flyToViewer 最小判断半径（米）
-       */
-      minRadius: MIN_RADIUS,
       /**
        * flyToViewer 最大缩放层级
        */
@@ -294,32 +286,10 @@ export class CesiumMap extends MapCombine {
       return this.flyTo(points[0], opt);
     }
     // 创建矩形
-    const rectangle = Cesium.Rectangle.fromDegrees(
-      ...this.getBounds(points, { canvas: this.viewer.scene.canvas, ...opt }),
+    const destination = Cesium.Rectangle.fromDegrees(
+      ...this.getBounds(points, { canvas: this.viewer.scene.canvas, maxZoom: MAX_ZOOM, ...opt }),
     );
 
-    // 将经纬度转换为笛卡尔坐标
-    const positions = points.map((coord) => {
-      return Cesium.Cartesian3.fromDegrees(coord[0], coord[1]);
-    });
-
-    // 计算所有点位的包围球
-    const boundingSphere = Cesium.BoundingSphere.fromPoints(positions);
-
-    // 计算包围球半径
-    const radius = boundingSphere.radius;
-
-    let destination = rectangle;
-    // 点位距离小于指定范围使用固定高度
-    if (radius < MIN_RADIUS || (opt?.minRadius && radius < opt.minRadius)) {
-      const center = Cesium.Rectangle.center(rectangle);
-      destination = Cesium.Cartesian3.fromRadians(
-        center.longitude,
-        center.latitude,
-        this.zoomTdistance(opt?.maxZoom ?? MAX_ZOOM),
-      );
-    }
-
     // 设置相机视角
     this.viewer.camera.flyTo({
       destination,

package/src/utils/index.ts

@@ -12,6 +12,9 @@ export function setValue<T>(obj: any, key: string, val: T, onChange: () => void)
   }
 }
 
+/**
+ * 建立两个一维区间之间的线性映射关系，提供正向变换和逆向变换
+ */
 export class OneDimensional {
   k: number;
   b: number;

package/src/utils/points-viewer.ts

@@ -43,5 +43,31 @@ export const getBounds = function (points, opt) {
   minLat -= avoid[1] * latPixelRatio;
   maxLat += avoid[0] * latPixelRatio;
 
-  return [minLon, minLat, maxLon, maxLat];
+  // 根据 maxZoom 计算最小矩形范围
+  const minRange = getMinRangeFromZoom(opt.maxZoom);
+  const centerLon = (minLon + maxLon) / 2;
+  const centerLat = (minLat + maxLat) / 2;
+
+  // 确保矩形范围不小于最小值 解决点位距离过近导致异常缩放问题
+  let finalWest = Math.min(minLon, centerLon - minRange / 2);
+  let finalEast = Math.max(maxLon, centerLon + minRange / 2);
+  let finalSouth = Math.min(minLat, centerLat - minRange / 2);
+  let finalNorth = Math.max(maxLat, centerLat + minRange / 2);
+
+  return [finalWest, finalSouth, finalEast, finalNorth];
 };
+
+/**
+ * 根据 maxZoom 计算出一个“最小”的经纬度跨度
+ * @param zoom
+ * @returns
+ */
+export function getMinRangeFromZoom(zoom) {
+  // 每个瓦片覆盖的经度范围
+  const lonPerTile = 360 / Math.pow(2, zoom);
+  // 每个瓦片覆盖的纬度范围（近似）
+  const latPerTile = 180 / Math.pow(2, zoom);
+
+  // 返回一个足够小的范围，比如一个瓦片范围的一半
+  return Math.max(lonPerTile, latPerTile) / 2;
+}