gisviewer-vue3-arcgis 1.0.109 → 1.0.110

package/es/src/gis-map/gis-map.vue.d.ts

@@ -27,7 +27,10 @@ declare const _sfc_main: import("vue").DefineComponent<{
     overlay: Overlay;
     queueLength: QueueLength;
     openDriveRenderer: OpenDriveRenderer;
+    showLogDiv: import("vue").Ref<boolean>;
     mapViewer: import("vue").ComputedRef<MapView | SceneView>;
+    startSaveTrackLog: () => void;
+    downloadTrackLog: () => void;
     setMapCenter: (params: ISetMapCenterParams) => Promise<import("../types").IResult>;
     setMapCamera: (params: ISetMapCameraParams) => Promise<import("../types").IResult>;
     lookAt: (params: ILookAtParams) => Promise<void>;

package/es/src/gis-map/gis-map.vue.mjs

@@ -1,122 +1,141 @@
-import { defineComponent as ae, ref as ne, onMounted as oe, getCurrentInstance as re, computed as se, openBlock as ce, createElementBlock as ie, createElementVNode as le } from "vue";
-import me, { registerStore as pe } from "./stores/index.mjs";
+import { defineComponent as ie, ref as h, onMounted as le, getCurrentInstance as pe, computed as me, openBlock as ue, createElementBlock as de, createElementVNode as m, withDirectives as fe, vShow as ge } from "vue";
+import C, { registerStore as we } from "./stores/index.mjs";
 import "./style/index.css";
-import ue from "./utils/holo-flow/index.mjs";
-import fe from "./utils/map-initializer.mjs";
-import ge from "./utils/open-drive-renderer/index.mjs";
-import de from "./utils/overlay.mjs";
-import we from "./utils/queue-length.mjs";
-import y from "./utils/road-config-tool/index.mjs";
-import ye from "./utils/traffic-flow.mjs";
-const Ce = { class: "gis-viewer" }, Se = /* @__PURE__ */ ae({
+import ve from "./utils/holo-flow/index.mjs";
+import ye from "./utils/map-initializer.mjs";
+import he from "./utils/open-drive-renderer/index.mjs";
+import Ce from "./utils/overlay.mjs";
+import ke from "./utils/queue-length.mjs";
+import k from "./utils/road-config-tool/index.mjs";
+import Te from "./utils/traffic-flow.mjs";
+const Oe = { class: "gis-viewer" }, Le = { style: { position: "absolute", bottom: "10px", left: "10px" } }, Be = /* @__PURE__ */ ie({
   __name: "gis-map",
   props: {
     config: {},
     assetsRoot: {}
   },
   emits: ["mapLoaded", "markerClick", "mapClick"],
-  setup(C, { expose: h, emit: v }) {
-    const m = ne(null);
-    let r, s, a, n, o, t, i, l;
-    pe(), oe(async () => {
-      if (!m.value)
+  setup(T, { expose: O, emit: L }) {
+    const u = h(null);
+    let r, s, o, a, n, t, i, l;
+    const d = h(!1);
+    we(), le(async () => {
+      if (!u.value)
         return;
-      const e = re(), { $gisviewerAssetsRoot: c } = e.appContext.config.globalProperties, w = await (await fetch(d.config)).json();
-      w.assetsRoot = d.assetsRoot || c;
-      const ee = me.useAppDataStore;
-      ee.mapConfig = w, s = new fe(), r = await s.initialize({
-        container: m.value,
-        markerClickCallback: (u, f, g, te) => {
-          p("markerClick", u, f, g, te);
+      document.addEventListener("keydown", (p) => {
+        p.ctrlKey && p.key === "i" && (d.value = !d.value);
+      });
+      const e = pe(), { $gisviewerAssetsRoot: c } = e.appContext.config.globalProperties, y = await (await fetch(v.config)).json();
+      y.assetsRoot = v.assetsRoot || c;
+      const se = C.useAppDataStore;
+      se.mapConfig = y, s = new ye(), r = await s.initialize({
+        container: u.value,
+        markerClickCallback: (p, g, w, ce) => {
+          f("markerClick", p, g, w, ce);
         },
-        mapClickCallback: (u, f, g) => {
-          p("mapClick", u, f, g);
+        mapClickCallback: (p, g, w) => {
+          f("mapClick", p, g, w);
         }
-      }), o = new ue(r), await o.init(), p("mapLoaded");
+      }), n = new ve(r), await n.init(), f("mapLoaded");
     });
-    const O = se(() => r), T = async (e) => await s.setMapCenter(e), k = async (e) => await s.setMapCamera(e), I = async (e) => await s.lookAt(e), b = (e) => s.setLayerVisibility(e), A = (e, c) => s.requestCoordinateTransform(e, c), L = (e) => {
+    const b = me(() => r), I = () => {
+      const e = C.useAppDataStore;
+      e.saveTrackLog = !0;
+    }, D = () => {
+      n.downloadTrackLog();
+    }, A = async (e) => await s.setMapCenter(e), S = async (e) => await s.setMapCamera(e), _ = async (e) => await s.lookAt(e), x = (e) => s.setLayerVisibility(e), M = (e, c) => s.requestCoordinateTransform(e, c), R = (e) => {
       s.cancelCoordinateTransform(e);
-    }, D = (e) => {
+    }, V = (e) => {
       s.setMapZoomRange(e);
-    }, S = (e) => (a || (a = new y(r)), a.showLaneNumber(e)), _ = () => {
-      a == null || a.clearLaneNumber();
-    }, M = async (e) => (a || (a = new y(r)), await a.initializeSearch(e)), R = async () => a == null ? void 0 : a.calCrossIndicatorArea(), V = async () => {
-    }, x = async (e, c) => {
-      n || (n = new ye(r)), n.connectTrafficFlow(e, c);
-    }, B = () => {
-      n == null || n.disconnectTrafficFlow();
-    }, H = (e) => {
-      o.handleVehicleTraceData(e);
-    }, z = () => {
-      o.clearHoloTrace();
-    }, N = (e) => {
-      o.setInterpolate(e);
-    }, Q = async (e) => {
-      await o.handleSignalData(e);
-    }, j = () => {
-      o.clearHoloSignal();
-    }, P = (e) => {
-      n == null || n.toggleTrafficInfo(e), o.toggleTrafficInfo(e);
+    }, B = (e) => (o || (o = new k(r)), o.showLaneNumber(e)), H = () => {
+      o == null || o.clearLaneNumber();
+    }, z = async (e) => (o || (o = new k(r)), await o.initializeSearch(e)), N = async () => o == null ? void 0 : o.calCrossIndicatorArea(), Q = async () => {
+    }, j = async (e, c) => {
+      a || (a = new Te(r)), a.connectTrafficFlow(e, c);
+    }, P = () => {
+      a == null || a.disconnectTrafficFlow();
     }, E = (e) => {
-      o.togglePause(e);
-    }, Z = (e) => {
-      n == null || n.toggleTrafficObject(e), o.toggleTrafficObject(e);
+      n.handleVehicleTraceData(e);
+    }, Z = () => {
+      n.clearHoloTrace();
     }, q = (e) => {
-      o.updatePanelContent(e);
-    }, F = async (e) => (t || (t = new de(r)), t.addOverlays(e)), $ = (e) => t == null ? void 0 : t.removeOverlaysByType(e), G = (e) => t == null ? void 0 : t.removeOverlaysById(e), J = () => t == null ? void 0 : t.removeAllOverlays(), K = () => {
-      t == null || t.showAllOverlays();
+      n.setInterpolate(e);
+    }, F = async (e) => {
+      await n.handleSignalData(e);
+    }, K = () => {
+      n.clearHoloSignal();
+    }, $ = (e) => {
+      a == null || a.toggleTrafficInfo(e), n.toggleTrafficInfo(e);
+    }, G = (e) => {
+      n.togglePause(e);
+    }, J = (e) => {
+      a == null || a.toggleTrafficObject(e), n.toggleTrafficObject(e);
     }, U = (e) => {
-      i || (i = new we(r)), i.updateQueueLength(e);
-    }, W = () => {
+      n.updatePanelContent(e);
+    }, W = async (e) => (t || (t = new Ce(r)), t.addOverlays(e)), X = (e) => t == null ? void 0 : t.removeOverlaysByType(e), Y = (e) => t == null ? void 0 : t.removeOverlaysById(e), ee = () => t == null ? void 0 : t.removeAllOverlays(), te = () => {
+      t == null || t.showAllOverlays();
+    }, oe = (e) => {
+      i || (i = new ke(r)), i.updateQueueLength(e);
+    }, ae = () => {
       i == null || i.removeQueueLength();
-    }, X = async (e, c) => {
-      l || (l = new ge(r)), await l.showOpenDrive(e, c);
-    }, Y = async () => {
+    }, ne = async (e, c) => {
+      l || (l = new he(r)), await l.showOpenDrive(e, c);
+    }, re = async () => {
       await (l == null ? void 0 : l.hideOpenDrive());
-    }, d = C, p = v;
-    return h({
-      mapViewer: O,
-      setLayerVisibility: b,
-      setMapCenter: T,
-      lookAt: I,
-      setMapCamera: k,
-      setMapZoomRange: D,
-      requestCoordinateTransform: A,
-      cancelCoordinateTransform: L,
-      addOverlays: F,
-      showAllOverlays: K,
-      removeOverlaysByType: $,
-      removeOverlaysById: G,
-      removeAllOverlays: J,
-      showLaneNumber: S,
-      clearLaneNumber: _,
-      initializeAreaTool: M,
-      calCrossIndicatorArea: R,
-      calRoadIndicatorArea: V,
-      connectCarFlow: x,
-      disconnectCarFlow: B,
-      handleHoloVehicleTraceData: H,
-      clearHoloTrace: z,
-      handleHoloSignalData: Q,
-      clearHoloSignal: j,
-      setInterpolate: N,
-      toggleTrafficInfo: P,
-      toggleTrafficObject: Z,
-      toggleVehicleInfo: q,
-      togglePause: E,
-      updateQueueLength: U,
-      removeQueueLength: W,
-      showOpenDrive: X,
-      hideOpenDrive: Y
-    }), (e, c) => (ce(), ie("div", Ce, [
-      le("div", {
+    }, v = T, f = L;
+    return O({
+      mapViewer: b,
+      setLayerVisibility: x,
+      setMapCenter: A,
+      lookAt: _,
+      setMapCamera: S,
+      setMapZoomRange: V,
+      requestCoordinateTransform: M,
+      cancelCoordinateTransform: R,
+      addOverlays: W,
+      showAllOverlays: te,
+      removeOverlaysByType: X,
+      removeOverlaysById: Y,
+      removeAllOverlays: ee,
+      showLaneNumber: B,
+      clearLaneNumber: H,
+      initializeAreaTool: z,
+      calCrossIndicatorArea: N,
+      calRoadIndicatorArea: Q,
+      connectCarFlow: j,
+      disconnectCarFlow: P,
+      handleHoloVehicleTraceData: E,
+      clearHoloTrace: Z,
+      handleHoloSignalData: F,
+      clearHoloSignal: K,
+      setInterpolate: q,
+      toggleTrafficInfo: $,
+      toggleTrafficObject: J,
+      toggleVehicleInfo: U,
+      togglePause: G,
+      updateQueueLength: oe,
+      removeQueueLength: ae,
+      showOpenDrive: ne,
+      hideOpenDrive: re
+    }), (e, c) => (ue(), de("div", Oe, [
+      m("div", {
         class: "gis-viewer-main",
         ref_key: "mapContainer",
-        ref: m
-      }, null, 512)
+        ref: u
+      }, [
+        fe(m("div", Le, [
+          m("button", {
+            style: { "margin-right": "10px" },
+            onClick: I
+          }, " 开始记录 "),
+          m("button", { onClick: D }, "下载日志")
+        ], 512), [
+          [ge, d.value]
+        ])
+      ], 512)
     ]));
   }
 });
 export {
-  Se as default
+  Be as default
 };

package/es/src/gis-map/index.d.ts

@@ -17,7 +17,10 @@ export declare const GisMap: import("@easyest/utils/dist/lib/withinstall").SFCWi
     overlay: import("./utils/overlay").default;
     queueLength: import("./utils/queue-length").default;
     openDriveRenderer: import("./utils/open-drive-renderer").default;
+    showLogDiv: import("vue").Ref<boolean>;
     mapViewer: import("vue").ComputedRef<__esri.MapView | __esri.SceneView>;
+    startSaveTrackLog: () => void;
+    downloadTrackLog: () => void;
     setMapCenter: (params: import("../types").ISetMapCenterParams) => Promise<import("../types").IResult>;
     setMapCamera: (params: import("../types").ISetMapCameraParams) => Promise<import("../types").IResult>;
     lookAt: (params: import("../types").ILookAtParams) => Promise<void>;

package/es/src/gis-map/stores/appData.d.ts

@@ -1,3 +1,4 @@
 export declare const useAppDataStore: import("pinia").StoreDefinition<"appData", {
     mapConfig: {};
+    saveTrackLog: boolean;
 }, {}, {}>;

package/es/src/gis-map/stores/appData.mjs

@@ -1,9 +1,10 @@
-import { defineStore as t } from "pinia";
-const e = t("appData", {
+import { defineStore as a } from "pinia";
+const t = a("appData", {
   state: () => ({
-    mapConfig: {}
+    mapConfig: {},
+    saveTrackLog: !1
   })
 });
 export {
-  e as useAppDataStore
+  t as useAppDataStore
 };

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

@@ -18,4 +18,5 @@ export default class Index {
     handleSignalData(data: any): Promise<void>;
     clearHoloSignal(): void;
     setInterpolate(enable: boolean): void;
+    downloadTrackLog(): void;
 }

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

@@ -63,6 +63,9 @@ class n {
   setInterpolate(e) {
     this.traceHoloFlow.setInterpolate(e);
   }
+  downloadTrackLog() {
+    this.traceHoloFlow.downloadLog();
+  }
 }
 export {
   n as default

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

@@ -1,16 +1,14 @@
 import { EVehiclePlateState, IToggleTrafficInfoParams } from '../../../types';
 export default class TraceHoloFlow {
-    private mapConfig;
-    private view;
-    private lastDataTime;
     private readonly traceRenderer;
     constructor(view: __esri.View);
     init(): Promise<void>;
+    private appDataStore;
+    private logTable;
+    downloadLog(): void;
     /**
      * 处理全息流轨迹数据
      * */
-    private lastLocalTimestamp;
-    private lastDataTimestamp;
     handleVehicleTraceData(data: any): Promise<void>;
     /**
      * 切换交通信息可见性

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

@@ -1,49 +1,96 @@
-import * as d from "@arcgis/core/views/3d/externalRenderers";
-import T from "../../stores/index.mjs";
+import * as u from "@arcgis/core/views/3d/externalRenderers";
+import m from "../../stores/index.mjs";
 import g from "./trace-renderer-external.mjs";
-import u from "./trace-renderer-layer.mjs";
-class L {
+import T from "./trace-renderer-layer.mjs";
+class v {
   constructor(e) {
-    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(
+    this.appDataStore = m.useAppDataStore, this.logTable = [
+      [
+        "uuid",
+        "ptcId",
+        "plateno",
+        "timestamp",
+        "localTimestamp",
+        "timestamp_str",
+        "speed",
+        "laneNo",
+        "objHeight",
+        "objLength",
+        "latitude",
+        "longitude",
+        "ptcType",
+        "vehicleType",
+        "vehicleColor",
+        "plateColor",
+        "sbdm",
+        "heading",
+        "fixAngle",
+        "roadLayer",
+        "status",
+        "step"
+      ]
+    ], e.type === "3d" ? (this.traceRenderer = new g(e), u.add(
       e,
       this.traceRenderer
-    )) : this.traceRenderer = new u(e);
+    )) : this.traceRenderer = new T(e);
   }
   async init() {
     await this.traceRenderer.init();
   }
+  downloadLog() {
+    const e = this.logTable.map((c) => c.join(",")).join(`
+`).replace(/null/g, ""), a = new Blob([e], { type: "text/csv;charset=utf-8;" }), l = URL.createObjectURL(a), r = document.createElement("a");
+    r.setAttribute("href", l), r.setAttribute("download", "trace-log.csv"), r.style.visibility = "hidden", document.body.appendChild(r), r.click(), document.body.removeChild(r);
+  }
+  /**
+   * 处理全息流轨迹数据
+   * */
   async handleVehicleTraceData(e) {
-    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);
+    console.log(this.appDataStore.saveTrackLog);
+    const { newVehList: a, updateVehList: l, deleteVehList: r, jgsj: c } = e, i = e.crossId || "", n = [], s = [];
+    if (a && a.length > 0) {
+      for (const t of a) {
+        t.localTimestamp || (t.localTimestamp = c || Date.now());
+        const o = this.buildVehicleTrackData(t, i);
+        this.logTable.push([
+          t.uuid,
+          t.ptcId,
+          t.plateno,
+          t.timestamp,
+          t.localTimestamp,
+          t.timestamp_str,
+          t.speed,
+          t.laneNo,
+          t.objHeight,
+          t.objLength,
+          t.latitude,
+          t.longitude,
+          t.ptcType,
+          t.vehicleType,
+          t.vehicleColor,
+          t.plateColor,
+          t.sbdm,
+          t.heading,
+          t.fixAngle,
+          t.roadLayer,
+          t.status,
+          t.step
+        ]), o && n.push(o);
       }
-      await this.traceRenderer.addVehicles(l);
+      await this.traceRenderer.addVehicles(n);
     }
-    if (o && o.length > 0) {
-      for (const p of o) {
-        const h = this.buildVehicleTrackData(p, i);
-        h && s.push(h);
+    if (l && l.length > 0) {
+      for (const t of l) {
+        const o = this.buildVehicleTrackData(t, i);
+        o && s.push(o);
       }
-      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);
+      await this.traceRenderer.updateVehicles(s);
     }
-    if (c && c.length > 0) {
-      const a = c.map(
-        (t) => i + "-" + (t.ptcId || t.vehno || t.vehNo)
+    if (r && r.length > 0) {
+      const t = r.map(
+        (o) => i + "-" + (o.ptcId || o.vehno || o.vehNo)
       );
-      this.traceRenderer.deleteVehicles(a);
+      this.traceRenderer.deleteVehicles(t);
     }
   }
   /**
@@ -77,28 +124,28 @@ class L {
   setInterpolate(e) {
     this.traceRenderer.setInterpolate(e);
   }
-  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";
+  buildVehicleTrackData(e, a) {
+    const l = e.longitude, r = e.latitude, c = e.ptcId, i = Number(e.ptcType), n = e.heading, s = Number(e.vehicleType), t = Number(e.vehicleColor), o = e.plateNo || e.plateno, d = Number(e.plateColor), h = e.timestamp, p = e.roadLayer ? String(e.roadLayer) : "1";
     if (!(i < 0 || i > 8))
       return {
-        ptcId: n,
-        crossId: r,
-        vehicleId: r + "-" + n,
-        x: o,
-        y: c,
+        ptcId: c,
+        crossId: a,
+        vehicleId: a + "-" + c,
+        x: l,
+        y: r,
         ptcType: i,
         vehicleType: s,
-        heading: i === 2 ? -l : l,
-        vehicleColor: a,
-        showName: t && t !== "" && t !== "0" && t !== "000000" ? t : "",
-        plateNo: t,
-        plateColor: p,
+        heading: i === 2 ? -n : n,
+        vehicleColor: t,
+        showName: o && o !== "" && o !== "0" && o !== "000000" ? o : "",
+        plateNo: o,
+        plateColor: d,
         timestamp: h,
         localTimestamp: Date.now(),
-        roadLayer: m
+        roadLayer: p
       };
   }
 }
 export {
-  L as default
+  v as default
 };

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

@@ -2,13 +2,13 @@ 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 * as l from "three";
 import { GLTFLoader as y } from "three/examples/jsm/loaders/GLTFLoader.js";
 import { EVehiclePlateState as d } from "../../../types/index.mjs";
 import G from "../../stores/index.mjs";
 class I {
   constructor(i) {
-    this.cameraHeightThreshold = 1e3, this.roughness = 0.2, this.metalness = 0.8, this.defaultMaterial = new n.MeshPhongMaterial({
+    this.cameraHeightThreshold = 1e3, this.roughness = 0.2, this.metalness = 0.8, this.defaultMaterial = new l.MeshPhongMaterial({
       color: 16777215
     }), this.materialMap = /* @__PURE__ */ new Map([
       [1, this.createCarMaterial(16777215)],
@@ -26,13 +26,7 @@ class I {
     const e = G.useAppDataStore;
     this.assetsRoot = JSON.parse(
       JSON.stringify(e.mapConfig)
-    ).assetsRoot, this.view = i, document.addEventListener(
-      "visibilitychange",
-      () => {
-        this.clearVehicles(), this.needInterpolate = !document.hidden;
-      },
-      !1
-    ), b.watch(
+    ).assetsRoot, this.view = i, b.watch(
       () => this.view.camera.position.z,
       (t, s) => {
         (s <= this.cameraHeightThreshold && t > this.cameraHeightThreshold || s > this.cameraHeightThreshold && t <= this.cameraHeightThreshold) && (this.updateModel = !0);
@@ -40,7 +34,7 @@ class I {
     );
   }
   createCarMaterial(i) {
-    return new n.MeshPhongMaterial({
+    return new l.MeshPhongMaterial({
       color: i
       // // emissive: 0xc3c3c3,
       // roughness: this.roughness,
@@ -52,27 +46,27 @@ class I {
     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();
+          this.carModel = t.scene, this.carModel.rotation.x = l.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();
+          this.vanModel = t.scene, this.vanModel.rotation.x = l.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();
+          this.truckModel = t.scene, this.truckModel.scale.set(1.2, 1, 1.5), this.truckModel.rotation.x = l.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();
+          this.busModel = t.scene, this.busModel.rotation.x = l.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();
+          this.bicycleModel = t.scene, this.bicycleModel.rotation.x = l.MathUtils.degToRad(90), this.bicycleModel.rotation.y = l.MathUtils.degToRad(180), e();
         });
       }),
       new Promise((e) => {
@@ -116,7 +110,7 @@ class I {
     this.clearVehicles(), this.needInterpolate = i;
   }
   async setup(i) {
-    this.context = i, this.renderer = new n.WebGLRenderer({
+    this.context = i, this.renderer = new l.WebGLRenderer({
       context: i.gl,
       premultipliedAlpha: !0,
       logarithmicDepthBuffer: !0,
@@ -128,37 +122,37 @@ class I {
     );
     this.renderer.setRenderTarget = (s) => {
       e(s), s == null && i.bindRenderTarget();
-    }, this.scene = new n.Scene();
+    }, this.scene = new l.Scene();
     const { camera: t } = i;
-    this.camera = new n.PerspectiveCamera(
+    this.camera = new l.PerspectiveCamera(
       t.fovY,
       t.aspect,
       0.1,
       1e5
-    ), 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();
+    ), this.ambient = new l.AmbientLight(16777215, 2), this.scene.add(this.ambient), this.sun = new l.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 n.Vector3(e.center[0], e.center[1], e.center[2])
+      new l.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 l = (s = this.vehicleObjectMap.get(a)) == null ? void 0 : s.model;
-        if (!l)
+        const n = (s = this.vehicleObjectMap.get(a)) == null ? void 0 : s.model;
+        if (!n)
           continue;
         const o = this.computeVehiclePosition(a);
         if (o) {
           const h = this.toRenderCoordinates(o);
-          l.position.set(h[0], h[1], h[2]), l.rotation.y = n.MathUtils.degToRad(-o[3]);
+          n.position.set(h[0], h[1], h[2]), n.rotation.y = l.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 n.Color(
+    this.sun.position.set(t.direction[0], t.direction[1], t.direction[2]), this.sun.intensity = t.diffuse.intensity, this.sun.color = new l.Color(
       t.diffuse.color[0],
       t.diffuse.color[1],
       t.diffuse.color[2]
-    ), this.ambient.intensity = t.ambient.intensity, this.ambient.color = new n.Color(
+    ), this.ambient.intensity = t.ambient.intensity, this.ambient.color = new l.Color(
       t.ambient.color[0],
       t.ambient.color[1],
       t.ambient.color[2]
@@ -170,9 +164,9 @@ class I {
   async addVehicles(i) {
     if (!(this.isPaused || !this.isInitialized))
       for (const e of i) {
-        const { vehicleId: t, localTimestamp: s } = e, a = Number(e.x), l = Number(e.y), o = Number(e.heading);
+        const { vehicleId: t, localTimestamp: s } = e, a = Number(e.x), n = Number(e.y), o = Number(e.heading);
         this.historyPositionMap.set(t, [
-          { pos: [a, l, 0], heading: o, time: s }
+          { pos: [a, n, 0], heading: o, time: s }
         ]);
         const h = this.getVehicleModel(e);
         h.name = t, h.visible = !this.needInterpolate;
@@ -198,7 +192,7 @@ class I {
       return;
     const e = [];
     for (const t of i) {
-      const { vehicleId: s, timestamp: a } = t, l = Number(t.x), o = Number(t.y);
+      const { vehicleId: s, timestamp: a } = t, n = Number(t.x), o = Number(t.y);
       let h = Number(t.heading);
       const r = this.vehicleObjectMap.get(s), m = this.historyPositionMap.get(
         s
@@ -220,16 +214,16 @@ class I {
         if (r.data = t, this.needInterpolate) {
           const c = m[m.length - 1];
           Math.abs(h - c.heading) >= 180 && (h > c.heading ? c.heading += 360 : h += 360), m.push({
-            pos: [l, o, 0],
+            pos: [n, o, 0],
             heading: h,
             time: a
           });
         } else {
           this.historyPositionMap.set(s, [
-            { pos: [l, o, 0], heading: h, time: a }
+            { pos: [n, o, 0], heading: h, time: a }
           ]);
-          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);
+          const c = this.toRenderCoordinates([n, o, 0]);
+          r.model.position.set(c[0], c[1], c[2]), r.model.rotation.y = l.MathUtils.degToRad(-h);
         }
       }
     }
@@ -311,7 +305,7 @@ class I {
    * */
   disposeModel(i) {
     i.traverse((e) => {
-      e instanceof n.Mesh && (e.geometry.dispose(), e.material.dispose());
+      e instanceof l.Mesh && (e.geometry.dispose(), e.material.dispose());
     });
   }
   /**
@@ -323,18 +317,18 @@ class I {
       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, l = Math.min(
+    const a = s - t.segmentStartTime, n = Math.min(
       a / t.segmentTotalTime,
       1
     );
-    if (l === 1)
+    if (n === 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 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;
+      const o = e[0].pos[0] + (e[1].pos[0] - e[0].pos[0]) * n, h = e[0].pos[1] + (e[1].pos[1] - e[0].pos[1]) * n, r = e[0].heading + (e[1].heading - e[0].heading) * n;
       return [o, h, 0, r];
     } else
       return;
@@ -344,13 +338,13 @@ class I {
    * */
   getVehicleModel(i) {
     if (this.view.camera.position.z >= this.cameraHeightThreshold) {
-      const e = new n.SphereGeometry(5, 32, 32), t = new n.MeshPhysicalMaterial({
+      const e = new l.SphereGeometry(5, 32, 32), t = new l.MeshPhysicalMaterial({
         color: 325253,
         emissive: 0,
         roughness: this.roughness,
         metalness: this.metalness
       });
-      return new n.Mesh(e, t);
+      return new l.Mesh(e, t);
     } else {
       let e;
       if (i.ptcType === 2)
@@ -376,7 +370,7 @@ class I {
         const t = this.materialMap.get(i.vehicleColor) || this.defaultMaterial;
         let s = !1;
         e.traverse((a) => {
-          !s && a instanceof n.Mesh && (a.material = t, s = !0);
+          !s && a instanceof l.Mesh && (a.material = t, s = !0);
         });
       }
       return e;
@@ -386,14 +380,14 @@ class I {
    * 创建号牌canvas
    * */
   createCanvas(i, e, t) {
-    const s = document.createElement("canvas"), a = i.width, l = i.height;
-    s.width = a, s.height = l;
+    const s = document.createElement("canvas"), a = i.width, n = i.height;
+    s.width = a, s.height = n;
     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, 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;
+    return o.fillStyle = "rgba(0,0,0,0.0)", o.fillRect(0, 0, a, n), o.drawImage(i, 0, 0, a, n), o.beginPath(), o.translate(a / 2, n / 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) => {
@@ -403,12 +397,12 @@ class I {
         e(void 0);
         return;
       }
-      let a = new Image(), l = "", o = "";
+      let a = new Image(), n = "", o = "";
       if (this.currentSpriteContent === d.PlateNumber || this.currentSpriteContent === d.Mix)
         if (s)
-          a = this.greyPlateBG, l = i.ptcId, o = "#ffffff";
+          a = this.greyPlateBG, n = i.ptcId, o = "#ffffff";
         else
-          switch (l = ((r = i.showName) == null ? void 0 : r.substring(0, 2)) + "•" + ((m = i.showName) == null ? void 0 : m.substring(2)), i.plateColor) {
+          switch (n = ((r = i.showName) == null ? void 0 : r.substring(0, 2)) + "•" + ((m = i.showName) == null ? void 0 : m.substring(2)), i.plateColor) {
             case 1:
               a = this.bluePlateBG, o = "#ffffff";
               break;
@@ -428,17 +422,17 @@ class I {
               a = this.neoGreenPlateBG, o = "#000000";
               break;
             default:
-              a = this.greyPlateBG, l = i.plateNo, o = "#ffffff";
+              a = this.greyPlateBG, n = i.plateNo, o = "#ffffff";
               break;
           }
       else
-        this.currentSpriteContent === d.Id && (a = this.greyPlateBG, l = i.ptcId, o = "#ffffff");
-      const h = this.createCanvas(a, l, o);
+        this.currentSpriteContent === d.Id && (a = this.greyPlateBG, n = i.ptcId, o = "#ffffff");
+      const h = this.createCanvas(a, n, o);
       if (h) {
-        const c = new n.CanvasTexture(h), p = new n.SpriteMaterial({
+        const c = new l.CanvasTexture(h), p = new l.SpriteMaterial({
           map: c,
           transparent: !1
-        }), g = new n.Sprite(p), f = 0.05, M = h.width * f, w = h.height * f;
+        }), g = new l.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创建失败");

package/lib/src/gis-map/gis-map.vue.d.ts

@@ -27,7 +27,10 @@ declare const _sfc_main: import("vue").DefineComponent<{
     overlay: Overlay;
     queueLength: QueueLength;
     openDriveRenderer: OpenDriveRenderer;
+    showLogDiv: import("vue").Ref<boolean>;
     mapViewer: import("vue").ComputedRef<MapView | SceneView>;
+    startSaveTrackLog: () => void;
+    downloadTrackLog: () => void;
     setMapCenter: (params: ISetMapCenterParams) => Promise<import("../types").IResult>;
     setMapCamera: (params: ISetMapCameraParams) => Promise<import("../types").IResult>;
     lookAt: (params: ILookAtParams) => Promise<void>;

package/lib/src/gis-map/gis-map.vue.js

@@ -1 +1 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const i=require("vue"),v=require("./stores/index.js");require("./style/index.css");const oe=require("./utils/holo-flow/index.js"),re=require("./utils/map-initializer.js"),se=require("./utils/open-drive-renderer/index.js"),ce=require("./utils/overlay.js"),ie=require("./utils/queue-length.js"),C=require("./utils/road-config-tool/index.js"),le=require("./utils/traffic-flow.js"),ue={class:"gis-viewer"},de=i.defineComponent({__name:"gis-map",props:{config:{},assetsRoot:{}},emits:["mapLoaded","markerClick","mapClick"],setup(h,{expose:O,emit:T}){const d=i.ref(null);let r,s,a,n,o,t,l,u;v.registerStore(),i.onMounted(async()=>{if(!d.value)return;const e=i.getCurrentInstance(),{$gisviewerAssetsRoot:c}=e.appContext.config.globalProperties,y=await(await fetch(w.config)).json();y.assetsRoot=w.assetsRoot||c;const ae=v.default.useAppDataStore;ae.mapConfig=y,s=new re.default,r=await s.initialize({container:d.value,markerClickCallback:(p,f,g,ne)=>{m("markerClick",p,f,g,ne)},mapClickCallback:(p,f,g)=>{m("mapClick",p,f,g)}}),o=new oe.default(r),await o.init(),m("mapLoaded")});const k=i.computed(()=>r),b=async e=>await s.setMapCenter(e),I=async e=>await s.setMapCamera(e),q=async e=>await s.lookAt(e),A=e=>s.setLayerVisibility(e),L=(e,c)=>s.requestCoordinateTransform(e,c),_=e=>{s.cancelCoordinateTransform(e)},S=e=>{s.setMapZoomRange(e)},D=e=>(a||(a=new C.default(r)),a.showLaneNumber(e)),M=()=>{a==null||a.clearLaneNumber()},x=async e=>(a||(a=new C.default(r)),await a.initializeSearch(e)),V=async()=>a==null?void 0:a.calCrossIndicatorArea(),B=async()=>{},H=async(e,c)=>{n||(n=new le.default(r)),n.connectTrafficFlow(e,c)},R=()=>{n==null||n.disconnectTrafficFlow()},j=e=>{o.handleVehicleTraceData(e)},z=()=>{o.clearHoloTrace()},N=e=>{o.setInterpolate(e)},P=async e=>{await o.handleSignalData(e)},Q=()=>{o.clearHoloSignal()},E=e=>{n==null||n.toggleTrafficInfo(e),o.toggleTrafficInfo(e)},Z=e=>{o.togglePause(e)},F=e=>{n==null||n.toggleTrafficObject(e),o.toggleTrafficObject(e)},G=e=>{o.updatePanelContent(e)},J=async e=>(t||(t=new ce.default(r)),t.addOverlays(e)),K=e=>t==null?void 0:t.removeOverlaysByType(e),U=e=>t==null?void 0:t.removeOverlaysById(e),W=()=>t==null?void 0:t.removeAllOverlays(),X=()=>{t==null||t.showAllOverlays()},Y=e=>{l||(l=new ie.default(r)),l.updateQueueLength(e)},$=()=>{l==null||l.removeQueueLength()},ee=async(e,c)=>{u||(u=new se.default(r)),await u.showOpenDrive(e,c)},te=async()=>{await(u==null?void 0:u.hideOpenDrive())},w=h,m=T;return O({mapViewer:k,setLayerVisibility:A,setMapCenter:b,lookAt:q,setMapCamera:I,setMapZoomRange:S,requestCoordinateTransform:L,cancelCoordinateTransform:_,addOverlays:J,showAllOverlays:X,removeOverlaysByType:K,removeOverlaysById:U,removeAllOverlays:W,showLaneNumber:D,clearLaneNumber:M,initializeAreaTool:x,calCrossIndicatorArea:V,calRoadIndicatorArea:B,connectCarFlow:H,disconnectCarFlow:R,handleHoloVehicleTraceData:j,clearHoloTrace:z,handleHoloSignalData:P,clearHoloSignal:Q,setInterpolate:N,toggleTrafficInfo:E,toggleTrafficObject:F,toggleVehicleInfo:G,togglePause:Z,updateQueueLength:Y,removeQueueLength:$,showOpenDrive:ee,hideOpenDrive:te}),(e,c)=>(i.openBlock(),i.createElementBlock("div",ue,[i.createElementVNode("div",{class:"gis-viewer-main",ref_key:"mapContainer",ref:d},null,512)]))}});exports.default=de;
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const a=require("vue"),v=require("./stores/index.js");require("./style/index.css");const ce=require("./utils/holo-flow/index.js"),ie=require("./utils/map-initializer.js"),le=require("./utils/open-drive-renderer/index.js"),ue=require("./utils/overlay.js"),de=require("./utils/queue-length.js"),C=require("./utils/road-config-tool/index.js"),pe=require("./utils/traffic-flow.js"),me={class:"gis-viewer"},fe={style:{position:"absolute",bottom:"10px",left:"10px"}},ge=a.defineComponent({__name:"gis-map",props:{config:{},assetsRoot:{}},emits:["mapLoaded","markerClick","mapClick"],setup(k,{expose:T,emit:b}){const p=a.ref(null);let s,c,n,o,r,t,l,u;const m=a.ref(!1);v.registerStore(),a.onMounted(async()=>{if(!p.value)return;document.addEventListener("keydown",d=>{d.ctrlKey&&d.key==="i"&&(m.value=!m.value)});const e=a.getCurrentInstance(),{$gisviewerAssetsRoot:i}=e.appContext.config.globalProperties,h=await(await fetch(y.config)).json();h.assetsRoot=y.assetsRoot||i;const re=v.default.useAppDataStore;re.mapConfig=h,c=new ie.default,s=await c.initialize({container:p.value,markerClickCallback:(d,g,w,se)=>{f("markerClick",d,g,w,se)},mapClickCallback:(d,g,w)=>{f("mapClick",d,g,w)}}),r=new ce.default(s),await r.init(),f("mapLoaded")});const L=a.computed(()=>s),O=()=>{const e=v.default.useAppDataStore;e.saveTrackLog=!0},I=()=>{r.downloadTrackLog()},S=async e=>await c.setMapCenter(e),A=async e=>await c.setMapCamera(e),D=async e=>await c.lookAt(e),_=e=>c.setLayerVisibility(e),q=(e,i)=>c.requestCoordinateTransform(e,i),x=e=>{c.cancelCoordinateTransform(e)},V=e=>{c.setMapZoomRange(e)},M=e=>(n||(n=new C.default(s)),n.showLaneNumber(e)),N=()=>{n==null||n.clearLaneNumber()},B=async e=>(n||(n=new C.default(s)),await n.initializeSearch(e)),E=async()=>n==null?void 0:n.calCrossIndicatorArea(),H=async()=>{},R=async(e,i)=>{o||(o=new pe.default(s)),o.connectTrafficFlow(e,i)},j=()=>{o==null||o.disconnectTrafficFlow()},z=e=>{r.handleVehicleTraceData(e)},P=()=>{r.clearHoloTrace()},Q=e=>{r.setInterpolate(e)},Z=async e=>{await r.handleSignalData(e)},F=()=>{r.clearHoloSignal()},K=e=>{o==null||o.toggleTrafficInfo(e),r.toggleTrafficInfo(e)},G=e=>{r.togglePause(e)},J=e=>{o==null||o.toggleTrafficObject(e),r.toggleTrafficObject(e)},U=e=>{r.updatePanelContent(e)},W=async e=>(t||(t=new ue.default(s)),t.addOverlays(e)),X=e=>t==null?void 0:t.removeOverlaysByType(e),Y=e=>t==null?void 0:t.removeOverlaysById(e),$=()=>t==null?void 0:t.removeAllOverlays(),ee=()=>{t==null||t.showAllOverlays()},te=e=>{l||(l=new de.default(s)),l.updateQueueLength(e)},ae=()=>{l==null||l.removeQueueLength()},ne=async(e,i)=>{u||(u=new le.default(s)),await u.showOpenDrive(e,i)},oe=async()=>{await(u==null?void 0:u.hideOpenDrive())},y=k,f=b;return T({mapViewer:L,setLayerVisibility:_,setMapCenter:S,lookAt:D,setMapCamera:A,setMapZoomRange:V,requestCoordinateTransform:q,cancelCoordinateTransform:x,addOverlays:W,showAllOverlays:ee,removeOverlaysByType:X,removeOverlaysById:Y,removeAllOverlays:$,showLaneNumber:M,clearLaneNumber:N,initializeAreaTool:B,calCrossIndicatorArea:E,calRoadIndicatorArea:H,connectCarFlow:R,disconnectCarFlow:j,handleHoloVehicleTraceData:z,clearHoloTrace:P,handleHoloSignalData:Z,clearHoloSignal:F,setInterpolate:Q,toggleTrafficInfo:K,toggleTrafficObject:J,toggleVehicleInfo:U,togglePause:G,updateQueueLength:te,removeQueueLength:ae,showOpenDrive:ne,hideOpenDrive:oe}),(e,i)=>(a.openBlock(),a.createElementBlock("div",me,[a.createElementVNode("div",{class:"gis-viewer-main",ref_key:"mapContainer",ref:p},[a.withDirectives(a.createElementVNode("div",fe,[a.createElementVNode("button",{style:{"margin-right":"10px"},onClick:O}," 开始记录 "),a.createElementVNode("button",{onClick:I},"下载日志")],512),[[a.vShow,m.value]])],512)]))}});exports.default=ge;

package/lib/src/gis-map/index.d.ts

@@ -17,7 +17,10 @@ export declare const GisMap: import("@easyest/utils/dist/lib/withinstall").SFCWi
     overlay: import("./utils/overlay").default;
     queueLength: import("./utils/queue-length").default;
     openDriveRenderer: import("./utils/open-drive-renderer").default;
+    showLogDiv: import("vue").Ref<boolean>;
     mapViewer: import("vue").ComputedRef<__esri.MapView | __esri.SceneView>;
+    startSaveTrackLog: () => void;
+    downloadTrackLog: () => void;
     setMapCenter: (params: import("../types").ISetMapCenterParams) => Promise<import("../types").IResult>;
     setMapCamera: (params: import("../types").ISetMapCameraParams) => Promise<import("../types").IResult>;
     lookAt: (params: import("../types").ILookAtParams) => Promise<void>;

package/lib/src/gis-map/stores/appData.d.ts

@@ -1,3 +1,4 @@
 export declare const useAppDataStore: import("pinia").StoreDefinition<"appData", {
     mapConfig: {};
+    saveTrackLog: boolean;
 }, {}, {}>;

package/lib/src/gis-map/stores/appData.js

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("pinia"),t=e.defineStore("appData",{state:()=>({mapConfig:{}})});exports.useAppDataStore=t;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("pinia"),t=e.defineStore("appData",{state:()=>({mapConfig:{},saveTrackLog:!1})});exports.useAppDataStore=t;

package/lib/src/gis-map/utils/holo-flow/index.d.ts

@@ -18,4 +18,5 @@ export default class Index {
     handleSignalData(data: any): Promise<void>;
     clearHoloSignal(): void;
     setInterpolate(enable: boolean): void;
+    downloadTrackLog(): void;
 }

package/lib/src/gis-map/utils/holo-flow/index.js

@@ -1 +1 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const l=require("../../../types/index.js"),a=require("./signal-holo-flow.js"),o=require("./trace-holo-flow.js");class i{constructor(e){this.view=e}async init(){this.traceHoloFlow=new o.default(this.view),await this.traceHoloFlow.init()}handleVehicleTraceData(e){this.traceHoloFlow.handleVehicleTraceData(e)}toggleTrafficObject(e){switch(e.name.toLowerCase()){case"groundVehicle".toLowerCase():this.traceHoloFlow.toggleGroundVehicle(e.visible);break;case"elevatedVehicle".toLowerCase():this.traceHoloFlow.toggleElevatedVehicle(e.visible);break}}clearHoloTrace(){this.traceHoloFlow.clearTrace()}toggleTrafficInfo(e){this.traceHoloFlow.toggleTrafficInfo(e)}togglePause(e){this.traceHoloFlow.togglePause(e)}updatePanelContent(e){let t=l.EVehiclePlateState.None;switch(e){case"none":t=l.EVehiclePlateState.None;break;case"plateNumber":t=l.EVehiclePlateState.PlateNumber;break;case"vehicleId":t=l.EVehiclePlateState.Id;break;case"mix":t=l.EVehiclePlateState.Mix;break}this.traceHoloFlow.updatePanelContent(t)}async handleSignalData(e){this.signalHoloFlow||(this.signalHoloFlow=new a.default(this.view)),await this.signalHoloFlow.initializeLayer(),await this.signalHoloFlow.handleSignalData(e)}clearHoloSignal(){this.signalHoloFlow.clearSignal()}setInterpolate(e){this.traceHoloFlow.setInterpolate(e)}}exports.default=i;
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const t=require("../../../types/index.js"),a=require("./signal-holo-flow.js"),o=require("./trace-holo-flow.js");class i{constructor(e){this.view=e}async init(){this.traceHoloFlow=new o.default(this.view),await this.traceHoloFlow.init()}handleVehicleTraceData(e){this.traceHoloFlow.handleVehicleTraceData(e)}toggleTrafficObject(e){switch(e.name.toLowerCase()){case"groundVehicle".toLowerCase():this.traceHoloFlow.toggleGroundVehicle(e.visible);break;case"elevatedVehicle".toLowerCase():this.traceHoloFlow.toggleElevatedVehicle(e.visible);break}}clearHoloTrace(){this.traceHoloFlow.clearTrace()}toggleTrafficInfo(e){this.traceHoloFlow.toggleTrafficInfo(e)}togglePause(e){this.traceHoloFlow.togglePause(e)}updatePanelContent(e){let l=t.EVehiclePlateState.None;switch(e){case"none":l=t.EVehiclePlateState.None;break;case"plateNumber":l=t.EVehiclePlateState.PlateNumber;break;case"vehicleId":l=t.EVehiclePlateState.Id;break;case"mix":l=t.EVehiclePlateState.Mix;break}this.traceHoloFlow.updatePanelContent(l)}async handleSignalData(e){this.signalHoloFlow||(this.signalHoloFlow=new a.default(this.view)),await this.signalHoloFlow.initializeLayer(),await this.signalHoloFlow.handleSignalData(e)}clearHoloSignal(){this.signalHoloFlow.clearSignal()}setInterpolate(e){this.traceHoloFlow.setInterpolate(e)}downloadTrackLog(){this.traceHoloFlow.downloadLog()}}exports.default=i;

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

@@ -1,16 +1,14 @@
 import { EVehiclePlateState, IToggleTrafficInfoParams } from '../../../types';
 export default class TraceHoloFlow {
-    private mapConfig;
-    private view;
-    private lastDataTime;
     private readonly traceRenderer;
     constructor(view: __esri.View);
     init(): Promise<void>;
+    private appDataStore;
+    private logTable;
+    downloadLog(): void;
     /**
      * 处理全息流轨迹数据
      * */
-    private lastLocalTimestamp;
-    private lastDataTimestamp;
     handleVehicleTraceData(data: any): Promise<void>;
     /**
      * 切换交通信息可见性

package/lib/src/gis-map/utils/holo-flow/trace-holo-flow.js

@@ -1 +1,2 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const m=require("@arcgis/core/views/3d/externalRenderers"),g=require("../../stores/index.js"),f=require("./trace-renderer-external.js"),T=require("./trace-renderer-layer.js");function R(n){const e=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(n){for(const a in n)if(a!=="default"){const i=Object.getOwnPropertyDescriptor(n,a);Object.defineProperty(e,a,i.get?i:{enumerable:!0,get:()=>n[a]})}}return e.default=n,Object.freeze(e)}const b=R(m);class y{constructor(e){this.lastDataTime=0,this.lastLocalTimestamp=0,this.lastDataTimestamp=0,this.view=e;const a=g.default.useAppDataStore;this.mapConfig=JSON.parse(JSON.stringify(a.mapConfig)),e.type==="3d"?(this.traceRenderer=new f.default(e),b.add(e,this.traceRenderer)):this.traceRenderer=new T.default(e)}async init(){await this.traceRenderer.init()}async handleVehicleTraceData(e){const{newVehList:a,updateVehList:i,deleteVehList:o,jgsj:h}=e,s=e.crossId||"",l=[],c=[];if(a&&a.length>0){for(const r of a){r.localTimestamp||(r.localTimestamp=h||Date.now());const t=this.buildVehicleTrackData(r,s);t&&l.push(t)}await this.traceRenderer.addVehicles(l)}if(i&&i.length>0){for(const d of i){const p=this.buildVehicleTrackData(d,s);p&&c.push(p)}const r=c[0].localTimestamp-this.lastLocalTimestamp,t=c[0].timestamp-this.lastDataTimestamp;console.log("localTimeGap",r,"timeGap",t,"delta",r-t),this.lastLocalTimestamp=c[0].localTimestamp,this.lastDataTimestamp=c[0].timestamp,await this.traceRenderer.updateVehicles(c)}if(o&&o.length>0){const r=o.map(t=>s+"-"+(t.ptcId||t.vehno||t.vehNo));this.traceRenderer.deleteVehicles(r)}}toggleTrafficInfo(e){this.traceRenderer.toggleTrafficInfo(e)}clearTrace(){this.traceRenderer.clearVehicles()}togglePause(e){this.traceRenderer.togglePause(e)}updatePanelContent(e){this.traceRenderer.updatePanelContent(e)}toggleGroundVehicle(e){this.traceRenderer.toggleGroundVehicle(e)}toggleElevatedVehicle(e){this.traceRenderer.toggleElevatedVehicle(e)}setInterpolate(e){this.traceRenderer.setInterpolate(e)}buildVehicleTrackData(e,a){const i=e.longitude,o=e.latitude,h=e.ptcId,s=Number(e.ptcType),l=e.heading,c=Number(e.vehicleType),r=Number(e.vehicleColor),t=e.plateNo||e.plateno,d=Number(e.plateColor),p=e.timestamp,u=e.roadLayer?String(e.roadLayer):"1";if(!(s<0||s>8))return{ptcId:h,crossId:a,vehicleId:a+"-"+h,x:i,y:o,ptcType:s,vehicleType:c,heading:s===2?-l:l,vehicleColor:r,showName:t&&t!==""&&t!=="0"&&t!=="000000"?t:"",plateNo:t,plateColor:d,timestamp:p,localTimestamp:Date.now(),roadLayer:u}}}exports.default=y;
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const g=require("@arcgis/core/views/3d/externalRenderers"),m=require("../../stores/index.js"),f=require("./trace-renderer-external.js"),b=require("./trace-renderer-layer.js");function T(a){const e=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(a){for(const o in a)if(o!=="default"){const c=Object.getOwnPropertyDescriptor(a,o);Object.defineProperty(e,o,c.get?c:{enumerable:!0,get:()=>a[o]})}}return e.default=a,Object.freeze(e)}const y=T(g);class v{constructor(e){this.appDataStore=m.default.useAppDataStore,this.logTable=[["uuid","ptcId","plateno","timestamp","localTimestamp","timestamp_str","speed","laneNo","objHeight","objLength","latitude","longitude","ptcType","vehicleType","vehicleColor","plateColor","sbdm","heading","fixAngle","roadLayer","status","step"]],e.type==="3d"?(this.traceRenderer=new f.default(e),y.add(e,this.traceRenderer)):this.traceRenderer=new b.default(e)}async init(){await this.traceRenderer.init()}downloadLog(){const e=this.logTable.map(i=>i.join(",")).join(`
+`).replace(/null/g,""),o=new Blob([e],{type:"text/csv;charset=utf-8;"}),c=URL.createObjectURL(o),n=document.createElement("a");n.setAttribute("href",c),n.setAttribute("download","trace-log.csv"),n.style.visibility="hidden",document.body.appendChild(n),n.click(),document.body.removeChild(n)}async handleVehicleTraceData(e){console.log(this.appDataStore.saveTrackLog);const{newVehList:o,updateVehList:c,deleteVehList:n,jgsj:i}=e,l=e.crossId||"",s=[],d=[];if(o&&o.length>0){for(const t of o){t.localTimestamp||(t.localTimestamp=i||Date.now());const r=this.buildVehicleTrackData(t,l);this.logTable.push([t.uuid,t.ptcId,t.plateno,t.timestamp,t.localTimestamp,t.timestamp_str,t.speed,t.laneNo,t.objHeight,t.objLength,t.latitude,t.longitude,t.ptcType,t.vehicleType,t.vehicleColor,t.plateColor,t.sbdm,t.heading,t.fixAngle,t.roadLayer,t.status,t.step]),r&&s.push(r)}await this.traceRenderer.addVehicles(s)}if(c&&c.length>0){for(const t of c){const r=this.buildVehicleTrackData(t,l);r&&d.push(r)}await this.traceRenderer.updateVehicles(d)}if(n&&n.length>0){const t=n.map(r=>l+"-"+(r.ptcId||r.vehno||r.vehNo));this.traceRenderer.deleteVehicles(t)}}toggleTrafficInfo(e){this.traceRenderer.toggleTrafficInfo(e)}clearTrace(){this.traceRenderer.clearVehicles()}togglePause(e){this.traceRenderer.togglePause(e)}updatePanelContent(e){this.traceRenderer.updatePanelContent(e)}toggleGroundVehicle(e){this.traceRenderer.toggleGroundVehicle(e)}toggleElevatedVehicle(e){this.traceRenderer.toggleElevatedVehicle(e)}setInterpolate(e){this.traceRenderer.setInterpolate(e)}buildVehicleTrackData(e,o){const c=e.longitude,n=e.latitude,i=e.ptcId,l=Number(e.ptcType),s=e.heading,d=Number(e.vehicleType),t=Number(e.vehicleColor),r=e.plateNo||e.plateno,h=Number(e.plateColor),p=e.timestamp,u=e.roadLayer?String(e.roadLayer):"1";if(!(l<0||l>8))return{ptcId:i,crossId:o,vehicleId:o+"-"+i,x:c,y:n,ptcType:l,vehicleType:d,heading:l===2?-s:s,vehicleColor:t,showName:r&&r!==""&&r!=="0"&&r!=="000000"?r:"",plateNo:r,plateColor:h,timestamp:p,localTimestamp:Date.now(),roadLayer:u}}}exports.default=v;

package/lib/src/gis-map/utils/holo-flow/trace-renderer-external.js

@@ -1 +1 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const v=require("@arcgis/core/core/promiseUtils.js"),y=require("@arcgis/core/core/reactiveUtils.js"),S=require("@arcgis/core/geometry/SpatialReference"),G=require("@arcgis/core/views/3d/externalRenderers"),C=require("three"),T=require("three/examples/jsm/loaders/GLTFLoader.js"),d=require("../../../types/index.js"),B=require("../../stores/index.js");function u(m){const i=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(m){for(const e in m)if(e!=="default"){const t=Object.getOwnPropertyDescriptor(m,e);Object.defineProperty(i,e,t.get?t:{enumerable:!0,get:()=>m[e]})}}return i.default=m,Object.freeze(i)}const R=u(v),V=u(y),M=u(G),n=u(C);class I{constructor(i){this.cameraHeightThreshold=1e3,this.roughness=.2,this.metalness=.8,this.defaultMaterial=new n.MeshPhongMaterial({color:16777215}),this.materialMap=new Map([[1,this.createCarMaterial(16777215)],[2,this.createCarMaterial(7833753)],[3,this.createCarMaterial(16766720)],[4,this.createCarMaterial(16758465)],[5,this.createCarMaterial(14423100)],[6,this.createCarMaterial(3329330)],[7,this.createCarMaterial(2003183)],[8,this.createCarMaterial(16032864)],[9,this.createCarMaterial(2105376)],[10,this.createCarMaterial(9662683)],[99,this.createCarMaterial(6908265)]]),this.isInitialized=!1,this.showGroundVehicle=!0,this.showElevatedVehicle=!0,this.isPaused=!1,this.currentSpriteContent=d.EVehiclePlateState.None,this.historyPositionMap=new Map,this.vehicleObjectMap=new Map,this.needInterpolate=!0,this.updateModel=!1;const e=B.default.useAppDataStore;this.assetsRoot=JSON.parse(JSON.stringify(e.mapConfig)).assetsRoot,this.view=i,document.addEventListener("visibilitychange",()=>{this.clearVehicles(),this.needInterpolate=!document.hidden},!1),V.watch(()=>this.view.camera.position.z,(t,s)=>{(s<=this.cameraHeightThreshold&&t>this.cameraHeightThreshold||s>this.cameraHeightThreshold&&t<=this.cameraHeightThreshold)&&(this.updateModel=!0)})}createCarMaterial(i){return new n.MeshPhongMaterial({color:i})}async init(){const i=new T.GLTFLoader;await R.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 n.WebGLRenderer({context:i.gl,premultipliedAlpha:!0,logarithmicDepthBuffer:!0,antialias:!0,powerPreference:"high-performance"}),this.renderer.shadowMap.enabled=!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=s=>{e(s),s==null&&i.bindRenderTarget()},this.scene=new n.Scene;const{camera:t}=i;this.camera=new n.PerspectiveCamera(t.fovY,t.aspect,.1,1e5),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 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 l=(s=this.vehicleObjectMap.get(a))==null?void 0:s.model;if(!l)continue;const o=this.computeVehiclePosition(a);if(o){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 n.Color(t.diffuse.color[0],t.diffuse.color[1],t.diffuse.color[2]),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),M.requestRender(this.view),i.resetWebGLState()}async addVehicles(i){if(!(this.isPaused||!this.isInitialized))for(const e of i){const{vehicleId:t,localTimestamp:s}=e,a=Number(e.x),l=Number(e.y),o=Number(e.heading);this.historyPositionMap.set(t,[{pos:[a,l,0],heading:o,time:s}]);const h=this.getVehicleModel(e);h.name=t,h.visible=!this.needInterpolate;try{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(h),this.vehicleObjectMap.set(t,{model:h,data:e,waitForDelete:!1,isMoving:!1})}}async updateVehicles(i){if(this.isPaused||!this.isInitialized)return;const e=[];for(const t of i){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),p=this.historyPositionMap.get(s);if(!r||!p)e.push(t);else{if(p.length>=5&&console.log(s,p.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&&(r.model.add(c),c.position.set(0,5,-4)),this.scene.add(r.model)}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 g=await this.createPlateSprite(t);g&&(r.model.add(g),g.position.set(0,5,-4))}if(r.data=t,this.needInterpolate){const c=p[p.length-1];Math.abs(h-c.heading)>=180&&(h>c.heading?c.heading+=360:h+=360),p.push({pos:[l,o,0],heading:h,time:a})}else{this.historyPositionMap.set(s,[{pos:[l,o,0],heading:h,time:a}]);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)}}}await this.addVehicles(e),this.updateModel=!1,this.needInterpolate||this.render(this.context)}toRenderCoordinates(i){const e=[0,0,0];return M.toRenderCoordinates(this.view,i,0,S.WGS84,e,0,1),e}deleteVehicles(i){this.isPaused||i.forEach(e=>{const t=this.vehicleObjectMap.get(e);t&&(this.needInterpolate?t.isMoving?t.waitForDelete=!0:this.deleteVehicle(t):this.deleteVehicle(t))})}deleteVehicle(i){this.scene.remove(i.model),this.disposeModel(i.model);const e=i.data.vehicleId;this.vehicleObjectMap.delete(e),this.historyPositionMap.delete(e)}async toggleTrafficInfo(i){i.name==="vehiclePlate"&&(i.visible===!0&&this.currentSpriteContent===d.EVehiclePlateState.None?await this.updatePanelContent(d.EVehiclePlateState.PlateNumber):await this.updatePanelContent(i.visible?this.currentSpriteContent:d.EVehiclePlateState.None))}togglePause(i){this.isPaused=i}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()}async 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");if(s&&(t.model.remove(s),this.disposeModel(s)),i!==d.EVehiclePlateState.None){const a=await this.createPlateSprite(t.data);a&&(t.model.add(a),a.position.set(0,5,-4))}}}}}toggleGroundVehicle(i){console.log("toggleGroundVehicle",i),this.showGroundVehicle=i}toggleElevatedVehicle(i){this.showElevatedVehicle=i}disposeModel(i){i.traverse(e=>{e instanceof n.Mesh&&(e.geometry.dispose(),e.material.dispose())})}computeVehiclePosition(i){const e=this.historyPositionMap.get(i),t=this.vehicleObjectMap.get(i);if(!t||!e||!t.isMoving&&e.length<=2)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,l=Math.min(a/t.segmentTotalTime,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 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 n.SphereGeometry(5,32,32),t=new n.MeshPhysicalMaterial({color:325253,emissive:0,roughness:this.roughness,metalness:this.metalness});return new n.Mesh(e,t)}else{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(a=>{!s&&a instanceof n.Mesh&&(a.material=t,s=!0)})}return e}}createCanvas(i,e,t){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,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 r,p;const s=!i.plateNo||i.plateNo==="0"||i.plateNo==="000000";if(this.currentSpriteContent===d.EVehiclePlateState.None||this.currentSpriteContent===d.EVehiclePlateState.PlateNumber&&s){e(void 0);return}let a=new Image,l="",o="";if(this.currentSpriteContent===d.EVehiclePlateState.PlateNumber||this.currentSpriteContent===d.EVehiclePlateState.Mix)if(s)a=this.greyPlateBG,l=i.ptcId,o="#ffffff";else switch(l=((r=i.showName)==null?void 0:r.substring(0,2))+"•"+((p=i.showName)==null?void 0:p.substring(2)),i.plateColor){case 1:a=this.bluePlateBG,o="#ffffff";break;case 2:a=this.yellowPlateBG,o="#000000";break;case 3:a=this.whitePlateBG,o="#000000";break;case 4:a=this.blackPlateBG,o="#ffffff";break;case 5:a=this.neoYellowPlateBG,o="#000000";break;case 6:a=this.neoGreenPlateBG,o="#000000";break;default:a=this.greyPlateBG,l=i.plateNo,o="#ffffff";break}else this.currentSpriteContent===d.EVehiclePlateState.Id&&(a=this.greyPlateBG,l=i.ptcId,o="#ffffff");const h=this.createCanvas(a,l,o);if(h){const c=new n.CanvasTexture(h),g=new n.SpriteMaterial({map:c,transparent:!1}),f=new n.Sprite(g),P=.05,w=h.width*P,b=h.height*P;f.scale.set(w,b,1),f.name="VehiclePlate",e(f)}else{t("canvas创建失败");return}a.onerror=c=>{console.log(`号牌背景加载失败: ${a.src}`,c),t(c)}})}}exports.default=I;
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const v=require("@arcgis/core/core/promiseUtils.js"),y=require("@arcgis/core/core/reactiveUtils.js"),S=require("@arcgis/core/geometry/SpatialReference"),G=require("@arcgis/core/views/3d/externalRenderers"),C=require("three"),T=require("three/examples/jsm/loaders/GLTFLoader.js"),d=require("../../../types/index.js"),B=require("../../stores/index.js");function u(m){const i=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(m){for(const e in m)if(e!=="default"){const t=Object.getOwnPropertyDescriptor(m,e);Object.defineProperty(i,e,t.get?t:{enumerable:!0,get:()=>m[e]})}}return i.default=m,Object.freeze(i)}const R=u(v),V=u(y),M=u(G),l=u(C);class I{constructor(i){this.cameraHeightThreshold=1e3,this.roughness=.2,this.metalness=.8,this.defaultMaterial=new l.MeshPhongMaterial({color:16777215}),this.materialMap=new Map([[1,this.createCarMaterial(16777215)],[2,this.createCarMaterial(7833753)],[3,this.createCarMaterial(16766720)],[4,this.createCarMaterial(16758465)],[5,this.createCarMaterial(14423100)],[6,this.createCarMaterial(3329330)],[7,this.createCarMaterial(2003183)],[8,this.createCarMaterial(16032864)],[9,this.createCarMaterial(2105376)],[10,this.createCarMaterial(9662683)],[99,this.createCarMaterial(6908265)]]),this.isInitialized=!1,this.showGroundVehicle=!0,this.showElevatedVehicle=!0,this.isPaused=!1,this.currentSpriteContent=d.EVehiclePlateState.None,this.historyPositionMap=new Map,this.vehicleObjectMap=new Map,this.needInterpolate=!0,this.updateModel=!1;const e=B.default.useAppDataStore;this.assetsRoot=JSON.parse(JSON.stringify(e.mapConfig)).assetsRoot,this.view=i,V.watch(()=>this.view.camera.position.z,(t,s)=>{(s<=this.cameraHeightThreshold&&t>this.cameraHeightThreshold||s>this.cameraHeightThreshold&&t<=this.cameraHeightThreshold)&&(this.updateModel=!0)})}createCarMaterial(i){return new l.MeshPhongMaterial({color:i})}async init(){const i=new T.GLTFLoader;await R.eachAlways([new Promise(e=>{i.load(`${this.assetsRoot}/3DModels/car.glb`,t=>{this.carModel=t.scene,this.carModel.rotation.x=l.MathUtils.degToRad(90),e()})}),new Promise(e=>{i.load(`${this.assetsRoot}/3DModels/van.glb`,t=>{this.vanModel=t.scene,this.vanModel.rotation.x=l.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=l.MathUtils.degToRad(90),e()})}),new Promise(e=>{i.load(`${this.assetsRoot}/3DModels/bus.glb`,t=>{this.busModel=t.scene,this.busModel.rotation.x=l.MathUtils.degToRad(90),e()})}),new Promise(e=>{i.load(`${this.assetsRoot}/3DModels/bicycle.glb`,t=>{this.bicycleModel=t.scene,this.bicycleModel.rotation.x=l.MathUtils.degToRad(90),this.bicycleModel.rotation.y=l.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 l.WebGLRenderer({context:i.gl,premultipliedAlpha:!0,logarithmicDepthBuffer:!0,antialias:!0,powerPreference:"high-performance"}),this.renderer.shadowMap.enabled=!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=s=>{e(s),s==null&&i.bindRenderTarget()},this.scene=new l.Scene;const{camera:t}=i;this.camera=new l.PerspectiveCamera(t.fovY,t.aspect,.1,1e5),this.ambient=new l.AmbientLight(16777215,2),this.scene.add(this.ambient),this.sun=new l.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 l.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 n=(s=this.vehicleObjectMap.get(a))==null?void 0:s.model;if(!n)continue;const o=this.computeVehiclePosition(a);if(o){const h=this.toRenderCoordinates(o);n.position.set(h[0],h[1],h[2]),n.rotation.y=l.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 l.Color(t.diffuse.color[0],t.diffuse.color[1],t.diffuse.color[2]),this.ambient.intensity=t.ambient.intensity,this.ambient.color=new l.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),M.requestRender(this.view),i.resetWebGLState()}async addVehicles(i){if(!(this.isPaused||!this.isInitialized))for(const e of i){const{vehicleId:t,localTimestamp:s}=e,a=Number(e.x),n=Number(e.y),o=Number(e.heading);this.historyPositionMap.set(t,[{pos:[a,n,0],heading:o,time:s}]);const h=this.getVehicleModel(e);h.name=t,h.visible=!this.needInterpolate;try{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(h),this.vehicleObjectMap.set(t,{model:h,data:e,waitForDelete:!1,isMoving:!1})}}async updateVehicles(i){if(this.isPaused||!this.isInitialized)return;const e=[];for(const t of i){const{vehicleId:s,timestamp:a}=t,n=Number(t.x),o=Number(t.y);let h=Number(t.heading);const r=this.vehicleObjectMap.get(s),p=this.historyPositionMap.get(s);if(!r||!p)e.push(t);else{if(p.length>=5&&console.log(s,p.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&&(r.model.add(c),c.position.set(0,5,-4)),this.scene.add(r.model)}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 g=await this.createPlateSprite(t);g&&(r.model.add(g),g.position.set(0,5,-4))}if(r.data=t,this.needInterpolate){const c=p[p.length-1];Math.abs(h-c.heading)>=180&&(h>c.heading?c.heading+=360:h+=360),p.push({pos:[n,o,0],heading:h,time:a})}else{this.historyPositionMap.set(s,[{pos:[n,o,0],heading:h,time:a}]);const c=this.toRenderCoordinates([n,o,0]);r.model.position.set(c[0],c[1],c[2]),r.model.rotation.y=l.MathUtils.degToRad(-h)}}}await this.addVehicles(e),this.updateModel=!1,this.needInterpolate||this.render(this.context)}toRenderCoordinates(i){const e=[0,0,0];return M.toRenderCoordinates(this.view,i,0,S.WGS84,e,0,1),e}deleteVehicles(i){this.isPaused||i.forEach(e=>{const t=this.vehicleObjectMap.get(e);t&&(this.needInterpolate?t.isMoving?t.waitForDelete=!0:this.deleteVehicle(t):this.deleteVehicle(t))})}deleteVehicle(i){this.scene.remove(i.model),this.disposeModel(i.model);const e=i.data.vehicleId;this.vehicleObjectMap.delete(e),this.historyPositionMap.delete(e)}async toggleTrafficInfo(i){i.name==="vehiclePlate"&&(i.visible===!0&&this.currentSpriteContent===d.EVehiclePlateState.None?await this.updatePanelContent(d.EVehiclePlateState.PlateNumber):await this.updatePanelContent(i.visible?this.currentSpriteContent:d.EVehiclePlateState.None))}togglePause(i){this.isPaused=i}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()}async 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");if(s&&(t.model.remove(s),this.disposeModel(s)),i!==d.EVehiclePlateState.None){const a=await this.createPlateSprite(t.data);a&&(t.model.add(a),a.position.set(0,5,-4))}}}}}toggleGroundVehicle(i){console.log("toggleGroundVehicle",i),this.showGroundVehicle=i}toggleElevatedVehicle(i){this.showElevatedVehicle=i}disposeModel(i){i.traverse(e=>{e instanceof l.Mesh&&(e.geometry.dispose(),e.material.dispose())})}computeVehiclePosition(i){const e=this.historyPositionMap.get(i),t=this.vehicleObjectMap.get(i);if(!t||!e||!t.isMoving&&e.length<=2)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,n=Math.min(a/t.segmentTotalTime,1);if(n===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 if(e.length>=2){const o=e[0].pos[0]+(e[1].pos[0]-e[0].pos[0])*n,h=e[0].pos[1]+(e[1].pos[1]-e[0].pos[1])*n,r=e[0].heading+(e[1].heading-e[0].heading)*n;return[o,h,0,r]}else return}getVehicleModel(i){if(this.view.camera.position.z>=this.cameraHeightThreshold){const e=new l.SphereGeometry(5,32,32),t=new l.MeshPhysicalMaterial({color:325253,emissive:0,roughness:this.roughness,metalness:this.metalness});return new l.Mesh(e,t)}else{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(a=>{!s&&a instanceof l.Mesh&&(a.material=t,s=!0)})}return e}}createCanvas(i,e,t){const s=document.createElement("canvas"),a=i.width,n=i.height;s.width=a,s.height=n;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,n),o.drawImage(i,0,0,a,n),o.beginPath(),o.translate(a/2,n/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 r,p;const s=!i.plateNo||i.plateNo==="0"||i.plateNo==="000000";if(this.currentSpriteContent===d.EVehiclePlateState.None||this.currentSpriteContent===d.EVehiclePlateState.PlateNumber&&s){e(void 0);return}let a=new Image,n="",o="";if(this.currentSpriteContent===d.EVehiclePlateState.PlateNumber||this.currentSpriteContent===d.EVehiclePlateState.Mix)if(s)a=this.greyPlateBG,n=i.ptcId,o="#ffffff";else switch(n=((r=i.showName)==null?void 0:r.substring(0,2))+"•"+((p=i.showName)==null?void 0:p.substring(2)),i.plateColor){case 1:a=this.bluePlateBG,o="#ffffff";break;case 2:a=this.yellowPlateBG,o="#000000";break;case 3:a=this.whitePlateBG,o="#000000";break;case 4:a=this.blackPlateBG,o="#ffffff";break;case 5:a=this.neoYellowPlateBG,o="#000000";break;case 6:a=this.neoGreenPlateBG,o="#000000";break;default:a=this.greyPlateBG,n=i.plateNo,o="#ffffff";break}else this.currentSpriteContent===d.EVehiclePlateState.Id&&(a=this.greyPlateBG,n=i.ptcId,o="#ffffff");const h=this.createCanvas(a,n,o);if(h){const c=new l.CanvasTexture(h),g=new l.SpriteMaterial({map:c,transparent:!1}),f=new l.Sprite(g),P=.05,w=h.width*P,b=h.height*P;f.scale.set(w,b,1),f.name="VehiclePlate",e(f)}else{t("canvas创建失败");return}a.onerror=c=>{console.log(`号牌背景加载失败: ${a.src}`,c),t(c)}})}}exports.default=I;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "gisviewer-vue3-arcgis",
-  "version": "1.0.109",
+  "version": "1.0.110",
   "main": "lib/index.js",
   "module": "es/index.mjs",
   "files": [