@hzab/map-combine 0.4.2-alpha.4 → 0.4.2-alpha.6

package/CHANGELOG.md

@@ -6,6 +6,7 @@ break: PointAggregation datas 改为数组对象
 fix: cesium flyTo height 计算
 feat: map.bussinesses onFrame 事件回调
 fix: AmapPoint drawPoint 逻辑修复
+feat: Cesium 线 首次加载优化
 
 # @hzab/map-combine@0.4.1
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hzab/map-combine",
-  "version": "0.4.2-alpha.4",
+  "version": "0.4.2-alpha.6",
   "description": "地图组件",
   "main": "src",
   "scripts": {

package/src/cesium/CesiumMap.ts

@@ -1,358 +1,328 @@
-import { AMapImageryProvider } from "./cesium-tile-covert";
-
-import { MapCombine } from "../basic/MapCombine";
-import { PointOption, Point } from "../basic/Point";
-import { PointAggregationOption, PointAggregation } from "../basic/PointAggregation";
-import { PolygonOption, Polygon } from "../basic/Polygon";
-import { PolylineOption, Polyline } from "../basic/Polyline";
-import { Tile3DOption, Tile3D } from "../basic/Tile3D";
-import { type BasicModelOption, type BasicModel } from "../basic/BasicModel";
-
-import { bindEvent } from "./CesiumEvent";
-import { drawPoint } from "./CesiumPoint";
-import { drawPolygon } from "./CesiumPolygon";
-import { drawPolyline } from "./CesiumPolyline";
-import { drawTile3D } from "./CesiumTile3D";
-import { CesiumModel } from "./CesiumModel";
-
-const $m = 20037508.34278924;
-/**
- * flyToViewer 最小判断半径（米）
- */
-const MIN_RADIUS = 500;
-/**
- * flyToViewer 最大缩放层级
- */
-const MAX_ZOOM = 18;
-
-export class CesiumMap extends MapCombine {
-  viewer: any;
-  markers: any;
-  option;
-
-  container: HTMLDivElement;
-
-  get cursor(): string {
-    return this.container.style.cursor;
-  }
-  set cursor(val: string) {
-    this.container.style.cursor = val;
-  }
-
-  get moveable(): boolean {
-    return this.viewer.scene.screenSpaceCameraController.enableRotate;
-  }
-  set moveable(val: boolean) {
-    this.viewer.scene.screenSpaceCameraController.enableRotate = val;
-  }
-  get center(): number[] {
-    const { viewer, container } = this;
-    const width = container.offsetWidth;
-    const height = container.offsetHeight;
-    const position = viewer.scene.camera.pickEllipsoid(
-      new Cesium.Cartesian2(width / 2, height / 2),
-      viewer.scene.globe.ellipsoid,
-    );
-    const cartographic = Cesium.Cartographic.fromCartesian(position);
-    return [Cesium.Math.toDegrees(cartographic.longitude), Cesium.Math.toDegrees(cartographic.latitude)];
-  }
-  set center(val: number[]) {
-    const { viewer, container } = this;
-    const width = container.offsetWidth;
-    const height = container.offsetHeight;
-    const position = viewer.scene.camera.pickEllipsoid(
-      new Cesium.Cartesian2(width / 2, height / 2),
-      viewer.scene.globe.ellipsoid,
-    );
-    const target = Cesium.Cartesian3.fromDegrees(...val);
-    Cesium.Cartesian3.subtract(target, position, target);
-    Cesium.Cartesian3.add(this.viewer.camera.position, target, this.viewer.camera.position);
-  }
-
-  get zoom(): number {
-    const cartographic = Cesium.Cartographic.fromCartesian(this.viewer.camera.position);
-    return this.distanceTzoom(cartographic.height);
-  }
-  set zoom(val: number) {
-    const cartographic = Cesium.Cartographic.fromCartesian(this.viewer.camera.position);
-    cartographic.height = this.zoomTdistance(val);
-    this.viewer.camera.position = Cesium.Cartesian3.fromRadians(
-      cartographic.longitude,
-      cartographic.latitude,
-      cartographic.height,
-    );
-  }
-
-  fov = 0.9695385667699215;
-  distanceTzoom(distance: number) {
-    const height = this.container.offsetHeight;
-    return Math.log2(($m * height) / (256 * Math.tan(this.fov / 2) * distance));
-  }
-  zoomTdistance(zoom: number): number {
-    const height = this.container.offsetHeight;
-    return ($m * height) / (256 * Math.tan(this.fov / 2) * Math.pow(2, zoom));
-  }
-
-  constructor(viewer?: any) {
-    super();
-    this._initParamsEvent(viewer);
-  }
-
-  init(opt) {
-    this.option = opt;
-    const { container, center = [120.2288892, 30.2349677, 0], zoom = 13, url } = opt || {};
-    const viewer = new Cesium.Viewer(container, {
-      vrButton: false,
-      // 检索
-      geocoder: false,
-      // home
-      homeButton: false,
-      // 切换3d地图
-      sceneModePicker: false,
-      // 底图切换按钮
-      baseLayerPicker: false,
-      // 问号
-      navigationHelpButton: false,
-      // 动画控制
-      animation: false,
-      // 版权信息
-      creditContainer: document.createElement("div"),
-      // 时间轴
-      timeline: false,
-      // 全屏按钮
-      fullscreenButton: false,
-      selectionIndicator: false,
-      // 打开动画
-      shouldAnimate: false,
-      infoBox: false,
-      // 只进行3d渲染，没有2d，2.5d，提高性能
-      scene3DOnly: true,
-      // 初始设置一个纯色瓦片，避免报错影响后续瓦片加载
-      imageryProvider: new Cesium.SingleTileImageryProvider({
-        url: createColorCanvas("#333"),
-        rectangle: Cesium.Rectangle.fromDegrees(-180.0, -90.0, 180.0, 90.0),
-      }),
-    });
-
-    // viewer.cesiumWidget.creditContainer.remove();
-
-    // viewer.cesiumWidget.screenSpaceEventHandler.removeInputAction(Cesium.ScreenSpaceEventType.LEFT_DOUBLE_CLICK);
-
-    this._initParamsEvent(viewer);
-
-    // 处理瓦片
-    this._createLayer();
-
-    const map = this;
-    const d = Cesium.Cartesian3.fromDegrees(...center);
-    map.setView([d.x, d.y, d.z, 6.283185307179586, -1.5691285980481942, 0]);
-    map.center = center;
-    map.zoom = zoom;
-
-    return map;
-  }
-
-  private _initParamsEvent(viewer) {
-    if (!viewer) {
-      return;
-    }
-    this.viewer = viewer;
-
-    this.container = viewer?.container;
-    this.container.appendChild(this.htmllayer);
-    this.cursor = "default";
-    this.markers = this.viewer.scene.primitives.add(new Cesium.BillboardCollection());
-
-    bindEvent(this);
-  }
-
-  private _createLayer() {
-    const { url, subdomains, proj, minZoomLevel, maxZoomLevel } = this.option;
-    let layer: any;
-    let options = {
-      ...this.option,
-    };
-
-    switch (proj) {
-      case "GCJ02->WGS84":
-        options = {
-          ...options,
-          crs: "WGS84", // 使用84坐标系，默认为：GCJ02
-        };
-        layer = this.viewer.imageryLayers.addImageryProvider(new AMapImageryProvider(options));
-
-        break;
-      default:
-        options = {
-          ...options,
-          tilingScheme: new Cesium.WebMercatorTilingScheme(),
-        };
-        layer = this.viewer.imageryLayers.addImageryProvider(new Cesium.UrlTemplateImageryProvider(options));
-        break;
-    }
-
-    this.viewer.imageryLayers.add(layer);
-
-    return layer;
-  }
-
-  getView() {
-    const { camera } = this.viewer;
-    return [camera.position.x, camera.position.y, camera.position.z, camera.heading, camera.pitch, camera.roll];
-  }
-
-  setView(e: number[]) {
-    const { camera } = this.viewer;
-    camera.setView({
-      destination: new Cesium.Cartesian3(e[0], e[1], e[2]),
-      orientation: new Cesium.HeadingPitchRoll(e[3], e[4], e[5]),
-    });
-  }
-
-  createPoint<K>(option?: Partial<PointOption<K>>): Point<K> {
-    const e = new Point(this, option);
-    drawPoint(this, e);
-    return e;
-  }
-
-  createPointAggregation(option?: PointAggregationOption): PointAggregation {
-    const e = new PointAggregation(this, option);
-    return e;
-  }
-
-  createPolyline<K>(option?: Partial<PolylineOption<K>>): Polyline<K> {
-    const e = new Polyline(this, option);
-    drawPolyline(this, e);
-    return e;
-  }
-
-  createPolygon<K>(option?: Partial<PolygonOption<K>>): Polygon<K> {
-    const e = new Polygon(this, option);
-    drawPolygon(this, e);
-    return e;
-  }
-
-  createTile3D(option?: Partial<Tile3DOption>): Tile3D {
-    const e = new Tile3D(this, option);
-    drawTile3D(this, e);
-    return e;
-  }
-
-  createModel(option?: Partial<BasicModelOption> | undefined): BasicModel {
-    return new CesiumModel(this, option);
-  }
-
-  canvasTgeography(p: number[]): number[] {
-    const { viewer } = this;
-    const cartesian2 = new Cesium.Cartesian2(...p);
-    const ray = viewer.camera.getPickRay(cartesian2);
-    const cartesian = viewer.scene.globe.pick(ray, viewer.scene);
-
-    if (cartesian) {
-      const cartographic = Cesium.Cartographic.fromCartesian(cartesian);
-      return [
-        Cesium.Math.toDegrees(cartographic.longitude),
-        Cesium.Math.toDegrees(cartographic.latitude),
-        cartographic.height,
-      ];
-    } else {
-      return [0, 0, 0];
-    }
-  }
-  geographyTcanvas(p: number[]): number[] {
-    const res = Cesium.SceneTransforms.wgs84ToWindowCoordinates(this.viewer.scene, Cesium.Cartesian3.fromDegrees(...p));
-    if (!res) {
-      return [-1, -1];
-    }
-    return [res.x, res.y];
-  }
-
-  /**
-   * 所有点位移动至视口，调整位置及层级
-   * @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],
-
-      /**
-       * flyToViewer 最小判断半径（米）
-       */
-      minRadius: MIN_RADIUS,
-      /**
-       * flyToViewer 最大缩放层级
-       */
-      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 || (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,
-      ...opt,
-    });
-  }
-
-  /**
-   * 移动点位到中心点
-   * @param point
-   */
-  flyTo(point, opt = {}) {
-    const height = this.zoomTdistance(this.zoom);
-    // 取消任何正在进行的飞行，防止排队
-    if (this.viewer.camera.cancelFlight) {
-      this.viewer.camera.cancelFlight();
-    }
-    // 设置相机视角
-    this.viewer.camera.flyTo({
-      destination: Cesium.Cartesian3.fromDegrees(point[0], point[1], height),
-      ...opt,
-    });
-  }
-}
-
-function createColorCanvas(color) {
-  var width = 1,
-    height = 1;
-  var canvas = document.createElement("canvas");
-  canvas.width = width;
-  canvas.height = height;
-  var ctx = canvas.getContext("2d");
-  ctx.fillStyle = color;
-  ctx.fillRect(0, 0, width, height);
-  return canvas.toDataURL();
-}
+import { AMapImageryProvider } from "./cesium-tile-covert";
+
+import { MapCombine } from "../basic/MapCombine";
+import { PointOption, Point } from "../basic/Point";
+import { PointAggregationOption, PointAggregation } from "../basic/PointAggregation";
+import { PolygonOption, Polygon } from "../basic/Polygon";
+import { PolylineOption, Polyline } from "../basic/Polyline";
+import { Tile3DOption, Tile3D } from "../basic/Tile3D";
+import { type BasicModelOption, type BasicModel } from "../basic/BasicModel";
+
+import { bindEvent } from "./CesiumEvent";
+import { drawPoint } from "./CesiumPoint";
+import { drawPolygon } from "./CesiumPolygon";
+import { drawPolyline } from "./CesiumPolyline";
+import { drawTile3D } from "./CesiumTile3D";
+import { CesiumModel } from "./CesiumModel";
+
+const $m = 20037508.34278924;
+/**
+ * flyToViewer 最大缩放层级
+ */
+const MAX_ZOOM = 18;
+
+export class CesiumMap extends MapCombine {
+  viewer: any;
+  markers: any;
+  option;
+
+  container: HTMLDivElement;
+
+  get cursor(): string {
+    return this.container.style.cursor;
+  }
+  set cursor(val: string) {
+    this.container.style.cursor = val;
+  }
+
+  get moveable(): boolean {
+    return this.viewer.scene.screenSpaceCameraController.enableRotate;
+  }
+  set moveable(val: boolean) {
+    this.viewer.scene.screenSpaceCameraController.enableRotate = val;
+  }
+  get center(): number[] {
+    const { viewer, container } = this;
+    const width = container.offsetWidth;
+    const height = container.offsetHeight;
+    const position = viewer.scene.camera.pickEllipsoid(
+      new Cesium.Cartesian2(width / 2, height / 2),
+      viewer.scene.globe.ellipsoid,
+    );
+    const cartographic = Cesium.Cartographic.fromCartesian(position);
+    return [Cesium.Math.toDegrees(cartographic.longitude), Cesium.Math.toDegrees(cartographic.latitude)];
+  }
+  set center(val: number[]) {
+    const { viewer, container } = this;
+    const width = container.offsetWidth;
+    const height = container.offsetHeight;
+    const position = viewer.scene.camera.pickEllipsoid(
+      new Cesium.Cartesian2(width / 2, height / 2),
+      viewer.scene.globe.ellipsoid,
+    );
+    const target = Cesium.Cartesian3.fromDegrees(...val);
+    Cesium.Cartesian3.subtract(target, position, target);
+    Cesium.Cartesian3.add(this.viewer.camera.position, target, this.viewer.camera.position);
+  }
+
+  get zoom(): number {
+    const cartographic = Cesium.Cartographic.fromCartesian(this.viewer.camera.position);
+    return this.distanceTzoom(cartographic.height);
+  }
+  set zoom(val: number) {
+    const cartographic = Cesium.Cartographic.fromCartesian(this.viewer.camera.position);
+    cartographic.height = this.zoomTdistance(val);
+    this.viewer.camera.position = Cesium.Cartesian3.fromRadians(
+      cartographic.longitude,
+      cartographic.latitude,
+      cartographic.height,
+    );
+  }
+
+  fov = 0.9695385667699215;
+  distanceTzoom(distance: number) {
+    const height = this.container.offsetHeight;
+    return Math.log2(($m * height) / (256 * Math.tan(this.fov / 2) * distance));
+  }
+  zoomTdistance(zoom: number): number {
+    const height = this.container.offsetHeight;
+    return ($m * height) / (256 * Math.tan(this.fov / 2) * Math.pow(2, zoom));
+  }
+
+  constructor(viewer?: any) {
+    super();
+    this._initParamsEvent(viewer);
+  }
+
+  init(opt) {
+    this.option = opt;
+    const { container, center = [120.2288892, 30.2349677, 0], zoom = 13, url } = opt || {};
+    const viewer = new Cesium.Viewer(container, {
+      vrButton: false,
+      // 检索
+      geocoder: false,
+      // home
+      homeButton: false,
+      // 切换3d地图
+      sceneModePicker: false,
+      // 底图切换按钮
+      baseLayerPicker: false,
+      // 问号
+      navigationHelpButton: false,
+      // 动画控制
+      animation: false,
+      // 版权信息
+      creditContainer: document.createElement("div"),
+      // 时间轴
+      timeline: false,
+      // 全屏按钮
+      fullscreenButton: false,
+      selectionIndicator: false,
+      // 打开动画
+      shouldAnimate: false,
+      infoBox: false,
+      // 只进行3d渲染，没有2d，2.5d，提高性能
+      scene3DOnly: true,
+      // 初始设置一个纯色瓦片，避免报错影响后续瓦片加载
+      imageryProvider: new Cesium.SingleTileImageryProvider({
+        url: createColorCanvas("#333"),
+        rectangle: Cesium.Rectangle.fromDegrees(-180.0, -90.0, 180.0, 90.0),
+      }),
+    });
+
+    // viewer.cesiumWidget.creditContainer.remove();
+
+    // viewer.cesiumWidget.screenSpaceEventHandler.removeInputAction(Cesium.ScreenSpaceEventType.LEFT_DOUBLE_CLICK);
+
+    this._initParamsEvent(viewer);
+
+    // 处理瓦片
+    this._createLayer();
+
+    const map = this;
+    const d = Cesium.Cartesian3.fromDegrees(...center);
+    map.setView([d.x, d.y, d.z, 6.283185307179586, -1.5691285980481942, 0]);
+    map.center = center;
+    map.zoom = zoom;
+
+    return map;
+  }
+
+  private _initParamsEvent(viewer) {
+    if (!viewer) {
+      return;
+    }
+    this.viewer = viewer;
+
+    this.container = viewer?.container;
+    this.container.appendChild(this.htmllayer);
+    this.cursor = "default";
+    this.markers = this.viewer.scene.primitives.add(new Cesium.BillboardCollection());
+
+    bindEvent(this);
+  }
+
+  private _createLayer() {
+    const { url, subdomains, proj, minZoomLevel, maxZoomLevel } = this.option;
+    let layer: any;
+    let options = {
+      ...this.option,
+    };
+
+    switch (proj) {
+      case "GCJ02->WGS84":
+        options = {
+          ...options,
+          crs: "WGS84", // 使用84坐标系，默认为：GCJ02
+        };
+        layer = this.viewer.imageryLayers.addImageryProvider(new AMapImageryProvider(options));
+
+        break;
+      default:
+        options = {
+          ...options,
+          tilingScheme: new Cesium.WebMercatorTilingScheme(),
+        };
+        layer = this.viewer.imageryLayers.addImageryProvider(new Cesium.UrlTemplateImageryProvider(options));
+        break;
+    }
+
+    this.viewer.imageryLayers.add(layer);
+
+    return layer;
+  }
+
+  getView() {
+    const { camera } = this.viewer;
+    return [camera.position.x, camera.position.y, camera.position.z, camera.heading, camera.pitch, camera.roll];
+  }
+
+  setView(e: number[]) {
+    const { camera } = this.viewer;
+    camera.setView({
+      destination: new Cesium.Cartesian3(e[0], e[1], e[2]),
+      orientation: new Cesium.HeadingPitchRoll(e[3], e[4], e[5]),
+    });
+  }
+
+  createPoint<K>(option?: Partial<PointOption<K>>): Point<K> {
+    const e = new Point(this, option);
+    drawPoint(this, e);
+    return e;
+  }
+
+  createPointAggregation(option?: PointAggregationOption): PointAggregation {
+    const e = new PointAggregation(this, option);
+    return e;
+  }
+
+  createPolyline<K>(option?: Partial<PolylineOption<K>>): Polyline<K> {
+    const e = new Polyline(this, option);
+    drawPolyline(this, e);
+    return e;
+  }
+
+  createPolygon<K>(option?: Partial<PolygonOption<K>>): Polygon<K> {
+    const e = new Polygon(this, option);
+    drawPolygon(this, e);
+    return e;
+  }
+
+  createTile3D(option?: Partial<Tile3DOption>): Tile3D {
+    const e = new Tile3D(this, option);
+    drawTile3D(this, e);
+    return e;
+  }
+
+  createModel(option?: Partial<BasicModelOption> | undefined): BasicModel {
+    return new CesiumModel(this, option);
+  }
+
+  canvasTgeography(p: number[]): number[] {
+    const { viewer } = this;
+    const cartesian2 = new Cesium.Cartesian2(...p);
+    const ray = viewer.camera.getPickRay(cartesian2);
+    const cartesian = viewer.scene.globe.pick(ray, viewer.scene);
+
+    if (cartesian) {
+      const cartographic = Cesium.Cartographic.fromCartesian(cartesian);
+      return [
+        Cesium.Math.toDegrees(cartographic.longitude),
+        Cesium.Math.toDegrees(cartographic.latitude),
+        cartographic.height,
+      ];
+    } else {
+      return [0, 0, 0];
+    }
+  }
+  geographyTcanvas(p: number[]): number[] {
+    const res = Cesium.SceneTransforms.wgs84ToWindowCoordinates(this.viewer.scene, Cesium.Cartesian3.fromDegrees(...p));
+    if (!res) {
+      return [-1, -1];
+    }
+    return [res.x, res.y];
+  }
+
+  /**
+   * 所有点位移动至视口，调整位置及层级
+   * @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],
+
+      /**
+       * flyToViewer 最大缩放层级
+       */
+      maxZoom: MAX_ZOOM,
+    },
+  ) {
+    if (points?.length === 0) {
+      return this.flyTo(points[0], opt);
+    }
+    // 创建矩形
+    const destination = Cesium.Rectangle.fromDegrees(
+      ...this.getBounds(points, { canvas: this.viewer.scene.canvas, maxZoom: MAX_ZOOM, ...opt }),
+    );
+
+    // 设置相机视角
+    this.viewer.camera.flyTo({
+      destination,
+      ...opt,
+    });
+  }
+
+  /**
+   * 移动点位到中心点
+   * @param point
+   */
+  flyTo(point, opt = {}) {
+    const height = this.zoomTdistance(this.zoom);
+    // 取消任何正在进行的飞行，防止排队
+    if (this.viewer.camera.cancelFlight) {
+      this.viewer.camera.cancelFlight();
+    }
+    // 设置相机视角
+    this.viewer.camera.flyTo({
+      destination: Cesium.Cartesian3.fromDegrees(point[0], point[1], height),
+      ...opt,
+    });
+  }
+}
+
+function createColorCanvas(color) {
+  var width = 1,
+    height = 1;
+  var canvas = document.createElement("canvas");
+  canvas.width = width;
+  canvas.height = height;
+  var ctx = canvas.getContext("2d");
+  ctx.fillStyle = color;
+  ctx.fillRect(0, 0, width, height);
+  return canvas.toDataURL();
+}

package/src/cesium/CesiumPolyline.ts

@@ -14,6 +14,7 @@ czm_material czm_getMaterial(czm_materialInput materialInput){
     material.alpha = colorImage.a * color.a;
     return material;
 }`;
+
 function createLineMaterial(e: Polyline<unknown>) {
   if (e.icon || e.flow) {
     const material = new Cesium.Material({
@@ -99,25 +100,180 @@ export function drawPolyline(map: CesiumMap, polyline: Polyline<unknown>) {
     },
   };
 
-  let primitive: any;
   let cache: any[];
   let activeNode: ChainNode<any, any>;
-  if (polyline.coordinates) {
-    status = 2;
-    cache = polyline.coordinates.map(geographyTcartesian3);
-    primitive = new Cesium.Primitive({
-      show: polyline.show,
-      geometryInstances: new Cesium.GeometryInstance({
-        geometry: new Cesium.PolylineGeometry({
-          positions: cache,
+
+  let geometryInstance = null;
+  let primitive = null;
+  let currentPositions = [];
+  let isFirstRender = true;
+
+  /**
+   * 更新或创建线条几何体
+   * @param newPositions - 新的顶点数组
+   * @param forceRebuild 强制重建
+   */
+  function updatePrimitiveGeometry(newPositions, forceRebuild: boolean = false) {
+    // 验证数据有效性
+    if (!newPositions || newPositions.length < 2) {
+      if (primitive) {
+        viewer.scene.primitives.remove(primitive);
+        primitive = null;
+        geometryInstance = null;
+      }
+      currentPositions = [];
+      return;
+    }
+
+    // 强制重建，跳过检查
+    if (!forceRebuild && !isFirstRender) {
+      if (currentPositions.length === newPositions.length) {
+        let same = true;
+        for (let i = 0; i < newPositions.length; i++) {
+          const p1 = currentPositions[i];
+          const p2 = newPositions[i];
+          if (
+            !p1 ||
+            !p2 ||
+            Math.abs(p1.x - p2.x) > 1e-10 ||
+            Math.abs(p1.y - p2.y) > 1e-10 ||
+            Math.abs(p1.z - p2.z) > 1e-10
+          ) {
+            same = false;
+            break;
+          }
+        }
+        if (same) return;
+      }
+    }
+
+    // 创建新的几何体数据
+    let newGeometry: any = null;
+    try {
+      newGeometry = Cesium.PolylineGeometry.createGeometry(
+        new Cesium.PolylineGeometry({
+          positions: newPositions,
           width: polyline.lineWidth,
           vertexFormat: Cesium.PolylineMaterialAppearance.VERTEX_FORMAT,
         }),
+      );
+    } catch (error) {
+      console.error("创建几何体失败:", error);
+      return;
+    }
+
+    if (!newGeometry) return;
+
+    // 复用或创建 Primitive
+    if (geometryInstance && primitive && !forceRebuild) {
+      // 复用几何体实例
+      try {
+        geometryInstance.geometry = newGeometry;
+        if (primitive._state !== undefined) {
+          primitive._state = Cesium.PrimitiveState.NEEDS_REBUILD;
+        }
+        if (primitive._boundingVolume) {
+          primitive._boundingVolume = undefined;
+        }
+        if (primitive._dirty !== undefined) {
+          primitive._dirty = true;
+        }
+      } catch (error) {
+        console.warn("复用 Primitive 失败，降级到重建:", error);
+        // 降级：重新创建
+        if (primitive) {
+          viewer.scene.primitives.remove(primitive);
+          primitive = null;
+        }
+        geometryInstance = new Cesium.GeometryInstance({
+          geometry: newGeometry,
+          id: _event,
+        });
+        primitive = new Cesium.Primitive({
+          show: polyline.show !== false,
+          asynchronous: false,
+          geometryInstances: geometryInstance,
+          appearance: appearance,
+          compressVertices: true,
+          releaseGeometryInstances: false,
+        });
+        viewer.scene.primitives.add(primitive);
+      }
+      // 复用 Primitive，只更新几何体数据（性能最优）
+      try {
+        // 直接替换几何体数据
+        geometryInstance.geometry = newGeometry;
+
+        // 关键：标记 Primitive 需要重建
+        // 在 Cesium 1.90.1 中，这些内部状态需要手动触发
+        if (primitive._state !== undefined) {
+          primitive._state = Cesium.PrimitiveState.NEEDS_REBUILD;
+        }
+
+        // 清除缓存的包围盒，强制重新计算
+        if (primitive._boundingVolume) {
+          primitive._boundingVolume = undefined;
+        }
+
+        // 标记为脏，触发重绘
+        if (primitive._dirty !== undefined) {
+          primitive._dirty = true;
+        }
+
+        // 对于某些版本，可能需要重新设置 geometryInstances
+        // primitive.geometryInstances = geometryInstance;
+      } catch (error) {
+        // 如果复用失败，降级到重建方案
+        console.warn("复用 Primitive 失败，降级到重建:", error);
+        forceRebuild = true;
+      }
+    }
+
+    // 强制重建或者首次创建，重新创建 Primitive
+    if (forceRebuild || !primitive || !geometryInstance) {
+      if (primitive) {
+        viewer.scene.primitives.remove(primitive);
+        primitive = null;
+      }
+
+      geometryInstance = new Cesium.GeometryInstance({
+        geometry: newGeometry,
         id: _event,
-      }),
-      appearance,
-    });
-    viewer.scene.primitives.add(primitive);
+      });
+
+      primitive = new Cesium.Primitive({
+        show: polyline.show !== false,
+        asynchronous: false,
+        geometryInstances: geometryInstance,
+        appearance: appearance,
+        compressVertices: true,
+        releaseGeometryInstances: false,
+      });
+
+      viewer.scene.primitives.add(primitive);
+      isFirstRender = false;
+    }
+
+    currentPositions = newPositions.slice();
+  }
+
+  function cleanupPrimitive() {
+    if (primitive) {
+      viewer.scene.primitives.remove(primitive);
+      primitive = null;
+    }
+    if (geometryInstance) {
+      geometryInstance = null;
+    }
+    currentPositions = [];
+    isFirstRender = true;
+  }
+
+  // 初始加载
+  if (polyline.coordinates) {
+    status = 2;
+    cache = polyline.coordinates.map(geographyTcartesian3);
+    updatePrimitiveGeometry(cache, true); // 强制重建
   }
 
   const editor = new PolylineEditor<any, any>();
@@ -180,8 +336,10 @@ export function drawPolyline(map: CesiumMap, polyline: Polyline<unknown>) {
     markers.remove(n.shape);
   });
   editor.on("empty", () => {
-    // markers.removeAll()
-    viewer.scene.primitives.remove(primitive);
+    if (primitive) {
+      viewer.scene.primitives.remove(primitive);
+      primitive = null;
+    }
     status = 0;
   });
 
@@ -218,7 +376,6 @@ export function drawPolyline(map: CesiumMap, polyline: Polyline<unknown>) {
           break;
         case "dash":
           keys.add("Material");
-
           break;
         default:
           throw new Error(`${key} 还不支持修改`);
@@ -229,14 +386,13 @@ export function drawPolyline(map: CesiumMap, polyline: Polyline<unknown>) {
         case "Primitive":
           if (polyline.coordinates) {
             cache = polyline.coordinates.map((e) => geographyTcartesian3(e));
+            updatePrimitiveGeometry(cache, true); // 强制重建
           } else {
             cache = [];
             markers.removeAll();
             status = 0;
           }
-
           initPrimitive();
-
           break;
         case "Material":
           material = createLineMaterial(polyline);
@@ -254,6 +410,7 @@ export function drawPolyline(map: CesiumMap, polyline: Polyline<unknown>) {
         break;
     }
   };
+
   let temp: any;
   const onMouseMove = () => {
     const e = event.geography;
@@ -262,13 +419,13 @@ export function drawPolyline(map: CesiumMap, polyline: Polyline<unknown>) {
       case 1:
         cache.pop();
         cache.push(geographyTcartesian3(e));
-        initPrimitive();
+        updatePrimitiveGeometry(cache); // 普通更新
         break;
       case 4:
         temp = geographyTcartesian3(e);
         activeNode.update([temp.x, temp.y, temp.z]);
         cache = editor.getCoordinates().map((e) => new Cesium.Cartesian3(...e));
-        initPrimitive();
+        updatePrimitiveGeometry(cache, true); // 强制重建
         break;
     }
   };
@@ -284,38 +441,16 @@ export function drawPolyline(map: CesiumMap, polyline: Polyline<unknown>) {
         break;
       case 1:
         cache.push(cache[cache.length - 1]);
-        // geometry.setCoordinates(cache)
         initPrimitive();
         break;
     }
   };
 
   const initPrimitive = () => {
-    primitive && viewer.scene.primitives.remove(primitive);
     if (cache.length > 1) {
-      const geometry = Cesium.PolylineGeometry.createGeometry(
-        new Cesium.PolylineGeometry({
-          positions: cache,
-          width: polyline.lineWidth,
-          vertexFormat: Cesium.PolylineMaterialAppearance.VERTEX_FORMAT,
-        }),
-      );
-      if (geometry) {
-        primitive = new Cesium.Primitive({
-          show: polyline.show,
-          asynchronous: false,
-          geometryInstances: new Cesium.GeometryInstance({
-            geometry,
-            id: _event,
-          }),
-          appearance,
-        });
-        viewer.scene.primitives.add(primitive);
-      } else {
-        primitive = undefined;
-      }
+      updatePrimitiveGeometry(cache, true); // 强制重建
     } else {
-      primitive = undefined;
+      cleanupPrimitive();
     }
   };
 
@@ -326,7 +461,6 @@ export function drawPolyline(map: CesiumMap, polyline: Polyline<unknown>) {
         skip++;
         cache.pop();
         cache.pop();
-        // geometry.setCoordinates(cache)
         polyline.coordinates = cache.map((e) => cartesian3Tgeography(e));
         polyline.event.trigger("data-loaded");
         polyline.event.trigger("pointer-in");
@@ -348,8 +482,10 @@ export function drawPolyline(map: CesiumMap, polyline: Polyline<unknown>) {
   };
 
   const onDestroy = () => {
-    primitive && viewer.scene.primitives.remove(primitive);
-    viewer.scene.primitives.remove(markers);
+    cleanupPrimitive();
+    if (markers) {
+      viewer.scene.primitives.remove(markers);
+    }
     event.off("pointer-move", onMouseMove);
     event.off("left-click", onClick);
     event.off("double-click", onDbClick);

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;
+}