gisviewer-vue3-arcgis/lib/src/gis-map-ol/utils/green-wave-band-controller.js

在应用中引入私服的包， 项目根目录下 新建文件 .npmrc 在 .npmrc 中对包源进行配置：

"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const C=require("ol/Feature"),D=require("ol/geom/LineString"),A=require("ol/geom/Point"),E=require("ol/layer/Vector"),L=require("ol/source/Vector"),h=require("ol/style");class _{constructor(e){this.hasGpu=!0,this.animationFrameIds=new Map,this.animatedArrows=new Map,this.nodeFeatures=new Map,this.zoomChangeKey=null,this.NODE_MIN_ZOOM=14,this.NODE_ZOOM_THRESHOLD=16,this.bandConfigs=new Map,this.centerIconFeatures=new Map,this.hiddenStyle=new h.Style({});const i=localStorage.getItem("gpu");this.hasGpu=i!=="Unknown",this.map=e,this.mapView=this.map.getView(),this.source=new L,this.bandLayer=new E({source:this.source}),this.bandLayer.set("id","green-wave-band-layer"),this.map.addLayer(this.bandLayer)}showGreenWaveBand(e){var f;this.removeGreenWaveBand(e.bandId);const i=e.lineWidth||4,t=this.parseColor(e.lineColor,[55,125,34,1]),o=this.parseColor(e.arrowColor,[255,255,255,1]),s=e.arrowDirection||"double",n=s==="double"?0:e.animationSpeed??.2,r=e.needZoom||!1,l=e.lineOnly||!1;this.bandConfigs.set(e.bandId,{coordinates:e.coordinates,lineWidth:i,lineColor:t,arrowColor:o,arrowDirection:s,lineOnly:l,animationSpeed:n});const d=(this.mapView.getZoom()||0)>=this.NODE_MIN_ZOOM,c=new C({geometry:new D(e.coordinates)});if(c.set("bandId",e.bandId),c.set("type","greenWaveBand"),c.set("id",e.bandId),l||d?c.setStyle(new h.Style({stroke:new h.Stroke({color:t,width:i})})):c.setStyle(new h.Style({})),this.source.addFeature(c),!l){const m=this.calculateLineCenterPoint(e.coordinates),a=new C({geometry:new A(m)});a.set("bandId",e.bandId),a.set("type","greenWaveBandCenterIcon"),a.set("id",`${e.bandId}_center`),d?a.setStyle(new h.Style({})):a.setStyle(this.createCenterIconStyle()),this.source.addFeature(a),this.centerIconFeatures.set(e.bandId,a)}if(this.hasGpu&&(n>0?this.startFlowAnimation(e.coordinates,e.bandId,i,o,s,n):this.addArrowsAlongLine(e.coordinates,e.bandId,i,o,s)),l||this.ensureZoomChangeListener(),r){const m=(f=c.getGeometry())==null?void 0:f.getExtent();m&&this.mapView.fit(m,{padding:[50,50,50,50]})}!l&&e.nodeList&&e.nodeList.length>0&&this.addNodeFeatures(e.bandId,e.nodeList)}addArrowsAlongLine(e,i,t,o,s){if(e.length<2)return;let n=0;const r=[];for(let c=0;c<e.length-1;c++){const f=e[c],m=e[c+1],a=m[0]-f[0],w=m[1]-f[1],g=Math.sqrt(a*a+w*w);r.push({start:f,end:m,length:g}),n+=g}if(n<=0||r.length===0)return;const l=Math.max(r.length,3),u=Math.min(Math.max(l,Math.floor(n/.001)),50);if(u<=0)return;const d=n/(u+1);for(let c=1;c<=u;c++){const f=d*c;let m=0;for(const a of r){if(m+a.length>=f){const g=(f-m)/a.length,S=a.start[0]+(a.end[0]-a.start[0])*g,I=a.start[1]+(a.end[1]-a.start[1])*g,F=Math.atan2(a.end[1]-a.start[1],a.end[0]-a.start[0]);this.addArrowFeature([S,I],i,t,o,F,s);break}m+=a.length}}}addArrowFeature(e,i,t,o,s,n){const r=new C({geometry:new A(e)});r.set("bandId",i),r.set("type","greenWaveBandArrow"),r.set("arrowLineWidth",t),r.set("arrowColor",o),r.set("arrowAngle",s),r.set("arrowDirection",n),(this.mapView.getZoom()||0)<this.NODE_MIN_ZOOM?r.setStyle(this.hiddenStyle):r.setStyle(this.createArrowStyle(t,o,s,n)),this.source.addFeature(r)}createArrowStyle(e,i,t,o="double"){const s=e*2,n=`${s*.18},${s*.3} ${s*.82},${s*.5} ${s*.18},${s*.7}`,r=`${s*.36},${s*.32} ${s*.12},${s*.5} ${s*.36},${s*.68}`,l=`${s*.64},${s*.32} ${s*.88},${s*.5} ${s*.64},${s*.68}`,u=`
      <svg xmlns="http://www.w3.org/2000/svg" width="${s}" height="${s}" viewBox="0 0 ${s} ${s}">
        <polyline 
          points="${o==="double"?l:n}" 
          fill="none" 
          stroke="${i}" 
          stroke-width="3" 
          stroke-linecap="round" 
          stroke-linejoin="round"
        />
        ${o==="double"?`<polyline
          points="${r}"
          fill="none"
          stroke="${i}"
          stroke-width="3"
          stroke-linecap="round"
          stroke-linejoin="round"
        />`:""}
      </svg>
    `,d="data:image/svg+xml;charset=utf-8,"+encodeURIComponent(u);return new h.Style({image:new h.Icon({src:d,scale:1,rotation:-t,rotateWithView:!1})})}calculateLineCenterPoint(e){if(e.length===0)return[0,0];if(e.length===1)return e[0];let i=0;const t=[];for(let n=0;n<e.length-1;n++){const r=e[n],l=e[n+1],u=l[0]-r[0],d=l[1]-r[1],c=Math.sqrt(u*u+d*d);t.push({start:r,end:l,length:c}),i+=c}const o=i/2;let s=0;for(const n of t){if(s+n.length>=o){const l=(o-s)/n.length,u=n.start[0]+(n.end[0]-n.start[0])*l,d=n.start[1]+(n.end[1]-n.start[1])*l;return[u,d]}s+=n.length}return e[e.length-1]}createCenterIconStyle(){return new h.Style({image:new h.Icon({src:"/GisViewerAssets/Images/gis/ic_gxlb.png",scale:.8,anchor:[.5,1]})})}parseColor(e,i){if(!e)return`rgba(${i.join(",")})`;if(typeof e=="string")return e;if(Array.isArray(e)){if(e.length===3)return`rgba(${e[0]},${e[1]},${e[2]},1)`;if(e.length===4){const t=e[3]>1?e[3]/255:e[3];return`rgba(${e[0]},${e[1]},${e[2]},${t})`}}return`rgba(${i.join(",")})`}removeGreenWaveBand(e){e?(this.stopFlowAnimation(e),this.removeNodeFeatures(e),this.bandConfigs.delete(e),this.centerIconFeatures.delete(e),this.source.getFeatures().filter(t=>t.get("bandId")&&t.get("bandId")===e).forEach(t=>{this.source.removeFeature(t)})):(this.animationFrameIds.forEach((t,o)=>{cancelAnimationFrame(t)}),this.animationFrameIds.clear(),this.animatedArrows.forEach(t=>{t.forEach(o=>{this.source.removeFeature(o)})}),this.animatedArrows.clear(),this.nodeFeatures.forEach(t=>{t.forEach(o=>{this.source.removeFeature(o)})}),this.nodeFeatures.clear(),this.bandConfigs.clear(),this.centerIconFeatures.clear(),this.zoomChangeKey&&(this.mapView.un("change:resolution",this.onZoomChange.bind(this)),this.zoomChangeKey=null),this.source.getFeatures().filter(t=>t.get("bandId")).forEach(t=>{this.source.removeFeature(t)}))}startFlowAnimation(e,i,t,o,s,n=1){if(e.length<2)return;let r=0;const l=[];for(let w=0;w<e.length-1;w++){const g=e[w],S=e[w+1],I=S[0]-g[0],F=S[1]-g[1],v=Math.sqrt(I*I+F*F);l.push({start:g,end:S,length:v}),r+=v}if(r<=0)return;const u=4,d=[];for(let w=0;w<u;w++){const g=new C({geometry:new A(e[0])});g.set("bandId",i),g.set("type","greenWaveBandFlowArrow"),g.setStyle(this.createArrowStyle(t,o,0,s)),this.source.addFeature(g),d.push(g)}this.animatedArrows.set(i,d);const c=3e3/Math.max(n,.1);let f=null;const m=w=>{f||(f=w);const g=w-f;if((this.mapView.getZoom()||0)<this.NODE_MIN_ZOOM){for(const v of d)v.setStyle(new h.Style({}));const F=requestAnimationFrame(m);this.animationFrameIds.set(i,F);return}for(let F=0;F<d.length;F++){const v=F/u,b=(g/c+v)%1*r;let $=0;for(const y of l){if($+y.length>=b){const p=(b-$)/y.length,M=y.start[0]+(y.end[0]-y.start[0])*p,O=y.start[1]+(y.end[1]-y.start[1])*p,Z=Math.atan2(y.end[1]-y.start[1],y.end[0]-y.start[0]);d[F].getGeometry().setCoordinates([M,O]),d[F].setStyle(this.createArrowStyle(t,o,Z,s));break}$+=y.length}}const I=requestAnimationFrame(m);this.animationFrameIds.set(i,I)},a=requestAnimationFrame(m);this.animationFrameIds.set(i,a)}stopFlowAnimation(e){const i=this.animationFrameIds.get(e);i&&(cancelAnimationFrame(i),this.animationFrameIds.delete(e));const t=this.animatedArrows.get(e);t&&(t.forEach(o=>{this.source.removeFeature(o)}),this.animatedArrows.delete(e))}addNodeFeatures(e,i){const t=[],o=this.mapView.getZoom()||0;i.forEach(s=>{const n=new C({geometry:new A([s.longitude,s.latitude])});n.set("bandId",e),n.set("type","greenWaveBandNode"),n.set("id",s.id),n.set("name",s.name),n.set("signalId",s.signalId||""),n.set("active",s.active??!1),o<this.NODE_MIN_ZOOM?n.setStyle(this.hiddenStyle):n.setStyle(this.getNodeStyle(s,o)),this.source.addFeature(n),t.push(n)}),this.nodeFeatures.set(e,t),this.ensureZoomChangeListener()}ensureZoomChangeListener(){this.zoomChangeKey||(this.zoomChangeKey=this.mapView.on("change:resolution",this.onZoomChange.bind(this)))}onZoomChange(){const e=this.mapView.getZoom()||0,i=e>=this.NODE_MIN_ZOOM;this.source.getFeatures().forEach(t=>{const o=t.get("type"),s=t.get("bandId");if(o==="greenWaveBand"){const n=this.bandConfigs.get(s);if(n!=null&&n.lineOnly)return;i&&n?t.setStyle(new h.Style({stroke:new h.Stroke({color:n.lineColor,width:n.lineWidth})})):t.setStyle(this.hiddenStyle)}else if(o==="greenWaveBandCenterIcon"){const n=this.bandConfigs.get(s);!i&&n?t.setStyle(this.createCenterIconStyle()):t.setStyle(this.hiddenStyle)}else if(o==="greenWaveBandArrow"||o==="greenWaveBandFlowArrow")if(!i)t.setStyle(this.hiddenStyle);else if(o==="greenWaveBandArrow"){const n=t.get("arrowLineWidth"),r=t.get("arrowColor"),l=t.get("arrowAngle"),u=t.get("arrowDirection")||"double";n!=null&&r!=null&&l!=null&&t.setStyle(this.createArrowStyle(n,r,l,u))}else t.setStyle(void 0)}),this.nodeFeatures.forEach(t=>{t.forEach(o=>{if(!i){o.setStyle(this.hiddenStyle);return}const s={id:o.get("nodeId"),name:o.get("name"),signalId:o.get("signalId"),active:o.get("active"),longitude:0,latitude:0};o.setStyle(this.getNodeStyle(s,e))})})}getNodeStyle(e,i){const t=e.active??!1;if(i<=this.NODE_ZOOM_THRESHOLD){const o=i<15?3:6;return new h.Style({image:new h.Circle({radius:o,fill:new h.Fill({color:t?"#2ce90f":"#3d8bf9"}),stroke:new h.Stroke({color:"#ffffff",width:2})})})}else{const o=`${e.name||""}  ${e.signalId||""}`;return[new h.Style({image:new h.Icon({src:t?"/GisViewerAssets/Images/cross/gis_xhj_green.png":"/GisViewerAssets/Images/cross/gis_xhj_blue.png",scale:.8})}),new h.Style({text:new h.Text({text:o,font:"bold 12px Microsoft YaHei",fill:new h.Fill({color:"#000000"}),stroke:new h.Stroke({color:"#ffffff",width:3}),padding:[2,4,2,4],offsetY:-25})})]}}removeNodeFeatures(e){const i=this.nodeFeatures.get(e);i&&(i.forEach(t=>{this.source.removeFeature(t)}),this.nodeFeatures.delete(e)),this.nodeFeatures.size===0&&this.zoomChangeKey&&(this.mapView.un("change:resolution",this.onZoomChange.bind(this)),this.zoomChangeKey=null)}}exports.default=_;