gisviewer-vue3-arcgis 1.0.97 → 1.0.99

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

@@ -216,7 +216,7 @@ class f {
   createCountdownCanvas() {
     return new Promise((e, a) => {
       const i = new Image();
-      i.src = `${this.mapConfig.assetsRoot}/Images/timeboard/CountdownBG.png`, i.onload = () => {
+      i.src = `${this.mapConfig.assetsRoot}/Images/timeboard/CountdownBG.png`, console.log(i.src), i.onload = () => {
         const n = document.createElement("canvas");
         n.width = this.canvasWidth, n.height = this.canvasHeight, n.style.position = "absolute", n.style.transform = "translate(-50%, -50%)", n.getContext(
           "2d"

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

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

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

@@ -3,10 +3,10 @@ export default class TraceLayerRenderer implements ITraceRendererInterface {
     private view;
     private readonly vehicleLayer;
     private mapConfig;
-    private showGroundVehicle;
-    private showElevatedVehicle;
     constructor(view: __esri.MapView);
     private showVehiclePlate;
+    private showGroundVehicle;
+    private showElevatedVehicle;
     private historyPositionMap;
     private vehicleObjectMap;
     addVehicles(objects: IVehicleTrack[]): void;

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

@@ -3,7 +3,7 @@ import y from "@arcgis/core/layers/GraphicsLayer";
 import d from "../../stores/index.mjs";
 class C {
   constructor(i) {
-    this.showGroundVehicle = !0, this.showElevatedVehicle = !0, this.showVehiclePlate = !1, this.historyPositionMap = /* @__PURE__ */ new Map(), this.vehicleObjectMap = /* @__PURE__ */ new Map(), this.view = 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({
       id: "vehicleLayer"
@@ -11,14 +11,14 @@ class C {
   }
   addVehicles(i) {
     const e = i.map((t) => {
-      const { crossId: o, ptcId: h, localTimestamp: c } = t, a = Number(t.x), r = Number(t.y), s = Number(t.heading), n = `${o}-${h}`;
-      this.historyPositionMap.set(n, [
-        { pos: [a, r, 0], heading: s, time: c }
+      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 l = new g({
+      const n = new g({
         geometry: {
           type: "point",
-          x: a,
+          x: s,
           y: r
         },
         attributes: {
@@ -26,25 +26,26 @@ class C {
         },
         symbol: this.createCIMSymbol(t)
       });
-      return l.visible = !1, this.vehicleObjectMap.set(n, {
-        graphic: l,
-        data: t
-      }), l;
+      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: o, ptcId: h, localTimestamp: c } = t, a = Number(t.x), r = Number(t.y);
-      let s = Number(t.heading);
-      const n = `${o}-${h}`, l = this.vehicleObjectMap.get(n);
-      if (l) {
-        l.data = 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(
-          n
+          c
         ), m = p[p.length - 1];
-        Math.abs(s - m.heading) >= 180 && (s > m.heading ? m.heading += 360 : s += 360), p.push({ pos: [a, r, 0], heading: s, time: c });
+        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);
@@ -52,7 +53,7 @@ class C {
   deleteVehicles(i) {
     i.forEach((e) => {
       const t = this.vehicleObjectMap.get(e);
-      t && (this.vehicleLayer.remove(t.graphic), this.vehicleObjectMap.delete(e), this.historyPositionMap.delete(e));
+      t && (t.waitForDelete = !0);
     });
   }
   clearVehicles() {
@@ -82,20 +83,19 @@ class C {
   }
   updatePosition(i) {
     const e = this.historyPositionMap.get(i), t = this.vehicleObjectMap.get(i);
-    if (!e || !t || e.length < 2)
+    if (!e || !t || e.length <= 1)
       return;
-    const o = Date.now();
-    (t.graphic.getAttribute("roadLayer") || "1") === "1" ? t.graphic.visible = this.showGroundVehicle : t.graphic.visible = this.showElevatedVehicle, t.segmentStartTime || (t.segmentStartTime = o, t.segmentTotalTime = e[1].time - e[0].time);
-    const c = o - t.segmentStartTime, a = Math.min(
+    (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,
-      c / t.segmentTotalTime
+      l / t.segmentTotalTime
     );
-    if (a === 1)
+    if (o === 1)
       if (e.shift(), e.length === 1) {
-        t.segmentStartTime = void 0, t.segmentTotalTime = void 0;
+        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 = o, t.segmentTotalTime = e[1].time - e[0].time, Math.abs(
+        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",
@@ -103,12 +103,12 @@ class C {
           y: e[0].pos[1]
         };
     else {
-      const r = e[0].pos[0] + (e[1].pos[0] - e[0].pos[0]) * a, s = e[0].pos[1] + (e[1].pos[1] - e[0].pos[1]) * a, n = e[0].heading + (e[1].heading - e[0].heading) * a;
+      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: r,
-        y: s
-      }, t.data.heading = n, t.graphic.symbol = this.createCIMSymbol(t.data);
+        x: s,
+        y: r
+      }, t.data.heading = a, t.graphic.symbol = this.createCIMSymbol(t.data);
     }
   }
   /**

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(l){const e=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(l){for(const t in l)if(t!=="default"){const n=Object.getOwnPropertyDescriptor(l,t);Object.defineProperty(e,t,n.get?n:{enumerable:!0,get:()=>l[t]})}}return e.default=l,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=40,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}`,i=(await(await fetch(e)).json()).features.map((s,a)=>({geometry:{type:"polyline",paths:[s.geometry.coordinates]},attributes:{ObjectID:a+1,id:s.properties.id,color:"hide"}}));this.phaseLineLayer=new p({source:i,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{crossId:t,lat:n,lon:i,rtStage:s,channelsConfig:a}=e;await this.updateCountdown(t,n,i,s),!(!this.phaseLineLayer||!a)&&((!this.currentPhaseMap.has(t)||this.currentPhaseMap.get(t)!==s.stagePhase)&&await this.updatePhaseLine(t,s.channelsConfig,a),this.currentPhaseMap.set(t,s.stagePhase))}clearSignal(){this.phaseLineLayer&&(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,n,i){if(this.isDeletingCanvas)return;const s=this.countdownCanvasMap.get(e);if(s)this.drawCountdownText(s.countdownCanvas,i);else try{const a=new u.Point({longitude:n,latitude:t,z:10}),o=this.view.toScreen(a),r=await this.createCountdownCanvas(),c=r[0],h=r[1];c.style.left=o.x+"px",c.style.top=o.y+"px",h.style.left=o.x+"px",h.style.top=o.y+"px",this.countdownCanvasMap.set(e,{backgroundCanvas:c,countdownCanvas:h,mapPoint:a}),this.drawCountdownText(h,i)}catch(a){console.log("倒计时canvas创建失败",e,a)}this.countdownWatchHandel||(this.countdownWatchHandel=w.watch(()=>this.view.extent,()=>{this.countdownCanvasMap.forEach(a=>{const o=this.view.toScreen(a.mapPoint);a.backgroundCanvas.style.left=o.x+"px",a.backgroundCanvas.style.top=o.y+"px",a.countdownCanvas.style.left=o.x+"px",a.countdownCanvas.style.top=o.y+"px"})}))}drawCountdownText(e,t){const n=e.getContext("2d");n.clearRect(0,0,e.width,e.height),n.font="24px Digital",n.textBaseline="middle",n.textAlign="center",n.fillStyle=t.stageRemainingTime<=t.stageAllRedTime?"red":t.stageRemainingTime<=t.stageAllRedTime+t.stageYellowTime?"yellow":"lime",n.fillText(`${t.stageID} ${t.stageRemainingTime.toFixed(0)}`,e.width/2,e.height/2)}drawCircle(e,t){console.log(t);const n=e.getContext("2d");n.clearRect(0,0,e.width,e.height),this.ctxDraw(n,"lime",e.width/2,e.height/2,20,-Math.PI/2,-Math.PI/2+2*.6*Math.PI)}ctxDraw(e,t,n,i,s,a,o){e.save,e.beginPath(),e.lineWidth=4,e.strokeStyle=t,e.arc(n,i,s,a,o),e.stroke(),e.closePath(),e.font="26px Digital",e.textBaseline="middle",e.textAlign="center",e.fillText("A",n,i),e.restore()}async updatePhaseLine(e,t,n){const i=this.phaseLineLayer.source.filter(s=>s.getAttribute("id").includes(e));i.forEach(s=>{const a=s.getAttribute("id");this.isLaneInChannels(a,t)?s.setAttribute("color","green"):this.isLaneInChannels(a,n)?s.setAttribute("color","red"):s.setAttribute("color","green")}),await this.phaseLineLayer.applyEdits({updateFeatures:i})}isLaneInChannels(e,t){const n=e.split("+"),i=n[1],s=n[2];for(let a=0;a<t.length;a++)for(let o=0;o<t[a].laneSnList.length;o++){const r=t[a].laneSnList[o].toFixed(0);if(i===r[0]&&s===r[1])return!0}return!1}createCountdownCanvas(){return new Promise((e,t)=>{const n=new Image;n.src=`${this.mapConfig.assetsRoot}/Images/timeboard/CountdownBG.png`,n.onload=()=>{const i=document.createElement("canvas");i.width=this.canvasWidth,i.height=this.canvasHeight,i.style.position="absolute",i.style.transform="translate(-50%, -50%)",i.getContext("2d").drawImage(n,0,0,this.canvasWidth,this.canvasHeight),this.view.container.appendChild(i);const a=document.createElement("canvas");a.width=this.canvasWidth-10,a.height=this.canvasHeight-10,a.style.position="absolute",a.style.transform="translate(-50%, -50%)",this.view.container.appendChild(a),e([i,a])},n.onerror=i=>{t(i)}})}}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(l){const e=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(l){for(const t in l)if(t!=="default"){const n=Object.getOwnPropertyDescriptor(l,t);Object.defineProperty(e,t,n.get?n:{enumerable:!0,get:()=>l[t]})}}return e.default=l,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=40,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}`,i=(await(await fetch(e)).json()).features.map((s,a)=>({geometry:{type:"polyline",paths:[s.geometry.coordinates]},attributes:{ObjectID:a+1,id:s.properties.id,color:"hide"}}));this.phaseLineLayer=new p({source:i,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{crossId:t,lat:n,lon:i,rtStage:s,channelsConfig:a}=e;await this.updateCountdown(t,n,i,s),!(!this.phaseLineLayer||!a)&&((!this.currentPhaseMap.has(t)||this.currentPhaseMap.get(t)!==s.stagePhase)&&await this.updatePhaseLine(t,s.channelsConfig,a),this.currentPhaseMap.set(t,s.stagePhase))}clearSignal(){this.phaseLineLayer&&(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,n,i){if(this.isDeletingCanvas)return;const s=this.countdownCanvasMap.get(e);if(s)this.drawCountdownText(s.countdownCanvas,i);else try{const a=new u.Point({longitude:n,latitude:t,z:10}),o=this.view.toScreen(a),r=await this.createCountdownCanvas(),c=r[0],h=r[1];c.style.left=o.x+"px",c.style.top=o.y+"px",h.style.left=o.x+"px",h.style.top=o.y+"px",this.countdownCanvasMap.set(e,{backgroundCanvas:c,countdownCanvas:h,mapPoint:a}),this.drawCountdownText(h,i)}catch(a){console.log("倒计时canvas创建失败",e,a)}this.countdownWatchHandel||(this.countdownWatchHandel=w.watch(()=>this.view.extent,()=>{this.countdownCanvasMap.forEach(a=>{const o=this.view.toScreen(a.mapPoint);a.backgroundCanvas.style.left=o.x+"px",a.backgroundCanvas.style.top=o.y+"px",a.countdownCanvas.style.left=o.x+"px",a.countdownCanvas.style.top=o.y+"px"})}))}drawCountdownText(e,t){const n=e.getContext("2d");n.clearRect(0,0,e.width,e.height),n.font="24px Digital",n.textBaseline="middle",n.textAlign="center",n.fillStyle=t.stageRemainingTime<=t.stageAllRedTime?"red":t.stageRemainingTime<=t.stageAllRedTime+t.stageYellowTime?"yellow":"lime",n.fillText(`${t.stageID} ${t.stageRemainingTime.toFixed(0)}`,e.width/2,e.height/2)}drawCircle(e,t){console.log(t);const n=e.getContext("2d");n.clearRect(0,0,e.width,e.height),this.ctxDraw(n,"lime",e.width/2,e.height/2,20,-Math.PI/2,-Math.PI/2+2*.6*Math.PI)}ctxDraw(e,t,n,i,s,a,o){e.save,e.beginPath(),e.lineWidth=4,e.strokeStyle=t,e.arc(n,i,s,a,o),e.stroke(),e.closePath(),e.font="26px Digital",e.textBaseline="middle",e.textAlign="center",e.fillText("A",n,i),e.restore()}async updatePhaseLine(e,t,n){const i=this.phaseLineLayer.source.filter(s=>s.getAttribute("id").includes(e));i.forEach(s=>{const a=s.getAttribute("id");this.isLaneInChannels(a,t)?s.setAttribute("color","green"):this.isLaneInChannels(a,n)?s.setAttribute("color","red"):s.setAttribute("color","green")}),await this.phaseLineLayer.applyEdits({updateFeatures:i})}isLaneInChannels(e,t){const n=e.split("+"),i=n[1],s=n[2];for(let a=0;a<t.length;a++)for(let o=0;o<t[a].laneSnList.length;o++){const r=t[a].laneSnList[o].toFixed(0);if(i===r[0]&&s===r[1])return!0}return!1}createCountdownCanvas(){return new Promise((e,t)=>{const n=new Image;n.src=`${this.mapConfig.assetsRoot}/Images/timeboard/CountdownBG.png`,console.log(n.src),n.onload=()=>{const i=document.createElement("canvas");i.width=this.canvasWidth,i.height=this.canvasHeight,i.style.position="absolute",i.style.transform="translate(-50%, -50%)",i.getContext("2d").drawImage(n,0,0,this.canvasWidth,this.canvasHeight),this.view.container.appendChild(i);const a=document.createElement("canvas");a.width=this.canvasWidth-10,a.height=this.canvasHeight-10,a.style.position="absolute",a.style.transform="translate(-50%, -50%)",this.view.container.appendChild(a),e([i,a])},n.onerror=i=>{t(i)}})}}exports.default=m;

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 t in o)if(t!=="default"){const s=Object.getOwnPropertyDescriptor(o,t);Object.defineProperty(e,t,s.get?s:{enumerable:!0,get:()=>o[t]})}}return e.default=o,Object.freeze(e)}const y=V(f);class R{constructor(e){this.lastDataTime=0,this.view=e;const t=g.default.useAppDataStore;this.mapConfig=JSON.parse(JSON.stringify(t.mapConfig)),e.type==="3d"?(this.traceRenderer=new T.default(e),y.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:i,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(i&&i.length>0){const n=i.map(r=>h+"-"+(r.ptcId||r.vehno||r.vehNo));this.traceRenderer.deleteVehicles(n)}}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,i=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,m=String(e.roadLayer)||"1";if(!(i<0||i>8))return{ptcId:l,crossId:t,x:s,y:a,ptcType:i,vehicleType:h,heading:i===2?-d:d,vehicleColor:u,showName:c&&c!==""&&c!=="0"&&c!=="000000"?c:"",plateNo:c,plateColor:n,timestamp:r,localTimestamp:p,roadLayer:m}}}exports.default=R;
+"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;

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

@@ -3,10 +3,10 @@ export default class TraceLayerRenderer implements ITraceRendererInterface {
     private view;
     private readonly vehicleLayer;
     private mapConfig;
-    private showGroundVehicle;
-    private showElevatedVehicle;
     constructor(view: __esri.MapView);
     private showVehiclePlate;
+    private showGroundVehicle;
+    private showElevatedVehicle;
     private historyPositionMap;
     private vehicleObjectMap;
     addVehicles(objects: IVehicleTrack[]): void;

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.showGroundVehicle=!0,this.showElevatedVehicle=!0,this.showVehiclePlate=!1,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:o,ptcId:h,localTimestamp:c}=t,s=Number(t.x),r=Number(t.y),a=Number(t.heading),n=`${o}-${h}`;this.historyPositionMap.set(n,[{pos:[s,r,0],heading:a,time:c}]);const l=new g({geometry:{type:"point",x:s,y:r},attributes:{...t},symbol:this.createCIMSymbol(t)});return l.visible=!1,this.vehicleObjectMap.set(n,{graphic:l,data:t}),l});this.vehicleLayer.addMany(e)}updateVehicles(i){const e=[];i.forEach(t=>{const{crossId:o,ptcId:h,localTimestamp:c}=t,s=Number(t.x),r=Number(t.y);let a=Number(t.heading);const n=`${o}-${h}`,l=this.vehicleObjectMap.get(n);if(l){l.data=t;const p=this.historyPositionMap.get(n),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:c})}else e.push(t)}),this.addVehicles(e)}deleteVehicles(i){i.forEach(e=>{const t=this.vehicleObjectMap.get(e);t&&(this.vehicleLayer.remove(t.graphic),this.vehicleObjectMap.delete(e),this.historyPositionMap.delete(e))})}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<2)return;const o=Date.now();(t.graphic.getAttribute("roadLayer")||"1")==="1"?t.graphic.visible=this.showGroundVehicle:t.graphic.visible=this.showElevatedVehicle,t.segmentStartTime||(t.segmentStartTime=o,t.segmentTotalTime=e[1].time-e[0].time);const c=o-t.segmentStartTime,s=Math.min(1,c/t.segmentTotalTime);if(s===1)if(e.shift(),e.length===1){t.segmentStartTime=void 0,t.segmentTotalTime=void 0;return}else t.segmentStartTime=o,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 r=e[0].pos[0]+(e[1].pos[0]-e[0].pos[0])*s,a=e[0].pos[1]+(e[1].pos[1]-e[0].pos[1])*s,n=e[0].heading+(e[1].heading-e[0].heading)*s;t.graphic.geometry={type:"point",x:r,y:a},t.data.heading=n,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 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;

package/package.json

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