@hzab/map-combine 0.4.2-alpha.5 → 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.5",
+  "version": "0.4.2-alpha.6",
   "description": "地图组件",
   "main": "src",
   "scripts": {

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);