gisviewer-vue3-arcgis 1.0.99 → 1.0.101

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

@@ -1,10 +1,10 @@
-import { defineComponent as te, ref as ae, onMounted as ne, getCurrentInstance as re, computed as oe, openBlock as se, createElementBlock as ce, createElementVNode as ie } from "vue";
+import { defineComponent as te, ref as ne, onMounted as ae, getCurrentInstance as re, computed as oe, openBlock as se, createElementBlock as ce, createElementVNode as ie } from "vue";
 import le, { registerStore as me } from "./stores/index.mjs";
 import "./style/index.css";
 import g from "./utils/holo-flow/index.mjs";
 import pe from "./utils/map-initializer.mjs";
-import ue from "./utils/open-drive-renderer/index.mjs";
-import fe from "./utils/overlay.mjs";
+import fe from "./utils/open-drive-renderer/index.mjs";
+import ue from "./utils/overlay.mjs";
 import de from "./utils/queue-length.mjs";
 import v from "./utils/road-config-tool/index.mjs";
 import ge from "./utils/traffic-flow.mjs";
@@ -16,9 +16,9 @@ const ye = { class: "gis-viewer" }, Le = /* @__PURE__ */ te({
   },
   emits: ["mapLoaded", "markerClick", "mapClick"],
   setup(w, { expose: O, emit: T }) {
-    const m = ae(null);
-    let o, s, n, r, t, a, i, l;
-    me(), ne(async () => {
+    const m = ne(null);
+    let o, s, a, r, t, n, i, l;
+    me(), ae(async () => {
       if (!m.value)
         return;
       const e = re(), { $gisviewerAssetsRoot: c } = e.appContext.config.globalProperties, C = await (await fetch(y.config)).json();
@@ -26,21 +26,21 @@ const ye = { class: "gis-viewer" }, Le = /* @__PURE__ */ te({
       const F = le.useAppDataStore;
       F.mapConfig = C, s = new pe(), o = await s.initialize({
         container: m.value,
-        markerClickCallback: (u, f, d, ee) => {
-          p("markerClick", u, f, d, ee);
+        markerClickCallback: (f, u, d, ee) => {
+          p("markerClick", f, u, d, ee);
         },
-        mapClickCallback: (u, f, d) => {
-          p("mapClick", u, f, d);
+        mapClickCallback: (f, u, d) => {
+          p("mapClick", f, u, d);
         }
       }), t = new g(o), p("mapLoaded");
     });
-    const h = oe(() => o), k = async (e) => await s.setMapCenter(e), b = async (e) => await s.setMapCamera(e), A = async (e) => await s.lookAt(e), I = (e) => s.setLayerVisibility(e), L = (e, c) => s.requestCoordinateTransform(e, c), D = (e) => {
+    const k = oe(() => o), h = async (e) => await s.setMapCenter(e), I = async (e) => await s.setMapCamera(e), b = async (e) => await s.lookAt(e), A = (e) => s.setLayerVisibility(e), L = (e, c) => s.requestCoordinateTransform(e, c), D = (e) => {
       s.cancelCoordinateTransform(e);
     }, S = (e) => {
       s.setMapZoomRange(e);
-    }, _ = (e) => (n || (n = new v(o)), n.showLaneNumber(e)), M = () => {
-      n == null || n.clearLaneNumber();
-    }, R = async (e) => (n || (n = new v(o)), await n.initializeSearch(e)), V = async () => n == null ? void 0 : n.calCrossIndicatorArea(), x = async () => {
+    }, _ = (e) => (a || (a = new v(o)), a.showLaneNumber(e)), M = () => {
+      a == null || a.clearLaneNumber();
+    }, R = async (e) => (a || (a = new v(o)), await a.initializeSearch(e)), V = async () => a == null ? void 0 : a.calCrossIndicatorArea(), x = async () => {
     }, B = async (e, c) => {
       r || (r = new ge(o)), r.connectTrafficFlow(e, c);
     }, H = () => {
@@ -54,28 +54,28 @@ const ye = { class: "gis-viewer" }, Le = /* @__PURE__ */ te({
     }, j = () => {
       t == null || t.clearHoloSignal();
     }, E = (e) => {
-      r == null || r.toggleTrafficInfo(e);
+      r == null || r.toggleTrafficInfo(e), t == null || t.toggleTrafficInfo(e);
     }, P = (e) => {
       t == null || t.toggleTrafficObject(e), r == null || r.toggleTrafficObject(e);
     }, Z = (e) => {
       t == null || t.updatePanelContent(e);
-    }, q = async (e) => (a || (a = new fe(o)), a.addOverlays(e)), $ = (e) => a == null ? void 0 : a.removeOverlaysByType(e), G = (e) => a == null ? void 0 : a.removeOverlaysById(e), J = () => a == null ? void 0 : a.removeAllOverlays(), K = () => {
-      a == null || a.showAllOverlays();
+    }, q = async (e) => (n || (n = new ue(o)), n.addOverlays(e)), $ = (e) => n == null ? void 0 : n.removeOverlaysByType(e), G = (e) => n == null ? void 0 : n.removeOverlaysById(e), J = () => n == null ? void 0 : n.removeAllOverlays(), K = () => {
+      n == null || n.showAllOverlays();
     }, U = (e) => {
       i || (i = new de(o)), i.updateQueueLength(e);
     }, W = () => {
       i == null || i.removeQueueLength();
     }, X = async (e, c) => {
-      l || (l = new ue(o)), await l.showOpenDrive(e, c);
+      l || (l = new fe(o)), await l.showOpenDrive(e, c);
     }, Y = async () => {
       await (l == null ? void 0 : l.hideOpenDrive());
     }, y = w, p = T;
     return O({
-      mapViewer: h,
-      setLayerVisibility: I,
-      setMapCenter: k,
-      lookAt: A,
-      setMapCamera: b,
+      mapViewer: k,
+      setLayerVisibility: A,
+      setMapCenter: h,
+      lookAt: b,
+      setMapCamera: I,
       setMapZoomRange: S,
       requestCoordinateTransform: L,
       cancelCoordinateTransform: D,

package/es/src/gis-map/utils/GreenWaveline.d.ts

@@ -0,0 +1,68 @@
+import Graphic from '@arcgis/core/Graphic';
+import GraphicsLayer from '@arcgis/core/layers/GraphicsLayer';
+import MapView from '@arcgis/core/views/MapView';
+import SceneView from '@arcgis/core/views/SceneView';
+interface GreenWaveLineOptions {
+    viewer: MapView | SceneView;
+    graphicsLayerOptions: {
+        id: string;
+    };
+}
+interface roadPath {
+    paths: [number, number][];
+    symbol: any;
+    attributes: any;
+    visible?: boolean;
+}
+interface animationOptions {
+    isAnimation: boolean;
+    positive?: boolean;
+    positiveColor?: number[];
+    negative?: boolean;
+    negativeColor?: number[];
+}
+export default class GreenWaveLine {
+    private viewer;
+    overlayLayer: GraphicsLayer;
+    customGreenWaveLineView: any;
+    material: THREE.ShaderMaterial;
+    renderer: THREE.WebGLRenderer;
+    threeScene: THREE.Scene;
+    camera: THREE.PerspectiveCamera;
+    private defaultAnimationOptions;
+    constructor(options: GreenWaveLineOptions);
+    addGreenWaveLine(paths: roadPath[], options?: animationOptions): void;
+    getAnimationPath(paths: [number, number][], options?: animationOptions): any;
+    createLine(paths: any, symbol: any, attributes: any, visible: boolean): Graphic;
+    addPointText(points: any[]): void;
+    createPointText(point: any, symbol: any, attributes: any, visible: boolean): Graphic;
+    /**
+     * 隐藏覆盖物
+     *
+     * @param {string[]} [ids]
+     * @memberof GreenWaveLine
+     */
+    hideWaveLine(ids?: string[]): void;
+    /**
+     * 显示覆盖物
+     *
+     * @param {string[]} [ids]
+     * @memberof GreenWaveLine
+     */
+    showWaveLine(ids?: string[]): void;
+    /**
+     * 隐藏图层
+     *
+     * @memberof GreenWaveLine
+     */
+    hideLayer(): void;
+    /**
+     * 显示图层
+     *
+     * @memberof Overlay
+     */
+    showLayer(): void;
+    clearGreenWaveLine(): void;
+    destroy(): void;
+}
+export {};

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

@@ -11,6 +11,7 @@ export default class Index {
     handleVehicleTraceData(data: any): void;
     toggleTrafficObject(params: IToggleTrafficInfoParams): void;
     clearHoloTrace(): void;
+    toggleTrafficInfo(params: IToggleTrafficInfoParams): void;
     updatePanelContent(contentType: string): void;
     handleSignalData(data: any): Promise<void>;
     clearHoloSignal(): void;

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

@@ -12,13 +12,13 @@ class h {
     this.traceHoloFlow || (this.traceHoloFlow = new i(this.view)), this.traceHoloFlow.handleVehicleTraceData(e);
   }
   toggleTrafficObject(e) {
-    var l, o;
+    var o, l;
     switch (e.name.toLowerCase()) {
       case "groundVehicle".toLowerCase():
-        (l = this.traceHoloFlow) == null || l.toggleGroundVehicle(e.visible);
+        (o = this.traceHoloFlow) == null || o.toggleGroundVehicle(e.visible);
         break;
       case "elevatedVehicle".toLowerCase():
-        (o = this.traceHoloFlow) == null || o.toggleElevatedVehicle(e.visible);
+        (l = this.traceHoloFlow) == null || l.toggleElevatedVehicle(e.visible);
         break;
     }
   }
@@ -29,24 +29,28 @@ class h {
   // public toggleVehiclePlate(visible: boolean): void {
   //   this.traceHoloFlow?.togglePlateLayer(visible);
   // }
-  updatePanelContent(e) {
+  toggleTrafficInfo(e) {
     var o;
-    let l = a.None;
+    (o = this.traceHoloFlow) == null || o.toggleTrafficInfo(e);
+  }
+  updatePanelContent(e) {
+    var l;
+    let o = a.None;
     switch (e) {
       case "none":
-        l = a.None;
+        o = a.None;
         break;
       case "plateNumber":
-        l = a.PlateNumber;
+        o = a.PlateNumber;
         break;
       case "vehicleId":
-        l = a.Id;
+        o = a.Id;
         break;
       case "mix":
-        l = a.Mix;
+        o = a.Mix;
         break;
     }
-    (o = this.traceHoloFlow) == null || o.updatePanelContent(l);
+    (l = this.traceHoloFlow) == null || l.updatePanelContent(o);
   }
   async handleSignalData(e) {
     this.signalHoloFlow || (this.signalHoloFlow = new t(this.view)), await this.signalHoloFlow.initializeLayer(), await this.signalHoloFlow.handleSignalData(e);

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

@@ -1,4 +1,4 @@
-import { EVehiclePlateState, ITraceRendererInterface, IVehicleTrack } from '../../../types';
+import { EVehiclePlateState, IToggleTrafficInfoParams, ITraceRendererInterface, IVehicleTrack } from '../../../types';
 export default class TraceExternalRenderer implements ITraceRendererInterface {
     private renderer;
     private scene;
@@ -39,6 +39,7 @@ export default class TraceExternalRenderer implements ITraceRendererInterface {
      * 删除车辆
      * */
     deleteVehicles(idList: string[]): void;
+    toggleTrafficInfo(params: IToggleTrafficInfoParams): void;
     /**
      * 清除全部车辆
      * */

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

@@ -151,6 +151,8 @@ class k {
       t && (this.disposeModel(t.model), this.scene.remove(t.model), this.vehicleObjectMap.delete(e), this.historyPositionMap.delete(e));
     });
   }
+  toggleTrafficInfo(i) {
+  }
   /**
    * 清除全部车辆
    * */

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

@@ -1,4 +1,4 @@
-import { EVehiclePlateState } from '../../../types';
+import { EVehiclePlateState, IToggleTrafficInfoParams } from '../../../types';
 export default class TraceHoloFlow {
     private mapConfig;
     private view;
@@ -9,6 +9,11 @@ export default class TraceHoloFlow {
      * 处理全息流轨迹数据
      * */
     handleVehicleTraceData(data: any): void;
+    /**
+     * 切换交通信息可见性
+     * @param params
+     */
+    toggleTrafficInfo(params: IToggleTrafficInfoParams): void;
     /**
      * 清除轨迹流
      * */

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

@@ -1,47 +1,54 @@
-import * as u from "@arcgis/core/views/3d/externalRenderers";
-import T from "../../stores/index.mjs";
+import * as f from "@arcgis/core/views/3d/externalRenderers";
+import u from "../../stores/index.mjs";
 import g from "./trace-external-renderer.mjs";
-import f from "./trace-layer-renderer.mjs";
-class L {
+import T from "./trace-layer-renderer.mjs";
+class N {
   constructor(e) {
     this.lastDataTime = 0, this.view = e;
-    const s = T.useAppDataStore;
-    this.mapConfig = JSON.parse(JSON.stringify(s.mapConfig)), e.type === "3d" ? (this.traceRenderer = new g(e), u.add(
+    const i = u.useAppDataStore;
+    this.mapConfig = JSON.parse(JSON.stringify(i.mapConfig)), e.type === "3d" ? (this.traceRenderer = new g(e), f.add(
       e,
       this.traceRenderer
-    )) : this.traceRenderer = new f(e);
+    )) : this.traceRenderer = new T(e);
   }
   /**
    * 处理全息流轨迹数据
    * */
   handleVehicleTraceData(e) {
-    const s = new Date().getTime();
-    if (s - this.lastDataTime < 100)
+    const i = new Date().getTime();
+    if (i - this.lastDataTime < 100)
       return;
-    this.lastDataTime = s;
-    const { newVehList: i, updateVehList: n, deleteVehList: o, jgsj: l } = e, a = e.crossId || "", h = [], c = [], p = [], d = [];
-    if (i && i.length > 0) {
-      for (const r of i) {
-        r.localTimestamp || (r.localTimestamp = l || s);
-        const t = this.buildVehicleTrackData(r, a);
-        t && (h.push(t), p.push(t.ptcId));
+    this.lastDataTime = i;
+    const { newVehList: s, updateVehList: n, deleteVehList: o, jgsj: l } = e, a = e.crossId || "", h = [], r = [];
+    if (s && s.length > 0) {
+      for (const c of s) {
+        c.localTimestamp || (c.localTimestamp = l || i);
+        const t = this.buildVehicleTrackData(c, a);
+        t && h.push(t);
       }
       this.traceRenderer.addVehicles(h);
     }
     if (n && n.length > 0) {
-      for (const r of n) {
-        const t = this.buildVehicleTrackData(r, a);
-        t && (c.push(t), d.push(t.ptcId));
+      for (const c of n) {
+        const t = this.buildVehicleTrackData(c, a);
+        t && r.push(t);
       }
-      this.traceRenderer.updateVehicles(c);
+      this.traceRenderer.updateVehicles(r);
     }
     if (o && o.length > 0) {
-      const r = o.map(
+      const c = o.map(
         (t) => a + "-" + (t.ptcId || t.vehno || t.vehNo)
       );
-      this.traceRenderer.deleteVehicles(r), console.log("deleteVehList", r);
+      this.traceRenderer.deleteVehicles(c);
     }
   }
+  /**
+   * 切换交通信息可见性
+   * @param params
+   */
+  toggleTrafficInfo(e) {
+    this.traceRenderer.toggleTrafficInfo(e);
+  }
   /**
    * 清除轨迹流
    * */
@@ -57,27 +64,27 @@ class L {
   toggleElevatedVehicle(e) {
     this.traceRenderer.toggleElevatedVehicle(e);
   }
-  buildVehicleTrackData(e, s) {
-    const m = e.longitude, i = e.latitude, n = e.ptcId, o = Number(e.ptcType), l = e.heading, a = Number(e.vehicleType), h = Number(e.vehicleColor), c = e.plateNo || e.plateno, p = Number(e.plateColor), d = e.timestamp, r = e.localTimestamp, t = String(e.roadLayer) || "1";
+  buildVehicleTrackData(e, i) {
+    const p = e.longitude, s = e.latitude, n = e.ptcId, o = Number(e.ptcType), l = e.heading, a = Number(e.vehicleType), h = Number(e.vehicleColor), r = e.plateNo || e.plateno, c = Number(e.plateColor), t = e.timestamp, d = e.localTimestamp, m = String(e.roadLayer) || "1";
     if (!(o < 0 || o > 8))
       return {
         ptcId: n,
-        crossId: s,
-        x: m,
-        y: i,
+        crossId: i,
+        x: p,
+        y: s,
         ptcType: o,
         vehicleType: a,
         heading: o === 2 ? -l : l,
         vehicleColor: h,
-        showName: c && c !== "" && c !== "0" && c !== "000000" ? c : "",
-        plateNo: c,
-        plateColor: p,
-        timestamp: d,
-        localTimestamp: r,
-        roadLayer: t
+        showName: r && r !== "" && r !== "0" && r !== "000000" ? r : "",
+        plateNo: r,
+        plateColor: c,
+        timestamp: t,
+        localTimestamp: d,
+        roadLayer: m
       };
   }
 }
 export {
-  L as default
+  N as default
 };

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

@@ -24,6 +24,10 @@ export default class TraceLayerRenderer implements ITraceRendererInterface {
      * @param visible
      */
     toggleElevatedVehicle(visible: boolean): void;
+    toggleTrafficInfo(params: {
+        name: string;
+        visible: boolean;
+    }): void;
     private render;
     private updatePosition;
     /**

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

@@ -1,53 +1,50 @@
-import g from "@arcgis/core/Graphic";
-import y from "@arcgis/core/layers/GraphicsLayer";
-import d from "../../stores/index.mjs";
-class C {
+import h from "@arcgis/core/Graphic";
+import p from "@arcgis/core/layers/GraphicsLayer";
+import m from "../../stores/index.mjs";
+class u {
   constructor(i) {
     this.showVehiclePlate = !1, this.showGroundVehicle = !0, this.showElevatedVehicle = !0, this.historyPositionMap = /* @__PURE__ */ new Map(), this.vehicleObjectMap = /* @__PURE__ */ new Map(), this.view = i;
-    const e = d.useAppDataStore;
-    this.mapConfig = JSON.parse(JSON.stringify(e.mapConfig)), this.vehicleLayer = new y({
+    const e = m.useAppDataStore;
+    this.mapConfig = JSON.parse(JSON.stringify(e.mapConfig)), this.vehicleLayer = new p({
       id: "vehicleLayer"
     }), this.view.map.add(this.vehicleLayer), requestAnimationFrame(() => this.render());
   }
   addVehicles(i) {
     const e = i.map((t) => {
-      const { crossId: h, ptcId: l, localTimestamp: o } = t, s = Number(t.x), r = Number(t.y), a = Number(t.heading), c = `${h}-${l}`;
-      this.historyPositionMap.set(c, [
-        { pos: [s, r, 0], heading: a, time: Date.now() }
+      const { crossId: l, ptcId: n } = t, o = Number(t.x), a = Number(t.y), r = Number(t.heading), s = `${l}-${n}`;
+      this.historyPositionMap.set(s, [
+        { pos: [o, a, 0], heading: r, time: Date.now() }
       ]);
-      const n = new g({
+      const c = new h({
         geometry: {
           type: "point",
-          x: s,
-          y: r
+          x: o,
+          y: a
         },
         attributes: {
           ...t
         },
         symbol: this.createCIMSymbol(t)
       });
-      return n.visible = !1, this.vehicleObjectMap.set(c, {
-        graphic: n,
+      return c.visible = !1, this.vehicleObjectMap.set(s, {
+        graphic: c,
         data: t,
         waitForDelete: !1
-      }), n;
+      }), c;
     });
     this.vehicleLayer.addMany(e);
   }
   updateVehicles(i) {
     const e = [];
     i.forEach((t) => {
-      const { crossId: h, ptcId: l, localTimestamp: o } = t, s = Number(t.x), r = Number(t.y);
-      let a = Number(t.heading);
-      const c = `${h}-${l}`, n = this.vehicleObjectMap.get(c);
-      if (n) {
-        n.data = t;
-        const p = this.historyPositionMap.get(
-          c
-        ), m = p[p.length - 1];
-        Math.abs(a - m.heading) >= 180 && (a > m.heading ? m.heading += 360 : a += 360), p.push({ pos: [s, r, 0], heading: a, time: Date.now() });
-      } else
-        e.push(t);
+      const { crossId: l, ptcId: n } = t, o = Number(t.x), a = Number(t.y), r = `${l}-${n}`, s = this.vehicleObjectMap.get(r);
+      s ? (s.data = t, this.historyPositionMap.get(
+        r
+      ).push({
+        pos: [o, a, 0],
+        heading: t.heading,
+        time: Date.now()
+      })) : e.push(t);
     }), this.addVehicles(e);
   }
   deleteVehicles(i) {
@@ -76,6 +73,9 @@ class C {
   toggleElevatedVehicle(i) {
     this.showElevatedVehicle = i;
   }
+  toggleTrafficInfo(i) {
+    i.name === "vehiclePlate" && (this.showVehiclePlate = i.visible);
+  }
   render() {
     this.vehicleObjectMap.forEach((i, e) => {
       this.updatePosition(e);
@@ -86,29 +86,27 @@ class C {
     if (!e || !t || e.length <= 1)
       return;
     (t.graphic.getAttribute("roadLayer") || "1") === "1" ? t.graphic.visible = this.showGroundVehicle : t.graphic.visible = this.showElevatedVehicle, t.segmentStartTime || (t.segmentStartTime = Date.now(), t.segmentTotalTime = e[1].time - e[0].time);
-    const l = Date.now() - t.segmentStartTime, o = Math.min(
+    const n = Date.now() - t.segmentStartTime, o = Math.min(
       1,
-      l / t.segmentTotalTime
+      n / t.segmentTotalTime
     );
     if (o === 1)
       if (e.shift(), e.length === 1) {
         t.waitForDelete ? (this.vehicleLayer.remove(t.graphic), this.vehicleObjectMap.delete(i), this.historyPositionMap.delete(i)) : (t.segmentStartTime = void 0, t.segmentTotalTime = void 0);
         return;
       } else
-        t.segmentStartTime = Date.now(), 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), t.graphic.geometry = {
+        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), t.graphic.geometry = {
           type: "point",
           x: e[0].pos[0],
           y: e[0].pos[1]
         };
     else {
-      const s = e[0].pos[0] + (e[1].pos[0] - e[0].pos[0]) * o, r = e[0].pos[1] + (e[1].pos[1] - e[0].pos[1]) * o, a = e[0].heading + (e[1].heading - e[0].heading) * o;
+      const a = e[0].pos[0] + (e[1].pos[0] - e[0].pos[0]) * o, r = e[0].pos[1] + (e[1].pos[1] - e[0].pos[1]) * o, s = e[0].heading + (e[1].heading - e[0].heading) * o;
       t.graphic.geometry = {
         type: "point",
-        x: s,
+        x: a,
         y: r
-      }, t.data.heading = a, t.graphic.symbol = this.createCIMSymbol(t.data);
+      }, t.data.heading = s, t.graphic.symbol = this.createCIMSymbol(t.data);
     }
   }
   /**
@@ -296,5 +294,5 @@ class C {
   }
 }
 export {
-  C as default
+  u as default
 };

package/es/src/types/index.d.ts

@@ -146,6 +146,7 @@ export interface ITraceRendererInterface {
     updatePanelContent(contentType: EVehiclePlateState): void;
     toggleGroundVehicle(visible: boolean): void;
     toggleElevatedVehicle(visible: boolean): void;
+    toggleTrafficInfo(params: IToggleTrafficInfoParams): void;
 }
 export declare enum EVehiclePlateState {
     None = 0,

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

package/lib/src/gis-map/utils/GreenWaveline.d.ts

@@ -0,0 +1,68 @@
+import Graphic from '@arcgis/core/Graphic';
+import GraphicsLayer from '@arcgis/core/layers/GraphicsLayer';
+import MapView from '@arcgis/core/views/MapView';
+import SceneView from '@arcgis/core/views/SceneView';
+interface GreenWaveLineOptions {
+    viewer: MapView | SceneView;
+    graphicsLayerOptions: {
+        id: string;
+    };
+}
+interface roadPath {
+    paths: [number, number][];
+    symbol: any;
+    attributes: any;
+    visible?: boolean;
+}
+interface animationOptions {
+    isAnimation: boolean;
+    positive?: boolean;
+    positiveColor?: number[];
+    negative?: boolean;
+    negativeColor?: number[];
+}
+export default class GreenWaveLine {
+    private viewer;
+    overlayLayer: GraphicsLayer;
+    customGreenWaveLineView: any;
+    material: THREE.ShaderMaterial;
+    renderer: THREE.WebGLRenderer;
+    threeScene: THREE.Scene;
+    camera: THREE.PerspectiveCamera;
+    private defaultAnimationOptions;
+    constructor(options: GreenWaveLineOptions);
+    addGreenWaveLine(paths: roadPath[], options?: animationOptions): void;
+    getAnimationPath(paths: [number, number][], options?: animationOptions): any;
+    createLine(paths: any, symbol: any, attributes: any, visible: boolean): Graphic;
+    addPointText(points: any[]): void;
+    createPointText(point: any, symbol: any, attributes: any, visible: boolean): Graphic;
+    /**
+     * 隐藏覆盖物
+     *
+     * @param {string[]} [ids]
+     * @memberof GreenWaveLine
+     */
+    hideWaveLine(ids?: string[]): void;
+    /**
+     * 显示覆盖物
+     *
+     * @param {string[]} [ids]
+     * @memberof GreenWaveLine
+     */
+    showWaveLine(ids?: string[]): void;
+    /**
+     * 隐藏图层
+     *
+     * @memberof GreenWaveLine
+     */
+    hideLayer(): void;
+    /**
+     * 显示图层
+     *
+     * @memberof Overlay
+     */
+    showLayer(): void;
+    clearGreenWaveLine(): void;
+    destroy(): void;
+}
+export {};

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

@@ -11,6 +11,7 @@ export default class Index {
     handleVehicleTraceData(data: any): void;
     toggleTrafficObject(params: IToggleTrafficInfoParams): void;
     clearHoloTrace(): void;
+    toggleTrafficInfo(params: IToggleTrafficInfoParams): void;
     updatePanelContent(contentType: string): void;
     handleSignalData(data: any): Promise<void>;
     clearHoloSignal(): 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 t=require("../../../types/index.js"),o=require("./signal-holo-flow.js"),i=require("./trace-holo-flow.js");class c{constructor(e){this.view=e}handleVehicleTraceData(e){this.traceHoloFlow||(this.traceHoloFlow=new i.default(this.view)),this.traceHoloFlow.handleVehicleTraceData(e)}toggleTrafficObject(e){var l,a;switch(e.name.toLowerCase()){case"groundVehicle".toLowerCase():(l=this.traceHoloFlow)==null||l.toggleGroundVehicle(e.visible);break;case"elevatedVehicle".toLowerCase():(a=this.traceHoloFlow)==null||a.toggleElevatedVehicle(e.visible);break}}clearHoloTrace(){var e;(e=this.traceHoloFlow)==null||e.clearTrace()}updatePanelContent(e){var a;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}(a=this.traceHoloFlow)==null||a.updatePanelContent(l)}async handleSignalData(e){this.signalHoloFlow||(this.signalHoloFlow=new o.default(this.view)),await this.signalHoloFlow.initializeLayer(),await this.signalHoloFlow.handleSignalData(e)}clearHoloSignal(){var e;(e=this.signalHoloFlow)==null||e.clearSignal()}}exports.default=c;
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const t=require("../../../types/index.js"),o=require("./signal-holo-flow.js"),i=require("./trace-holo-flow.js");class c{constructor(e){this.view=e}handleVehicleTraceData(e){this.traceHoloFlow||(this.traceHoloFlow=new i.default(this.view)),this.traceHoloFlow.handleVehicleTraceData(e)}toggleTrafficObject(e){var l,a;switch(e.name.toLowerCase()){case"groundVehicle".toLowerCase():(l=this.traceHoloFlow)==null||l.toggleGroundVehicle(e.visible);break;case"elevatedVehicle".toLowerCase():(a=this.traceHoloFlow)==null||a.toggleElevatedVehicle(e.visible);break}}clearHoloTrace(){var e;(e=this.traceHoloFlow)==null||e.clearTrace()}toggleTrafficInfo(e){var l;(l=this.traceHoloFlow)==null||l.toggleTrafficInfo(e)}updatePanelContent(e){var a;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}(a=this.traceHoloFlow)==null||a.updatePanelContent(l)}async handleSignalData(e){this.signalHoloFlow||(this.signalHoloFlow=new o.default(this.view)),await this.signalHoloFlow.initializeLayer(),await this.signalHoloFlow.handleSignalData(e)}clearHoloSignal(){var e;(e=this.signalHoloFlow)==null||e.clearSignal()}}exports.default=c;

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

@@ -1,4 +1,4 @@
-import { EVehiclePlateState, ITraceRendererInterface, IVehicleTrack } from '../../../types';
+import { EVehiclePlateState, IToggleTrafficInfoParams, ITraceRendererInterface, IVehicleTrack } from '../../../types';
 export default class TraceExternalRenderer implements ITraceRendererInterface {
     private renderer;
     private scene;
@@ -39,6 +39,7 @@ export default class TraceExternalRenderer implements ITraceRendererInterface {
      * 删除车辆
      * */
     deleteVehicles(idList: string[]): void;
+    toggleTrafficInfo(params: IToggleTrafficInfoParams): void;
     /**
      * 清除全部车辆
      * */

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

@@ -1 +1 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const w=require("@arcgis/core/geometry/SpatialReference"),R=require("@arcgis/core/views/3d/externalRenderers"),S=require("three"),P=require("three/examples/jsm/loaders/GLTFLoader.js"),p=require("../../../types/index.js"),T=require("../../stores/index.js");function b(u){const i=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(u){for(const e in u)if(e!=="default"){const t=Object.getOwnPropertyDescriptor(u,e);Object.defineProperty(i,e,t.get?t:{enumerable:!0,get:()=>u[e]})}}return i.default=u,Object.freeze(i)}const y=b(R),o=b(S);class C{constructor(i){this.defaultMaterial=new o.MeshBasicMaterial({color:6908265}),this.materialMap=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=p.EVehiclePlateState.None,this.historyPositionMap=new Map,this.vehicleObjectMap=new Map;const e=T.default.useAppDataStore;this.assetsRoot=JSON.parse(JSON.stringify(e.mapConfig)).assetsRoot,this.view=i;const t=new P.GLTFLoader;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,.5),this.scene.add(this.ambient),this.sun=new o.DirectionalLight(16777215,.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];y.toRenderCoordinates(this.view,a,0,w.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),y.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 f=n.model.getObjectByName("VehiclePlate");f&&(n.model.remove(f),this.disposeModel(f)),this.createPlateSprite(e,g=>{n.model.add(g),g.position.set(0,5,-4)})}n.data=e;const d=this.historyPositionMap.get(h),M=d[d.length-1];Math.abs(c-M.heading)>=180&&(c>M.heading?M.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,M=>{d.add(M),M.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()}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!==p.EVehiclePlateState.None&&this.createPlateSprite(t.data,r=>{t.model.add(r),r.position.set(0,5,-4)})}}}}toggleGroundVehicle(i){}toggleElevatedVehicle(i){}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}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===p.EVehiclePlateState.None||this.currentSpriteContent===p.EVehiclePlateState.PlateNumber&&t)return;const s=new Image;let r="",l="",a="";if(this.currentSpriteContent===p.EVehiclePlateState.PlateNumber||this.currentSpriteContent===p.EVehiclePlateState.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===p.EVehiclePlateState.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),M=new o.SpriteMaterial({map:d}),m=new o.Sprite(M),f=.05,g=n.width*f,v=n.height*f;m.scale.set(g,v,1),m.name="VehiclePlate",e(m)}}}exports.default=C;
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const w=require("@arcgis/core/geometry/SpatialReference"),R=require("@arcgis/core/views/3d/externalRenderers"),S=require("three"),P=require("three/examples/jsm/loaders/GLTFLoader.js"),p=require("../../../types/index.js"),T=require("../../stores/index.js");function b(u){const i=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(u){for(const e in u)if(e!=="default"){const t=Object.getOwnPropertyDescriptor(u,e);Object.defineProperty(i,e,t.get?t:{enumerable:!0,get:()=>u[e]})}}return i.default=u,Object.freeze(i)}const y=b(R),o=b(S);class C{constructor(i){this.defaultMaterial=new o.MeshBasicMaterial({color:6908265}),this.materialMap=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=p.EVehiclePlateState.None,this.historyPositionMap=new Map,this.vehicleObjectMap=new Map;const e=T.default.useAppDataStore;this.assetsRoot=JSON.parse(JSON.stringify(e.mapConfig)).assetsRoot,this.view=i;const t=new P.GLTFLoader;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,.5),this.scene.add(this.ambient),this.sun=new o.DirectionalLight(16777215,.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];y.toRenderCoordinates(this.view,a,0,w.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),y.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 f=n.model.getObjectByName("VehiclePlate");f&&(n.model.remove(f),this.disposeModel(f)),this.createPlateSprite(e,g=>{n.model.add(g),g.position.set(0,5,-4)})}n.data=e;const d=this.historyPositionMap.get(h),M=d[d.length-1];Math.abs(c-M.heading)>=180&&(c>M.heading?M.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,M=>{d.add(M),M.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))})}toggleTrafficInfo(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()}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!==p.EVehiclePlateState.None&&this.createPlateSprite(t.data,r=>{t.model.add(r),r.position.set(0,5,-4)})}}}}toggleGroundVehicle(i){}toggleElevatedVehicle(i){}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}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===p.EVehiclePlateState.None||this.currentSpriteContent===p.EVehiclePlateState.PlateNumber&&t)return;const s=new Image;let r="",l="",a="";if(this.currentSpriteContent===p.EVehiclePlateState.PlateNumber||this.currentSpriteContent===p.EVehiclePlateState.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===p.EVehiclePlateState.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),M=new o.SpriteMaterial({map:d}),m=new o.Sprite(M),f=.05,g=n.width*f,v=n.height*f;m.scale.set(g,v,1),m.name="VehiclePlate",e(m)}}}exports.default=C;

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

@@ -1,4 +1,4 @@
-import { EVehiclePlateState } from '../../../types';
+import { EVehiclePlateState, IToggleTrafficInfoParams } from '../../../types';
 export default class TraceHoloFlow {
     private mapConfig;
     private view;
@@ -9,6 +9,11 @@ export default class TraceHoloFlow {
      * 处理全息流轨迹数据
      * */
     handleVehicleTraceData(data: any): void;
+    /**
+     * 切换交通信息可见性
+     * @param params
+     */
+    toggleTrafficInfo(params: IToggleTrafficInfoParams): void;
     /**
      * 清除轨迹流
      * */

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

@@ -1 +1 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const f=require("@arcgis/core/views/3d/externalRenderers"),g=require("../../stores/index.js"),T=require("./trace-external-renderer.js"),b=require("./trace-layer-renderer.js");function V(o){const e=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(o){for(const r in o)if(r!=="default"){const i=Object.getOwnPropertyDescriptor(o,r);Object.defineProperty(e,r,i.get?i:{enumerable:!0,get:()=>o[r]})}}return e.default=o,Object.freeze(e)}const y=V(f);class R{constructor(e){this.lastDataTime=0,this.view=e;const r=g.default.useAppDataStore;this.mapConfig=JSON.parse(JSON.stringify(r.mapConfig)),e.type==="3d"?(this.traceRenderer=new T.default(e),y.add(e,this.traceRenderer)):this.traceRenderer=new b.default(e)}handleVehicleTraceData(e){const r=new Date().getTime();if(r-this.lastDataTime<100)return;this.lastDataTime=r;const{newVehList:a,updateVehList:l,deleteVehList:s,jgsj:h}=e,d=e.crossId||"",u=[],n=[],p=[],m=[];if(a&&a.length>0){for(const c of a){c.localTimestamp||(c.localTimestamp=h||r);const t=this.buildVehicleTrackData(c,d);t&&(u.push(t),p.push(t.ptcId))}this.traceRenderer.addVehicles(u)}if(l&&l.length>0){for(const c of l){const t=this.buildVehicleTrackData(c,d);t&&(n.push(t),m.push(t.ptcId))}this.traceRenderer.updateVehicles(n)}if(s&&s.length>0){const c=s.map(t=>d+"-"+(t.ptcId||t.vehno||t.vehNo));this.traceRenderer.deleteVehicles(c),console.log("deleteVehList",c)}}clearTrace(){this.traceRenderer.clearVehicles()}updatePanelContent(e){this.traceRenderer.updatePanelContent(e)}toggleGroundVehicle(e){this.traceRenderer.toggleGroundVehicle(e)}toggleElevatedVehicle(e){this.traceRenderer.toggleElevatedVehicle(e)}buildVehicleTrackData(e,r){const i=e.longitude,a=e.latitude,l=e.ptcId,s=Number(e.ptcType),h=e.heading,d=Number(e.vehicleType),u=Number(e.vehicleColor),n=e.plateNo||e.plateno,p=Number(e.plateColor),m=e.timestamp,c=e.localTimestamp,t=String(e.roadLayer)||"1";if(!(s<0||s>8))return{ptcId:l,crossId:r,x:i,y:a,ptcType:s,vehicleType:d,heading:s===2?-h:h,vehicleColor:u,showName:n&&n!==""&&n!=="0"&&n!=="000000"?n:"",plateNo:n,plateColor:p,timestamp:m,localTimestamp:c,roadLayer:t}}}exports.default=R;
+"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"),T=require("./trace-external-renderer.js"),b=require("./trace-layer-renderer.js");function R(i){const e=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(i){for(const t in i)if(t!=="default"){const s=Object.getOwnPropertyDescriptor(i,t);Object.defineProperty(e,t,s.get?s:{enumerable:!0,get:()=>i[t]})}}return e.default=i,Object.freeze(e)}const V=R(g);class y{constructor(e){this.lastDataTime=0,this.view=e;const t=m.default.useAppDataStore;this.mapConfig=JSON.parse(JSON.stringify(t.mapConfig)),e.type==="3d"?(this.traceRenderer=new T.default(e),V.add(e,this.traceRenderer)):this.traceRenderer=new b.default(e)}handleVehicleTraceData(e){const t=new Date().getTime();if(t-this.lastDataTime<100)return;this.lastDataTime=t;const{newVehList:a,updateVehList:l,deleteVehList:o,jgsj:d}=e,h=e.crossId||"",u=[],c=[];if(a&&a.length>0){for(const n of a){n.localTimestamp||(n.localTimestamp=d||t);const r=this.buildVehicleTrackData(n,h);r&&u.push(r)}this.traceRenderer.addVehicles(u)}if(l&&l.length>0){for(const n of l){const r=this.buildVehicleTrackData(n,h);r&&c.push(r)}this.traceRenderer.updateVehicles(c)}if(o&&o.length>0){const n=o.map(r=>h+"-"+(r.ptcId||r.vehno||r.vehNo));this.traceRenderer.deleteVehicles(n)}}toggleTrafficInfo(e){this.traceRenderer.toggleTrafficInfo(e)}clearTrace(){this.traceRenderer.clearVehicles()}updatePanelContent(e){this.traceRenderer.updatePanelContent(e)}toggleGroundVehicle(e){this.traceRenderer.toggleGroundVehicle(e)}toggleElevatedVehicle(e){this.traceRenderer.toggleElevatedVehicle(e)}buildVehicleTrackData(e,t){const s=e.longitude,a=e.latitude,l=e.ptcId,o=Number(e.ptcType),d=e.heading,h=Number(e.vehicleType),u=Number(e.vehicleColor),c=e.plateNo||e.plateno,n=Number(e.plateColor),r=e.timestamp,p=e.localTimestamp,f=String(e.roadLayer)||"1";if(!(o<0||o>8))return{ptcId:l,crossId:t,x:s,y:a,ptcType:o,vehicleType:h,heading:o===2?-d:d,vehicleColor:u,showName:c&&c!==""&&c!=="0"&&c!=="000000"?c:"",plateNo:c,plateColor:n,timestamp:r,localTimestamp:p,roadLayer:f}}}exports.default=y;

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

@@ -24,6 +24,10 @@ export default class TraceLayerRenderer implements ITraceRendererInterface {
      * @param visible
      */
     toggleElevatedVehicle(visible: boolean): void;
+    toggleTrafficInfo(params: {
+        name: string;
+        visible: boolean;
+    }): void;
     private render;
     private updatePosition;
     /**

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

@@ -1 +1 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const g=require("@arcgis/core/Graphic"),d=require("@arcgis/core/layers/GraphicsLayer"),y=require("../../stores/index.js");class b{constructor(i){this.showVehiclePlate=!1,this.showGroundVehicle=!0,this.showElevatedVehicle=!0,this.historyPositionMap=new Map,this.vehicleObjectMap=new Map,this.view=i;const e=y.default.useAppDataStore;this.mapConfig=JSON.parse(JSON.stringify(e.mapConfig)),this.vehicleLayer=new d({id:"vehicleLayer"}),this.view.map.add(this.vehicleLayer),requestAnimationFrame(()=>this.render())}addVehicles(i){const e=i.map(t=>{const{crossId:h,ptcId:l,localTimestamp:o}=t,s=Number(t.x),r=Number(t.y),a=Number(t.heading),c=`${h}-${l}`;this.historyPositionMap.set(c,[{pos:[s,r,0],heading:a,time:Date.now()}]);const n=new g({geometry:{type:"point",x:s,y:r},attributes:{...t},symbol:this.createCIMSymbol(t)});return n.visible=!1,this.vehicleObjectMap.set(c,{graphic:n,data:t,waitForDelete:!1}),n});this.vehicleLayer.addMany(e)}updateVehicles(i){const e=[];i.forEach(t=>{const{crossId:h,ptcId:l,localTimestamp:o}=t,s=Number(t.x),r=Number(t.y);let a=Number(t.heading);const c=`${h}-${l}`,n=this.vehicleObjectMap.get(c);if(n){n.data=t;const p=this.historyPositionMap.get(c),m=p[p.length-1];Math.abs(a-m.heading)>=180&&(a>m.heading?m.heading+=360:a+=360),p.push({pos:[s,r,0],heading:a,time:Date.now()})}else e.push(t)}),this.addVehicles(e)}deleteVehicles(i){i.forEach(e=>{const t=this.vehicleObjectMap.get(e);t&&(t.waitForDelete=!0)})}clearVehicles(){this.vehicleLayer.removeAll(),this.vehicleObjectMap.clear(),this.historyPositionMap.clear()}updatePanelContent(i){console.log(i)}toggleGroundVehicle(i){this.showGroundVehicle=i}toggleElevatedVehicle(i){this.showElevatedVehicle=i}render(){this.vehicleObjectMap.forEach((i,e)=>{this.updatePosition(e)}),requestAnimationFrame(()=>this.render())}updatePosition(i){const e=this.historyPositionMap.get(i),t=this.vehicleObjectMap.get(i);if(!e||!t||e.length<=1)return;(t.graphic.getAttribute("roadLayer")||"1")==="1"?t.graphic.visible=this.showGroundVehicle:t.graphic.visible=this.showElevatedVehicle,t.segmentStartTime||(t.segmentStartTime=Date.now(),t.segmentTotalTime=e[1].time-e[0].time);const l=Date.now()-t.segmentStartTime,o=Math.min(1,l/t.segmentTotalTime);if(o===1)if(e.shift(),e.length===1){t.waitForDelete?(this.vehicleLayer.remove(t.graphic),this.vehicleObjectMap.delete(i),this.historyPositionMap.delete(i)):(t.segmentStartTime=void 0,t.segmentTotalTime=void 0);return}else t.segmentStartTime=Date.now(),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),t.graphic.geometry={type:"point",x:e[0].pos[0],y:e[0].pos[1]};else{const s=e[0].pos[0]+(e[1].pos[0]-e[0].pos[0])*o,r=e[0].pos[1]+(e[1].pos[1]-e[0].pos[1])*o,a=e[0].heading+(e[1].heading-e[0].heading)*o;t.graphic.geometry={type:"point",x:s,y:r},t.data.heading=a,t.graphic.symbol=this.createCIMSymbol(t.data)}}createCIMSymbol(i){const e=this.getPlateFontColor(i.plateColor);return{type:"cim",data:{type:"CIMSymbolReference",primitiveOverrides:[{type:"CIMPrimitiveOverride",primitiveName:"textGraphic",propertyName:"TextString",valueExpressionInfo:{type:"CIMExpressionInfo",title:"Custom",expression:"$feature.showName",returnType:"Default"}}],symbol:{type:"CIMPointSymbol",symbolLayers:[{type:"CIMVectorMarker",enable:this.showVehiclePlate,size:32,colorLocked:!0,anchorPointUnits:"Relative",frame:{xmin:-8,ymin:-8,xmax:8,ymax:8},markerGraphics:[{type:"CIMMarkerGraphic",primitiveName:"textGraphic",geometry:{x:0,y:0},symbol:{type:"CIMTextSymbol",height:4,horizontalAlignment:"Center",offsetX:0,offsetY:8,haloSize:1,haloSymbol:{type:"CIMPolygonSymbol",symbolLayers:[{type:"CIMSolidFill",enable:!0,color:e.backgroundColor}]},symbol:{type:"CIMPolygonSymbol",symbolLayers:[{type:"CIMSolidFill",enable:!0,color:e.fillColor}]},verticalAlignment:"Center"},textString:""}],scaleSymbolsProportionally:!0,respectFrame:!0},{type:"CIMPictureMarker",enable:!0,anchorPoint:{x:0,y:0},anchorPointUnits:"Relative",size:30,rotation:i.heading,rotateClockwise:!0,textureFilter:"Picture",url:`${this.mapConfig.assetsRoot}Images/car/${this.getCarPic(i.vehicleColor)}`}]}}}}getCarPic(i){if(this.view.zoom<=15)return"point.png";let e="grey";switch(typeof i=="string"&&(i=i.toLowerCase()),i){case"a":case 1:e="white";break;case"b":case 2:e="grey";break;case"c":case 3:e="yellow";break;case"d":case 4:e="pink";break;case"e":case 5:e="red";break;case"f":case 10:e="purple";break;case"g":case 6:e="green";break;case"h":case 7:e="blue";break;case"i":case 8:e="brown";break;case"j":case 9:e="black";break}return e+".png"}getPlateFontColor(i){let e=[255,255,255,255],t=[169,169,169,255];switch(i){case 0:e=[0,0,0,255],t=[255,255,255,255];break;case 1:e=[0,0,0,255],t=[244,164,96,255];break;case 2:e=[255,255,255,255],t=[65,105,225,255];break;case 3:e=[255,255,255,255],t=[0,0,0,255];break;case 15:e=[244,164,96,255],t=[0,250,154,255];break;case 16:e=[0,0,0,255],t=[0,250,154,255];break}return{fillColor:e,backgroundColor:t}}}exports.default=b;
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const h=require("@arcgis/core/Graphic"),p=require("@arcgis/core/layers/GraphicsLayer"),m=require("../../stores/index.js");class g{constructor(i){this.showVehiclePlate=!1,this.showGroundVehicle=!0,this.showElevatedVehicle=!0,this.historyPositionMap=new Map,this.vehicleObjectMap=new Map,this.view=i;const e=m.default.useAppDataStore;this.mapConfig=JSON.parse(JSON.stringify(e.mapConfig)),this.vehicleLayer=new p({id:"vehicleLayer"}),this.view.map.add(this.vehicleLayer),requestAnimationFrame(()=>this.render())}addVehicles(i){const e=i.map(t=>{const{crossId:l,ptcId:n}=t,s=Number(t.x),a=Number(t.y),r=Number(t.heading),o=`${l}-${n}`;this.historyPositionMap.set(o,[{pos:[s,a,0],heading:r,time:Date.now()}]);const c=new h({geometry:{type:"point",x:s,y:a},attributes:{...t},symbol:this.createCIMSymbol(t)});return c.visible=!1,this.vehicleObjectMap.set(o,{graphic:c,data:t,waitForDelete:!1}),c});this.vehicleLayer.addMany(e)}updateVehicles(i){const e=[];i.forEach(t=>{const{crossId:l,ptcId:n}=t,s=Number(t.x),a=Number(t.y),r=`${l}-${n}`,o=this.vehicleObjectMap.get(r);o?(o.data=t,this.historyPositionMap.get(r).push({pos:[s,a,0],heading:t.heading,time:Date.now()})):e.push(t)}),this.addVehicles(e)}deleteVehicles(i){i.forEach(e=>{const t=this.vehicleObjectMap.get(e);t&&(t.waitForDelete=!0)})}clearVehicles(){this.vehicleLayer.removeAll(),this.vehicleObjectMap.clear(),this.historyPositionMap.clear()}updatePanelContent(i){console.log(i)}toggleGroundVehicle(i){this.showGroundVehicle=i}toggleElevatedVehicle(i){this.showElevatedVehicle=i}toggleTrafficInfo(i){i.name==="vehiclePlate"&&(this.showVehiclePlate=i.visible)}render(){this.vehicleObjectMap.forEach((i,e)=>{this.updatePosition(e)}),requestAnimationFrame(()=>this.render())}updatePosition(i){const e=this.historyPositionMap.get(i),t=this.vehicleObjectMap.get(i);if(!e||!t||e.length<=1)return;(t.graphic.getAttribute("roadLayer")||"1")==="1"?t.graphic.visible=this.showGroundVehicle:t.graphic.visible=this.showElevatedVehicle,t.segmentStartTime||(t.segmentStartTime=Date.now(),t.segmentTotalTime=e[1].time-e[0].time);const n=Date.now()-t.segmentStartTime,s=Math.min(1,n/t.segmentTotalTime);if(s===1)if(e.shift(),e.length===1){t.waitForDelete?(this.vehicleLayer.remove(t.graphic),this.vehicleObjectMap.delete(i),this.historyPositionMap.delete(i)):(t.segmentStartTime=void 0,t.segmentTotalTime=void 0);return}else 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),t.graphic.geometry={type:"point",x:e[0].pos[0],y:e[0].pos[1]};else{const a=e[0].pos[0]+(e[1].pos[0]-e[0].pos[0])*s,r=e[0].pos[1]+(e[1].pos[1]-e[0].pos[1])*s,o=e[0].heading+(e[1].heading-e[0].heading)*s;t.graphic.geometry={type:"point",x:a,y:r},t.data.heading=o,t.graphic.symbol=this.createCIMSymbol(t.data)}}createCIMSymbol(i){const e=this.getPlateFontColor(i.plateColor);return{type:"cim",data:{type:"CIMSymbolReference",primitiveOverrides:[{type:"CIMPrimitiveOverride",primitiveName:"textGraphic",propertyName:"TextString",valueExpressionInfo:{type:"CIMExpressionInfo",title:"Custom",expression:"$feature.showName",returnType:"Default"}}],symbol:{type:"CIMPointSymbol",symbolLayers:[{type:"CIMVectorMarker",enable:this.showVehiclePlate,size:32,colorLocked:!0,anchorPointUnits:"Relative",frame:{xmin:-8,ymin:-8,xmax:8,ymax:8},markerGraphics:[{type:"CIMMarkerGraphic",primitiveName:"textGraphic",geometry:{x:0,y:0},symbol:{type:"CIMTextSymbol",height:4,horizontalAlignment:"Center",offsetX:0,offsetY:8,haloSize:1,haloSymbol:{type:"CIMPolygonSymbol",symbolLayers:[{type:"CIMSolidFill",enable:!0,color:e.backgroundColor}]},symbol:{type:"CIMPolygonSymbol",symbolLayers:[{type:"CIMSolidFill",enable:!0,color:e.fillColor}]},verticalAlignment:"Center"},textString:""}],scaleSymbolsProportionally:!0,respectFrame:!0},{type:"CIMPictureMarker",enable:!0,anchorPoint:{x:0,y:0},anchorPointUnits:"Relative",size:30,rotation:i.heading,rotateClockwise:!0,textureFilter:"Picture",url:`${this.mapConfig.assetsRoot}Images/car/${this.getCarPic(i.vehicleColor)}`}]}}}}getCarPic(i){if(this.view.zoom<=15)return"point.png";let e="grey";switch(typeof i=="string"&&(i=i.toLowerCase()),i){case"a":case 1:e="white";break;case"b":case 2:e="grey";break;case"c":case 3:e="yellow";break;case"d":case 4:e="pink";break;case"e":case 5:e="red";break;case"f":case 10:e="purple";break;case"g":case 6:e="green";break;case"h":case 7:e="blue";break;case"i":case 8:e="brown";break;case"j":case 9:e="black";break}return e+".png"}getPlateFontColor(i){let e=[255,255,255,255],t=[169,169,169,255];switch(i){case 0:e=[0,0,0,255],t=[255,255,255,255];break;case 1:e=[0,0,0,255],t=[244,164,96,255];break;case 2:e=[255,255,255,255],t=[65,105,225,255];break;case 3:e=[255,255,255,255],t=[0,0,0,255];break;case 15:e=[244,164,96,255],t=[0,250,154,255];break;case 16:e=[0,0,0,255],t=[0,250,154,255];break}return{fillColor:e,backgroundColor:t}}}exports.default=g;

package/lib/src/types/index.d.ts

@@ -146,6 +146,7 @@ export interface ITraceRendererInterface {
     updatePanelContent(contentType: EVehiclePlateState): void;
     toggleGroundVehicle(visible: boolean): void;
     toggleElevatedVehicle(visible: boolean): void;
+    toggleTrafficInfo(params: IToggleTrafficInfoParams): void;
 }
 export declare enum EVehiclePlateState {
     None = 0,

package/package.json

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