gisviewer-vue3-arcgis 1.0.157 → 1.0.158

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

@@ -1,36 +1,36 @@
-import * as m from "@arcgis/core/views/3d/externalRenderers";
-import f from "./trace-renderer-external.mjs";
-import R from "./trace-renderer-layer.mjs";
-class V {
+import * as f from "@arcgis/core/views/3d/externalRenderers";
+import R from "./trace-renderer-external.mjs";
+import T from "./trace-renderer-layer.mjs";
+class L {
   constructor(e) {
-    e.type === "3d" ? (this.traceRenderer = new f(e), m.add(
+    e.type === "3d" ? (this.traceRenderer = new R(e), f.add(
       e,
       this.traceRenderer
-    )) : this.traceRenderer = new R(e);
+    )) : this.traceRenderer = new T(e);
   }
   async init() {
     await this.traceRenderer.init();
   }
   downloadLog() {
-    const e = this.traceRenderer.getLog().map((s) => s.join(",")).join(`
-`).replace(/null/g, ""), o = new Blob([e], { type: "text/csv;charset=utf-8;" }), i = URL.createObjectURL(o), r = document.createElement("a");
-    r.setAttribute("href", i), r.setAttribute("download", "trace-log.csv"), r.style.visibility = "hidden", document.body.appendChild(r), r.click(), document.body.removeChild(r);
+    const e = this.traceRenderer.getLog().map((i) => i.join(",")).join(`
+`).replace(/null/g, ""), o = new Blob([e], { type: "text/csv;charset=utf-8;" }), s = URL.createObjectURL(o), r = document.createElement("a");
+    r.setAttribute("href", s), r.setAttribute("download", "trace-log.csv"), r.style.visibility = "hidden", document.body.appendChild(r), r.click(), document.body.removeChild(r);
   }
   /**
    * 处理全息流轨迹数据
    * */
   async handleVehicleTraceData(e) {
-    const { newVehList: o, updateVehList: i, deleteVehList: r, jgsj: s } = e, n = e.crossId || "", l = [], a = [];
+    const { newVehList: o, updateVehList: s, deleteVehList: r, jgsj: i } = e, n = e.crossId || "", l = [], a = [];
     if (o && o.length > 0) {
       for (const c of o) {
-        c.localTimestamp || (c.localTimestamp = s || Date.now());
+        c.localTimestamp || (c.localTimestamp = i || Date.now());
         const t = this.buildVehicleTrackData(c, n);
         t && l.push(t);
       }
       await this.traceRenderer.addVehicles(l);
     }
-    if (i && i.length > 0) {
-      for (const c of i) {
+    if (s && s.length > 0) {
+      for (const c of s) {
         const t = this.buildVehicleTrackData(c, n);
         t && a.push(t);
       }
@@ -75,13 +75,13 @@ class V {
     this.traceRenderer.setInterpolate(e);
   }
   buildVehicleTrackData(e, o) {
-    const i = e.longitude, r = e.latitude, s = e.ptcId, n = Number(e.ptcType), l = e.heading, a = Number(e.vehicleType), c = Number(e.vehicleColor), t = e.plateNo || e.plateno, h = Number(e.plateColor), d = e.timestamp, p = e.localTimestamp, u = e.roadLayer ? String(e.roadLayer) : "1", g = e.step;
+    const s = e.longitude, r = e.latitude, i = e.ptcId, n = Number(e.ptcType), l = e.heading, a = Number(e.vehicleType), c = Number(e.vehicleColor), t = e.plateNo || e.plateno, h = Number(e.plateColor), d = e.timestamp, p = e.localTimestamp, u = e.roadLayer ? String(e.roadLayer) : "1", g = e.step, m = e.speed;
     if (!(n < 0 || n > 8))
       return {
-        ptcId: s,
+        ptcId: i,
         crossId: o,
-        vehicleId: o + "-" + s,
-        x: i,
+        vehicleId: o + "-" + i,
+        x: s,
         y: r,
         ptcType: n,
         vehicleType: a,
@@ -93,10 +93,11 @@ class V {
         timestamp: d,
         localTimestamp: p,
         roadLayer: u,
-        step: g
+        step: g,
+        speed: m
       };
   }
 }
 export {
-  V as default
+  L as default
 };

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

@@ -45,27 +45,28 @@ class f {
         return;
       }
       const t = i.map((s) => {
-        const { vehicleId: o, heading: a, localTimestamp: h } = s, r = Number(s.x), l = Number(s.y);
-        this.historyPositionMap.set(o, [
-          { pos: [r, l, 0], heading: a, time: h }
+        const { vehicleId: r, heading: a, localTimestamp: h } = s, l = Number(s.x), n = Number(s.y);
+        this.historyPositionMap.set(r, [
+          { pos: [l, n, 0], heading: a, time: h }
         ]);
-        const n = new c({
+        const o = new c({
           geometry: {
             type: "point",
-            x: r,
-            y: l
+            x: l,
+            y: n
           },
           attributes: {
-            ...s
+            ...s,
+            type: "trackVehicle"
           },
           symbol: this.createCIMSymbol(s)
         });
-        return n.visible = !1, this.vehicleObjectMap.set(o, {
-          graphic: n,
+        return o.visible = !1, this.vehicleObjectMap.set(r, {
+          graphic: o,
           data: s,
           waitForDelete: !1,
           isMoving: !1
-        }), n;
+        }), o;
       });
       this.vehicleLayer.addMany(t), e();
     });
@@ -78,11 +79,14 @@ class f {
       }
       const t = [];
       i.forEach((s) => {
-        const { vehicleId: o, heading: a, localTimestamp: h } = s, r = Number(s.x), l = Number(s.y), n = this.vehicleObjectMap.get(o);
-        n ? (n.data = s, this.historyPositionMap.get(
-          o
+        const { vehicleId: r, heading: a, localTimestamp: h } = s, l = Number(s.x), n = Number(s.y), o = this.vehicleObjectMap.get(r);
+        o ? (o.data = s, o.graphic.attributes = {
+          ...s,
+          type: "trackVehicle"
+        }, this.historyPositionMap.get(
+          r
         ).push({
-          pos: [r, l, 0],
+          pos: [l, n, 0],
           heading: a,
           time: h
         })) : t.push(s);
@@ -134,9 +138,9 @@ class f {
     if (!e || !t || !t.isMoving && e.length <= 2)
       return;
     t.isMoving = !0, (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 o = Date.now() - t.segmentStartTime, a = Math.min(
+    const r = Date.now() - t.segmentStartTime, a = Math.min(
       1,
-      o / t.segmentTotalTime
+      r / t.segmentTotalTime
     );
     if (a === 1)
       if (e.shift(), e.length === 1) {
@@ -149,12 +153,12 @@ class f {
           y: e[0].pos[1]
         };
     else {
-      const h = e[0].pos[0] + (e[1].pos[0] - e[0].pos[0]) * a, r = e[0].pos[1] + (e[1].pos[1] - e[0].pos[1]) * a, l = e[0].heading + (e[1].heading - e[0].heading) * a;
+      const h = e[0].pos[0] + (e[1].pos[0] - e[0].pos[0]) * a, l = e[0].pos[1] + (e[1].pos[1] - e[0].pos[1]) * a, n = e[0].heading + (e[1].heading - e[0].heading) * a;
       t.graphic.geometry = {
         type: "point",
         x: h,
-        y: r
-      }, t.data.heading = l, t.graphic.symbol = this.createCIMSymbol(t.data);
+        y: l
+      }, t.data.heading = n, t.graphic.symbol = this.createCIMSymbol(t.data);
     }
   }
   /**
@@ -246,8 +250,9 @@ class f {
               rotation: i.heading,
               rotateClockwise: !0,
               textureFilter: "Picture",
-              url: `${this.mapConfig.assetsRoot}Images/car/${this.getCarPic(
-                i.vehicleColor
+              url: `${this.mapConfig.assetsRoot}Images/${this.getCarPic(
+                i.vehicleColor,
+                i.speed
               )}`
             }
           ]
@@ -260,53 +265,53 @@ class f {
    * @param carColor
    * @returns
    */
-  getCarPic(i) {
-    if (this.view.zoom <= 15)
-      return "point.png";
-    let e = "grey";
+  getCarPic(i, e) {
+    if (this.view.scale >= 1e3)
+      return e ? e <= 4.2 ? "point_red.png" : e <= 8.4 ? "point_yellow.png" : "point_green.png" : "point_green.png";
+    let t = "grey";
     switch (typeof i == "string" && (i = i.toLowerCase()), i) {
       case "a":
       case 1:
-        e = "white";
+        t = "white";
         break;
       case "b":
       case 2:
-        e = "grey";
+        t = "grey";
         break;
       case "c":
       case 3:
-        e = "yellow";
+        t = "yellow";
         break;
       case "d":
       case 4:
-        e = "pink";
+        t = "pink";
         break;
       case "e":
       case 5:
-        e = "red";
+        t = "red";
         break;
       case "f":
       case 10:
-        e = "purple";
+        t = "purple";
         break;
       case "g":
       case 6:
-        e = "green";
+        t = "green";
         break;
       case "h":
       case 7:
-        e = "blue";
+        t = "blue";
         break;
       case "i":
       case 8:
-        e = "brown";
+        t = "brown";
         break;
       case "j":
       case 9:
-        e = "black";
+        t = "black";
         break;
     }
-    return e + ".png";
+    return "/car/" + t + ".png";
   }
   /**
    * 根据号牌颜色属性获取填充色和背景色

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

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

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

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

package/package.json

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