gisviewer-vue3-arcgis 1.0.107 → 1.0.109

package/es/src/gis-map/utils/holo-flow/trace-holo-flow.mjs

@@ -1,41 +1,49 @@
-import * as g from "@arcgis/core/views/3d/externalRenderers";
-import u from "../../stores/index.mjs";
-import f from "./trace-renderer-external.mjs";
-import T from "./trace-renderer-layer.mjs";
-class N {
+import * as d from "@arcgis/core/views/3d/externalRenderers";
+import T from "../../stores/index.mjs";
+import g from "./trace-renderer-external.mjs";
+import u from "./trace-renderer-layer.mjs";
+class L {
   constructor(e) {
-    this.lastDataTime = 0, this.view = e;
-    const o = u.useAppDataStore;
-    this.mapConfig = JSON.parse(JSON.stringify(o.mapConfig)), e.type === "3d" ? (this.traceRenderer = new f(e), g.add(
+    this.lastDataTime = 0, this.lastLocalTimestamp = 0, this.lastDataTimestamp = 0, this.view = e;
+    const r = T.useAppDataStore;
+    this.mapConfig = JSON.parse(JSON.stringify(r.mapConfig)), e.type === "3d" ? (this.traceRenderer = new g(e), d.add(
       e,
       this.traceRenderer
-    )) : this.traceRenderer = new T(e);
+    )) : this.traceRenderer = new u(e);
+  }
+  async init() {
+    await this.traceRenderer.init();
   }
-  /**
-   * 处理全息流轨迹数据
-   * */
   async handleVehicleTraceData(e) {
-    const o = new Date().getTime(), { newVehList: s, updateVehList: a, deleteVehList: c, jgsj: i } = e, n = e.crossId || "", l = [], h = [];
-    if (s && s.length > 0) {
-      for (const t of s) {
-        t.localTimestamp || (t.localTimestamp = i || o);
-        const r = this.buildVehicleTrackData(t, n);
-        r && l.push(r);
+    const { newVehList: r, updateVehList: o, deleteVehList: c, jgsj: n } = e, i = e.crossId || "", l = [], s = [];
+    if (r && r.length > 0) {
+      for (const a of r) {
+        a.localTimestamp || (a.localTimestamp = n || Date.now());
+        const t = this.buildVehicleTrackData(a, i);
+        t && l.push(t);
       }
       await this.traceRenderer.addVehicles(l);
     }
-    if (a && a.length > 0) {
-      for (const t of a) {
-        const r = this.buildVehicleTrackData(t, n);
-        r && h.push(r);
+    if (o && o.length > 0) {
+      for (const p of o) {
+        const h = this.buildVehicleTrackData(p, i);
+        h && s.push(h);
       }
-      await this.traceRenderer.updateVehicles(h);
+      const a = s[0].localTimestamp - this.lastLocalTimestamp, t = s[0].timestamp - this.lastDataTimestamp;
+      console.log(
+        "localTimeGap",
+        a,
+        "timeGap",
+        t,
+        "delta",
+        a - t
+      ), this.lastLocalTimestamp = s[0].localTimestamp, this.lastDataTimestamp = s[0].timestamp, await this.traceRenderer.updateVehicles(s);
     }
     if (c && c.length > 0) {
-      const t = c.map(
-        (r) => n + "-" + (r.ptcId || r.vehno || r.vehNo)
+      const a = c.map(
+        (t) => i + "-" + (t.ptcId || t.vehno || t.vehNo)
       );
-      this.traceRenderer.deleteVehicles(t);
+      this.traceRenderer.deleteVehicles(a);
     }
   }
   /**
@@ -69,28 +77,28 @@ class N {
   setInterpolate(e) {
     this.traceRenderer.setInterpolate(e);
   }
-  buildVehicleTrackData(e, o) {
-    const s = e.longitude, a = e.latitude, c = e.ptcId, i = Number(e.ptcType), n = e.heading, l = Number(e.vehicleType), h = Number(e.vehicleColor), t = e.plateNo || e.plateno, r = Number(e.plateColor), p = e.timestamp, d = e.localTimestamp, m = e.roadLayer ? String(e.roadLayer) : "1";
+  buildVehicleTrackData(e, r) {
+    const o = e.longitude, c = e.latitude, n = e.ptcId, i = Number(e.ptcType), l = e.heading, s = Number(e.vehicleType), a = Number(e.vehicleColor), t = e.plateNo || e.plateno, p = Number(e.plateColor), h = e.timestamp, m = e.roadLayer ? String(e.roadLayer) : "1";
     if (!(i < 0 || i > 8))
       return {
-        ptcId: c,
-        crossId: o,
-        vehicleId: o + "-" + c,
-        x: s,
-        y: a,
+        ptcId: n,
+        crossId: r,
+        vehicleId: r + "-" + n,
+        x: o,
+        y: c,
         ptcType: i,
-        vehicleType: l,
-        heading: i === 2 ? -n : n,
-        vehicleColor: h,
+        vehicleType: s,
+        heading: i === 2 ? -l : l,
+        vehicleColor: a,
         showName: t && t !== "" && t !== "0" && t !== "000000" ? t : "",
         plateNo: t,
-        plateColor: r,
-        timestamp: p,
-        localTimestamp: d,
+        plateColor: p,
+        timestamp: h,
+        localTimestamp: Date.now(),
         roadLayer: m
       };
   }
 }
 export {
-  N as default
+  L as default
 };

package/es/src/gis-map/utils/holo-flow/trace-renderer-external.d.ts

@@ -18,15 +18,18 @@ export default class TraceRendererExternal implements ITraceRendererInterface {
     private readonly view;
     private readonly assetsRoot;
     private carModel;
-    private carModelReady;
     private vanModel;
-    private vanModelReady;
     private truckModel;
-    private truckModelReady;
     private busModel;
-    private busModelReady;
     private bicycleModel;
-    private bicycleModelReady;
+    private bluePlateBG;
+    private yellowPlateBG;
+    private whitePlateBG;
+    private blackPlateBG;
+    private neoYellowPlateBG;
+    private neoGreenPlateBG;
+    private greyPlateBG;
+    private isInitialized;
     private showGroundVehicle;
     private showElevatedVehicle;
     private isPaused;
@@ -36,6 +39,7 @@ export default class TraceRendererExternal implements ITraceRendererInterface {
     private needInterpolate;
     private updateModel;
     constructor(view: __esri.SceneView);
+    init(): Promise<void>;
     setInterpolate(needInterpolate: boolean): void;
     private context;
     setup(context: any): Promise<void>;

package/es/src/gis-map/utils/holo-flow/trace-renderer-external.mjs

@@ -1,13 +1,14 @@
-import * as y from "@arcgis/core/core/reactiveUtils.js";
-import w from "@arcgis/core/geometry/SpatialReference";
-import * as g from "@arcgis/core/views/3d/externalRenderers";
-import * as h from "three";
-import { GLTFLoader as R } from "three/examples/jsm/loaders/GLTFLoader.js";
+import * as P from "@arcgis/core/core/promiseUtils.js";
+import * as b from "@arcgis/core/core/reactiveUtils.js";
+import v from "@arcgis/core/geometry/SpatialReference";
+import * as u from "@arcgis/core/views/3d/externalRenderers";
+import * as n from "three";
+import { GLTFLoader as y } from "three/examples/jsm/loaders/GLTFLoader.js";
 import { EVehiclePlateState as d } from "../../../types/index.mjs";
-import P from "../../stores/index.mjs";
-class k {
+import G from "../../stores/index.mjs";
+class I {
   constructor(i) {
-    this.cameraHeightThreshold = 1e3, this.roughness = 0.2, this.metalness = 0.8, this.defaultMaterial = new h.MeshPhongMaterial({
+    this.cameraHeightThreshold = 1e3, this.roughness = 0.2, this.metalness = 0.8, this.defaultMaterial = new n.MeshPhongMaterial({
       color: 16777215
     }), this.materialMap = /* @__PURE__ */ new Map([
       [1, this.createCarMaterial(16777215)],
@@ -21,48 +22,101 @@ class k {
       [9, this.createCarMaterial(2105376)],
       [10, this.createCarMaterial(9662683)],
       [99, this.createCarMaterial(6908265)]
-    ]), this.carModelReady = !1, this.vanModelReady = !1, this.truckModelReady = !1, this.busModelReady = !1, this.bicycleModelReady = !1, this.showGroundVehicle = !0, this.showElevatedVehicle = !0, this.isPaused = !1, this.currentSpriteContent = d.None, this.historyPositionMap = /* @__PURE__ */ new Map(), this.vehicleObjectMap = /* @__PURE__ */ new Map(), this.needInterpolate = !0, this.updateModel = !1;
-    const e = P.useAppDataStore;
+    ]), this.isInitialized = !1, this.showGroundVehicle = !0, this.showElevatedVehicle = !0, this.isPaused = !1, this.currentSpriteContent = d.None, this.historyPositionMap = /* @__PURE__ */ new Map(), this.vehicleObjectMap = /* @__PURE__ */ new Map(), this.needInterpolate = !0, this.updateModel = !1;
+    const e = G.useAppDataStore;
     this.assetsRoot = JSON.parse(
       JSON.stringify(e.mapConfig)
-    ).assetsRoot, this.view = i;
-    const t = new R();
-    t.load(`${this.assetsRoot}/3DModels/car.glb`, (s) => {
-      this.carModel = s.scene, this.carModel.rotation.x = h.MathUtils.degToRad(90), this.carModelReady = !0;
-    }), t.load(`${this.assetsRoot}/3DModels/van.glb`, (s) => {
-      this.vanModel = s.scene, this.vanModel.rotation.x = h.MathUtils.degToRad(90), this.vanModelReady = !0;
-    }), t.load(`${this.assetsRoot}/3DModels/truck.glb`, (s) => {
-      this.truckModel = s.scene, this.truckModel.scale.set(1.2, 1, 1.5), this.truckModel.rotation.x = h.MathUtils.degToRad(90), this.truckModelReady = !0;
-    }), t.load(`${this.assetsRoot}/3DModels/bus.glb`, (s) => {
-      this.busModel = s.scene, this.busModel.rotation.x = h.MathUtils.degToRad(90), this.busModelReady = !0;
-    }), t.load(`${this.assetsRoot}/3DModels/bicycle.glb`, (s) => {
-      this.bicycleModel = s.scene, this.bicycleModel.rotation.x = h.MathUtils.degToRad(90), this.bicycleModel.rotation.y = h.MathUtils.degToRad(180), this.bicycleModelReady = !0;
-    }), document.addEventListener(
+    ).assetsRoot, this.view = i, document.addEventListener(
       "visibilitychange",
       () => {
         this.clearVehicles(), this.needInterpolate = !document.hidden;
       },
       !1
-    ), y.watch(
+    ), b.watch(
       () => this.view.camera.position.z,
-      (s, a) => {
-        (a <= this.cameraHeightThreshold && s > this.cameraHeightThreshold || a > this.cameraHeightThreshold && s <= this.cameraHeightThreshold) && (this.updateModel = !0);
+      (t, s) => {
+        (s <= this.cameraHeightThreshold && t > this.cameraHeightThreshold || s > this.cameraHeightThreshold && t <= this.cameraHeightThreshold) && (this.updateModel = !0);
       }
     );
   }
   createCarMaterial(i) {
-    return new h.MeshPhongMaterial({
+    return new n.MeshPhongMaterial({
       color: i
-      // emissive: 0xc3c3c3,
+      // // emissive: 0xc3c3c3,
       // roughness: this.roughness,
       // metalness: this.metalness
     });
   }
+  async init() {
+    const i = new y();
+    await P.eachAlways([
+      new Promise((e) => {
+        i.load(`${this.assetsRoot}/3DModels/car.glb`, (t) => {
+          this.carModel = t.scene, this.carModel.rotation.x = n.MathUtils.degToRad(90), e();
+        });
+      }),
+      new Promise((e) => {
+        i.load(`${this.assetsRoot}/3DModels/van.glb`, (t) => {
+          this.vanModel = t.scene, this.vanModel.rotation.x = n.MathUtils.degToRad(90), e();
+        });
+      }),
+      new Promise((e) => {
+        i.load(`${this.assetsRoot}/3DModels/truck.glb`, (t) => {
+          this.truckModel = t.scene, this.truckModel.scale.set(1.2, 1, 1.5), this.truckModel.rotation.x = n.MathUtils.degToRad(90), e();
+        });
+      }),
+      new Promise((e) => {
+        i.load(`${this.assetsRoot}/3DModels/bus.glb`, (t) => {
+          this.busModel = t.scene, this.busModel.rotation.x = n.MathUtils.degToRad(90), e();
+        });
+      }),
+      new Promise((e) => {
+        i.load(`${this.assetsRoot}/3DModels/bicycle.glb`, (t) => {
+          this.bicycleModel = t.scene, this.bicycleModel.rotation.x = n.MathUtils.degToRad(90), this.bicycleModel.rotation.y = n.MathUtils.degToRad(180), e();
+        });
+      }),
+      new Promise((e) => {
+        this.bluePlateBG = new Image(), this.bluePlateBG.src = `${this.assetsRoot}/Images/PlateBG/blue.png`, this.bluePlateBG.onload = () => {
+          e();
+        };
+      }),
+      new Promise((e) => {
+        this.yellowPlateBG = new Image(), this.yellowPlateBG.src = `${this.assetsRoot}/Images/PlateBG/yellow.png`, this.yellowPlateBG.onload = () => {
+          e();
+        };
+      }),
+      new Promise((e) => {
+        this.whitePlateBG = new Image(), this.whitePlateBG.src = `${this.assetsRoot}/Images/PlateBG/white.png`, this.whitePlateBG.onload = () => {
+          e();
+        };
+      }),
+      new Promise((e) => {
+        this.blackPlateBG = new Image(), this.blackPlateBG.src = `${this.assetsRoot}/Images/PlateBG/black.png`, this.blackPlateBG.onload = () => {
+          e();
+        };
+      }),
+      new Promise((e) => {
+        this.neoYellowPlateBG = new Image(), this.neoYellowPlateBG.src = `${this.assetsRoot}/Images/PlateBG/neo_yellow.png`, this.neoYellowPlateBG.onload = () => {
+          e();
+        };
+      }),
+      new Promise((e) => {
+        this.neoGreenPlateBG = new Image(), this.neoGreenPlateBG.src = `${this.assetsRoot}/Images/PlateBG/neo_green.png`, this.neoGreenPlateBG.onload = () => {
+          e();
+        };
+      }),
+      new Promise((e) => {
+        this.greyPlateBG = new Image(), this.greyPlateBG.src = `${this.assetsRoot}/Images/PlateBG/grey.png`, this.greyPlateBG.onload = () => {
+          e();
+        };
+      })
+    ]), this.isInitialized = !0;
+  }
   setInterpolate(i) {
     this.clearVehicles(), this.needInterpolate = i;
   }
   async setup(i) {
-    this.context = i, this.renderer = new h.WebGLRenderer({
+    this.context = i, this.renderer = new n.WebGLRenderer({
       context: i.gl,
       premultipliedAlpha: !0,
       logarithmicDepthBuffer: !0,
@@ -72,76 +126,64 @@ class k {
     const e = this.renderer.setRenderTarget.bind(
       this.renderer
     );
-    this.renderer.setRenderTarget = (n) => {
-      e(n), n == null && i.bindRenderTarget();
-    }, this.scene = new h.Scene();
+    this.renderer.setRenderTarget = (s) => {
+      e(s), s == null && i.bindRenderTarget();
+    }, this.scene = new n.Scene();
     const { camera: t } = i;
-    this.camera = new h.PerspectiveCamera(
+    this.camera = new n.PerspectiveCamera(
       t.fovY,
       t.aspect,
       0.1,
       1e5
-    ), this.ambient = new h.AmbientLight(16777215, 2e4), this.scene.add(this.ambient), this.sun = new h.DirectionalLight(16777215, 2e4);
-    const s = [121.51925377934634, 31.893973071723785, 1e4], a = this.toRenderCoordinates(s);
-    this.sun.position.set(
-      a[0],
-      a[1],
-      a[2]
-    );
-    const r = [121.46790813287619, 31.239514870157972, 1e3], o = this.toRenderCoordinates(r);
-    this.sun.target.position.set(
-      o[0],
-      o[1],
-      o[2]
-    ), this.scene.add(this.sun), i.resetWebGLState();
+    ), this.ambient = new n.AmbientLight(16777215, 2), this.scene.add(this.ambient), this.sun = new n.DirectionalLight(16777215, 2), this.scene.add(this.sun), i.resetWebGLState();
   }
   async render(i) {
     var s;
     const e = i.camera;
     if (this.camera.position.set(e.eye[0], e.eye[1], e.eye[2]), this.camera.up.set(e.up[0], e.up[1], e.up[2]), this.camera.lookAt(
-      new h.Vector3(e.center[0], e.center[1], e.center[2])
+      new n.Vector3(e.center[0], e.center[1], e.center[2])
     ), this.camera.projectionMatrix.fromArray(e.projectionMatrix), !this.isPaused && this.needInterpolate)
       for (const a of this.vehicleObjectMap.keys()) {
-        const r = (s = this.vehicleObjectMap.get(a)) == null ? void 0 : s.model;
-        if (!r)
+        const l = (s = this.vehicleObjectMap.get(a)) == null ? void 0 : s.model;
+        if (!l)
           continue;
         const o = this.computeVehiclePosition(a);
         if (o) {
-          const n = this.toRenderCoordinates(o);
-          r.position.set(n[0], n[1], n[2]), r.rotation.y = h.MathUtils.degToRad(-o[3]);
+          const h = this.toRenderCoordinates(o);
+          l.position.set(h[0], h[1], h[2]), l.rotation.y = n.MathUtils.degToRad(-o[3]);
         }
       }
     const t = i.sunLight;
-    this.sun.position.set(t.direction[0], t.direction[1], t.direction[2]), this.sun.intensity = t.diffuse.intensity, this.sun.color = new h.Color(
+    this.sun.position.set(t.direction[0], t.direction[1], t.direction[2]), this.sun.intensity = t.diffuse.intensity, this.sun.color = new n.Color(
       t.diffuse.color[0],
       t.diffuse.color[1],
       t.diffuse.color[2]
-    ), this.ambient.intensity = t.ambient.intensity, this.ambient.color = new h.Color(
+    ), this.ambient.intensity = t.ambient.intensity, this.ambient.color = new n.Color(
       t.ambient.color[0],
       t.ambient.color[1],
       t.ambient.color[2]
-    ), this.renderer.resetState(), i.bindRenderTarget(), this.renderer.render(this.scene, this.camera), g.requestRender(this.view), i.resetWebGLState();
+    ), this.renderer.resetState(), i.bindRenderTarget(), this.renderer.render(this.scene, this.camera), u.requestRender(this.view), i.resetWebGLState();
   }
   /**
    * 新增车辆
    * */
   async addVehicles(i) {
-    if (!(this.isPaused || !this.carModelReady || !this.vanModelReady || !this.truckModelReady || !this.busModelReady || !this.bicycleModelReady))
+    if (!(this.isPaused || !this.isInitialized))
       for (const e of i) {
-        const { vehicleId: t, localTimestamp: s } = e, a = Number(e.x), r = Number(e.y), o = Number(e.heading);
+        const { vehicleId: t, localTimestamp: s } = e, a = Number(e.x), l = Number(e.y), o = Number(e.heading);
         this.historyPositionMap.set(t, [
-          { pos: [a, r, 0], heading: o, time: s }
+          { pos: [a, l, 0], heading: o, time: s }
         ]);
-        const n = this.getVehicleModel(e);
-        n.name = t, n.visible = !this.needInterpolate;
+        const h = this.getVehicleModel(e);
+        h.name = t, h.visible = !this.needInterpolate;
         try {
-          const l = await this.createPlateSprite(e);
-          l && (n.add(l), l.position.set(0, 5, -4));
-        } catch (l) {
-          console.log("createPlateSprite error:", l);
+          const r = await this.createPlateSprite(e);
+          r && (h.add(r), r.position.set(0, 5, -4));
+        } catch (r) {
+          console.log("createPlateSprite error:", r);
         }
-        this.scene.add(n), this.vehicleObjectMap.set(t, {
-          model: n,
+        this.scene.add(h), this.vehicleObjectMap.set(t, {
+          model: h,
           data: e,
           waitForDelete: !1,
           isMoving: !1
@@ -152,42 +194,42 @@ class k {
    * 更新车辆
    * */
   async updateVehicles(i) {
-    if (this.isPaused || !this.carModelReady || !this.vanModelReady || !this.truckModelReady || !this.busModelReady || !this.bicycleModelReady)
+    if (this.isPaused || !this.isInitialized)
       return;
     const e = [];
     for (const t of i) {
-      const { vehicleId: s, localTimestamp: a } = t, r = Number(t.x), o = Number(t.y);
-      let n = Number(t.heading);
-      const l = this.vehicleObjectMap.get(s), m = this.historyPositionMap.get(
+      const { vehicleId: s, timestamp: a } = t, l = Number(t.x), o = Number(t.y);
+      let h = Number(t.heading);
+      const r = this.vehicleObjectMap.get(s), m = this.historyPositionMap.get(
         s
       );
-      if (!l || !m)
+      if (!r || !m)
         e.push(t);
       else {
-        if (this.updateModel || l.data.vehicleColor !== t.vehicleColor || l.data.vehicleType !== t.vehicleType) {
-          this.scene.remove(l.model), this.disposeModel(l.model), l.model = this.getVehicleModel(t);
+        if (m.length >= 5 && console.log(s, m.length), this.updateModel || r.data.vehicleColor !== t.vehicleColor || r.data.vehicleType !== t.vehicleType) {
+          this.scene.remove(r.model), this.disposeModel(r.model), r.model = this.getVehicleModel(t);
           const c = await this.createPlateSprite(t);
-          c && (l.model.add(c), c.position.set(0, 5, -4)), this.scene.add(l.model);
+          c && (r.model.add(c), c.position.set(0, 5, -4)), this.scene.add(r.model);
         }
-        if (l.data.showName !== t.showName || l.data.plateColor !== t.plateColor) {
-          const c = l.model.getObjectByName("VehiclePlate");
-          c && (l.model.remove(c), this.disposeModel(c));
+        if (r.data.showName !== t.showName || r.data.plateColor !== t.plateColor) {
+          const c = r.model.getObjectByName("VehiclePlate");
+          c && (r.model.remove(c), this.disposeModel(c));
           const p = await this.createPlateSprite(t);
-          p && (l.model.add(p), p.position.set(0, 5, -4));
+          p && (r.model.add(p), p.position.set(0, 5, -4));
         }
-        if (l.data = t, this.needInterpolate) {
+        if (r.data = t, this.needInterpolate) {
           const c = m[m.length - 1];
-          Math.abs(n - c.heading) >= 180 && (n > c.heading ? c.heading += 360 : n += 360), m.push({
-            pos: [r, o, 0],
-            heading: n,
+          Math.abs(h - c.heading) >= 180 && (h > c.heading ? c.heading += 360 : h += 360), m.push({
+            pos: [l, o, 0],
+            heading: h,
             time: a
           });
         } else {
           this.historyPositionMap.set(s, [
-            { pos: [r, o, 0], heading: n, time: a }
+            { pos: [l, o, 0], heading: h, time: a }
           ]);
-          const c = this.toRenderCoordinates([r, o, 0]);
-          l.model.position.set(c[0], c[1], c[2]), l.model.rotation.y = h.MathUtils.degToRad(-n);
+          const c = this.toRenderCoordinates([l, o, 0]);
+          r.model.position.set(c[0], c[1], c[2]), r.model.rotation.y = n.MathUtils.degToRad(-h);
         }
       }
     }
@@ -195,12 +237,12 @@ class k {
   }
   toRenderCoordinates(i) {
     const e = [0, 0, 0];
-    return g.toRenderCoordinates(
+    return u.toRenderCoordinates(
       // @ts-ignore
       this.view,
       i,
       0,
-      w.WGS84,
+      v.WGS84,
       e,
       0,
       1
@@ -269,7 +311,7 @@ class k {
    * */
   disposeModel(i) {
     i.traverse((e) => {
-      e instanceof h.Mesh && (e.geometry.dispose(), e.material.dispose());
+      e instanceof n.Mesh && (e.geometry.dispose(), e.material.dispose());
     });
   }
   /**
@@ -281,33 +323,34 @@ class k {
       return;
     const s = Date.now();
     t.isMoving = !0, t.data.roadLayer === "1" ? t.model.visible = this.showGroundVehicle : t.model.visible = this.showElevatedVehicle, t.segmentStartTime || (t.segmentStartTime = s, t.segmentTotalTime = e[1].time - e[0].time);
-    const a = s - t.segmentStartTime, r = Math.min(
+    const a = s - t.segmentStartTime, l = Math.min(
       a / t.segmentTotalTime,
       1
     );
-    if (r === 1)
+    if (l === 1)
       if (e.shift(), e.length === 1) {
         t.waitForDelete === !0 ? this.deleteVehicle(t) : (t.segmentStartTime = void 0, t.segmentTotalTime = void 0, t.model.visible = !1, t.isMoving = !1, console.log("hide vehicle", i));
         return;
       } else
         return t.segmentStartTime = Date.now(), t.segmentTotalTime = e[1].time - e[0].time, (e[1].heading >= 270 && e[0].heading <= 90 || e[1].heading <= 90 && e[0].heading >= 270) && (e[1].heading > e[0].heading ? e[0].heading += 360 : e[1].heading += 360), e[0].pos.concat(e[0].heading);
-    else {
-      const o = e[0].pos[0] + (e[1].pos[0] - e[0].pos[0]) * r, n = e[0].pos[1] + (e[1].pos[1] - e[0].pos[1]) * r, l = e[0].heading + (e[1].heading - e[0].heading) * r;
-      return [o, n, 0, l];
-    }
+    else if (e.length >= 2) {
+      const o = e[0].pos[0] + (e[1].pos[0] - e[0].pos[0]) * l, h = e[0].pos[1] + (e[1].pos[1] - e[0].pos[1]) * l, r = e[0].heading + (e[1].heading - e[0].heading) * l;
+      return [o, h, 0, r];
+    } else
+      return;
   }
   /**
    * 根据车辆类型、车身颜色获取模型
    * */
   getVehicleModel(i) {
     if (this.view.camera.position.z >= this.cameraHeightThreshold) {
-      const e = new h.SphereGeometry(5, 32, 32), t = new h.MeshPhysicalMaterial({
+      const e = new n.SphereGeometry(5, 32, 32), t = new n.MeshPhysicalMaterial({
         color: 325253,
         emissive: 0,
         roughness: this.roughness,
         metalness: this.metalness
       });
-      return new h.Mesh(e, t);
+      return new n.Mesh(e, t);
     } else {
       let e;
       if (i.ptcType === 2)
@@ -333,7 +376,7 @@ class k {
         const t = this.materialMap.get(i.vehicleColor) || this.defaultMaterial;
         let s = !1;
         e.traverse((a) => {
-          !s && a instanceof h.Mesh && (a.material = t, s = !0);
+          !s && a instanceof n.Mesh && (a.material = t, s = !0);
         });
       }
       return e;
@@ -343,72 +386,70 @@ class k {
    * 创建号牌canvas
    * */
   createCanvas(i, e, t) {
-    const s = document.createElement("canvas"), a = i.width, r = i.height;
-    s.width = a, s.height = r;
+    const s = document.createElement("canvas"), a = i.width, l = i.height;
+    s.width = a, s.height = l;
     const o = s.getContext("2d");
     if (!o) {
       console.log("canvas创建失败");
       return;
     }
-    return o.fillStyle = "rgba(0,0,0,0.0)", o.fillRect(0, 0, a, r), o.drawImage(i, 0, 0, a, r), o.beginPath(), o.translate(a / 2, r / 2), o.fillStyle = t, o.font = "bold 32px 宋体", o.textBaseline = "middle", o.textAlign = "center", o.fillText(e, 0, 0), s;
+    return o.fillStyle = "rgba(0,0,0,0.0)", o.fillRect(0, 0, a, l), o.drawImage(i, 0, 0, a, l), o.beginPath(), o.translate(a / 2, l / 2), o.fillStyle = t, o.font = "bold 32px 宋体", o.textBaseline = "middle", o.textAlign = "center", o.fillText(e, 0, 0), s;
   }
   createPlateSprite(i) {
     return new Promise((e, t) => {
-      var l, m;
+      var r, m;
       const s = !i.plateNo || i.plateNo === "0" || i.plateNo === "000000";
       if (this.currentSpriteContent === d.None || this.currentSpriteContent === d.PlateNumber && s) {
         e(void 0);
         return;
       }
-      const a = new Image();
-      let r = "", o = "", n = "";
+      let a = new Image(), l = "", o = "";
       if (this.currentSpriteContent === d.PlateNumber || this.currentSpriteContent === d.Mix)
         if (s)
-          r = "grey", o = i.ptcId, n = "#ffffff";
+          a = this.greyPlateBG, l = i.ptcId, o = "#ffffff";
         else
-          switch (o = ((l = i.showName) == null ? void 0 : l.substring(0, 2)) + "•" + ((m = i.showName) == null ? void 0 : m.substring(2)), i.plateColor) {
+          switch (l = ((r = i.showName) == null ? void 0 : r.substring(0, 2)) + "•" + ((m = i.showName) == null ? void 0 : m.substring(2)), i.plateColor) {
             case 1:
-              r = "blue", n = "#ffffff";
+              a = this.bluePlateBG, o = "#ffffff";
               break;
             case 2:
-              r = "yellow", n = "#000000";
+              a = this.yellowPlateBG, o = "#000000";
               break;
             case 3:
-              r = "white", n = "#000000";
+              a = this.whitePlateBG, o = "#000000";
               break;
             case 4:
-              r = "black";
+              a = this.blackPlateBG, o = "#ffffff";
               break;
             case 5:
-              r = "neo_yellow", n = "#000000";
+              a = this.neoYellowPlateBG, o = "#000000";
               break;
             case 6:
-              r = "neo_green", n = "#000000";
+              a = this.neoGreenPlateBG, o = "#000000";
               break;
             default:
-              r = "grey", o = i.plateNo, n = "#ffffff";
+              a = this.greyPlateBG, l = i.plateNo, o = "#ffffff";
               break;
           }
       else
-        this.currentSpriteContent === d.Id && (r = "grey", o = i.ptcId, n = "#ffffff");
-      a.src = `${this.assetsRoot}/Images/PlateBG/${r}.png`, a.onload = () => {
-        const c = this.createCanvas(a, o, n);
-        if (!c)
-          t("canvas创建失败");
-        else {
-          const p = new h.CanvasTexture(c), M = new h.SpriteMaterial({
-            map: p,
-            transparent: !1
-          }), f = new h.Sprite(M), u = 0.05, b = c.width * u, v = c.height * u;
-          f.scale.set(b, v, 1), f.name = "VehiclePlate", e(f);
-        }
-        a.onerror = (p) => {
-          console.log(`号牌背景加载失败: ${a.src}`, p), t(p);
-        };
+        this.currentSpriteContent === d.Id && (a = this.greyPlateBG, l = i.ptcId, o = "#ffffff");
+      const h = this.createCanvas(a, l, o);
+      if (h) {
+        const c = new n.CanvasTexture(h), p = new n.SpriteMaterial({
+          map: c,
+          transparent: !1
+        }), g = new n.Sprite(p), f = 0.05, M = h.width * f, w = h.height * f;
+        g.scale.set(M, w, 1), g.name = "VehiclePlate", e(g);
+      } else {
+        t("canvas创建失败");
+        return;
+      }
+      a.onerror = (c) => {
+        console.log(`号牌背景加载失败: ${a.src}`, c), t(c);
       };
     });
   }
 }
 export {
-  k as default
+  I as default
 };

package/es/src/gis-map/utils/holo-flow/trace-renderer-layer.d.ts

@@ -5,6 +5,7 @@ export default class TraceRendererLayer implements ITraceRendererInterface {
     private mapConfig;
     private rafSignal;
     constructor(view: __esri.MapView);
+    init(): Promise<void>;
     private needInterpolate;
     private isPaused;
     private showVehiclePlate;

package/es/src/gis-map/utils/holo-flow/trace-renderer-layer.mjs

@@ -9,6 +9,9 @@ class f {
       id: "vehicleLayer"
     }), this.view.map.add(this.vehicleLayer), this.rafSignal = requestAnimationFrame(() => this.render());
   }
+  async init() {
+    console.log("init");
+  }
   addVehicles(i) {
     return new Promise((e) => {
       if (this.isPaused) {