gisviewer-vue3-arcgis
Version:
在应用中引入私服的包， 项目根目录下 新建文件 .npmrc 在 .npmrc 中对包源进行配置：
2 lines (1 loc) • 5.98 kB
JavaScript
"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const y=require("ol/Feature"),p=require("ol/geom"),d=require("ol/layer/Vector"),f=require("ol/source/Vector"),c=require("ol/style"),S=require("ol/style/Circle"),M=require("vue"),b=require("../../../stores/index.js");class w{constructor(i){this.isDotStyle=!0,this.hasGpu=!1,this.clearTraceTimer=null,this.minSegmentDuration=1,this.historyTrimThreshold=64,this.hiddenStyle=new c.Style({}),this.simpleMarkerStyle=new c.Style({image:new S({radius:2,fill:new c.Fill({color:"#1DFF1D"}),stroke:new c.Stroke({color:"#fff",width:1})})}),this.styleCache=new Map,this.historyPositionMap=new Map,this.vehicleObjectMap=new Map;const t=localStorage.getItem("gpu");this.hasGpu=t!=="Unknown",this.hasGpu&&(this.rafSignal=requestAnimationFrame(()=>this.render())),this.mapConfig=M.toRaw(b.default.useAppDataStore.mapConfig),this.map=i,this.dotStyleResolution=this.map.getView().getResolutionForZoom(17);const e=this.map.getView().getResolution();this.isDotStyle=e>this.dotStyleResolution,this.map.getView().on("change:resolution",()=>{const s=this.map.getView().getResolution(),a=s>this.dotStyleResolution;a!==this.isDotStyle&&(this.isDotStyle=a,this.refreshAllStyles(s))}),this.vectorSource=new f,this.carLayer=new d({source:this.vectorSource}),this.map.addLayer(this.carLayer)}addVehicles(i){const t=this.map.getView().getResolution(),e=i.map(s=>{const{vehicleId:a,heading:n,localTimestamp:l}=s,r=Number(s.x),o=Number(s.y),h=new y({geometry:new p.Point([r,o])});return this.hasGpu?(this.historyPositionMap.set(a,[{pos:[r,o,0],heading:n,time:l}]),this.vehicleObjectMap.set(a,{feature:h,data:s,historyIndex:0,waitForDelete:!1,isMoving:!1}),h.setStyle(this.getVehicleStyle(s,t))):h.setStyle(this.simpleMarkerStyle),h});this.vectorSource.addFeatures(e)}updateVehicles(i){i.forEach(t=>{const{vehicleId:e,heading:s,localTimestamp:a}=t,n=Number(t.x),l=Number(t.y),r=this.vehicleObjectMap.get(e);r&&(this.hasGpu?(r.data=t,this.historyPositionMap.get(e).push({pos:[n,l,0],heading:s,time:a})):r.feature.getGeometry().setCoordinates([n,l]))})}refreshAllStyles(i){this.hasGpu&&this.vehicleObjectMap.forEach(t=>{t.feature.setStyle(this.getVehicleStyle(t.data,i))})}destroy(){this.deleteVehicles([]),this.rafSignal&&cancelAnimationFrame(this.rafSignal),this.map.removeLayer(this.carLayer),this.carLayer.dispose()}deleteVehicles(i){this.hasGpu?i.forEach(t=>{const e=this.vehicleObjectMap.get(t);e&&(e.waitForDelete=!0)}):i.forEach(t=>{const e=this.vehicleObjectMap.get(t);e&&(this.vectorSource.removeFeature(e.feature),this.vehicleObjectMap.delete(t),this.historyPositionMap.delete(t))})}render(){const i=Date.now();this.vehicleObjectMap.keys().forEach(t=>{this.updatePosition(t,i)}),this.rafSignal=requestAnimationFrame(()=>this.render())}updatePosition(i,t){const e=this.historyPositionMap.get(i),s=this.vehicleObjectMap.get(i);if(!e||!s)return;const a=s.historyIndex;if(!s.isMoving&&e.length-a<=2)return;s.isMoving=!0,s.segmentStartTime==null&&(s.segmentStartTime=t,s.segmentTotalTime=Math.max(this.minSegmentDuration,e[a+1].time-e[a].time));const n=Math.max(this.minSegmentDuration,s.segmentTotalTime??this.minSegmentDuration),l=t-s.segmentStartTime,r=Math.min(1,Math.max(0,l/n));if(r===1){s.historyIndex+=1,s.historyIndex>=this.historyTrimThreshold&&(e.splice(0,s.historyIndex),s.historyIndex=0);const o=s.historyIndex;if(e.length-o===1){s.waitForDelete?(this.vectorSource.removeFeature(s.feature),this.vehicleObjectMap.delete(i),this.historyPositionMap.delete(i)):(s.segmentStartTime=void 0,s.segmentTotalTime=void 0,s.feature.setStyle(this.hiddenStyle),s.isMoving=!1);return}else{s.segmentStartTime=t;const h=l-n;s.segmentTotalTime=Math.max(this.minSegmentDuration,e[o+1].time-e[o].time-h),Math.abs(e[o+1].heading-e[o].heading)>180&&(e[o+1].heading>e[o].heading?e[o].heading+=360:e[o+1].heading+=360),s.feature.getGeometry().setCoordinates(e[o].pos),this.applyVehicleHeadingStyle(s,e[o].heading)}}else{const o=e[a],h=e[a+1],g=o.pos[0]+(h.pos[0]-o.pos[0])*r,u=o.pos[1]+(h.pos[1]-o.pos[1])*r,m=o.heading+(h.heading-o.heading)*r;s.feature.getGeometry().setCoordinates([g,u]),this.applyVehicleHeadingStyle(s,m)}}applyVehicleHeadingStyle(i,t){if(this.isDotStyle)return;const e=(t%360+360)%360,s=i.feature.getStyle(),a=s==null?void 0:s.getImage();a instanceof c.Icon&&(a.setRotation((e+90)*Math.PI/180),i.feature.changed())}getVehicleStyle(i,t){if(this.hasGpu){let e="";if(t>this.dotStyleResolution){const s=i.speed||100;s<=4.2?e="point_red.png":s<=8.4?e="point_yellow.png":e="point_green.png";const a=`dot-${e}`;if(this.styleCache.has(a))return this.styleCache.get(a);{const n=new c.Style({image:new c.Icon({src:`${this.mapConfig.assetsRoot}/Images/${e}`,scale:.3})});return this.styleCache.set(a,n),n}}else{const s=i.vehicleColor;typeof s=="string"&&(e=s.toLowerCase());const a=this.getCarPicSource(i.vehicleColor);return new c.Style({image:new c.Icon({src:a,scale:.1,rotation:((i.heading||0)+90)*Math.PI/180})})}}else{const e="no-gpu";return this.styleCache.has(e)||this.styleCache.set(e,this.simpleMarkerStyle),this.styleCache.get(e)}}getCarPicSource(i){let t="";switch(i){case"a":case 1:t="white";break;case"b":case 2:t="grey";break;case"c":case 3:t="yellow";break;case"d":case 4:t="pink";break;case"e":case 5:t="red";break;case"f":case 10:t="purple";break;case"g":case 6:t="green";break;case"h":case 7:t="blue";break;case"i":case 8:t="brown";break;case"j":case 9:t="black";break;default:t="grey";break}return t="car/"+t+".png",`${this.mapConfig.assetsRoot}/Images/${t}`}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=w;