gisviewer-vue3-arcgis 1.0.96 → 1.0.97

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/CountdownBG1.png`, i.onload = () => {
+      i.src = `${this.mapConfig.assetsRoot}/Images/timeboard/CountdownBG.png`, 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/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/CountdownBG1.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`,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/package.json

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