gisviewer-vue3-arcgis 1.0.90 → 1.0.91

package/es/src/gis-map/utils/traffic-flow.mjs

@@ -1,93 +1,115 @@
-import m from "@arcgis/core/Graphic";
+import u from "@arcgis/core/Graphic";
 import { Point as p } from "@arcgis/core/geometry";
-import f from "@arcgis/core/layers/GraphicsLayer";
-import u from "../stores/index.mjs";
-import y from "./common-utils.mjs";
-class x {
-  constructor(o) {
-    this.maxMissCount = 2, this.objectMissCount = /* @__PURE__ */ new Map(), this.showVehiclePlate = !0, this.showLog = !1, this.focusVehNo = "", this.view = o;
-    const e = u.useAppDataStore;
-    this.mapConfig = JSON.parse(JSON.stringify(e.mapConfig)), this.objectsLayer = new f(), this.view.map.add(this.objectsLayer);
+import y from "@arcgis/core/layers/GraphicsLayer";
+import d from "../stores/index.mjs";
+import m from "./common-utils.mjs";
+class S {
+  constructor(i) {
+    this.maxMissCount = 2, this.objectMissCount = /* @__PURE__ */ new Map(), this.showVehiclePlate = !0, this.showGroundVehicle = !0, this.showElevatedVehicle = !0, this.showLog = !1, this.focusVehNo = "", this.view = i;
+    const t = d.useAppDataStore;
+    this.mapConfig = JSON.parse(JSON.stringify(t.mapConfig)), this.objectsLayer = new y(), this.view.map.add(this.objectsLayer);
   }
   /**
    * 开始显示交通流数据
    * @param url
    * @param options
    */
-  connectTrafficFlow(o, e) {
-    var t;
-    this.showVehiclePlate = (e == null ? void 0 : e.showVehiclePlate) !== !1, this.showLog = (e == null ? void 0 : e.showTraceLog) === !0, (t = this.webSocket) == null || t.close(), this.webSocket = new WebSocket(o), this.webSocket.onopen = () => {
+  connectTrafficFlow(i, t) {
+    var e;
+    this.showVehiclePlate = (t == null ? void 0 : t.showVehiclePlate) !== !1, this.showLog = (t == null ? void 0 : t.showTraceLog) === !0, (e = this.webSocket) == null || e.close(), this.webSocket = new WebSocket(i), this.webSocket.onopen = () => {
       console.log("websocket连接成功"), this.objectMissCount.clear();
     }, this.webSocket.onclose = () => {
       console.log("websocket连接关闭");
-    }, this.webSocket.onmessage = (a) => {
-      this.handleTrafficFlowData(a.data);
+    }, this.webSocket.onmessage = (o) => {
+      this.handleTrafficFlowData(o.data);
     };
   }
   /**
    * 停止显示交通流数据
    */
   disconnectTrafficFlow() {
-    var o;
-    (o = this.webSocket) == null || o.close(), this.objectsLayer.removeAll(), this.objectMissCount.clear();
+    var i;
+    (i = this.webSocket) == null || i.close(), this.objectsLayer.removeAll(), this.objectMissCount.clear();
   }
   /**
-   * 控制车辆号牌是否显示
-   * @param visible
+   * 切换交通信息可见性
+   * @param params
    */
-  toggleVehiclePlate(o) {
-    this.showVehiclePlate = o;
+  toggleTrafficInfo(i) {
+    switch (i.name.toLowerCase()) {
+      case "vehiclePlate".toLowerCase():
+        this.showVehiclePlate = i.visible;
+        break;
+    }
+  }
+  /**
+   * 切换交通对象可见性
+   * @param params
+   */
+  toggleTrafficObject(i) {
+    switch (i.name.toLowerCase()) {
+      case "groundVehicle".toLowerCase():
+        this.showGroundVehicle = i.visible;
+        break;
+      case "elevatedVehicle".toLowerCase():
+        this.showElevatedVehicle = i.visible;
+        break;
+    }
   }
-  handleTrafficFlowData(o) {
-    const e = y.unzip(o);
-    if (!e)
+  handleTrafficFlowData(i) {
+    const t = m.unzip(i);
+    if (!t)
       return;
-    const t = [], a = [], n = [], l = JSON.parse(e);
-    this.showLog && console.log(l);
-    const s = l.data || l.rtPositionList;
+    const e = [], o = [], n = [], c = JSON.parse(t);
+    this.showLog && console.log(c);
+    const s = c.data || c.rtPositionList;
     if (!s || s.length === 0)
       return;
-    const h = new Date(l.jgsj).getTime();
-    for (const r of s) {
-      const i = this.buildVehicleTrackData(r, h);
-      i && (this.objectMissCount.has(i.ptcId) ? t.push(i) : a.push(i), this.objectMissCount.set(i.ptcId, 0));
+    const b = new Date(c.jgsj).getTime();
+    for (const a of s) {
+      const r = this.buildVehicleTrackData(a, b);
+      r && (this.objectMissCount.has(r.ptcId) ? e.push(r) : o.push(r), this.objectMissCount.set(r.ptcId, 0));
     }
-    for (const r of this.objectMissCount) {
-      const i = r[0];
-      let c = r[1];
-      s.findIndex((b) => b.vehno === i) < 0 && (c++, this.objectMissCount.set(i, c), c === this.maxMissCount && n.push(i));
+    for (const a of this.objectMissCount) {
+      const r = a[0];
+      let l = a[1];
+      s.findIndex((f) => f.vehno === r) < 0 && (l++, this.objectMissCount.set(r, l), l === this.maxMissCount && n.push(r));
     }
-    for (const r of n)
-      this.objectMissCount.delete(r);
-    this.addTrafficObjects(a), this.updateTrafficObjects(t), this.deleteTrafficObjects(n);
+    for (const a of n)
+      this.objectMissCount.delete(a);
+    this.addTrafficObjects(o), this.updateTrafficObjects(e), this.deleteTrafficObjects(n);
   }
   /**
    * 新增交通对象
    * @param objects
    */
-  addTrafficObjects(o) {
-    const e = o.map(
-      (t) => new m({
-        geometry: new p({ longitude: t.x, latitude: t.y }),
-        symbol: this.createCIMSymbol(t),
-        attributes: t
+  addTrafficObjects(i) {
+    const t = i.map(
+      (e) => new u({
+        geometry: new p({ longitude: e.x, latitude: e.y }),
+        symbol: this.createCIMSymbol(e),
+        attributes: e,
+        visible: this.getVehicleVisibility(e)
       })
     );
-    this.objectsLayer.addMany(e);
+    this.objectsLayer.addMany(t);
+  }
+  getVehicleVisibility(i) {
+    return i.roadLayer === "1" ? this.showGroundVehicle : i.roadLayer === "2" || i.roadLayer === "3" ? this.showElevatedVehicle : !0;
   }
   /**
    * 更新交通对象
    * @param objects
    */
-  updateTrafficObjects(o) {
-    o.forEach((e) => {
-      const t = this.objectsLayer.graphics.find(
-        (a) => a.getAttribute("ptcId") === e.ptcId
+  updateTrafficObjects(i) {
+    i.forEach((t) => {
+      const e = this.objectsLayer.graphics.find(
+        (o) => o.getAttribute("ptcId") === t.ptcId
       );
-      t && (t.geometry = new p({
-        longitude: e.x,
-        latitude: e.y
-      }), t.symbol = this.createCIMSymbol(e));
+      e && (e.geometry = new p({
+        longitude: t.x,
+        latitude: t.y
+      }), e.symbol = this.createCIMSymbol(t), e.visible = this.getVehicleVisibility(t));
     });
   }
   /**
@@ -95,8 +117,8 @@ class x {
    * @param vehTrack
    * @returns
    */
-  createCIMSymbol(o) {
-    const e = this.getPlateFontColor(o.plateColor);
+  createCIMSymbol(i) {
+    const t = this.getPlateFontColor(i.plateColor);
     return {
       type: "cim",
       data: {
@@ -144,7 +166,7 @@ class x {
                         {
                           type: "CIMSolidFill",
                           enable: !0,
-                          color: e.backgroundColor
+                          color: t.backgroundColor
                         }
                       ]
                     },
@@ -154,7 +176,7 @@ class x {
                         {
                           type: "CIMSolidFill",
                           enable: !0,
-                          color: e.fillColor
+                          color: t.fillColor
                         }
                       ]
                     },
@@ -175,11 +197,11 @@ class x {
                 y: 0
               },
               anchorPointUnits: "Relative",
-              size: 30,
-              rotation: o.heading,
+              size: 15,
+              rotation: i.heading,
               rotateClockwise: !0,
               textureFilter: "Picture",
-              url: `${this.mapConfig.assetsRoot}Images/car/${this.getCarPic(o.vehicleColor).pic}`
+              url: `${this.mapConfig.assetsRoot}Images/car/${this.getCarPic(i.vehicleColor).pic}`
             }
           ]
         }
@@ -190,35 +212,36 @@ class x {
    * 删除交通对象
    * @param ids
    */
-  deleteTrafficObjects(o) {
-    o.forEach((e) => {
-      const t = this.objectsLayer.graphics.find(
-        (a) => a.getAttribute("ptcId") === e
+  deleteTrafficObjects(i) {
+    i.forEach((t) => {
+      const e = this.objectsLayer.graphics.find(
+        (o) => o.getAttribute("ptcId") === t
       );
-      t && this.objectsLayer.remove(t);
+      e && this.objectsLayer.remove(e);
     });
   }
-  buildVehicleTrackData(o, e) {
-    const { hpys: t, csys: a, lng: n, angle: l, hphm: s, lat: h, cx: r } = o, i = o.vehno || o.vehNo;
-    if (!i)
+  buildVehicleTrackData(i, t) {
+    const { hpys: e, csys: o, lng: n, angle: c, hphm: s, lat: b, cx: a, roadLayer: r } = i, l = i.vehno || i.vehNo;
+    if (!l)
       return;
-    let c;
-    if (s && s !== "0" && s !== 0 ? c = s.includes("-") ? s.split("-")[1] : s : c = i.includes("-") ? i.split("-")[1] : i, !["1", "2", "3", "4", "5", "6", 1, 2, 3, 4, 5, 6].includes(r)) {
-      console.log("车辆类型错误", r);
+    let h;
+    if (s && s !== "0" && s !== 0 ? h = s.includes("-") ? s.split("-")[1] : s : h = l.includes("-") ? l.split("-")[1] : l, !["1", "2", "3", "4", "5", "6", 1, 2, 3, 4, 5, 6].includes(a)) {
+      console.log("车辆类型错误", a);
       return;
     }
     return {
-      ptcId: i,
-      timestamp: e,
-      localTimestamp: e,
+      ptcId: l,
+      timestamp: t,
+      localTimestamp: t,
       x: n,
-      y: h,
-      ptcType: Number(r),
-      heading: l,
-      vehicleColor: a || "z",
-      plateColor: s ? t : "99",
-      showName: c,
-      vehicleType: 99
+      y: b,
+      ptcType: Number(a),
+      heading: c,
+      vehicleColor: o || "z",
+      plateColor: s ? e : "99",
+      showName: h,
+      vehicleType: 99,
+      roadLayer: r || "1"
     };
   }
   /**
@@ -226,83 +249,86 @@ class x {
    * @param carColor
    * @returns
    */
-  getCarPic(o) {
-    if (this.view.zoom <= 15)
+  getCarPic(i) {
+    let t = 0;
+    if (this.view.type === "3d" ? t = this.view.zoom : t = this.view.zoom, t <= 17)
       return {
         pic: "point.png",
         color: [128, 128, 128, 255]
       };
-    let e = "grey", t = [128, 128, 128, 255];
-    switch (o.toLowerCase()) {
-      case "a":
-        e = "white", t = [200, 200, 200, 255];
-        break;
-      case "b":
-        e = "grey", t = [128, 128, 128, 255];
-        break;
-      case "c":
-        e = "yellow", t = [255, 215, 0, 255];
-        break;
-      case "d":
-        e = "pink", t = [255, 182, 193, 255];
-        break;
-      case "e":
-        e = "red", t = [255, 0, 0, 255];
-        break;
-      case "f":
-        e = "purple", t = [128, 0, 128, 255];
-        break;
-      case "g":
-        e = "green", t = [124, 252, 0, 255];
-        break;
-      case "h":
-        e = "blue", t = [0, 191, 255, 255];
-        break;
-      case "i":
-        e = "brown", t = [244, 164, 96, 255];
-        break;
-      case "j":
-        e = "black", t = [0, 0, 0, 255];
-        break;
+    {
+      let e = "grey", o = [128, 128, 128, 255];
+      switch (i.toLowerCase()) {
+        case "a":
+          e = "white", o = [200, 200, 200, 255];
+          break;
+        case "b":
+          e = "grey", o = [128, 128, 128, 255];
+          break;
+        case "c":
+          e = "yellow", o = [255, 215, 0, 255];
+          break;
+        case "d":
+          e = "pink", o = [255, 182, 193, 255];
+          break;
+        case "e":
+          e = "red", o = [255, 0, 0, 255];
+          break;
+        case "f":
+          e = "purple", o = [128, 0, 128, 255];
+          break;
+        case "g":
+          e = "green", o = [124, 252, 0, 255];
+          break;
+        case "h":
+          e = "blue", o = [0, 191, 255, 255];
+          break;
+        case "i":
+          e = "brown", o = [244, 164, 96, 255];
+          break;
+        case "j":
+          e = "black", o = [0, 0, 0, 255];
+          break;
+      }
+      return {
+        pic: e + ".png",
+        color: o
+      };
     }
-    return {
-      pic: e + ".png",
-      color: t
-    };
   }
   /**
    * 根据号牌颜色属性获取填充色和背景色
    * @param plateColor
    * @returns
    */
-  getPlateFontColor(o) {
-    let e = [255, 255, 255, 255], t = [169, 169, 169, 255];
-    switch (o) {
+  getPlateFontColor(i) {
+    let t = [255, 255, 255, 255], e = [169, 169, 169, 255];
+    switch (i) {
       case 0:
-        e = [0, 0, 0, 255], t = [255, 255, 255, 255];
+        t = [0, 0, 0, 255], e = [255, 255, 255, 255];
         break;
       case 1:
-        e = [0, 0, 0, 255], t = [244, 164, 96, 255];
+        t = [0, 0, 0, 255], e = [244, 164, 96, 255];
         break;
       case 2:
-        e = [255, 255, 255, 255], t = [65, 105, 225, 255];
+        t = [255, 255, 255, 255], e = [65, 105, 225, 255];
         break;
       case 3:
-        e = [255, 255, 255, 255], t = [0, 0, 0, 255];
+        t = [255, 255, 255, 255], e = [0, 0, 0, 255];
         break;
       case 15:
-        e = [244, 164, 96, 255], t = [0, 250, 154, 255];
+        t = [244, 164, 96, 255], e = [0, 250, 154, 255];
         break;
       case 16:
-        e = [0, 0, 0, 255], t = [0, 250, 154, 255];
+        t = [0, 0, 0, 255], e = [0, 250, 154, 255];
         break;
     }
     return {
-      fillColor: e,
-      backgroundColor: t
+      fillColor: t,
+      backgroundColor: e
     };
   }
 }
 export {
-  x as default
+  S as default
 };

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

@@ -34,6 +34,7 @@ export interface IVehicleTrack {
     fixAngle?: number;
     speed?: number;
     plateNo?: string;
+    roadLayer?: string;
 }
 export interface ILaneNumberParams {
     lanes: {
@@ -44,8 +45,8 @@ export interface ILaneNumberParams {
     }[];
 }
 export interface ISetMapCenterParams {
-    center: number[];
-    camera?: {};
+    center?: number[];
+    target?: __esri.GoToTarget2D;
     zoom?: number;
     duration?: number;
 }
@@ -133,12 +134,18 @@ export interface IQueueLengthParams {
     laneId: number;
     queueLength: number;
 }
+export interface IToggleTrafficInfoParams {
+    name: string;
+    visible: boolean;
+}
 export interface ITraceRendererInterface {
     addVehicles(objects: IVehicleTrack[]): void;
     updateVehicles(objects: IVehicleTrack[]): void;
     deleteVehicles(idList: string[]): void;
     clearVehicles(): void;
     updatePanelContent(contentType: EVehiclePlateState): void;
+    toggleGroundVehicle(visible: boolean): void;
+    toggleElevatedVehicle(visible: boolean): void;
 }
 export declare enum EVehiclePlateState {
     None = 0,

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

@@ -1,6 +1,6 @@
 import MapView from '@arcgis/core/views/MapView';
 import SceneView from '@arcgis/core/views/SceneView';
-import { ILaneNumberParams, ILayerVisibleParams, ILookAtParams, IOverlayParam, IQueueLengthParams, ISetMapCameraParams, ISetMapCenterParams, IStartCrossBufferParam } from '../types';
+import { ILaneNumberParams, ILayerVisibleParams, ILookAtParams, IOverlayParam, IQueueLengthParams, ISetMapCameraParams, ISetMapCenterParams, IStartCrossBufferParam, IToggleTrafficInfoParams } from '../types';
 import HoloFlow from './utils/holo-flow';
 import MapInitializer from './utils/map-initializer';
 import OpenDriveRenderer from './utils/open-drive-renderer';
@@ -52,10 +52,8 @@ declare const _sfc_main: import("vue").DefineComponent<{
     clearHoloTrace: () => void;
     handleHoloSignalData: (signalData: any) => Promise<void>;
     clearHoloSignal: () => void;
-    toggleTrafficInfo: (params: {
-        name: string;
-        visible: boolean;
-    }) => void;
+    toggleTrafficInfo: (params: IToggleTrafficInfoParams) => void;
+    toggleTrafficObject: (params: IToggleTrafficInfoParams) => void;
     toggleVehicleInfo: (contentType: string) => void;
     addOverlays: (params: IOverlayParam) => Promise<import("../types").IResult>;
     removeOverlaysByType: (types: string[]) => import("../types").IResult;

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

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

@@ -42,10 +42,8 @@ export declare const GisMap: import("@easyest/utils/dist/lib/withinstall").SFCWi
     clearHoloTrace: () => void;
     handleHoloSignalData: (signalData: any) => Promise<void>;
     clearHoloSignal: () => void;
-    toggleTrafficInfo: (params: {
-        name: string;
-        visible: boolean;
-    }) => void;
+    toggleTrafficInfo: (params: import("../types").IToggleTrafficInfoParams) => void;
+    toggleTrafficObject: (params: import("../types").IToggleTrafficInfoParams) => void;
     toggleVehicleInfo: (contentType: string) => void;
     addOverlays: (params: import("../types").IOverlayParam) => Promise<import("../types").IResult>;
     removeOverlaysByType: (types: string[]) => import("../types").IResult;

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

@@ -1,4 +1,5 @@
 import View from '@arcgis/core/views/View';
+import { IToggleTrafficInfoParams } from '../../../types';
 export default class Index {
     private readonly view;
     private traceHoloFlow;
@@ -8,6 +9,7 @@ export default class Index {
      * 处理全息流轨迹数据
      * */
     handleVehicleTraceData(data: any): void;
+    toggleTrafficObject(params: IToggleTrafficInfoParams): void;
     clearHoloTrace(): void;
     updatePanelContent(contentType: string): void;
     handleSignalData(data: any): Promise<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"),o=require("./signal-holo-flow.js"),i=require("./trace-holo-flow.js");class n{constructor(e){this.view=e}handleVehicleTraceData(e){this.traceHoloFlow||(this.traceHoloFlow=new i.default(this.view)),this.traceHoloFlow.handleVehicleTraceData(e)}clearHoloTrace(){var e;(e=this.traceHoloFlow)==null||e.clearTrace()}updatePanelContent(e){var t;let a=l.EVehiclePlateState.None;switch(e){case"none":a=l.EVehiclePlateState.None;break;case"plateNumber":a=l.EVehiclePlateState.PlateNumber;break;case"vehicleId":a=l.EVehiclePlateState.Id;break;case"mix":a=l.EVehiclePlateState.Mix;break}(t=this.traceHoloFlow)==null||t.updatePanelContent(a)}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=n;
+"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;

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

@@ -25,6 +25,14 @@ export default class SignalHoloFlow {
      * 获取显示倒计时的canvas
      * */
     private updateCountdown;
+    /**
+     * 在倒计时面板上写入倒计时时间
+     * @param countdownCanvas 倒计时面板canvas
+     * @param rtState 相位数据
+     * @param rtState.stageRemainingTime 剩余时间
+     * @param rtState.stageAllRedTime 全红时间
+     * @param rtState.stageYellowTime 黄灯时间
+     */
     private drawCountdownText;
     private updatePhaseLine;
     /**

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

@@ -1 +1 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const d=require("@arcgis/core/core/reactiveUtils"),u=require("@arcgis/core/geometry"),p=require("@arcgis/core/layers/FeatureLayer"),g=require("../../stores/index.js");function y(r){const e=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(r){for(const t in r)if(t!=="default"){const a=Object.getOwnPropertyDescriptor(r,t);Object.defineProperty(e,t,a.get?a:{enumerable:!0,get:()=>r[t]})}}return e.default=r,Object.freeze(e)}const w=y(d);class m{constructor(e){this.currentPhaseMap=new Map,this.countdownCanvasMap=new Map,this.lastDataTime=0,this.isDeletingCanvas=!1,this.canvasWidth=80,this.canvasHeight=50,this.view=(e.type==="2d",e);const t=g.default.useAppDataStore;this.mapConfig=JSON.parse(JSON.stringify(t.mapConfig))}async initializeLayer(){if(this.mapConfig.phaseLineLayer)if(this.phaseLineLayer)this.phaseLineLayer.visible||(this.phaseLineLayer.visible=!0);else{const e=`${this.mapConfig.assetsRoot}/${this.mapConfig.phaseLineLayer}`,o=(await(await fetch(e)).json()).features.map((i,n)=>({geometry:{type:"polyline",paths:[i.geometry.coordinates]},attributes:{ObjectID:n+1,id:i.properties.id,color:"hide"}}));this.phaseLineLayer=new p({source:o,geometryType:"polyline",objectIdField:"ObjectID",outFields:["*"],fields:[{name:"ObjectID",alias:"ObjectID",type:"oid"},{name:"color",alias:"color",type:"string"}],renderer:{type:"unique-value",field:"color",defaultSymbol:{type:"simple-line",color:"lightblue",width:"2px",style:"none"},uniqueValueInfos:[{value:"green",symbol:{type:"line-3d",symbolLayers:[{type:"path",profile:"quad",material:{color:[19,255,69,.8]},width:1,height:.5}]}},{value:"red",symbol:{type:"line-3d",symbolLayers:[{type:"path",profile:"quad",material:{color:[254,5,9,.8]},width:1,height:.5}]}},{value:"yellow",symbol:{type:"line-3d",symbolLayers:[{type:"path",profile:"quad",material:{color:[255,215,0,.8]},width:1,height:.5}]}}]}}),this.view.map.add(this.phaseLineLayer)}}async handleSignalData(e){const t=new Date().getTime();if(t-this.lastDataTime<100)return;this.lastDataTime=t;const{crossId:o,lat:i,lon:n,rtStage:s,channelsConfig:l}=e;await this.updateCountdown(o,i,n,s),this.phaseLineLayer&&((!this.currentPhaseMap.has(o)||this.currentPhaseMap.get(o)!==s.stagePhase)&&await this.updatePhaseLine(o,s.channelsConfig,l),this.currentPhaseMap.set(o,s.stagePhase))}clearSignal(){this.phaseLineLayer.visible=!1,this.countdownWatchHandel&&(this.countdownWatchHandel.remove(),this.countdownWatchHandel=void 0),this.countdownCanvasMap.forEach(e=>{this.view.container.removeChild(e.backgroundCanvas),this.view.container.removeChild(e.countdownCanvas)}),this.countdownCanvasMap.clear()}async updateCountdown(e,t,a,o){if(this.isDeletingCanvas)return;const i=this.countdownCanvasMap.get(e);if(i)this.drawCountdownText(i.countdownCanvas,o);else{const n=new u.Point({longitude:a,latitude:t,z:10}),s=this.view.toScreen(n);if(s.x>this.view.width||s.y>this.view.height)return;this.createCountdownCanvas(l=>{const c=l[0],h=l[1];c.style.left=s.x+"px",c.style.top=s.y+"px",h.style.left=s.x+"px",h.style.top=s.y+"px",this.countdownCanvasMap.set(e,{backgroundCanvas:c,countdownCanvas:h,mapPoint:n}),this.drawCountdownText(h,o)})}this.countdownWatchHandel||(this.countdownWatchHandel=w.watch(()=>this.view.extent,()=>{this.countdownCanvasMap.forEach(n=>{const s=this.view.toScreen(n.mapPoint);s.x>this.view.width||s.y>this.view.height?(this.isDeletingCanvas=!0,this.view.container.removeChild(n.backgroundCanvas),this.view.container.removeChild(n.countdownCanvas),this.countdownCanvasMap.delete(e),this.isDeletingCanvas=!1):(n.backgroundCanvas.style.left=s.x+"px",n.backgroundCanvas.style.top=s.y+"px",n.countdownCanvas.style.left=s.x+"px",n.countdownCanvas.style.top=s.y+"px")})}))}drawCountdownText(e,t){const a=e.getContext("2d");a.clearRect(0,0,e.width,e.height),a.font="32px LESLIE",a.textBaseline="middle",a.textAlign="center",a.fillStyle=t.stageRemainingTime<=t.stageAllRedTime?"red":t.stageRemainingTime<=t.stageAllRedTime+t.stageYellowTime?"yellow":"lime",a.fillText(t.stageRemainingTime,e.width/2,e.height/2)}async updatePhaseLine(e,t,a){const o=this.phaseLineLayer.source.filter(i=>i.getAttribute("id").includes(e));o.forEach(i=>{const n=i.getAttribute("id");this.isLaneInChannels(n,t)?i.setAttribute("color","green"):this.isLaneInChannels(n,a)?i.setAttribute("color","red"):i.setAttribute("color","green")}),await this.phaseLineLayer.applyEdits({updateFeatures:o})}isLaneInChannels(e,t){const a=e.split("+"),o=a[1],i=a[2];for(let n=0;n<t.length;n++)for(let s=0;s<t[n].laneSnList.length;s++){const l=t[n].laneSnList[s].toFixed(0);if(o===l[0]&&i===l[1])return!0}return!1}createCountdownCanvas(e){const t=new Image;t.src=`${this.mapConfig.assetsRoot}/Images/timeboard/CountdownBG.png`,t.onload=()=>{const a=document.createElement("canvas");a.width=this.canvasWidth,a.height=this.canvasHeight,a.style.position="absolute",a.style.transform="translate(-50%, -50%)",a.getContext("2d").drawImage(t,0,0,this.canvasWidth,this.canvasHeight),this.view.container.appendChild(a);const i=document.createElement("canvas");i.width=this.canvasWidth-10,i.height=this.canvasHeight-10,i.style.position="absolute",i.style.transform="translate(-50%, -50%)",this.view.container.appendChild(i),e([a,i])},t.onerror=()=>{console.error("倒计时背景图加载失败")}}}exports.default=m;
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const d=require("@arcgis/core/core/reactiveUtils"),u=require("@arcgis/core/geometry"),p=require("@arcgis/core/layers/FeatureLayer"),g=require("../../stores/index.js");function y(r){const e=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(r){for(const t in r)if(t!=="default"){const a=Object.getOwnPropertyDescriptor(r,t);Object.defineProperty(e,t,a.get?a:{enumerable:!0,get:()=>r[t]})}}return e.default=r,Object.freeze(e)}const w=y(d);class m{constructor(e){this.currentPhaseMap=new Map,this.countdownCanvasMap=new Map,this.lastDataTime=0,this.isDeletingCanvas=!1,this.canvasWidth=80,this.canvasHeight=50,this.view=(e.type==="2d",e);const t=g.default.useAppDataStore;this.mapConfig=JSON.parse(JSON.stringify(t.mapConfig))}async initializeLayer(){if(this.mapConfig.phaseLineLayer)if(this.phaseLineLayer)this.phaseLineLayer.visible||(this.phaseLineLayer.visible=!0);else{const e=`${this.mapConfig.assetsRoot}/${this.mapConfig.phaseLineLayer}`,o=(await(await fetch(e)).json()).features.map((n,s)=>({geometry:{type:"polyline",paths:[n.geometry.coordinates]},attributes:{ObjectID:s+1,id:n.properties.id,color:"hide"}}));this.phaseLineLayer=new p({source:o,geometryType:"polyline",objectIdField:"ObjectID",outFields:["*"],fields:[{name:"ObjectID",alias:"ObjectID",type:"oid"},{name:"color",alias:"color",type:"string"}],renderer:{type:"unique-value",field:"color",defaultSymbol:{type:"simple-line",color:"lightblue",width:"2px",style:"none"},uniqueValueInfos:[{value:"green",symbol:{type:"line-3d",symbolLayers:[{type:"path",profile:"quad",material:{color:[19,255,69,.8]},width:1,height:.5}]}},{value:"red",symbol:{type:"line-3d",symbolLayers:[{type:"path",profile:"quad",material:{color:[254,5,9,.8]},width:1,height:.5}]}},{value:"yellow",symbol:{type:"line-3d",symbolLayers:[{type:"path",profile:"quad",material:{color:[255,215,0,.8]},width:1,height:.5}]}}]}}),this.view.map.add(this.phaseLineLayer)}}async handleSignalData(e){const t=new Date().getTime();if(t-this.lastDataTime<100)return;this.lastDataTime=t;const{crossId:o,lat:n,lon:s,rtStage:i,channelsConfig:l}=e;await this.updateCountdown(o,n,s,i),this.phaseLineLayer&&((!this.currentPhaseMap.has(o)||this.currentPhaseMap.get(o)!==i.stagePhase)&&await this.updatePhaseLine(o,i.channelsConfig,l),this.currentPhaseMap.set(o,i.stagePhase))}clearSignal(){this.phaseLineLayer.visible=!1,this.countdownWatchHandel&&(this.countdownWatchHandel.remove(),this.countdownWatchHandel=void 0),this.countdownCanvasMap.forEach(e=>{this.view.container.removeChild(e.backgroundCanvas),this.view.container.removeChild(e.countdownCanvas)}),this.countdownCanvasMap.clear()}async updateCountdown(e,t,a,o){if(this.isDeletingCanvas)return;const n=this.countdownCanvasMap.get(e);if(n)this.drawCountdownText(n.countdownCanvas,o);else{const s=new u.Point({longitude:a,latitude:t,z:10}),i=this.view.toScreen(s);if(i.x>this.view.width||i.y>this.view.height||i.x<=0||i.y<=0)return;this.createCountdownCanvas(l=>{const c=l[0],h=l[1];c.style.left=i.x+"px",c.style.top=i.y+"px",h.style.left=i.x+"px",h.style.top=i.y+"px",this.countdownCanvasMap.set(e,{backgroundCanvas:c,countdownCanvas:h,mapPoint:s}),this.drawCountdownText(h,o)})}this.countdownWatchHandel||(this.countdownWatchHandel=w.watch(()=>this.view.extent,()=>{this.countdownCanvasMap.forEach(s=>{const i=this.view.toScreen(s.mapPoint);i.x>this.view.width||i.y>this.view.height||i.x<=0||i.y<=0?(this.isDeletingCanvas=!0,this.view.container.removeChild(s.backgroundCanvas),this.view.container.removeChild(s.countdownCanvas),this.countdownCanvasMap.delete(e),this.isDeletingCanvas=!1):(s.backgroundCanvas.style.left=i.x+"px",s.backgroundCanvas.style.top=i.y+"px",s.countdownCanvas.style.left=i.x+"px",s.countdownCanvas.style.top=i.y+"px")})}))}drawCountdownText(e,t){const a=e.getContext("2d");a.clearRect(0,0,e.width,e.height),a.font="32px LESLIE",a.textBaseline="middle",a.textAlign="center",a.fillStyle=t.stageRemainingTime<=t.stageAllRedTime?"red":t.stageRemainingTime<=t.stageAllRedTime+t.stageYellowTime?"yellow":"lime",a.fillText(t.stageRemainingTime.toFixed(0),e.width/2,e.height/2)}async updatePhaseLine(e,t,a){const o=this.phaseLineLayer.source.filter(n=>n.getAttribute("id").includes(e));o.forEach(n=>{const s=n.getAttribute("id");this.isLaneInChannels(s,t)?n.setAttribute("color","green"):this.isLaneInChannels(s,a)?n.setAttribute("color","red"):n.setAttribute("color","green")}),await this.phaseLineLayer.applyEdits({updateFeatures:o})}isLaneInChannels(e,t){const a=e.split("+"),o=a[1],n=a[2];for(let s=0;s<t.length;s++)for(let i=0;i<t[s].laneSnList.length;i++){const l=t[s].laneSnList[i].toFixed(0);if(o===l[0]&&n===l[1])return!0}return!1}createCountdownCanvas(e){const t=new Image;t.src=`${this.mapConfig.assetsRoot}/Images/timeboard/CountdownBG.png`,t.onload=()=>{const a=document.createElement("canvas");a.width=this.canvasWidth,a.height=this.canvasHeight,a.style.position="absolute",a.style.transform="translate(-50%, -50%)",a.getContext("2d").drawImage(t,0,0,this.canvasWidth,this.canvasHeight),this.view.container.appendChild(a);const n=document.createElement("canvas");n.width=this.canvasWidth-10,n.height=this.canvasHeight-10,n.style.position="absolute",n.style.transform="translate(-50%, -50%)",this.view.container.appendChild(n),e([a,n])},t.onerror=()=>{console.error("倒计时背景图加载失败")}}}exports.default=m;

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

@@ -49,6 +49,8 @@ export default class TraceExternalRenderer implements ITraceRendererInterface {
      * @returns
      */
     updatePanelContent(contentType: EVehiclePlateState): void;
+    toggleGroundVehicle(visible: boolean): void;
+    toggleElevatedVehicle(visible: boolean): 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)})}}}}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))})}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;