gisviewer-vue3-arcgis
Version:
在应用中引入私服的包， 项目根目录下 新建文件 .npmrc 在 .npmrc 中对包源进行配置：
2 lines (1 loc) • 5.54 kB
JavaScript
"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("vue"),y=require("../../stores/index.js");function w(l){const e=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(l){for(const t in l)if(t!=="default"){const a=Object.getOwnPropertyDescriptor(l,t);Object.defineProperty(e,t,a.get?a:{enumerable:!0,get:()=>l[t]})}}return e.default=l,Object.freeze(e)}const f=w(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=y.default.useAppDataStore;this.mapConfig=g.toRaw(t.mapConfig)}async initializeLayer(){try{await this.initializePlateBackground()}catch(e){console.log("倒计时背景图片加载失败",e)}if(this.mapConfig.phaseLineLayer)if(this.phaseLineLayer)this.phaseLineLayer.visible||(this.phaseLineLayer.visible=!0);else{const e=`${this.mapConfig.assetsRoot}/${this.mapConfig.phaseLineLayer}`,s=(await(await fetch(e)).json()).features.map((i,n)=>({geometry:{type:"polyline",paths:[i.geometry.coordinates]},attributes:{ObjectID:n+1,id:i.properties.id,color:"hide"}}));this.phaseLineLayer=new p({source:s,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 initializePlateBackground(){return new Promise((e,t)=>{const a=new Image;a.src=`${this.mapConfig.assetsRoot}/Images/timeboard/CountdownBG.png`,a.onload=()=>{this.plateBackground=a,e()},a.onerror=s=>{t(s)}})}async handleHoloSignalData(e){const{crossId:t,lat:a,lon:s,rtStage:i,channelsConfig:n}=e;await this.updateCountdown(t,a,s,i),!(!this.phaseLineLayer||!n)&&((!this.currentPhaseMap.has(t)||this.currentPhaseMap.get(t)!==i.stagePhase)&&await this.updatePhaseLine(t,i.channelsConfig,n),this.currentPhaseMap.set(t,i.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,a,s){if(this.isDeletingCanvas)return;const i=this.countdownCanvasMap.get(e);if(i)this.drawCountdownText(i.countdownCanvas,s);else try{const n=new u.Point({longitude:a,latitude:t,z:10}),o=this.view.toScreen(n),r=this.createCountdownCanvas();if(!r)return;const h=r[0],c=r[1];h.style.left=o.x+"px",h.style.top=o.y+"px",c.style.left=o.x+"px",c.style.top=o.y+"px",this.countdownCanvasMap.set(e,{backgroundCanvas:h,countdownCanvas:c,mapPoint:n}),this.drawCountdownText(c,s)}catch(n){console.log("倒计时canvas创建失败",e,n)}this.countdownWatchHandel||(this.countdownWatchHandel=f.watch(()=>this.view.extent,()=>{this.countdownCanvasMap.forEach(n=>{const o=this.view.toScreen(n.mapPoint);n.backgroundCanvas.style.left=o.x+"px",n.backgroundCanvas.style.top=o.y+"px",n.countdownCanvas.style.left=o.x+"px",n.countdownCanvas.style.top=o.y+"px"})}))}drawCountdownText(e,t){const a=e.getContext("2d");a.clearRect(0,0,e.width,e.height),a.font="24px Digital",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 s=this.phaseLineLayer.source.filter(i=>i.getAttribute("id").includes(e));s.forEach(i=>{const n=i.getAttribute("id");this.isLaneInChannels(n,t)?i.setAttribute("color","green"):this.isLaneInChannels(n,a)?i.setAttribute("color","red"):i.setAttribute("color","green")}),await this.phaseLineLayer.applyEdits({updateFeatures:s})}isLaneInChannels(e,t){const a=e.split("+"),s=a[1],i=a[2];for(let n=0;n<t.length;n++)for(let o=0;o<t[n].laneSnList.length;o++){const r=t[n].laneSnList[o].toFixed(0);if(s===r[0]&&i===r[1])return!0}return!1}createCountdownCanvas(){const e=document.createElement("canvas");e.width=this.canvasWidth,e.height=this.canvasHeight,e.style.position="absolute",e.style.transform="translate(-50%, -50%)";const t=e.getContext("2d");this.plateBackground?t.drawImage(this.plateBackground,0,0,this.canvasWidth,this.canvasHeight):(t.strokeStyle="rgba(0, 255, 0, 1)",t.lineWidth=1,t.strokeRect(0,0,this.canvasWidth,this.canvasHeight),t.fillStyle="rgba(0, 0, 0, 1)",t.fillRect(0,0,this.canvasWidth,this.canvasHeight)),this.view.container.appendChild(e);const a=document.createElement("canvas");return 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,a]}}exports.default=m;