gisviewer-vue3-arcgis 1.0.85

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

@@ -0,0 +1,209 @@
+import * as d from "@arcgis/core/core/reactiveUtils";
+import { Point as c } from "@arcgis/core/geometry";
+import p from "@arcgis/core/layers/FeatureLayer";
+import u from "../../stores/index.mjs";
+class f {
+  constructor(e) {
+    this.currentPhaseMap = /* @__PURE__ */ new Map(), this.countdownCanvasMap = /* @__PURE__ */ new Map(), this.lastDataTime = 0, this.isDeletingCanvas = !1, this.canvasWidth = 80, this.canvasHeight = 50, this.view = (e.type === "2d", e);
+    const t = u.useAppDataStore;
+    this.mapConfig = JSON.parse(JSON.stringify(t.mapConfig));
+  }
+  /**
+   * 初始化相位线图层
+   * */
+  async initializeLayer() {
+    if (this.mapConfig.phaseLineLayer)
+      if (this.phaseLineLayer)
+        this.phaseLineLayer.visible || (this.phaseLineLayer.visible = !0);
+      else {
+        const e = `${this.mapConfig.assetsRoot}/${this.mapConfig.phaseLineLayer}`, o = (await (await fetch(e)).json()).features.map((i, s) => ({
+          geometry: {
+            type: "polyline",
+            paths: [i.geometry.coordinates]
+          },
+          attributes: {
+            ObjectID: s + 1,
+            id: i.properties.id,
+            color: "hide"
+          }
+        }));
+        this.phaseLineLayer = new p({
+          source: o,
+          geometryType: "polyline",
+          objectIdField: "ObjectID",
+          outFields: ["*"],
+          fields: [
+            {
+              name: "ObjectID",
+              alias: "ObjectID",
+              type: "oid"
+            },
+            {
+              name: "color",
+              alias: "color",
+              type: "string"
+            }
+          ],
+          renderer: {
+            type: "unique-value",
+            field: "color",
+            // 没更新相位数据的路口不显示相位线
+            defaultSymbol: {
+              type: "simple-line",
+              color: "lightblue",
+              width: "2px",
+              style: "none"
+            },
+            uniqueValueInfos: [
+              {
+                value: "green",
+                symbol: {
+                  type: "line-3d",
+                  symbolLayers: [
+                    {
+                      type: "path",
+                      profile: "quad",
+                      material: { color: [19, 255, 69, 0.8] },
+                      width: 1,
+                      height: 0.5
+                    }
+                  ]
+                }
+              },
+              {
+                value: "red",
+                symbol: {
+                  type: "line-3d",
+                  symbolLayers: [
+                    {
+                      type: "path",
+                      profile: "quad",
+                      material: { color: [254, 5, 9, 0.8] },
+                      width: 1,
+                      height: 0.5
+                    }
+                  ]
+                }
+              },
+              {
+                value: "yellow",
+                symbol: {
+                  type: "line-3d",
+                  symbolLayers: [
+                    {
+                      type: "path",
+                      profile: "quad",
+                      material: { color: [255, 215, 0, 0.8] },
+                      width: 1,
+                      height: 0.5
+                    }
+                  ]
+                }
+              }
+            ]
+          }
+        }), this.view.map.add(this.phaseLineLayer);
+      }
+  }
+  async handleSignalData(e) {
+    const t = new Date().getTime();
+    if (t - this.lastDataTime < 100)
+      return;
+    this.lastDataTime = t;
+    const { crossId: o, lat: i, lon: s, rtStage: n, channelsConfig: l } = e;
+    await this.updateCountdown(o, i, s, n), this.phaseLineLayer && ((!this.currentPhaseMap.has(o) || this.currentPhaseMap.get(o) !== n.stagePhase) && await this.updatePhaseLine(
+      o,
+      n.channelsConfig,
+      l
+    ), this.currentPhaseMap.set(o, n.stagePhase));
+  }
+  /**
+   * 清除实时信号相关图层
+   * */
+  clearSignal() {
+    this.phaseLineLayer.visible = !1, this.countdownWatchHandel && (this.countdownWatchHandel.remove(), this.countdownWatchHandel = void 0), this.countdownCanvasMap.forEach((e) => {
+      this.view.container.removeChild(e.backgroundCanvas), this.view.container.removeChild(e.countdownCanvas);
+    }), this.countdownCanvasMap.clear();
+  }
+  /**
+   * 获取显示倒计时的canvas
+   * */
+  async updateCountdown(e, t, a, o) {
+    if (this.isDeletingCanvas)
+      return;
+    const i = this.countdownCanvasMap.get(e);
+    if (i)
+      this.drawCountdownText(i.countdownCanvas, o);
+    else {
+      const s = new c({
+        longitude: a,
+        latitude: t,
+        z: 10
+      }), n = this.view.toScreen(s);
+      if (n.x > this.view.width || n.y > this.view.height)
+        return;
+      this.createCountdownCanvas((l) => {
+        const r = l[0], h = l[1];
+        r.style.left = n.x + "px", r.style.top = n.y + "px", h.style.left = n.x + "px", h.style.top = n.y + "px", this.countdownCanvasMap.set(e, {
+          backgroundCanvas: r,
+          countdownCanvas: h,
+          mapPoint: s
+        }), this.drawCountdownText(h, o);
+      });
+    }
+    this.countdownWatchHandel || (this.countdownWatchHandel = d.watch(
+      () => this.view.extent,
+      () => {
+        this.countdownCanvasMap.forEach((s) => {
+          const n = this.view.toScreen(s.mapPoint);
+          n.x > this.view.width || n.y > this.view.height ? (this.isDeletingCanvas = !0, this.view.container.removeChild(s.backgroundCanvas), this.view.container.removeChild(s.countdownCanvas), this.countdownCanvasMap.delete(e), this.isDeletingCanvas = !1) : (s.backgroundCanvas.style.left = n.x + "px", s.backgroundCanvas.style.top = n.y + "px", s.countdownCanvas.style.left = n.x + "px", s.countdownCanvas.style.top = n.y + "px");
+        });
+      }
+    ));
+  }
+  drawCountdownText(e, t) {
+    const a = e.getContext("2d");
+    a.clearRect(0, 0, e.width, e.height), a.font = "32px LESLIE", a.textBaseline = "middle", a.textAlign = "center", a.fillStyle = t.stageRemainingTime <= t.stageAllRedTime ? "red" : t.stageRemainingTime <= t.stageAllRedTime + t.stageYellowTime ? "yellow" : "lime", a.fillText(
+      t.stageRemainingTime,
+      e.width / 2,
+      e.height / 2
+    );
+  }
+  async updatePhaseLine(e, t, a) {
+    const o = this.phaseLineLayer.source.filter(
+      (i) => i.getAttribute("id").includes(e)
+    );
+    o.forEach((i) => {
+      const s = i.getAttribute("id");
+      this.isLaneInChannels(s, t) ? i.setAttribute("color", "green") : this.isLaneInChannels(s, a) ? i.setAttribute("color", "red") : i.setAttribute("color", "green");
+    }), await this.phaseLineLayer.applyEdits({ updateFeatures: o });
+  }
+  /**
+   * 车道是否在通道中
+   * @param laneCode 车道编码
+   * @param channels 通道列表
+   * @returns
+   */
+  isLaneInChannels(e, t) {
+    const a = e.split("+"), o = a[1], i = a[2];
+    for (let s = 0; s < t.length; s++)
+      for (let n = 0; n < t[s].laneSnList.length; n++) {
+        const l = t[s].laneSnList[n].toFixed(0);
+        if (o === l[0] && i === l[1])
+          return !0;
+      }
+    return !1;
+  }
+  createCountdownCanvas(e) {
+    const t = new Image();
+    t.src = `${this.mapConfig.assetsRoot}/Images/timeboard/CountdownBG.png`, t.onload = () => {
+      const a = document.createElement("canvas");
+      a.width = this.canvasWidth, a.height = this.canvasHeight, a.style.position = "absolute", a.style.transform = "translate(-50%, -50%)", a.getContext("2d").drawImage(t, 0, 0, this.canvasWidth, this.canvasHeight), this.view.container.appendChild(a);
+      const i = document.createElement("canvas");
+      i.width = this.canvasWidth - 10, i.height = this.canvasHeight - 10, i.style.position = "absolute", i.style.transform = "translate(-50%, -50%)", this.view.container.appendChild(i), e([a, i]);
+    };
+  }
+}
+export {
+  f as default
+};

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

@@ -0,0 +1,69 @@
+import { EVehiclePlateState, ITraceRendererInterface, IVehicleTrack } from '../../../types';
+export default class TraceExternalRenderer implements ITraceRendererInterface {
+    private renderer;
+    private scene;
+    private camera;
+    private ambient;
+    private sun;
+    /** 默认车身材质 */
+    private defaultMaterial;
+    /** 车身颜色材质 */
+    private materialMap;
+    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 currentSpriteContent;
+    private historyPositionMap;
+    private vehicleObjectMap;
+    constructor(view: __esri.SceneView);
+    setup(context: any): Promise<void>;
+    render(context: any): Promise<void>;
+    /**
+     * 新增车辆
+     * */
+    addVehicles(objects: IVehicleTrack[]): void;
+    /**
+     * 更新车辆
+     * */
+    updateVehicles(objects: IVehicleTrack[]): void;
+    /**
+     * 删除车辆
+     * */
+    deleteVehicles(idList: string[]): void;
+    /**
+     * 清除全部车辆
+     * */
+    clearVehicles(): void;
+    /**
+     * 设置号牌显示状态
+     * @param contentType
+     * @returns
+     */
+    updatePanelContent(contentType: EVehiclePlateState): void;
+    /**
+     * 释放模型资源
+     * */
+    private disposeModel;
+    /**
+     * 计算车辆位置
+     * */
+    private computeVehiclePosition;
+    /**
+     * 根据车辆类型、车身颜色获取模型
+     * */
+    private getVehicleModel;
+    /**
+     * 创建号牌canvas
+     * */
+    private createCanvas;
+    private createPlateSprite;
+}

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

@@ -0,0 +1,316 @@
+import b from "@arcgis/core/geometry/SpatialReference";
+import * as g from "@arcgis/core/views/3d/externalRenderers";
+import * as o from "three";
+import { GLTFLoader as v } from "three/examples/jsm/loaders/GLTFLoader.js";
+import { EVehiclePlateState as M } from "../../../types/index.mjs";
+import w from "../../stores/index.mjs";
+class k {
+  constructor(i) {
+    this.defaultMaterial = new o.MeshBasicMaterial({
+      color: 6908265
+    }), this.materialMap = /* @__PURE__ */ new Map([
+      [1, new o.MeshBasicMaterial({ color: 16777215 })],
+      [2, new o.MeshBasicMaterial({ color: 7833753 })],
+      [3, new o.MeshBasicMaterial({ color: 16766720 })],
+      [4, new o.MeshBasicMaterial({ color: 16758465 })],
+      [5, new o.MeshBasicMaterial({ color: 14423100 })],
+      [6, new o.MeshBasicMaterial({ color: 3329330 })],
+      [7, new o.MeshBasicMaterial({ color: 2003183 })],
+      [8, new o.MeshBasicMaterial({ color: 16032864 })],
+      [9, new o.MeshBasicMaterial({ color: 2105376 })],
+      [10, new o.MeshBasicMaterial({ color: 9662683 })],
+      [99, new o.MeshBasicMaterial({ color: 6908265 })]
+    ]), this.carModelReady = !1, this.vanModelReady = !1, this.truckModelReady = !1, this.busModelReady = !1, this.bicycleModelReady = !1, this.currentSpriteContent = M.None, this.historyPositionMap = /* @__PURE__ */ new Map(), this.vehicleObjectMap = /* @__PURE__ */ new Map();
+    const e = w.useAppDataStore;
+    this.assetsRoot = JSON.parse(
+      JSON.stringify(e.mapConfig)
+    ).assetsRoot, this.view = i;
+    const t = new v();
+    t.load(`${this.assetsRoot}/3DModels/car.glb`, (s) => {
+      this.carModel = s.scene, this.carModel.rotation.x = o.MathUtils.degToRad(90), this.carModelReady = !0;
+    }), t.load(`${this.assetsRoot}/3DModels/van.glb`, (s) => {
+      this.vanModel = s.scene, this.vanModel.rotation.x = o.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 = o.MathUtils.degToRad(90), this.truckModelReady = !0;
+    }), t.load(`${this.assetsRoot}/3DModels/bus.glb`, (s) => {
+      this.busModel = s.scene, this.busModel.rotation.x = o.MathUtils.degToRad(90), this.busModelReady = !0;
+    }), t.load(`${this.assetsRoot}/3DModels/bicycle.glb`, (s) => {
+      this.bicycleModel = s.scene, this.bicycleModel.rotation.x = o.MathUtils.degToRad(90), this.bicycleModel.rotation.y = o.MathUtils.degToRad(180), this.bicycleModelReady = !0;
+    });
+  }
+  async setup(i) {
+    this.renderer = new o.WebGLRenderer({
+      context: i.gl,
+      premultipliedAlpha: !1,
+      antialias: !0
+    }), this.renderer.setPixelRatio(window.devicePixelRatio), this.renderer.setViewport(0, 0, this.view.width, this.view.height), this.renderer.autoClearDepth = !1, this.renderer.autoClearStencil = !1, this.renderer.autoClearColor = !1;
+    const e = this.renderer.setRenderTarget.bind(
+      this.renderer
+    );
+    this.renderer.setRenderTarget = (t) => {
+      e(t), t == null && i.bindRenderTarget();
+    }, this.scene = new o.Scene(), this.camera = new o.PerspectiveCamera(), this.ambient = new o.AmbientLight(16777215, 0.5), this.scene.add(this.ambient), this.sun = new o.DirectionalLight(16777215, 0.5), this.scene.add(this.sun), i.resetWebGLState();
+  }
+  async render(i) {
+    var s;
+    const e = i.camera;
+    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 o.Vector3(e.center[0], e.center[1], e.center[2])
+    ), this.camera.projectionMatrix.fromArray(e.projectionMatrix);
+    for (const r of this.vehicleObjectMap.keys()) {
+      const l = (s = this.vehicleObjectMap.get(r)) == null ? void 0 : s.model;
+      if (!l)
+        continue;
+      const a = this.computeVehiclePosition(r);
+      if (a) {
+        const c = [0, 0, 0];
+        g.toRenderCoordinates(
+          this.view,
+          a,
+          0,
+          b.WGS84,
+          c,
+          0,
+          1
+        ), l.position.set(c[0], c[1], c[2]), l.rotation.y = o.MathUtils.degToRad(-a[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 o.Color(
+      t.diffuse.color[0],
+      t.diffuse.color[1],
+      t.diffuse.color[2]
+    ), this.ambient.intensity = t.ambient.intensity, this.ambient.color = new o.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();
+  }
+  /**
+   * 新增车辆
+   * */
+  addVehicles(i) {
+    !this.carModelReady || !this.vanModelReady || !this.truckModelReady || !this.busModelReady || !this.bicycleModelReady || i.forEach((e) => {
+      const { crossId: t, ptcId: s, localTimestamp: r } = e, l = Number(e.x), a = Number(e.y), c = Number(e.heading), h = `${t}-${s}`;
+      this.historyPositionMap.set(h, [
+        { pos: [l, a, 0], heading: c, time: r }
+      ]);
+      const n = this.getVehicleModel(e);
+      n.name = h, n.visible = !1, this.createPlateSprite(e, (d) => {
+        n.add(d), d.position.set(0, 5, -4);
+      }), this.scene.add(n), this.vehicleObjectMap.set(h, {
+        model: n,
+        data: e
+      });
+    });
+  }
+  /**
+   * 更新车辆
+   * */
+  updateVehicles(i) {
+    !this.carModelReady || !this.vanModelReady || !this.truckModelReady || !this.busModelReady || !this.bicycleModelReady || i.forEach((e) => {
+      const { crossId: t, ptcId: s, localTimestamp: r } = e, l = Number(e.x), a = Number(e.y);
+      let c = Number(e.heading);
+      const h = `${t}-${s}`, n = this.vehicleObjectMap.get(h);
+      if (n) {
+        if ((n.data.vehicleColor !== e.vehicleColor || n.data.vehicleType !== e.vehicleType) && (this.scene.remove(n.model), this.disposeModel(n.model), n.model = this.getVehicleModel(e), this.scene.add(n.model)), n.data.showName !== e.showName || n.data.plateColor !== e.plateColor) {
+          const m = n.model.getObjectByName("VehiclePlate");
+          m && (n.model.remove(m), this.disposeModel(m)), this.createPlateSprite(e, (u) => {
+            n.model.add(u), u.position.set(0, 5, -4);
+          });
+        }
+        n.data = e;
+        const d = this.historyPositionMap.get(
+          h
+        ), p = d[d.length - 1];
+        Math.abs(c - p.heading) >= 180 && (c > p.heading ? p.heading += 360 : c += 360), d.push({
+          pos: [l, a, 0],
+          heading: c,
+          time: r
+        });
+      } else {
+        this.historyPositionMap.set(h, [
+          { pos: [l, a, 0], heading: c, time: r }
+        ]);
+        const d = this.getVehicleModel(e);
+        d.name = h, d.visible = !1, this.createPlateSprite(e, (p) => {
+          d.add(p), p.position.set(0, 5, -4);
+        }), this.scene.add(d), this.vehicleObjectMap.set(h, {
+          model: d,
+          data: e
+        });
+      }
+    });
+  }
+  /**
+   * 删除车辆
+   * */
+  deleteVehicles(i) {
+    i.forEach((e) => {
+      const t = this.vehicleObjectMap.get(e);
+      t && (this.disposeModel(t.model), this.scene.remove(t.model), this.vehicleObjectMap.delete(e), this.historyPositionMap.delete(e));
+    });
+  }
+  /**
+   * 清除全部车辆
+   * */
+  clearVehicles() {
+    for (const i of this.vehicleObjectMap.keys()) {
+      const e = this.vehicleObjectMap.get(i);
+      e && (this.disposeModel(e.model), this.scene.remove(e.model));
+    }
+    this.vehicleObjectMap.clear(), this.historyPositionMap.clear();
+  }
+  /**
+   * 设置号牌显示状态
+   * @param contentType
+   * @returns
+   */
+  updatePanelContent(i) {
+    if (i !== this.currentSpriteContent) {
+      this.currentSpriteContent = i;
+      for (const e of this.vehicleObjectMap.keys()) {
+        const t = this.vehicleObjectMap.get(e);
+        if (t) {
+          const s = t.model.getObjectByName("VehiclePlate");
+          s && (t.model.remove(s), this.disposeModel(s)), i !== M.None && this.createPlateSprite(t.data, (r) => {
+            t.model.add(r), r.position.set(0, 5, -4);
+          });
+        }
+      }
+    }
+  }
+  /**
+   * 释放模型资源
+   * */
+  disposeModel(i) {
+    i.traverse((e) => {
+      e instanceof o.Mesh && (e.geometry.dispose(), e.material.dispose());
+    });
+  }
+  /**
+   * 计算车辆位置
+   * */
+  computeVehiclePosition(i) {
+    const e = this.historyPositionMap.get(i), t = this.vehicleObjectMap.get(i);
+    if (!t || !e)
+      return [0, 0, 0, 0];
+    if (e.length === 0)
+      return [0, 0, 0, 0];
+    if (e.length <= 2)
+      return [...e[0].pos, e[0].heading];
+    const s = Date.now();
+    t.model.visible = !0, t.segmentStartTime || (t.segmentStartTime = s, t.segmentTotalTime = e[1].time - e[0].time);
+    const r = s - t.segmentStartTime, l = Math.min(
+      r / t.segmentTotalTime,
+      1
+    );
+    if (l === 1)
+      if (e.shift(), e.length === 1) {
+        t.segmentStartTime = void 0;
+        return;
+      } else
+        return t.segmentStartTime = s, t.segmentTotalTime = e[1].time - e[0].time, Math.abs(
+          e[1].heading - e[0].heading
+        ) >= 180 && (e[1].heading > e[0].heading ? e[0].heading += 360 : e[1].heading += 360), [...e[0].pos, e[0].heading];
+    else {
+      const a = e[0].pos[0] + (e[1].pos[0] - e[0].pos[0]) * l, c = e[0].pos[1] + (e[1].pos[1] - e[0].pos[1]) * l, h = e[0].heading + (e[1].heading - e[0].heading) * l;
+      return [a, c, 0, h];
+    }
+  }
+  /**
+   * 根据车辆类型、车身颜色获取模型
+   * */
+  getVehicleModel(i) {
+    let e;
+    if (i.ptcType === 2)
+      e = this.bicycleModel.clone();
+    else {
+      switch (i.vehicleType) {
+        case 10:
+          e = this.carModel.clone();
+          break;
+        case 20:
+          e = this.vanModel.clone();
+          break;
+        case 25:
+          e = this.truckModel.clone();
+          break;
+        case 50:
+          e = this.busModel.clone();
+          break;
+        default:
+          e = this.carModel.clone();
+          break;
+      }
+      const t = this.materialMap.get(i.vehicleColor) || this.defaultMaterial;
+      let s = !1;
+      e.traverse((r) => {
+        !s && r instanceof o.Mesh && (r.material = t, s = !0);
+      });
+    }
+    return e;
+  }
+  /**
+   * 创建号牌canvas
+   * */
+  createCanvas(i, e, t) {
+    const s = document.createElement("canvas"), r = i.width, l = i.height;
+    s.width = r, s.height = l;
+    const a = s.getContext("2d");
+    if (!a) {
+      console.log("canvas创建失败");
+      return;
+    }
+    return a.fillStyle = "rgba(0,0,0,0.0)", a.fillRect(0, 0, r, l), a.drawImage(i, 0, 0, r, l), a.beginPath(), a.translate(r / 2, l / 2), a.fillStyle = t, a.font = "bold 32px 宋体", a.textBaseline = "middle", a.textAlign = "center", a.fillText(e, 0, 0), s;
+  }
+  createPlateSprite(i, e) {
+    var c, h;
+    const t = !i.plateNo || i.plateNo === "0" || i.plateNo === "000000";
+    if (this.currentSpriteContent === M.None || this.currentSpriteContent === M.PlateNumber && t)
+      return;
+    const s = new Image();
+    let r = "", l = "", a = "";
+    if (this.currentSpriteContent === M.PlateNumber || this.currentSpriteContent === M.Mix)
+      if (t)
+        r = "grey", l = i.ptcId, a = "#ffffff";
+      else
+        switch (l = ((c = i.showName) == null ? void 0 : c.substring(0, 2)) + "•" + ((h = i.showName) == null ? void 0 : h.substring(2)), i.plateColor) {
+          case 1:
+            r = "blue", a = "#ffffff";
+            break;
+          case 2:
+            r = "yellow", a = "#000000";
+            break;
+          case 3:
+            r = "white", a = "#000000";
+            break;
+          case 4:
+            r = "black";
+            break;
+          case 5:
+            r = "neo_yellow", a = "#000000";
+            break;
+          case 6:
+            r = "neo_green", a = "#000000";
+            break;
+          default:
+            r = "grey", l = i.plateNo, a = "#ffffff";
+            break;
+        }
+    else
+      this.currentSpriteContent === M.Id && (r = "grey", l = i.ptcId, a = "#ffffff");
+    s.src = `${this.assetsRoot}/Images/PlateBG/${r}.png`, s.onload = () => {
+      const n = this.createCanvas(s, l, a);
+      if (!n)
+        return;
+      const d = new o.CanvasTexture(n), p = new o.SpriteMaterial({
+        map: d
+      }), f = new o.Sprite(p), m = 0.05, u = n.width * m, y = n.height * m;
+      f.scale.set(u, y, 1), f.name = "VehiclePlate", e(f);
+    };
+  }
+}
+export {
+  k as default
+};

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

@@ -0,0 +1,18 @@
+import { EVehiclePlateState } from '../../../types';
+export default class TraceHoloFlow {
+    private mapConfig;
+    private view;
+    private lastDataTime;
+    private readonly traceRenderer;
+    constructor(view: __esri.View);
+    /**
+     * 处理全息流轨迹数据
+     * */
+    handleVehicleTraceData(data: any): void;
+    /**
+     * 清除轨迹流
+     * */
+    clearTrace(): void;
+    updatePanelContent(contentType: EVehiclePlateState): void;
+    private buildVehicleTrackData;
+}

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

@@ -0,0 +1,75 @@
+import * as d from "@arcgis/core/views/3d/externalRenderers";
+import u from "../../stores/index.mjs";
+import T from "./trace-external-renderer.mjs";
+import f from "./trace-layer-renderer.mjs";
+class b {
+  constructor(e) {
+    this.lastDataTime = 0, this.view = e;
+    const c = u.useAppDataStore;
+    this.mapConfig = JSON.parse(JSON.stringify(c.mapConfig)), e.type === "3d" ? (this.traceRenderer = new T(e), d.add(
+      e,
+      this.traceRenderer
+    )) : this.traceRenderer = new f(e);
+  }
+  /**
+   * 处理全息流轨迹数据
+   * */
+  handleVehicleTraceData(e) {
+    const c = new Date().getTime();
+    if (c - this.lastDataTime < 100)
+      return;
+    this.lastDataTime = c;
+    const { newVehList: n, updateVehList: o, deleteVehList: i, crossId: s } = e, a = [], l = [];
+    if (n && n.length > 0) {
+      for (const t of n) {
+        const r = this.buildVehicleTrackData(t, s);
+        r && a.push(r);
+      }
+      this.traceRenderer.addVehicles(a);
+    }
+    if (o && o.length > 0) {
+      for (const t of o) {
+        const r = this.buildVehicleTrackData(t, s);
+        r && l.push(r);
+      }
+      this.traceRenderer.updateVehicles(l);
+    }
+    if (i && i.length > 0) {
+      const t = i.map(
+        (r) => s + "-" + r.ptcId
+      );
+      this.traceRenderer.deleteVehicles(t);
+    }
+  }
+  /**
+   * 清除轨迹流
+   * */
+  clearTrace() {
+    this.traceRenderer.clearVehicles();
+  }
+  updatePanelContent(e) {
+    this.traceRenderer.updatePanelContent(e);
+  }
+  buildVehicleTrackData(e, c) {
+    const p = e.longitude, n = e.latitude, o = e.ptcId, i = Number(e.ptcType), s = e.heading, a = Number(e.vehicleType), l = Number(e.vehicleColor), t = e.plateNo || e.plateno, r = Number(e.plateColor), h = e.timestamp, m = e.localTimestamp;
+    if (!(i < 0 || i > 8))
+      return {
+        ptcId: o,
+        crossId: c,
+        x: p,
+        y: n,
+        ptcType: i,
+        vehicleType: a,
+        heading: i === 2 ? -s : s,
+        vehicleColor: l,
+        showName: t && t !== "" && t !== "0" && t !== "000000" ? t : "",
+        plateNo: t,
+        plateColor: r,
+        timestamp: h,
+        localTimestamp: m
+      };
+  }
+}
+export {
+  b as default
+};