@hzab/map-combine 0.2.5 → 0.2.6

package/CHANGELOG.md

@@ -1,3 +1,7 @@
+# @hzab/map-combine0.2.6
+
+fix: flyToViewer 修复点位过近导致高度异常问题
+
 # @hzab/map-combine0.2.5
 
 feat: flyTo 函数

package/package.json

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

package/src/cesium/CesiumMap.ts

@@ -13,6 +13,8 @@ import { drawPolyline } from "./CesiumPolyline";
 import { drawTile3D } from "./CesiumTile3D";
 
 const $m = 20037508.34278924;
+const MIN_RADIUS = 500;
+const MAX_ZOOM = 18;
 
 export class CesiumMap extends MapCombine {
   viewer: any;
@@ -254,15 +256,40 @@ export class CesiumMap extends MapCombine {
    * @param opt
    * @param {Array<number> = [0,0,0,0]} opt.avoid 距离边框的内边距，顺序：上、下、左、右
    */
-  flyToViewer(points, opt = { avoid: [0, 0, 0, 0] }) {
+  flyToViewer(points, opt = { avoid: [0, 0, 0, 0], maxZoom: MAX_ZOOM }) {
+    if (points?.length === 0) {
+      return this.flyTo(points[0], opt);
+    }
     // 创建矩形
     const rectangle = Cesium.Rectangle.fromDegrees(
       ...this.getBounds(points, { canvas: this.viewer.scene.canvas, ...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) {
+      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: rectangle,
+      destination,
       ...opt,
     });
   }

package/src/mine/MineMap.ts

@@ -9,6 +9,8 @@ import { drawPolygon } from "./MinePolygon";
 import { drawPolyline } from "./MinePolyline";
 import { drawTile3D } from "./MineTile3D";
 
+const MAX_ZOOM = 18;
+
 export class MineMap extends MapCombine {
   viewer: any;
   container: HTMLDivElement;
@@ -82,14 +84,22 @@ export class MineMap extends MapCombine {
    * @param opt
    * @param {Array<number> = [0,0,0,0]} opt.avoid 距离边框的内边距，顺序：上、下、左、右
    */
-  flyToViewer(points, opt = { avoid: [0, 0, 0, 0] }) {
+  flyToViewer(points, opt = { avoid: [0, 0, 0, 0], maxZoom: MAX_ZOOM }) {
+    if (points?.length === 0) {
+      return this.flyTo(points[0], opt);
+    }
     const rectangle = this.getBounds(points, { canvas: this.viewer.getCanvas(), ...opt });
 
     // 设置地图视图，使用调整后的边界范围
-    this.viewer.fitBounds([
-      [rectangle[0], rectangle[1]],
-      [rectangle[2], rectangle[3]],
-    ]);
+    this.viewer.fitBounds(
+      [
+        [rectangle[0], rectangle[1]],
+        [rectangle[2], rectangle[3]],
+      ],
+      {
+        maxZoom: opt?.maxZoom ?? MAX_ZOOM,
+      },
+    );
   }
 
   /**

package/src/openlayer/OpenlayerMap.ts

@@ -27,6 +27,8 @@ import { drawPolygon } from "./OpenlayerPolygon";
 import { Tile3DOption, Tile3D } from "../basic/Tile3D";
 import { gcjMecator } from "./openlayer-tile-gcj02-wgs84";
 
+const MAX_ZOOM = 18;
+
 export interface IOpenlayerOption {
   container;
   url: string | string[];
@@ -182,7 +184,10 @@ export class OpenlayerMap extends MapCombine {
    * @param opt
    * @param {Array<number> = [0,0,0,0]} opt.avoid 距离边框的内边距，顺序：上、下、左、右
    */
-  flyToViewer(points, opt = { avoid: [0, 0, 0, 0] }) {
+  flyToViewer(points, opt = { avoid: [0, 0, 0, 0], maxZoom: MAX_ZOOM }) {
+    if (points?.length === 0) {
+      return this.flyTo(points[0], opt);
+    }
     const { avoid } = opt || {};
     // 创建 Feature 数组
     const features = points.map((point) => {
@@ -210,6 +215,7 @@ export class OpenlayerMap extends MapCombine {
       // 上 右 下 左
       padding: [avoid[0], avoid[3], avoid[1], avoid[2]],
       duration: 1000,
+      maxZoom: opt?.maxZoom ?? MAX_ZOOM, // 最大缩放级别,
       ...opt,
     });
   }