@hzab/map-combine 0.2.4 → 0.2.6

package/CHANGELOG.md

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

package/package.json

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

package/src/basic/MapCombine.ts

@@ -76,6 +76,12 @@ export abstract class MapCombine {
    */
   abstract flyToViewer(points: number[][], opt?: Object): void;
 
+  /**
+   * 移动点位到中心点
+   * @param points
+   */
+  abstract flyTo(point: number[], opt?: Object): void;
+
   getBounds = getBounds;
 
   destroy() {

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,52 @@ 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,
+      ...opt,
+    });
+  }
+
+  /**
+   * 移动点位到中心点
+   * @param point
+   */
+  flyTo(point, opt = {}) {
     // 设置相机视角
     this.viewer.camera.flyTo({
-      destination: rectangle,
+      destination: point,
       ...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,31 @@ 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,
+      },
+    );
+  }
+
+  /**
+   * 移动点位到中心点
+   * @param point
+   */
+  flyTo(point, opt = {}) {
+    // 设置相机视角
+    this.viewer.flyTo({ center: point, ...opt });
   }
 
   createTile3D(option?: Partial<Tile3DOption>): Tile3D {

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[];
@@ -122,7 +124,7 @@ export class OpenlayerMap extends MapCombine {
 
     const { center } = this;
     const proj = this.viewer.getView().getProjection().getCode();
-    this.isFromLonLat = (proj === "EPSG:3857" || proj === "EPSG:4326");
+    this.isFromLonLat = proj === "EPSG:3857" || proj === "EPSG:4326";
     this.offset = this.getFromLonLat(center);
     this.vectors = new VectorSource();
     this.viewer.addLayer(
@@ -144,7 +146,6 @@ export class OpenlayerMap extends MapCombine {
     bindEvent(this);
   }
 
-
   getFromLonLat(lonLat, isFromLonLat = this.isFromLonLat) {
     return isFromLonLat ? fromLonLat(lonLat) : lonLat;
   }
@@ -183,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 +214,19 @@ export class OpenlayerMap extends MapCombine {
       // avoid  {Array<number> = [0,0,0,0]} opt.avoid 距离边框的内边距，顺序：上、下、左、右
       // 上 右 下 左
       padding: [avoid[0], avoid[3], avoid[1], avoid[2]],
+      duration: 1000,
+      maxZoom: opt?.maxZoom ?? MAX_ZOOM, // 最大缩放级别,
+      ...opt,
+    });
+  }
+
+  /**
+   * 移动点位到中心点
+   * @param point
+   */
+  flyTo(point, opt = {}) {
+    // 设置相机视角
+    this.viewer.getView().fit(point, {
       duration: 1000,
       ...opt,
     });