gisviewer-vue3-arcgis 1.0.91 → 1.0.92

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

@@ -28,10 +28,11 @@ export default class SignalHoloFlow {
     /**
      * 在倒计时面板上写入倒计时时间
      * @param countdownCanvas 倒计时面板canvas
-     * @param rtState 相位数据
-     * @param rtState.stageRemainingTime 剩余时间
-     * @param rtState.stageAllRedTime 全红时间
-     * @param rtState.stageYellowTime 黄灯时间
+     * @param rtStage 相位数据
+     * @param rtStage.stageID 相位名
+     * @param rtStage.stageRemainingTime 剩余时间
+     * @param rtStage.stageAllRedTime 全红时间
+     * @param rtStage.stageYellowTime 黄灯时间
      */
     private drawCountdownText;
     private updatePhaseLine;

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

@@ -5,8 +5,8 @@ import u from "../../stores/index.mjs";
 class f {
   constructor(e) {
     this.currentPhaseMap = /* @__PURE__ */ new Map(), this.countdownCanvasMap = /* @__PURE__ */ new Map(), this.lastDataTime = 0, this.isDeletingCanvas = !1, this.canvasWidth = 80, this.canvasHeight = 50, this.view = (e.type === "2d", e);
-    const a = u.useAppDataStore;
-    this.mapConfig = JSON.parse(JSON.stringify(a.mapConfig));
+    const t = u.useAppDataStore;
+    this.mapConfig = JSON.parse(JSON.stringify(t.mapConfig));
   }
   /**
    * 初始化相位线图层
@@ -106,16 +106,16 @@ class f {
       }
   }
   async handleSignalData(e) {
-    const a = new Date().getTime();
-    if (a - this.lastDataTime < 100)
+    const t = new Date().getTime();
+    if (t - this.lastDataTime < 100)
       return;
-    this.lastDataTime = a;
-    const { crossId: o, lat: s, lon: n, rtStage: t, channelsConfig: l } = e;
-    await this.updateCountdown(o, s, n, t), this.phaseLineLayer && ((!this.currentPhaseMap.has(o) || this.currentPhaseMap.get(o) !== t.stagePhase) && await this.updatePhaseLine(
+    this.lastDataTime = t;
+    const { crossId: o, lat: s, lon: n, rtStage: a, channelsConfig: l } = e;
+    await this.updateCountdown(o, s, n, a), !(!this.phaseLineLayer || !l) && ((!this.currentPhaseMap.has(o) || this.currentPhaseMap.get(o) !== a.stagePhase) && await this.updatePhaseLine(
       o,
-      t.channelsConfig,
+      a.channelsConfig,
       l
-    ), this.currentPhaseMap.set(o, t.stagePhase));
+    ), this.currentPhaseMap.set(o, a.stagePhase));
   }
   /**
    * 清除实时信号相关图层
@@ -128,7 +128,7 @@ class f {
   /**
    * 获取显示倒计时的canvas
    * */
-  async updateCountdown(e, a, i, o) {
+  async updateCountdown(e, t, i, o) {
     if (this.isDeletingCanvas)
       return;
     const s = this.countdownCanvasMap.get(e);
@@ -137,14 +137,14 @@ class f {
     else {
       const n = new c({
         longitude: i,
-        latitude: a,
+        latitude: t,
         z: 10
-      }), t = this.view.toScreen(n);
-      if (t.x > this.view.width || t.y > this.view.height || t.x <= 0 || t.y <= 0)
+      }), a = this.view.toScreen(n);
+      if (a.x > this.view.width || a.y > this.view.height || a.x <= 0 || a.y <= 0)
         return;
       this.createCountdownCanvas((l) => {
         const h = l[0], r = l[1];
-        h.style.left = t.x + "px", h.style.top = t.y + "px", r.style.left = t.x + "px", r.style.top = t.y + "px", this.countdownCanvasMap.set(e, {
+        h.style.left = a.x + "px", h.style.top = a.y + "px", r.style.left = a.x + "px", r.style.top = a.y + "px", this.countdownCanvasMap.set(e, {
           backgroundCanvas: h,
           countdownCanvas: r,
           mapPoint: n
@@ -155,8 +155,8 @@ class f {
       () => this.view.extent,
       () => {
         this.countdownCanvasMap.forEach((n) => {
-          const t = this.view.toScreen(n.mapPoint);
-          t.x > this.view.width || t.y > this.view.height || t.x <= 0 || t.y <= 0 ? (this.isDeletingCanvas = !0, this.view.container.removeChild(n.backgroundCanvas), this.view.container.removeChild(n.countdownCanvas), this.countdownCanvasMap.delete(e), this.isDeletingCanvas = !1) : (n.backgroundCanvas.style.left = t.x + "px", n.backgroundCanvas.style.top = t.y + "px", n.countdownCanvas.style.left = t.x + "px", n.countdownCanvas.style.top = t.y + "px");
+          const a = this.view.toScreen(n.mapPoint);
+          a.x > this.view.width || a.y > this.view.height || a.x <= 0 || a.y <= 0 ? (this.isDeletingCanvas = !0, this.view.container.removeChild(n.backgroundCanvas), this.view.container.removeChild(n.countdownCanvas), this.countdownCanvasMap.delete(e), this.isDeletingCanvas = !1) : (n.backgroundCanvas.style.left = a.x + "px", n.backgroundCanvas.style.top = a.y + "px", n.countdownCanvas.style.left = a.x + "px", n.countdownCanvas.style.top = a.y + "px");
         });
       }
     ));
@@ -164,26 +164,27 @@ class f {
   /**
    * 在倒计时面板上写入倒计时时间
    * @param countdownCanvas 倒计时面板canvas
-   * @param rtState 相位数据
-   * @param rtState.stageRemainingTime 剩余时间
-   * @param rtState.stageAllRedTime 全红时间
-   * @param rtState.stageYellowTime 黄灯时间
+   * @param rtStage 相位数据
+   * @param rtStage.stageID 相位名
+   * @param rtStage.stageRemainingTime 剩余时间
+   * @param rtStage.stageAllRedTime 全红时间
+   * @param rtStage.stageYellowTime 黄灯时间
    */
-  drawCountdownText(e, a) {
+  drawCountdownText(e, t) {
     const i = e.getContext("2d");
-    i.clearRect(0, 0, e.width, e.height), i.font = "32px LESLIE", i.textBaseline = "middle", i.textAlign = "center", i.fillStyle = a.stageRemainingTime <= a.stageAllRedTime ? "red" : a.stageRemainingTime <= a.stageAllRedTime + a.stageYellowTime ? "yellow" : "lime", i.fillText(
-      a.stageRemainingTime.toFixed(0),
+    i.clearRect(0, 0, e.width, e.height), i.font = "32px LESLIE", i.textBaseline = "middle", i.textAlign = "center", i.fillStyle = t.stageRemainingTime <= t.stageAllRedTime ? "red" : t.stageRemainingTime <= t.stageAllRedTime + t.stageYellowTime ? "yellow" : "lime", i.fillText(
+      `${t.stageID} ${t.stageRemainingTime.toFixed(0)}`,
       e.width / 2,
       e.height / 2
     );
   }
-  async updatePhaseLine(e, a, i) {
+  async updatePhaseLine(e, t, i) {
     const o = this.phaseLineLayer.source.filter(
       (s) => s.getAttribute("id").includes(e)
     );
     o.forEach((s) => {
       const n = s.getAttribute("id");
-      this.isLaneInChannels(n, a) ? s.setAttribute("color", "green") : this.isLaneInChannels(n, i) ? s.setAttribute("color", "red") : s.setAttribute("color", "green");
+      this.isLaneInChannels(n, t) ? s.setAttribute("color", "green") : this.isLaneInChannels(n, i) ? s.setAttribute("color", "red") : s.setAttribute("color", "green");
     }), await this.phaseLineLayer.applyEdits({ updateFeatures: o });
   }
   /**
@@ -192,24 +193,24 @@ class f {
    * @param channels 通道列表
    * @returns
    */
-  isLaneInChannels(e, a) {
+  isLaneInChannels(e, t) {
     const i = e.split("+"), o = i[1], s = i[2];
-    for (let n = 0; n < a.length; n++)
-      for (let t = 0; t < a[n].laneSnList.length; t++) {
-        const l = a[n].laneSnList[t].toFixed(0);
+    for (let n = 0; n < t.length; n++)
+      for (let a = 0; a < t[n].laneSnList.length; a++) {
+        const l = t[n].laneSnList[a].toFixed(0);
         if (o === l[0] && s === l[1])
           return !0;
       }
     return !1;
   }
   createCountdownCanvas(e) {
-    const a = new Image();
-    a.src = `${this.mapConfig.assetsRoot}/Images/timeboard/CountdownBG.png`, a.onload = () => {
+    const t = new Image();
+    t.src = `${this.mapConfig.assetsRoot}/Images/timeboard/CountdownBG.png`, t.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(a, 0, 0, this.canvasWidth, this.canvasHeight), this.view.container.appendChild(i);
+      i.width = this.canvasWidth, i.height = this.canvasHeight, i.style.position = "absolute", i.style.transform = "translate(-50%, -50%)", i.getContext("2d").drawImage(t, 0, 0, this.canvasWidth, this.canvasHeight), this.view.container.appendChild(i);
       const s = document.createElement("canvas");
       s.width = this.canvasWidth - 10, s.height = this.canvasHeight - 10, s.style.position = "absolute", s.style.transform = "translate(-50%, -50%)", this.view.container.appendChild(s), e([i, s]);
-    }, a.onerror = () => {
+    }, t.onerror = () => {
       console.error("倒计时背景图加载失败");
     };
   }

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

@@ -28,10 +28,11 @@ export default class SignalHoloFlow {
     /**
      * 在倒计时面板上写入倒计时时间
      * @param countdownCanvas 倒计时面板canvas
-     * @param rtState 相位数据
-     * @param rtState.stageRemainingTime 剩余时间
-     * @param rtState.stageAllRedTime 全红时间
-     * @param rtState.stageYellowTime 黄灯时间
+     * @param rtStage 相位数据
+     * @param rtStage.stageID 相位名
+     * @param rtStage.stageRemainingTime 剩余时间
+     * @param rtStage.stageAllRedTime 全红时间
+     * @param rtStage.stageYellowTime 黄灯时间
      */
     private drawCountdownText;
     private updatePhaseLine;

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

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

package/package.json

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