gisviewer-vue3-arcgis 1.0.98 → 1.0.99

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
@@ -1,7 +1,7 @@
1
1
  import g from "@arcgis/core/Graphic";
2
2
  import y from "@arcgis/core/layers/GraphicsLayer";
3
3
  import d from "../../stores/index.mjs";
4
- class v {
4
+ class C {
5
5
  constructor(i) {
6
6
  this.showVehiclePlate = !1, this.showGroundVehicle = !0, this.showElevatedVehicle = !0, this.historyPositionMap = /* @__PURE__ */ new Map(), this.vehicleObjectMap = /* @__PURE__ */ new Map(), this.view = i;
7
7
  const e = d.useAppDataStore;
@@ -11,14 +11,14 @@ class v {
11
11
  }
12
12
  addVehicles(i) {
13
13
  const e = i.map((t) => {
14
- const { crossId: o, ptcId: h, localTimestamp: c } = t, a = Number(t.x), r = Number(t.y), s = Number(t.heading), n = `${o}-${h}`;
15
- this.historyPositionMap.set(n, [
16
- { pos: [a, r, 0], heading: s, time: c }
14
+ const { crossId: h, ptcId: l, localTimestamp: o } = t, s = Number(t.x), r = Number(t.y), a = Number(t.heading), c = `${h}-${l}`;
15
+ this.historyPositionMap.set(c, [
16
+ { pos: [s, r, 0], heading: a, time: Date.now() }
17
17
  ]);
18
- const l = new g({
18
+ const n = new g({
19
19
  geometry: {
20
20
  type: "point",
21
- x: a,
21
+ x: s,
22
22
  y: r
23
23
  },
24
24
  attributes: {
@@ -26,26 +26,26 @@ class v {
26
26
  },
27
27
  symbol: this.createCIMSymbol(t)
28
28
  });
29
- return l.visible = !1, this.vehicleObjectMap.set(n, {
30
- graphic: l,
29
+ return n.visible = !1, this.vehicleObjectMap.set(c, {
30
+ graphic: n,
31
31
  data: t,
32
32
  waitForDelete: !1
33
- }), l;
33
+ }), n;
34
34
  });
35
35
  this.vehicleLayer.addMany(e);
36
36
  }
37
37
  updateVehicles(i) {
38
38
  const e = [];
39
39
  i.forEach((t) => {
40
- const { crossId: o, ptcId: h, localTimestamp: c } = t, a = Number(t.x), r = Number(t.y);
41
- let s = Number(t.heading);
42
- const n = `${o}-${h}`, l = this.vehicleObjectMap.get(n);
43
- if (l) {
44
- l.data = t;
40
+ const { crossId: h, ptcId: l, localTimestamp: o } = t, s = Number(t.x), r = Number(t.y);
41
+ let a = Number(t.heading);
42
+ const c = `${h}-${l}`, n = this.vehicleObjectMap.get(c);
43
+ if (n) {
44
+ n.data = t;
45
45
  const p = this.historyPositionMap.get(
46
- n
46
+ c
47
47
  ), m = p[p.length - 1];
48
- Math.abs(s - m.heading) >= 180 && (s > m.heading ? m.heading += 360 : s += 360), p.push({ pos: [a, r, 0], heading: s, time: c });
48
+ 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() });
49
49
  } else
50
50
  e.push(t);
51
51
  }), this.addVehicles(e);
@@ -85,18 +85,17 @@ class v {
85
85
  const e = this.historyPositionMap.get(i), t = this.vehicleObjectMap.get(i);
86
86
  if (!e || !t || e.length <= 1)
87
87
  return;
88
- const o = Date.now();
89
- (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) * 0.9);
90
- const c = o - t.segmentStartTime, a = Math.min(
88
+ (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);
89
+ const l = Date.now() - t.segmentStartTime, o = Math.min(
91
90
  1,
92
- c / t.segmentTotalTime
91
+ l / t.segmentTotalTime
93
92
  );
94
- if (a === 1)
93
+ if (o === 1)
95
94
  if (e.shift(), e.length === 1) {
96
95
  t.waitForDelete ? (this.vehicleLayer.remove(t.graphic), this.vehicleObjectMap.delete(i), this.historyPositionMap.delete(i)) : (t.segmentStartTime = void 0, t.segmentTotalTime = void 0);
97
96
  return;
98
97
  } else
99
- t.segmentStartTime = o, t.segmentTotalTime = e[1].time - e[0].time, Math.abs(
98
+ t.segmentStartTime = Date.now(), t.segmentTotalTime = e[1].time - e[0].time, Math.abs(
100
99
  e[1].heading - e[0].heading
101
100
  ) >= 180 && (e[1].heading > e[0].heading ? e[0].heading += 360 : e[1].heading += 360), t.graphic.geometry = {
102
101
  type: "point",
@@ -104,12 +103,12 @@ class v {
104
103
  y: e[0].pos[1]
105
104
  };
106
105
  else {
107
- 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;
106
+ 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;
108
107
  t.graphic.geometry = {
109
108
  type: "point",
110
- x: r,
111
- y: s
112
- }, t.data.heading = n, t.graphic.symbol = this.createCIMSymbol(t.data);
109
+ x: s,
110
+ y: r
111
+ }, t.data.heading = a, t.graphic.symbol = this.createCIMSymbol(t.data);
113
112
  }
114
113
  }
115
114
  /**
@@ -297,5 +296,5 @@ class v {
297
296
  }
298
297
  }
299
298
  export {
300
- v as default
299
+ C as default
301
300
  };
@@ -1 +1 @@
1
- "use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const g=require("@arcgis/core/Graphic"),d=require("@arcgis/core/layers/GraphicsLayer"),y=require("../../stores/index.js");class b{constructor(i){this.showVehiclePlate=!1,this.showGroundVehicle=!0,this.showElevatedVehicle=!0,this.historyPositionMap=new Map,this.vehicleObjectMap=new Map,this.view=i;const e=y.default.useAppDataStore;this.mapConfig=JSON.parse(JSON.stringify(e.mapConfig)),this.vehicleLayer=new d({id:"vehicleLayer"}),this.view.map.add(this.vehicleLayer),requestAnimationFrame(()=>this.render())}addVehicles(i){const e=i.map(t=>{const{crossId: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,waitForDelete:!1}),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&&(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;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)*.9);const c=o-t.segmentStartTime,s=Math.min(1,c/t.segmentTotalTime);if(s===1)if(e.shift(),e.length===1){t.waitForDelete?(this.vehicleLayer.remove(t.graphic),this.vehicleObjectMap.delete(i),this.historyPositionMap.delete(i)):(t.segmentStartTime=void 0,t.segmentTotalTime=void 0);return}else t.segmentStartTime=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;
1
+ "use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const g=require("@arcgis/core/Graphic"),d=require("@arcgis/core/layers/GraphicsLayer"),y=require("../../stores/index.js");class b{constructor(i){this.showVehiclePlate=!1,this.showGroundVehicle=!0,this.showElevatedVehicle=!0,this.historyPositionMap=new Map,this.vehicleObjectMap=new Map,this.view=i;const e=y.default.useAppDataStore;this.mapConfig=JSON.parse(JSON.stringify(e.mapConfig)),this.vehicleLayer=new d({id:"vehicleLayer"}),this.view.map.add(this.vehicleLayer),requestAnimationFrame(()=>this.render())}addVehicles(i){const e=i.map(t=>{const{crossId:h,ptcId:l,localTimestamp:o}=t,s=Number(t.x),r=Number(t.y),a=Number(t.heading),c=`${h}-${l}`;this.historyPositionMap.set(c,[{pos:[s,r,0],heading:a,time:Date.now()}]);const n=new g({geometry:{type:"point",x:s,y:r},attributes:{...t},symbol:this.createCIMSymbol(t)});return n.visible=!1,this.vehicleObjectMap.set(c,{graphic:n,data:t,waitForDelete:!1}),n});this.vehicleLayer.addMany(e)}updateVehicles(i){const e=[];i.forEach(t=>{const{crossId:h,ptcId:l,localTimestamp:o}=t,s=Number(t.x),r=Number(t.y);let a=Number(t.heading);const c=`${h}-${l}`,n=this.vehicleObjectMap.get(c);if(n){n.data=t;const p=this.historyPositionMap.get(c),m=p[p.length-1];Math.abs(a-m.heading)>=180&&(a>m.heading?m.heading+=360:a+=360),p.push({pos:[s,r,0],heading:a,time:Date.now()})}else e.push(t)}),this.addVehicles(e)}deleteVehicles(i){i.forEach(e=>{const t=this.vehicleObjectMap.get(e);t&&(t.waitForDelete=!0)})}clearVehicles(){this.vehicleLayer.removeAll(),this.vehicleObjectMap.clear(),this.historyPositionMap.clear()}updatePanelContent(i){console.log(i)}toggleGroundVehicle(i){this.showGroundVehicle=i}toggleElevatedVehicle(i){this.showElevatedVehicle=i}render(){this.vehicleObjectMap.forEach((i,e)=>{this.updatePosition(e)}),requestAnimationFrame(()=>this.render())}updatePosition(i){const e=this.historyPositionMap.get(i),t=this.vehicleObjectMap.get(i);if(!e||!t||e.length<=1)return;(t.graphic.getAttribute("roadLayer")||"1")==="1"?t.graphic.visible=this.showGroundVehicle:t.graphic.visible=this.showElevatedVehicle,t.segmentStartTime||(t.segmentStartTime=Date.now(),t.segmentTotalTime=e[1].time-e[0].time);const l=Date.now()-t.segmentStartTime,o=Math.min(1,l/t.segmentTotalTime);if(o===1)if(e.shift(),e.length===1){t.waitForDelete?(this.vehicleLayer.remove(t.graphic),this.vehicleObjectMap.delete(i),this.historyPositionMap.delete(i)):(t.segmentStartTime=void 0,t.segmentTotalTime=void 0);return}else t.segmentStartTime=Date.now(),t.segmentTotalTime=e[1].time-e[0].time,Math.abs(e[1].heading-e[0].heading)>=180&&(e[1].heading>e[0].heading?e[0].heading+=360:e[1].heading+=360),t.graphic.geometry={type:"point",x:e[0].pos[0],y:e[0].pos[1]};else{const s=e[0].pos[0]+(e[1].pos[0]-e[0].pos[0])*o,r=e[0].pos[1]+(e[1].pos[1]-e[0].pos[1])*o,a=e[0].heading+(e[1].heading-e[0].heading)*o;t.graphic.geometry={type:"point",x:s,y:r},t.data.heading=a,t.graphic.symbol=this.createCIMSymbol(t.data)}}createCIMSymbol(i){const e=this.getPlateFontColor(i.plateColor);return{type:"cim",data:{type:"CIMSymbolReference",primitiveOverrides:[{type:"CIMPrimitiveOverride",primitiveName:"textGraphic",propertyName:"TextString",valueExpressionInfo:{type:"CIMExpressionInfo",title:"Custom",expression:"$feature.showName",returnType:"Default"}}],symbol:{type:"CIMPointSymbol",symbolLayers:[{type:"CIMVectorMarker",enable:this.showVehiclePlate,size:32,colorLocked:!0,anchorPointUnits:"Relative",frame:{xmin:-8,ymin:-8,xmax:8,ymax:8},markerGraphics:[{type:"CIMMarkerGraphic",primitiveName:"textGraphic",geometry:{x:0,y:0},symbol:{type:"CIMTextSymbol",height:4,horizontalAlignment:"Center",offsetX:0,offsetY:8,haloSize:1,haloSymbol:{type:"CIMPolygonSymbol",symbolLayers:[{type:"CIMSolidFill",enable:!0,color:e.backgroundColor}]},symbol:{type:"CIMPolygonSymbol",symbolLayers:[{type:"CIMSolidFill",enable:!0,color:e.fillColor}]},verticalAlignment:"Center"},textString:""}],scaleSymbolsProportionally:!0,respectFrame:!0},{type:"CIMPictureMarker",enable:!0,anchorPoint:{x:0,y:0},anchorPointUnits:"Relative",size:30,rotation:i.heading,rotateClockwise:!0,textureFilter:"Picture",url:`${this.mapConfig.assetsRoot}Images/car/${this.getCarPic(i.vehicleColor)}`}]}}}}getCarPic(i){if(this.view.zoom<=15)return"point.png";let e="grey";switch(typeof i=="string"&&(i=i.toLowerCase()),i){case"a":case 1:e="white";break;case"b":case 2:e="grey";break;case"c":case 3:e="yellow";break;case"d":case 4:e="pink";break;case"e":case 5:e="red";break;case"f":case 10:e="purple";break;case"g":case 6:e="green";break;case"h":case 7:e="blue";break;case"i":case 8:e="brown";break;case"j":case 9:e="black";break}return e+".png"}getPlateFontColor(i){let e=[255,255,255,255],t=[169,169,169,255];switch(i){case 0:e=[0,0,0,255],t=[255,255,255,255];break;case 1:e=[0,0,0,255],t=[244,164,96,255];break;case 2:e=[255,255,255,255],t=[65,105,225,255];break;case 3:e=[255,255,255,255],t=[0,0,0,255];break;case 15:e=[244,164,96,255],t=[0,250,154,255];break;case 16:e=[0,0,0,255],t=[0,250,154,255];break}return{fillColor:e,backgroundColor:t}}}exports.default=b;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "gisviewer-vue3-arcgis",
3
- "version": "1.0.98",
3
+ "version": "1.0.99",
4
4
  "main": "lib/index.js",
5
5
  "module": "es/index.mjs",
6
6
  "files": [