gisviewer-vue3-arcgis 1.0.200 → 1.0.202

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

@@ -34,7 +34,7 @@ class v {
       id: "vehicleLayer"
     }), this.view.map.add(this.vehicleLayer);
     const t = localStorage.getItem("gpu");
-    this.hasGpu = t !== "Unknown";
+    this.hasGpu = t !== "Unknown", this.hasGpu && (this.rafSignal = requestAnimationFrame(() => this.render()));
   }
   getLog() {
     return this.logTable;
@@ -48,7 +48,7 @@ class v {
         return;
       }
       const e = i.map((s) => {
-        const { vehicleId: r, heading: o, localTimestamp: h } = s, l = Number(s.x), n = Number(s.y), a = new p({
+        const { vehicleId: o, heading: r, localTimestamp: h } = s, l = Number(s.x), n = Number(s.y), a = new p({
           geometry: {
             type: "point",
             x: l,
@@ -60,9 +60,9 @@ class v {
           },
           symbol: this.hasGpu ? this.createCIMSymbol(s) : this.createMarkerSymbol()
         });
-        return this.hasGpu && (a.visible = !1, this.historyPositionMap.set(r, [
-          { pos: [l, n, 0], heading: o, time: h }
-        ]), this.vehicleObjectMap.set(r, {
+        return this.hasGpu && (a.visible = !1, this.historyPositionMap.set(o, [
+          { pos: [l, n, 0], heading: r, time: h }
+        ]), this.vehicleObjectMap.set(o, {
           graphic: a,
           data: s,
           waitForDelete: !1,
@@ -80,17 +80,17 @@ class v {
       }
       const e = [];
       i.forEach((s) => {
-        const { vehicleId: r, heading: o, localTimestamp: h } = s, l = Number(s.x), n = Number(s.y);
+        const { vehicleId: o, heading: r, localTimestamp: h } = s, l = Number(s.x), n = Number(s.y);
         if (this.hasGpu) {
-          const a = this.vehicleObjectMap.get(r);
+          const a = this.vehicleObjectMap.get(o);
           a ? (a.data = s, a.graphic.attributes = {
             ...s,
             type: "trackVehicle"
           }, this.historyPositionMap.get(
-            r
+            o
           ).push({
             pos: [l, n, 0],
-            heading: o,
+            heading: r,
             time: h
           })) : e.push(s);
         } else {
@@ -156,11 +156,11 @@ class v {
     if (!t || !e || !e.isMoving && t.length <= 2)
       return;
     e.isMoving = !0, (e.graphic.getAttribute("roadLayer") || "1") === "1" ? e.graphic.visible = this.showGroundVehicle : e.graphic.visible = this.showElevatedVehicle, e.segmentStartTime || (e.segmentStartTime = Date.now(), e.segmentTotalTime = t[1].time - t[0].time);
-    const r = Date.now() - e.segmentStartTime, o = Math.min(
+    const o = Date.now() - e.segmentStartTime, r = Math.min(
       1,
-      r / e.segmentTotalTime
+      o / e.segmentTotalTime
     );
-    if (o === 1)
+    if (r === 1)
       if (t.shift(), t.length === 1) {
         e.waitForDelete ? (this.vehicleLayer.remove(e.graphic), this.vehicleObjectMap.delete(i), this.historyPositionMap.delete(i)) : (e.segmentStartTime = void 0, e.segmentTotalTime = void 0, e.graphic.visible = !1, e.isMoving = !1);
         return;
@@ -171,7 +171,7 @@ class v {
           y: t[0].pos[1]
         };
     else {
-      const h = t[0].pos[0] + (t[1].pos[0] - t[0].pos[0]) * o, l = t[0].pos[1] + (t[1].pos[1] - t[0].pos[1]) * o, n = t[0].heading + (t[1].heading - t[0].heading) * o;
+      const h = t[0].pos[0] + (t[1].pos[0] - t[0].pos[0]) * r, l = t[0].pos[1] + (t[1].pos[1] - t[0].pos[1]) * r, n = t[0].heading + (t[1].heading - t[0].heading) * r;
       e.graphic.geometry = {
         type: "point",
         x: h,

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 p=require("@arcgis/core/Graphic"),g=require("@arcgis/core/layers/GraphicsLayer"),m=require("vue"),u=require("../../stores/index.js");class y{constructor(i){this.hasGpu=!1,this.appDataStore=u.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=m.toRaw(this.appDataStore.mapConfig),this.vehicleLayer=new g({id:"vehicleLayer"}),this.view.map.add(this.vehicleLayer);const t=localStorage.getItem("gpu");this.hasGpu=t!=="Unknown"}getLog(){return this.logTable}async init(){}addVehicles(i){return new Promise(t=>{if(this.isPaused){t();return}const e=i.map(s=>{const{vehicleId:o,heading:r,localTimestamp:h}=s,l=Number(s.x),n=Number(s.y),a=new p({geometry:{type:"point",x:l,y:n},attributes:{...s,type:"trackVehicle"},symbol:this.hasGpu?this.createCIMSymbol(s):this.createMarkerSymbol()});return this.hasGpu&&(a.visible=!1,this.historyPositionMap.set(o,[{pos:[l,n,0],heading:r,time:h}]),this.vehicleObjectMap.set(o,{graphic:a,data:s,waitForDelete:!1,isMoving:!1})),a});this.vehicleLayer.addMany(e),t()})}updateVehicles(i){return new Promise(t=>{if(this.isPaused){t();return}const e=[];i.forEach(s=>{const{vehicleId:o,heading:r,localTimestamp:h}=s,l=Number(s.x),n=Number(s.y);if(this.hasGpu){const a=this.vehicleObjectMap.get(o);a?(a.data=s,a.graphic.attributes={...s,type:"trackVehicle"},this.historyPositionMap.get(o).push({pos:[l,n,0],heading:r,time:h})):e.push(s)}else{const a=this.vehicleLayer.graphics.find(c=>c.getAttribute("vehicleId")==s.vehicleId);a?a.geometry={type:"point",x:l,y:n}:e.push(s)}}),this.addVehicles(e),t()})}deleteVehicles(i){this.isPaused||(this.hasGpu?i.forEach(t=>{const e=this.vehicleObjectMap.get(t);e&&(e.waitForDelete=!0)}):i.forEach(t=>{const e=this.vehicleLayer.graphics.find(s=>s.getAttribute("vehicleId")==t);e&&this.vehicleLayer.remove(e)}))}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&&this.rafSignal?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,t)=>{this.updatePosition(t)}),this.rafSignal=requestAnimationFrame(()=>this.render())}updatePosition(i){const t=this.historyPositionMap.get(i),e=this.vehicleObjectMap.get(i);if(!t||!e||!e.isMoving&&t.length<=2)return;e.isMoving=!0,(e.graphic.getAttribute("roadLayer")||"1")==="1"?e.graphic.visible=this.showGroundVehicle:e.graphic.visible=this.showElevatedVehicle,e.segmentStartTime||(e.segmentStartTime=Date.now(),e.segmentTotalTime=t[1].time-t[0].time);const o=Date.now()-e.segmentStartTime,r=Math.min(1,o/e.segmentTotalTime);if(r===1)if(t.shift(),t.length===1){e.waitForDelete?(this.vehicleLayer.remove(e.graphic),this.vehicleObjectMap.delete(i),this.historyPositionMap.delete(i)):(e.segmentStartTime=void 0,e.segmentTotalTime=void 0,e.graphic.visible=!1,e.isMoving=!1);return}else e.segmentStartTime=Date.now(),e.segmentTotalTime=t[1].time-t[0].time,Math.abs(t[1].heading-t[0].heading)>180&&(t[1].heading>t[0].heading?t[0].heading+=360:t[1].heading+=360),e.graphic.geometry={type:"point",x:t[0].pos[0],y:t[0].pos[1]};else{const h=t[0].pos[0]+(t[1].pos[0]-t[0].pos[0])*r,l=t[0].pos[1]+(t[1].pos[1]-t[0].pos[1])*r,n=t[0].heading+(t[1].heading-t[0].heading)*r;e.graphic.geometry={type:"point",x:h,y:l},e.data.heading=n,e.graphic.symbol=this.hasGpu?this.createCIMSymbol(e.data):this.createMarkerSymbol()}}createCIMSymbol(i){const t=this.getPlateFontColor(i.plateColor),e=this.getCarPic(i.vehicleColor,i.speed);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:t.backgroundColor}]},symbol:{type:"CIMPolygonSymbol",symbolLayers:[{type:"CIMSolidFill",enable:!0,color:t.fillColor}]},verticalAlignment:"Center"},textString:""}],scaleSymbolsProportionally:!0,respectFrame:!0},{type:"CIMPictureMarker",enable:!0,anchorPoint:{x:0,y:0},anchorPointUnits:"Relative",size:e.size,rotation:i.heading,rotateClockwise:!0,textureFilter:"Picture",url:`${this.mapConfig.assetsRoot}Images/${e.pic}`}]}}}}createMarkerSymbol(){return{type:"simple-marker",color:"green",size:5,outline:{color:"white",width:1}}}getCarPic(i,t){if(this.view.scale>=1e3){let e="point_green.png";return t&&(t<=4.2?e="point_red.png":t<=8.4?e="point_yellow.png":e="point_green.png"),{pic:e,size:15}}else{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{pic:"/car/"+e+".png",size:20}}}getPlateFontColor(i){let t=[255,255,255,255],e=[169,169,169,255];switch(i){case 0:t=[0,0,0,255],e=[255,255,255,255];break;case 1:t=[0,0,0,255],e=[244,164,96,255];break;case 2:t=[255,255,255,255],e=[65,105,225,255];break;case 3:t=[255,255,255,255],e=[0,0,0,255];break;case 15:t=[244,164,96,255],e=[0,250,154,255];break;case 16:t=[0,0,0,255],e=[0,250,154,255];break}return{fillColor:t,backgroundColor:e}}}exports.default=y;
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const p=require("@arcgis/core/Graphic"),g=require("@arcgis/core/layers/GraphicsLayer"),m=require("vue"),u=require("../../stores/index.js");class y{constructor(i){this.hasGpu=!1,this.appDataStore=u.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=m.toRaw(this.appDataStore.mapConfig),this.vehicleLayer=new g({id:"vehicleLayer"}),this.view.map.add(this.vehicleLayer);const t=localStorage.getItem("gpu");this.hasGpu=t!=="Unknown",this.hasGpu&&(this.rafSignal=requestAnimationFrame(()=>this.render()))}getLog(){return this.logTable}async init(){}addVehicles(i){return new Promise(t=>{if(this.isPaused){t();return}const e=i.map(s=>{const{vehicleId:o,heading:r,localTimestamp:h}=s,l=Number(s.x),n=Number(s.y),a=new p({geometry:{type:"point",x:l,y:n},attributes:{...s,type:"trackVehicle"},symbol:this.hasGpu?this.createCIMSymbol(s):this.createMarkerSymbol()});return this.hasGpu&&(a.visible=!1,this.historyPositionMap.set(o,[{pos:[l,n,0],heading:r,time:h}]),this.vehicleObjectMap.set(o,{graphic:a,data:s,waitForDelete:!1,isMoving:!1})),a});this.vehicleLayer.addMany(e),t()})}updateVehicles(i){return new Promise(t=>{if(this.isPaused){t();return}const e=[];i.forEach(s=>{const{vehicleId:o,heading:r,localTimestamp:h}=s,l=Number(s.x),n=Number(s.y);if(this.hasGpu){const a=this.vehicleObjectMap.get(o);a?(a.data=s,a.graphic.attributes={...s,type:"trackVehicle"},this.historyPositionMap.get(o).push({pos:[l,n,0],heading:r,time:h})):e.push(s)}else{const a=this.vehicleLayer.graphics.find(c=>c.getAttribute("vehicleId")==s.vehicleId);a?a.geometry={type:"point",x:l,y:n}:e.push(s)}}),this.addVehicles(e),t()})}deleteVehicles(i){this.isPaused||(this.hasGpu?i.forEach(t=>{const e=this.vehicleObjectMap.get(t);e&&(e.waitForDelete=!0)}):i.forEach(t=>{const e=this.vehicleLayer.graphics.find(s=>s.getAttribute("vehicleId")==t);e&&this.vehicleLayer.remove(e)}))}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&&this.rafSignal?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,t)=>{this.updatePosition(t)}),this.rafSignal=requestAnimationFrame(()=>this.render())}updatePosition(i){const t=this.historyPositionMap.get(i),e=this.vehicleObjectMap.get(i);if(!t||!e||!e.isMoving&&t.length<=2)return;e.isMoving=!0,(e.graphic.getAttribute("roadLayer")||"1")==="1"?e.graphic.visible=this.showGroundVehicle:e.graphic.visible=this.showElevatedVehicle,e.segmentStartTime||(e.segmentStartTime=Date.now(),e.segmentTotalTime=t[1].time-t[0].time);const o=Date.now()-e.segmentStartTime,r=Math.min(1,o/e.segmentTotalTime);if(r===1)if(t.shift(),t.length===1){e.waitForDelete?(this.vehicleLayer.remove(e.graphic),this.vehicleObjectMap.delete(i),this.historyPositionMap.delete(i)):(e.segmentStartTime=void 0,e.segmentTotalTime=void 0,e.graphic.visible=!1,e.isMoving=!1);return}else e.segmentStartTime=Date.now(),e.segmentTotalTime=t[1].time-t[0].time,Math.abs(t[1].heading-t[0].heading)>180&&(t[1].heading>t[0].heading?t[0].heading+=360:t[1].heading+=360),e.graphic.geometry={type:"point",x:t[0].pos[0],y:t[0].pos[1]};else{const h=t[0].pos[0]+(t[1].pos[0]-t[0].pos[0])*r,l=t[0].pos[1]+(t[1].pos[1]-t[0].pos[1])*r,n=t[0].heading+(t[1].heading-t[0].heading)*r;e.graphic.geometry={type:"point",x:h,y:l},e.data.heading=n,e.graphic.symbol=this.hasGpu?this.createCIMSymbol(e.data):this.createMarkerSymbol()}}createCIMSymbol(i){const t=this.getPlateFontColor(i.plateColor),e=this.getCarPic(i.vehicleColor,i.speed);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:t.backgroundColor}]},symbol:{type:"CIMPolygonSymbol",symbolLayers:[{type:"CIMSolidFill",enable:!0,color:t.fillColor}]},verticalAlignment:"Center"},textString:""}],scaleSymbolsProportionally:!0,respectFrame:!0},{type:"CIMPictureMarker",enable:!0,anchorPoint:{x:0,y:0},anchorPointUnits:"Relative",size:e.size,rotation:i.heading,rotateClockwise:!0,textureFilter:"Picture",url:`${this.mapConfig.assetsRoot}Images/${e.pic}`}]}}}}createMarkerSymbol(){return{type:"simple-marker",color:"green",size:5,outline:{color:"white",width:1}}}getCarPic(i,t){if(this.view.scale>=1e3){let e="point_green.png";return t&&(t<=4.2?e="point_red.png":t<=8.4?e="point_yellow.png":e="point_green.png"),{pic:e,size:15}}else{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{pic:"/car/"+e+".png",size:20}}}getPlateFontColor(i){let t=[255,255,255,255],e=[169,169,169,255];switch(i){case 0:t=[0,0,0,255],e=[255,255,255,255];break;case 1:t=[0,0,0,255],e=[244,164,96,255];break;case 2:t=[255,255,255,255],e=[65,105,225,255];break;case 3:t=[255,255,255,255],e=[0,0,0,255];break;case 15:t=[244,164,96,255],e=[0,250,154,255];break;case 16:t=[0,0,0,255],e=[0,250,154,255];break}return{fillColor:t,backgroundColor:e}}}exports.default=y;

package/package.json

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