@idmwx/idmui-gl3 4.3.7 → 4.3.8
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/index.js +1 -1
- package/dist/index.umd.cjs +1 -1
- package/package.json +1 -1
package/dist/index.js
CHANGED
|
@@ -50,7 +50,7 @@ const T = (a, e) => {
|
|
|
50
50
|
otherLayers: [],
|
|
51
51
|
layers: {
|
|
52
52
|
weather: [...Pe.WEATHER_LAYERS],
|
|
53
|
-
other: [...Pe.OTHER_LAYERS]
|
|
53
|
+
other: [...Pe.OTHER_LAYERS.filter((a) => a.key !== "world12nm")]
|
|
54
54
|
},
|
|
55
55
|
weatherLayersCache: "weatherLayersCache",
|
|
56
56
|
autoActiveCache: "autoActiveCache",
|
package/dist/index.umd.cjs
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
(function(E,z){typeof exports=="object"&&typeof module<"u"?z(exports,require("@idmwx/idmwx-base"),require("vue"),require("@turf/turf"),require("@mapbox/sphericalmercator"),require("moment"),require("mapbox-gl"),require("@idm-plugin/geo"),require("axios")):typeof define=="function"&&define.amd?define(["exports","@idmwx/idmwx-base","vue","@turf/turf","@mapbox/sphericalmercator","moment","mapbox-gl","@idm-plugin/geo","axios"],z):(E=typeof globalThis<"u"?globalThis:E||self,z(E["idm-gl"]={},E["@idmwx/idmwx-base"],E.Vue,E["@turf/turf"],E["@mapbox/sphericalmercator"],E.moment,E["mapbox-gl"],E["@idm-plugin/geo"],E.axios))})(this,function(E,z,r,Ee,Se,M,j,S,Z){"use strict";var Sr=Object.defineProperty;var zr=(E,z,r)=>z in E?Sr(E,z,{enumerable:!0,configurable:!0,writable:!0,value:r}):E[z]=r;var P=(E,z,r)=>(zr(E,typeof z!="symbol"?z+"":z,r),r);function ze(a){const e=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(a){for(const t in a)if(t!=="default"){const o=Object.getOwnPropertyDescriptor(a,t);Object.defineProperty(e,t,o.get?o:{enumerable:!0,get:()=>a[t]})}}return e.default=a,Object.freeze(e)}const x=ze(Ee),Pr="",Nr="",C=(a,e)=>{const t=a.__vccOpts||a;for(const[o,i]of e)t[o]=i;return t},Pe={name:"IdmGlLayer",props:{map:{type:Object},mapProjection:{type:String},top:{type:Number,default:60},toggleMenu:{type:Boolean,default:!1},toggleVersion:{type:Number},isLogin:{type:Boolean,default:void 0}},emits:["weather","other","coordinate","measure","point","3d","toggleVersion","menu","showLayers"],data(){return{showLayers:!1,source:"",weatherLayers:[],activeWeatherLayers:[],autoActive:!0,otherLayers:[],layers:{weather:[...z.LayerHelper.WEATHER_LAYERS],other:[...z.LayerHelper.OTHER_LAYERS]},weatherLayersCache:"weatherLayersCache",autoActiveCache:"autoActiveCache",otherLayersCache:"otherLayersCache",sourceCache:"defaultSourceCache",showCoord:!1,showMeasure:!1,showPoint:!1,show3d:!1,version:{v:"0.0.6",k:"glCacheVersion"},right:10,rampColorLayers:["visibility","precip3h","temp","water-temp","arctic"]}},computed:{computeLayerClass(){return function(a,e){let t="layer";return e.some(o=>o.key===a.key)&&(t="layer active"),(!a.enabled||this.rampColorLayers.includes(a.key)&&this.mapProjection==="globe")&&(t="layer disabled"),t}}},watch:{showLayers:{handler(){this.$nextTick(()=>{var a,e;this.$emit("menu",this.showLayers?!1:this.toggleMenu),this.$emit("toggleVersion",Math.random()),this.right=(((a=document.getElementsByClassName("available-layers-show")[0])==null?void 0:a.clientWidth)||0)+(((e=document.getElementsByClassName("fleet-list-container")[0])==null?void 0:e.clientWidth)||0)+10})}},toggleMenu:{handler(){this.$nextTick(()=>{var a,e;this.showLayers=this.toggleMenu?!1:this.showLayers,this.$emit("toggleVersion",Math.random()),this.right=(((a=document.getElementsByClassName("available-layers-show")[0])==null?void 0:a.clientWidth)||0)+(((e=document.getElementsByClassName("fleet-list-container")[0])==null?void 0:e.clientWidth)||0)+10})}}},mounted(){const a=localStorage.getItem(this.version.k);this.version.v!==a&&(localStorage.removeItem(this.weatherLayersCache),localStorage.setItem(this.version.k,this.version.v));let e=localStorage.getItem(this.autoActiveCache);this.autoActive=e!=="false",e=localStorage.getItem(this.weatherLayersCache);let t=JSON.parse(e||'[{"weight":1,"name":"Wind","key":"wind","enabled":true,"type":"json","particle":true},{"weight":4096,"name":"Pressure","key":"prmsl","enabled":true,"type":"json"},{"weight":256,"name":"Tropicals","key":"tropicals","enabled":true,"type":"json"}]');this.weatherLayers=t,this.autoActive&&(this.activeWeatherLayers=[...t]),e=localStorage.getItem(this.otherLayersCache),t=JSON.parse(e||'[{"weight":4,"name":"ECA Zones","key":"eca-zones","enabled":true,"type":"json"}]'),this.otherLayers=t,e=localStorage.getItem(this.sourceCache),this.source=e||"GFS",this.handleConfirm()},methods:{handleConfirm(){this.$emit("weather",this.weatherLayers,this.activeWeatherLayers,this.source),this.$emit("other",this.otherLayers),localStorage.setItem(this.autoActiveCache,this.autoActive),localStorage.setItem(this.sourceCache,this.source)},handleWeatherLayerPick(a){if(this.rampColorLayers.includes(a.key)&&this.mapProjection==="globe")return!1;this.weatherLayers.some(e=>e.key===a.key)?(this.weatherLayers=this.weatherLayers.filter(e=>e.key!==a.key),this.activeWeatherLayers=this.activeWeatherLayers.filter(e=>e.key!==a.key)):this.weatherLayers.length<12&&a.enabled&&(["png","jpg"].includes(a.type)&&(this.weatherLayers=this.weatherLayers.filter(e=>e.type==="json"),this.activeWeatherLayers=this.activeWeatherLayers.filter(e=>e.type==="json")),this.weatherLayers.push(a),this.activeWeatherLayers.push(a)),localStorage.setItem(this.weatherLayersCache,JSON.stringify(this.weatherLayers)),this.$emit("weather",this.weatherLayers,this.activeWeatherLayers,this.source),localStorage.setItem(this.autoActiveCache,this.autoActive),localStorage.setItem(this.sourceCache,this.source)},handleActiveWeatherLayerPick(a){if(this.rampColorLayers.includes(a.key)&&this.mapProjection==="globe")return!1;if(this.activeWeatherLayers.some(e=>e.key===a.key))this.activeWeatherLayers=this.activeWeatherLayers.filter(e=>e.key!==a.key);else if(a.enabled){this.activeWeatherLayers.push(a);for(const e of this.weatherLayers)a.weight>e.weight&&a.weight&e.weight&&this.activeWeatherLayers.push(e)}this.$emit("weather",this.weatherLayers,this.activeWeatherLayers,this.source)},handleOtherLayerPick(a){this.otherLayers.some(e=>e.key===a.key)?this.otherLayers=this.otherLayers.filter(e=>e.key!==a.key):a.enabled&&this.otherLayers.push(a),localStorage.setItem(this.otherLayersCache,JSON.stringify(this.otherLayers)),this.$emit("other",this.otherLayers)},handleMenuToggle(){this.showLayers=!this.showLayers},handleCoordToggle(){this.showCoord=!this.showCoord,this.$emit("coordinate",this.showCoord)},handlePointToggle(){this.isLogin?(this.showPoint=!this.showPoint,this.$emit("point",this.showPoint)):this.$emit("toggleVersion",Math.random())},handleMeasureToggle(){this.showMeasure=!this.showMeasure,this.$emit("measure",this.showMeasure)},handle3DToggle(){this.show3d=!this.show3d,this.$emit("3d",this.show3d)},handleSourceToggle(a){this.source=a,this.handleConfirm()}}},Ne={class:"idm-gl3-layer"},Te={class:"bar-item layer-bars"},De={class:"bar-item tool-bars"},Ve=["onClick"],Re={class:"weather-layers"},Ie={class:"layers-title",style:{display:"flex","align-items":"center","justify-content":"space-between"}},Be={style:{"font-size":"12px"}},Ae={class:"layers-body"},Me=["onClick"],We={class:"other-layers"},Oe={class:"layers-body"},je=["onClick"],Fe={class:"source-layers"},$e={class:"layers-body model-box"};function He(a,e,t,o,i,s){const l=r.resolveComponent("ElScrollbar");return r.openBlock(),r.createElementBlock("div",Ne,[r.createElementVNode("div",{class:"menu-bar-box",style:r.normalizeStyle({top:t.top+10+"px",right:i.right+"px"})},[r.createElementVNode("div",Te,[r.createElementVNode("div",{class:r.normalizeClass(i.showLayers?"menu-icon active":"menu-icon"),onClick:e[0]||(e[0]=(...n)=>s.handleMenuToggle&&s.handleMenuToggle(...n))},e[8]||(e[8]=[r.createElementVNode("span",{class:"iconfont"},"",-1)]),2)])],4),r.createElementVNode("div",{class:"menu-bar-box",style:r.normalizeStyle({top:t.top+160+"px",right:i.right+"px"})},[r.createElementVNode("div",De,[r.createElementVNode("div",{class:r.normalizeClass(i.showMeasure?"menu-icon active":"menu-icon"),onClick:e[1]||(e[1]=(...n)=>s.handleMeasureToggle&&s.handleMeasureToggle(...n))},e[9]||(e[9]=[r.createElementVNode("span",{class:"iconfont"},"",-1)]),2),r.createElementVNode("div",{class:r.normalizeClass(i.showPoint?"menu-icon active":"menu-icon"),onClick:e[2]||(e[2]=(...n)=>s.handlePointToggle&&s.handlePointToggle(...n))},e[10]||(e[10]=[r.createElementVNode("span",{class:"iconfont"},"",-1)]),2),r.createElementVNode("div",{class:r.normalizeClass(i.showCoord?"menu-icon active":"menu-icon"),onClick:e[3]||(e[3]=(...n)=>s.handleCoordToggle&&s.handleCoordToggle(...n))},e[11]||(e[11]=[r.createElementVNode("span",{class:"iconfont"},"",-1)]),2),r.createElementVNode("div",{class:r.normalizeClass(i.show3d?"menu-icon active":"menu-icon"),onClick:e[4]||(e[4]=(...n)=>s.handle3DToggle&&s.handle3DToggle(...n))},e[12]||(e[12]=[r.createElementVNode("span",{class:"iconfont"},"",-1)]),2)])],4),r.createElementVNode("div",{class:"active-layers",style:r.normalizeStyle({right:i.right+"px",bottom:"100px"})},[(r.openBlock(!0),r.createElementBlock(r.Fragment,null,r.renderList(i.weatherLayers,n=>(r.openBlock(),r.createElementBlock("div",{key:n.key,class:r.normalizeClass(s.computeLayerClass(n,i.activeWeatherLayers)),onClick:c=>s.handleActiveWeatherLayerPick(n)},[e[13]||(e[13]=r.createElementVNode("div",{class:"checkbox"},null,-1)),r.createElementVNode("span",null,r.toDisplayString(n.name),1)],10,Ve))),128))],4),r.createElementVNode("div",{class:"available-layers flex-center",style:r.normalizeStyle({top:t.top+"px",right:i.showLayers?"0px":"-240px"})},[r.createElementVNode("div",{class:"side-bar",style:r.normalizeStyle({right:i.showLayers?"0px":"-240px"}),onClick:e[5]||(e[5]=(...n)=>s.handleMenuToggle&&s.handleMenuToggle(...n))},e[14]||(e[14]=[r.createElementVNode("i",{class:"iconfont"},"",-1)]),4),r.createElementVNode("div",{class:r.normalizeClass(["list-box",i.showLayers?"available-layers-show":""])},[r.createVNode(l,{style:{flex:"1"}},{default:r.withCtx(()=>[r.createElementVNode("div",Re,[r.createElementVNode("div",Ie,[r.createElementVNode("div",null,[e[15]||(e[15]=r.createTextVNode(" Weather Layers ")),r.createElementVNode("span",Be,"("+r.toDisplayString(i.weatherLayers.length)+"/12)",1)])]),r.createElementVNode("div",Ae,[(r.openBlock(!0),r.createElementBlock(r.Fragment,null,r.renderList(i.layers.weather,n=>(r.openBlock(),r.createElementBlock(r.Fragment,{key:n.key},[n.hide?r.createCommentVNode("",!0):(r.openBlock(),r.createElementBlock("div",{key:0,class:r.normalizeClass(s.computeLayerClass(n,i.weatherLayers)),onClick:c=>s.handleWeatherLayerPick(n)},[e[16]||(e[16]=r.createElementVNode("div",{class:"checkbox"},null,-1)),r.createElementVNode("span",null,r.toDisplayString(n.name),1)],10,Me))],64))),128))])]),r.createElementVNode("div",We,[e[18]||(e[18]=r.createElementVNode("div",{class:"layers-title"},"Other Layers",-1)),r.createElementVNode("div",Oe,[(r.openBlock(!0),r.createElementBlock(r.Fragment,null,r.renderList(i.layers.other,n=>(r.openBlock(),r.createElementBlock("div",{key:n.key,class:r.normalizeClass(s.computeLayerClass(n,i.otherLayers)),onClick:c=>s.handleOtherLayerPick(n)},[e[17]||(e[17]=r.createElementVNode("div",{class:"checkbox"},null,-1)),r.createElementVNode("span",null,r.toDisplayString(n.name),1)],10,je))),128))])]),r.createElementVNode("div",Fe,[e[19]||(e[19]=r.createElementVNode("span",{class:"layers-title"},"Forecast Model",-1)),r.createElementVNode("div",$e,[r.createElementVNode("span",{class:r.normalizeClass(i.source==="GFS"?"text active":"text"),onClick:e[6]||(e[6]=n=>s.handleSourceToggle("GFS"))},"GFS",2),r.createElementVNode("span",{class:r.normalizeClass(i.source==="CMEMS"?"text active":"text"),onClick:e[7]||(e[7]=n=>s.handleSourceToggle("CMEMS"))},"ECMWF",2)])])]),_:1})],2)],4)])}const Ue=C(Pe,[["render",He]]),Tr="",Ze={name:"IdmWindBarb",props:{map:{type:Object},wind:{type:Object},current:{type:Object},beforeLayer:{type:String},mapProjection:{type:String},showParticle:{type:Boolean,default:!1},toggleVersion:{type:Number},weatherLayers:{type:Object}},emits:["particle"],data(){return{source:"wind-barb-source",barbs:[0,2,5,10,15,20,25,30,35,40,45,50,55,60,65,70,75,80,85,90,95,100,105],empty:x.featureCollection([]),showFeather:!1,right:10,bottom:125,windBarbLoaded:!1}},watch:{"wind.version":{handler(){var a;(a=this.wind)!=null&&a.active&&this.showFeather?this.handleRender():this.handleClear()},deep:!0},showParticle:{handler(){this.showFeather=!this.showParticle},immediate:!0},showFeather:{handler(){this.handleToggle()},immediate:!0},toggleVersion:{handler(){var a,e;this.right=(((a=document.getElementsByClassName("available-layers-show")[0])==null?void 0:a.clientWidth)||0)+(((e=document.getElementsByClassName("fleet-list-container")[0])==null?void 0:e.clientWidth)||0)+10},immediate:!0},"current.version":{handler(){var a,e,t;this.bottom=(a=this.current)!=null&&a.active?(((e=document.getElementsByClassName("active-layers")[0])==null?void 0:e.clientHeight)||0)+135:(((t=document.getElementsByClassName("active-layers")[0])==null?void 0:t.clientHeight)||0)+105},immediate:!0},weatherLayers:{handler(){var a,e,t;this.bottom=(a=this.current)!=null&&a.active?(((e=document.getElementsByClassName("active-layers")[0])==null?void 0:e.clientHeight)||0)+135:(((t=document.getElementsByClassName("active-layers")[0])==null?void 0:t.clientHeight)||0)+105},immediate:!0}},methods:{handleParticle(){this.$emit("particle",{particle:!this.showParticle,key:"wind",weight:1})},handleRender(){var a,e,t,o;if(!this.map)setTimeout(()=>{this.handleRender()},500);else if(this.wind){const i=new Date().valueOf();let s=0,l=0,n=this.empty;if((a=this.wind)!=null&&a.active&&(n=(e=this.wind)==null?void 0:e.data),(t=this.map)!=null&&t.getSource(this.source))(o=this.map)==null||o.getSource(this.source).setData(n),l=new Date().valueOf()-(i+s),console.log("[wind] update elapsed: ",l,", total: ",s+=l);else{this.map.addSource(this.source,{type:"geojson",data:n});for(let c=0;c<(this.barbs??[]).length-1;c++){const h=(this.barbs??[])[c]||0,d=(this.barbs??[])[c+1]||0,m=h<10?`00${h}kts`:h<100?`0${h}kts`:`${h}kts`;this.map.addLayer({id:m,type:"symbol",filter:["all",[">=","spd",h],["<","spd",d]],source:this.source,layout:{"symbol-placement":"point","icon-image":m,"icon-size":.14,"icon-offset":[0,-20],"icon-allow-overlap":!0,"icon-rotation-alignment":"map","icon-rotate":{property:"val",stops:[[0,0],[360,360]]}},paint:{"icon-opacity":1,"text-color":"#222"}},this.beforeLayer)}this.windBarbLoaded=!0,l=new Date().valueOf()-(i+s),console.log("[wind] add elapsed: ",l,", total: ",s+=l)}}},handleToggle(){if(!this.windBarbLoaded)this.handleRender();else for(const a of this.barbs??[]){const e=a<10?`00${a}kts`:a<100?`0${a}kts`:`${a}kts`;this.map.getLayer(e)&&this.map.setLayoutProperty(e,"visibility",this.showFeather?"visible":"none")}},handleClear(){for(const a of this.barbs??[]){const e=a<10?`00${a}kts`:a<100?`0${a}kts`:`${a}kts`;this.map.getLayer(e)&&this.map.removeLayer(e)}this.map.getSource(this.source)&&this.map.removeSource(this.source),this.windBarbLoaded=!1}}},Ge={key:0},Je={key:0,class:"iconfont active"},Xe={key:1,class:"iconfont"},qe={key:0,class:"iconfont active"},Ye={key:1,class:"iconfont"};function Qe(a,e,t,o,i,s){var l;return(l=t.wind)!=null&&l.active?(r.openBlock(),r.createElementBlock("div",Ge,[r.createElementVNode("div",{class:"flex-center tool-bars",style:r.normalizeStyle([{position:"absolute"},{right:i.right+"px",bottom:i.bottom+"px"}])},[t.mapProjection==="mercator"?(r.openBlock(),r.createElementBlock("div",{key:0,class:"flex-start",onClick:e[0]||(e[0]=(...n)=>s.handleParticle&&s.handleParticle(...n))},[t.showParticle?(r.openBlock(),r.createElementBlock("i",Je,"")):(r.openBlock(),r.createElementBlock("i",Xe,"")),r.createElementVNode("span",{class:r.normalizeClass(t.showParticle?"active":"")},"Wind Particles",2)])):r.createCommentVNode("",!0),t.showParticle?(r.openBlock(),r.createElementBlock("div",{key:1,class:"flex-start",style:{"margin-left":"16px"},onClick:e[1]||(e[1]=n=>i.showFeather=!i.showFeather)},[i.showFeather?(r.openBlock(),r.createElementBlock("i",qe,"")):(r.openBlock(),r.createElementBlock("i",Ye,"")),r.createElementVNode("span",{class:r.normalizeClass(i.showFeather?"active":"")},"Wind Feather",2)])):r.createCommentVNode("",!0)],4)])):r.createCommentVNode("",!0)}const Ke=C(Ze,[["render",Qe],["__scopeId","data-v-b6fb74d9"]]);class pe{constructor(e){P(this,"map");P(this,"mercator");P(this,"rampColorLayer");P(this,"rampColorSource");P(this,"particleLayer");P(this,"particleSource");P(this,"rampColorCanvas");P(this,"particleCanvas");P(this,"ratio");this.map=e,this.mercator=new Se,this.rampColorLayer="ramp-color-layer",this.rampColorSource="ramp-color-source",this.particleLayer="particle-layer",this.particleSource="particle-source",this.rampColorCanvas=document.createElement("canvas"),this.particleCanvas=document.createElement("canvas"),this.ratio=window.devicePixelRatio}convertNLng(e,t=0){return e>180?this.convertNLng(e-360,t+1):e<-180?this.convertNLng(e+360,t+1):[e,t]}getBoundLngLat(){const e=this.map.getBounds();return[[e._sw.lng,e._ne.lat],[e._ne.lng,e._ne.lat],[e._ne.lng,e._sw.lat],[e._sw.lng,e._sw.lat]]}getBoundPixel(){const e=this.map.getBounds(),t=this.map.getZoom()+1,o=[e._ne.lng,e._ne.lat],i=[e._sw.lng,e._sw.lat],[s,l]=this.convertNLng(o[0]),[n,c]=this.convertNLng(i[0]),[h,d]=this.mercator.px([s,o[1]],t),[m,g]=this.mercator.px([n,i[1]],t),y=Math.round(this.mercator.size*Math.pow(2,t)*(l+c));return[m,g,h+y,d]}getBoundRange(){const e=this.map.getZoom()+1,t=this.mercator.size*Math.pow(2,e),o=this.getBoundPixel();return[o[0]/t,o[2]/t,o[3]/t,o[1]/t]}getWorldCopy(e,t){const o=2**t,[i,s,l,n]=e.map(d=>~~(d/(o*256))),c=[];for(let d=n;d<=s;d++)for(let m=i;m<=l;m++)c.push([m,d]);return c.map(d=>{const m=2**t*256;return[d[0]*m,d[1]*m,m]})}resize(){let e=this.map.getSource(this.rampColorSource);e.setCoordinates(this.getBoundLngLat()),e=this.map.getSource(this.particleSource),e.setCoordinates(this.getBoundLngLat()),this.rampColorCanvas.width=this.map._canvas.clientWidth,this.rampColorCanvas.height=this.map._canvas.clientHeight,this.particleCanvas.width=this.map._canvas.clientWidth,this.particleCanvas.height=this.map._canvas.clientHeight}toggle(e){const t=this.map.getLayoutProperty(this.rampColorLayer,"visibility"),o=e?"visible":"none";t!==o&&this.map.setLayoutProperty(this.rampColorLayer,"visibility",o)}toggleParticle(e){const t=this.map.getLayoutProperty(this.particleLayer,"visibility"),o=e?"visible":"none";t!==o&&this.map.setLayoutProperty(this.particleLayer,"visibility",o)}}class G{createShader(e,t,o){const i=e.createShader(t);if(i&&(e.shaderSource(i,o),e.compileShader(i),!e.getShaderParameter(i,e.COMPILE_STATUS)))throw new Error(e.getShaderInfoLog(i)||"error happened while create shader...");return i}createTexture(e,t,o,i,s,l,n){const c=e.createTexture();return e.bindTexture(e.TEXTURE_2D,c),e.texParameteri(e.TEXTURE_2D,e.TEXTURE_MIN_FILTER,t),e.texParameteri(e.TEXTURE_2D,e.TEXTURE_MAG_FILTER,o),e.texParameteri(e.TEXTURE_2D,e.TEXTURE_WRAP_S,i),e.texParameteri(e.TEXTURE_2D,e.TEXTURE_WRAP_T,i),s instanceof Uint8Array?e.texImage2D(e.TEXTURE_2D,0,e.RGBA,l,n,0,e.RGBA,e.UNSIGNED_BYTE,s):e.texImage2D(e.TEXTURE_2D,0,e.RGBA,e.RGBA,e.UNSIGNED_BYTE,s),e.bindTexture(e.TEXTURE_2D,null),c}createDataBuffer(e,t,o){if(e){const i=e.createBuffer();return t==="array"?(e.bindBuffer(e.ARRAY_BUFFER,i),o&&e.bufferData(e.ARRAY_BUFFER,o,e.STATIC_DRAW)):t==="element"&&(e.bindBuffer(e.ELEMENT_ARRAY_BUFFER,i),o&&e.bufferData(e.ELEMENT_ARRAY_BUFFER,o,e.STATIC_DRAW)),i}return null}createProgram(e,t,o){const i=e.createProgram(),s=this.createShader(e,e.VERTEX_SHADER,t),l=this.createShader(e,e.FRAGMENT_SHADER,o);if(i&&s&&l&&(e.attachShader(i,s),e.attachShader(i,l),e.linkProgram(i),!e.getProgramParameter(i,e.LINK_STATUS)))throw new Error(e.getProgramInfoLog(i)||"error happened while creating ramp color program");return i}createProgramWrapper(e,t,o){const i=this.createProgram(e,t,o);if(i){const s={program:i},l=e.getProgramParameter(i,e.ACTIVE_ATTRIBUTES);for(let c=0;c<l;c++){const h=e.getActiveAttrib(i,c);s[h.name]=e.getAttribLocation(i,h.name)}const n=e.getProgramParameter(i,e.ACTIVE_UNIFORMS);for(let c=0;c<n;c++){const h=e.getActiveUniform(i,c);s[h.name]=e.getUniformLocation(i,h.name)}return s}}setup(e,t,o=!1,i,s){const l=document.createElement("canvas");l.width=256,l.height=1;const n=l.getContext("2d");if(n&&e){const c=n==null?void 0:n.createLinearGradient(0,0,256,0);return t.forEach(([h,d])=>{c.addColorStop(h,d)}),n.fillStyle=c,n.fillRect(0,0,256,1),{canvas:l,texture:this.createTexture(e,e.LINEAR,e.LINEAR,e.CLAMP_TO_EDGE,o?new Uint8Array(n.getImageData(0,0,256,1).data):l,i,s)}}}setupParticle(e,t=1e3){const o=Math.ceil(Math.sqrt(t)),i=o*o,s=new Uint8Array(i*4);for(let d=0;d<s.length;d++)s[d]=Math.floor(Math.random()*256);const l=this.createTexture(e,e.NEAREST,e.NEAREST,e.CLAMP_TO_EDGE,s,o,o),n=this.createTexture(e,e.NEAREST,e.NEAREST,e.CLAMP_TO_EDGE,s,o,o),c=new Float32Array(i);for(let d=0;d<i;d++)c[d]=d;const h=this.createDataBuffer(e,"array",c);return{resolution:o,total:i,texture0:l,texture1:n,indexBuffer:h}}bind(e,t,o){const i=this.createProgram(e,t,o);if(i){const s=this.createDataBuffer(e,"array",void 0),l=e.getAttribLocation(i,"a_position");e.enableVertexAttribArray(l),e.vertexAttribPointer(l,2,e.FLOAT,!1,0,0);const n=new Float32Array([0,0,1,0,0,1,0,1,1,0,1,1]);this.createDataBuffer(e,"array",n);const c=e.getAttribLocation(i,"a_texCoord");return e.enableVertexAttribArray(c),e.vertexAttribPointer(c,2,e.FLOAT,!1,0,0),{program:i,aPositionBuffer:s}}return{}}bindParticle(e,t,o,i,s,l){const n=this.createProgramWrapper(e,t,o),c=this.createProgramWrapper(e,i,s),h=this.createProgramWrapper(e,i,l),d=this.createDataBuffer(e,"array",new Float32Array([0,0,1,0,0,1,0,1,1,0,1,1])),m=e.createFramebuffer();return{particle:n,screen:c,update:h,quadBuffer:d,frameBuffer:m}}draw(e,t,o,i,s,l,n){var c,h;if(t&&o){e.resize(),t==null||t.viewport(0,0,(c=t==null?void 0:t.canvas)==null?void 0:c.width,(h=t==null?void 0:t.canvas)==null?void 0:h.height),t.clearColor(0,0,0,0),t.clear(t.COLOR_BUFFER_BIT|t.DEPTH_BUFFER_BIT);try{const d=t.getUniformLocation(o,"u_resolution"),m=t.getUniformLocation(o,"u_image"),g=t.getUniformLocation(o,"u_color");if(t.useProgram(o),t.uniform2f(d,t.canvas.width*e.ratio,t.canvas.height*e.ratio),t.activeTexture(t.TEXTURE0),t.bindTexture(t.TEXTURE_2D,i),t.uniform1i(m,0),t.activeTexture(t.TEXTURE1),t.bindTexture(t.TEXTURE_2D,s),t.uniform1i(g,1),n!=null&&n.uvRange&&(n!=null&&n.sRange)){const p=t.getUniformLocation(o,"u_range_u_v"),L=t.getUniformLocation(o,"u_range_s");t.uniform2f(p,n.uvRange[0],n.uvRange[1]),t.uniform2f(L,n.sRange[0],n.sRange[1])}const y=e.getBoundPixel(),u=e.map.getZoom()+1,f=e.getWorldCopy(y,u);for(const p of f){const L=(p[0]-y[0])*e.ratio,b=(p[1]-y[3])*e.ratio,v=p[2]*e.ratio,[_,w,N,T]=[L,v+L,b,v+b],V=new Float32Array([_,N,w,N,_,T,_,T,w,N,w,T]);t.bindBuffer(t.ARRAY_BUFFER,l),t.bufferData(t.ARRAY_BUFFER,V,t.STATIC_DRAW),t.drawArrays(t.TRIANGLES,0,6)}}catch(d){console.log(`render failed...${d}`)}}}drawParticle(e,t,o,i,s){var l,n;t&&(t==null||t.viewport(0,0,(l=t==null?void 0:t.canvas)==null?void 0:l.width,(n=t==null?void 0:t.canvas)==null?void 0:n.height),t.disable(t.DEPTH_TEST),t.disable(t.STENCIL_TEST),t.activeTexture(t.TEXTURE0),t.bindTexture(t.TEXTURE_2D,o),t.activeTexture(t.TEXTURE1),t.bindTexture(t.TEXTURE_2D,i.texture0),this.renderScreen(e,t,i,s),this.updateParticles(e,t,i,s))}renderScreen(e,t,o,i){t.bindFramebuffer(t.FRAMEBUFFER,o.frameBuffer),t.framebufferTexture2D(t.FRAMEBUFFER,t.COLOR_ATTACHMENT0,t.TEXTURE_2D,o.screenTexture,0),t.viewport(0,0,t.canvas.width,t.canvas.height),this.renderScreenTexture(t,o.backgroundTexture,o.screen,o.quadBuffer,.95),this.renderParticles(e,t,o,i),t.bindFramebuffer(t.FRAMEBUFFER,null),this.renderScreenTexture(t,o.screenTexture,o.screen,o.quadBuffer,1);const s=o.backgroundTexture;o.backgroundTexture=o.screenTexture,o.screenTexture=s}renderScreenTexture(e,t,o,i,s){e&&(e.useProgram(o.program),e.bindBuffer(e.ARRAY_BUFFER,i),e.enableVertexAttribArray(o.a_pos),e.vertexAttribPointer(o.a_pos,2,e.FLOAT,!1,0,0),e.activeTexture(e.TEXTURE2),e.bindTexture(e.TEXTURE_2D,t),e.uniform1i(o.u_screen,2),e.uniform1f(o.u_opacity,s),e.drawArrays(e.TRIANGLES,0,6))}renderParticles(e,t,o,i){if(t){t.useProgram(o.particle.program),t.bindBuffer(t.ARRAY_BUFFER,o.indexBuffer),t.enableVertexAttribArray(o.particle.a_index),t.vertexAttribPointer(o.particle.a_index,1,t.FLOAT,!1,0,0),t.activeTexture(t.TEXTURE2),t.bindTexture(t.TEXTURE_2D,o.color.texture),t.uniform1i(o.particle.u_factor,0),t.uniform1i(o.particle.u_particles,1),t.uniform1i(o.particle.u_color_ramp,2),t.uniform1f(o.particle.u_particles_resolution,o.resolution*e.ratio),t.uniform1f(o.particle.u_point,e.ratio);const s=e.getBoundRange();t.uniform4f(o.particle.u_viewport,s[0],s[1],s[2],s[3]),t.uniform2f(o.particle.u_factor_min,i.uvRange[0],i.uvRange[0]),t.uniform2f(o.particle.u_factor_max,i.uvRange[1],i.uvRange[1]),t.drawArrays(t.POINTS,0,o.total)}}updateParticles(e,t,o,i){var l,n;if(t){t.bindFramebuffer(t.FRAMEBUFFER,o.frameBuffer),t.framebufferTexture2D(t.FRAMEBUFFER,t.COLOR_ATTACHMENT0,t.TEXTURE_2D,o.texture1,0),t.viewport(0,0,o.resolution,o.resolution),t.useProgram(o.update.program),t.bindBuffer(t.ARRAY_BUFFER,o.quadBuffer),t.enableVertexAttribArray(o.update.a_pos),t.vertexAttribPointer(o.update.a_pos,2,t.FLOAT,!1,0,0),t.uniform1i(o.update.u_factor,0),t.uniform1i(o.update.u_particles,1);const c=e.getBoundRange();t.uniform4f(o.update.u_viewport,c[0],c[1],c[2],c[3]),t.uniform1f(o.update.u_rand_seed,Math.random()),t.uniform2f(o.update.u_factor_res,(l=o==null?void 0:o.image)==null?void 0:l.width,(n=o==null?void 0:o.image)==null?void 0:n.height),t.uniform2f(o.update.u_factor_min,i.uvRange[0],i.uvRange[0]),t.uniform2f(o.update.u_factor_max,i.uvRange[1],i.uvRange[1]),t.uniform1f(o.update.u_speed_factor,i.speedFactor*e.ratio),t.uniform1f(o.update.u_drop_rate,i.dropRate),t.uniform1f(o.update.u_drop_rate_bump,i.dropRateBump),t.drawArrays(t.TRIANGLES,0,6)}const s=o.texture0;o.texture0=o.texture1,o.texture1=s}resize(e,t){e.resize();const o=new Uint8Array(t.canvas.width*t.canvas.height*4).fill(0,0,t.canvas.width*t.canvas.height*4),i=this.createTexture(t,t.NEAREST,t.NEAREST,t.CLAMP_TO_EDGE,o,t.canvas.width,t.canvas.height),s=this.createTexture(t,t.NEAREST,t.NEAREST,t.CLAMP_TO_EDGE,o,t.canvas.width,t.canvas.height);return{screenTexture:i,backgroundTexture:s}}async loadImg(e){return new Promise(t=>{const o=new Blob([e],{type:e.type}),i=URL.createObjectURL(o),s=new Image;s.crossOrigin="anonymous",s.src=i,s.onload=()=>t(s)})}}class D{}P(D,"vertexSchema",`
|
|
1
|
+
(function(E,z){typeof exports=="object"&&typeof module<"u"?z(exports,require("@idmwx/idmwx-base"),require("vue"),require("@turf/turf"),require("@mapbox/sphericalmercator"),require("moment"),require("mapbox-gl"),require("@idm-plugin/geo"),require("axios")):typeof define=="function"&&define.amd?define(["exports","@idmwx/idmwx-base","vue","@turf/turf","@mapbox/sphericalmercator","moment","mapbox-gl","@idm-plugin/geo","axios"],z):(E=typeof globalThis<"u"?globalThis:E||self,z(E["idm-gl"]={},E["@idmwx/idmwx-base"],E.Vue,E["@turf/turf"],E["@mapbox/sphericalmercator"],E.moment,E["mapbox-gl"],E["@idm-plugin/geo"],E.axios))})(this,function(E,z,r,Ee,Se,M,j,S,Z){"use strict";var Sr=Object.defineProperty;var zr=(E,z,r)=>z in E?Sr(E,z,{enumerable:!0,configurable:!0,writable:!0,value:r}):E[z]=r;var P=(E,z,r)=>(zr(E,typeof z!="symbol"?z+"":z,r),r);function ze(a){const e=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(a){for(const t in a)if(t!=="default"){const o=Object.getOwnPropertyDescriptor(a,t);Object.defineProperty(e,t,o.get?o:{enumerable:!0,get:()=>a[t]})}}return e.default=a,Object.freeze(e)}const x=ze(Ee),Pr="",Nr="",C=(a,e)=>{const t=a.__vccOpts||a;for(const[o,i]of e)t[o]=i;return t},Pe={name:"IdmGlLayer",props:{map:{type:Object},mapProjection:{type:String},top:{type:Number,default:60},toggleMenu:{type:Boolean,default:!1},toggleVersion:{type:Number},isLogin:{type:Boolean,default:void 0}},emits:["weather","other","coordinate","measure","point","3d","toggleVersion","menu","showLayers"],data(){return{showLayers:!1,source:"",weatherLayers:[],activeWeatherLayers:[],autoActive:!0,otherLayers:[],layers:{weather:[...z.LayerHelper.WEATHER_LAYERS],other:[...z.LayerHelper.OTHER_LAYERS.filter(a=>a.key!=="world12nm")]},weatherLayersCache:"weatherLayersCache",autoActiveCache:"autoActiveCache",otherLayersCache:"otherLayersCache",sourceCache:"defaultSourceCache",showCoord:!1,showMeasure:!1,showPoint:!1,show3d:!1,version:{v:"0.0.6",k:"glCacheVersion"},right:10,rampColorLayers:["visibility","precip3h","temp","water-temp","arctic"]}},computed:{computeLayerClass(){return function(a,e){let t="layer";return e.some(o=>o.key===a.key)&&(t="layer active"),(!a.enabled||this.rampColorLayers.includes(a.key)&&this.mapProjection==="globe")&&(t="layer disabled"),t}}},watch:{showLayers:{handler(){this.$nextTick(()=>{var a,e;this.$emit("menu",this.showLayers?!1:this.toggleMenu),this.$emit("toggleVersion",Math.random()),this.right=(((a=document.getElementsByClassName("available-layers-show")[0])==null?void 0:a.clientWidth)||0)+(((e=document.getElementsByClassName("fleet-list-container")[0])==null?void 0:e.clientWidth)||0)+10})}},toggleMenu:{handler(){this.$nextTick(()=>{var a,e;this.showLayers=this.toggleMenu?!1:this.showLayers,this.$emit("toggleVersion",Math.random()),this.right=(((a=document.getElementsByClassName("available-layers-show")[0])==null?void 0:a.clientWidth)||0)+(((e=document.getElementsByClassName("fleet-list-container")[0])==null?void 0:e.clientWidth)||0)+10})}}},mounted(){const a=localStorage.getItem(this.version.k);this.version.v!==a&&(localStorage.removeItem(this.weatherLayersCache),localStorage.setItem(this.version.k,this.version.v));let e=localStorage.getItem(this.autoActiveCache);this.autoActive=e!=="false",e=localStorage.getItem(this.weatherLayersCache);let t=JSON.parse(e||'[{"weight":1,"name":"Wind","key":"wind","enabled":true,"type":"json","particle":true},{"weight":4096,"name":"Pressure","key":"prmsl","enabled":true,"type":"json"},{"weight":256,"name":"Tropicals","key":"tropicals","enabled":true,"type":"json"}]');this.weatherLayers=t,this.autoActive&&(this.activeWeatherLayers=[...t]),e=localStorage.getItem(this.otherLayersCache),t=JSON.parse(e||'[{"weight":4,"name":"ECA Zones","key":"eca-zones","enabled":true,"type":"json"}]'),this.otherLayers=t,e=localStorage.getItem(this.sourceCache),this.source=e||"GFS",this.handleConfirm()},methods:{handleConfirm(){this.$emit("weather",this.weatherLayers,this.activeWeatherLayers,this.source),this.$emit("other",this.otherLayers),localStorage.setItem(this.autoActiveCache,this.autoActive),localStorage.setItem(this.sourceCache,this.source)},handleWeatherLayerPick(a){if(this.rampColorLayers.includes(a.key)&&this.mapProjection==="globe")return!1;this.weatherLayers.some(e=>e.key===a.key)?(this.weatherLayers=this.weatherLayers.filter(e=>e.key!==a.key),this.activeWeatherLayers=this.activeWeatherLayers.filter(e=>e.key!==a.key)):this.weatherLayers.length<12&&a.enabled&&(["png","jpg"].includes(a.type)&&(this.weatherLayers=this.weatherLayers.filter(e=>e.type==="json"),this.activeWeatherLayers=this.activeWeatherLayers.filter(e=>e.type==="json")),this.weatherLayers.push(a),this.activeWeatherLayers.push(a)),localStorage.setItem(this.weatherLayersCache,JSON.stringify(this.weatherLayers)),this.$emit("weather",this.weatherLayers,this.activeWeatherLayers,this.source),localStorage.setItem(this.autoActiveCache,this.autoActive),localStorage.setItem(this.sourceCache,this.source)},handleActiveWeatherLayerPick(a){if(this.rampColorLayers.includes(a.key)&&this.mapProjection==="globe")return!1;if(this.activeWeatherLayers.some(e=>e.key===a.key))this.activeWeatherLayers=this.activeWeatherLayers.filter(e=>e.key!==a.key);else if(a.enabled){this.activeWeatherLayers.push(a);for(const e of this.weatherLayers)a.weight>e.weight&&a.weight&e.weight&&this.activeWeatherLayers.push(e)}this.$emit("weather",this.weatherLayers,this.activeWeatherLayers,this.source)},handleOtherLayerPick(a){this.otherLayers.some(e=>e.key===a.key)?this.otherLayers=this.otherLayers.filter(e=>e.key!==a.key):a.enabled&&this.otherLayers.push(a),localStorage.setItem(this.otherLayersCache,JSON.stringify(this.otherLayers)),this.$emit("other",this.otherLayers)},handleMenuToggle(){this.showLayers=!this.showLayers},handleCoordToggle(){this.showCoord=!this.showCoord,this.$emit("coordinate",this.showCoord)},handlePointToggle(){this.isLogin?(this.showPoint=!this.showPoint,this.$emit("point",this.showPoint)):this.$emit("toggleVersion",Math.random())},handleMeasureToggle(){this.showMeasure=!this.showMeasure,this.$emit("measure",this.showMeasure)},handle3DToggle(){this.show3d=!this.show3d,this.$emit("3d",this.show3d)},handleSourceToggle(a){this.source=a,this.handleConfirm()}}},Ne={class:"idm-gl3-layer"},Te={class:"bar-item layer-bars"},De={class:"bar-item tool-bars"},Ve=["onClick"],Re={class:"weather-layers"},Ie={class:"layers-title",style:{display:"flex","align-items":"center","justify-content":"space-between"}},Be={style:{"font-size":"12px"}},Ae={class:"layers-body"},Me=["onClick"],We={class:"other-layers"},Oe={class:"layers-body"},je=["onClick"],Fe={class:"source-layers"},$e={class:"layers-body model-box"};function He(a,e,t,o,i,s){const l=r.resolveComponent("ElScrollbar");return r.openBlock(),r.createElementBlock("div",Ne,[r.createElementVNode("div",{class:"menu-bar-box",style:r.normalizeStyle({top:t.top+10+"px",right:i.right+"px"})},[r.createElementVNode("div",Te,[r.createElementVNode("div",{class:r.normalizeClass(i.showLayers?"menu-icon active":"menu-icon"),onClick:e[0]||(e[0]=(...n)=>s.handleMenuToggle&&s.handleMenuToggle(...n))},e[8]||(e[8]=[r.createElementVNode("span",{class:"iconfont"},"",-1)]),2)])],4),r.createElementVNode("div",{class:"menu-bar-box",style:r.normalizeStyle({top:t.top+160+"px",right:i.right+"px"})},[r.createElementVNode("div",De,[r.createElementVNode("div",{class:r.normalizeClass(i.showMeasure?"menu-icon active":"menu-icon"),onClick:e[1]||(e[1]=(...n)=>s.handleMeasureToggle&&s.handleMeasureToggle(...n))},e[9]||(e[9]=[r.createElementVNode("span",{class:"iconfont"},"",-1)]),2),r.createElementVNode("div",{class:r.normalizeClass(i.showPoint?"menu-icon active":"menu-icon"),onClick:e[2]||(e[2]=(...n)=>s.handlePointToggle&&s.handlePointToggle(...n))},e[10]||(e[10]=[r.createElementVNode("span",{class:"iconfont"},"",-1)]),2),r.createElementVNode("div",{class:r.normalizeClass(i.showCoord?"menu-icon active":"menu-icon"),onClick:e[3]||(e[3]=(...n)=>s.handleCoordToggle&&s.handleCoordToggle(...n))},e[11]||(e[11]=[r.createElementVNode("span",{class:"iconfont"},"",-1)]),2),r.createElementVNode("div",{class:r.normalizeClass(i.show3d?"menu-icon active":"menu-icon"),onClick:e[4]||(e[4]=(...n)=>s.handle3DToggle&&s.handle3DToggle(...n))},e[12]||(e[12]=[r.createElementVNode("span",{class:"iconfont"},"",-1)]),2)])],4),r.createElementVNode("div",{class:"active-layers",style:r.normalizeStyle({right:i.right+"px",bottom:"100px"})},[(r.openBlock(!0),r.createElementBlock(r.Fragment,null,r.renderList(i.weatherLayers,n=>(r.openBlock(),r.createElementBlock("div",{key:n.key,class:r.normalizeClass(s.computeLayerClass(n,i.activeWeatherLayers)),onClick:c=>s.handleActiveWeatherLayerPick(n)},[e[13]||(e[13]=r.createElementVNode("div",{class:"checkbox"},null,-1)),r.createElementVNode("span",null,r.toDisplayString(n.name),1)],10,Ve))),128))],4),r.createElementVNode("div",{class:"available-layers flex-center",style:r.normalizeStyle({top:t.top+"px",right:i.showLayers?"0px":"-240px"})},[r.createElementVNode("div",{class:"side-bar",style:r.normalizeStyle({right:i.showLayers?"0px":"-240px"}),onClick:e[5]||(e[5]=(...n)=>s.handleMenuToggle&&s.handleMenuToggle(...n))},e[14]||(e[14]=[r.createElementVNode("i",{class:"iconfont"},"",-1)]),4),r.createElementVNode("div",{class:r.normalizeClass(["list-box",i.showLayers?"available-layers-show":""])},[r.createVNode(l,{style:{flex:"1"}},{default:r.withCtx(()=>[r.createElementVNode("div",Re,[r.createElementVNode("div",Ie,[r.createElementVNode("div",null,[e[15]||(e[15]=r.createTextVNode(" Weather Layers ")),r.createElementVNode("span",Be,"("+r.toDisplayString(i.weatherLayers.length)+"/12)",1)])]),r.createElementVNode("div",Ae,[(r.openBlock(!0),r.createElementBlock(r.Fragment,null,r.renderList(i.layers.weather,n=>(r.openBlock(),r.createElementBlock(r.Fragment,{key:n.key},[n.hide?r.createCommentVNode("",!0):(r.openBlock(),r.createElementBlock("div",{key:0,class:r.normalizeClass(s.computeLayerClass(n,i.weatherLayers)),onClick:c=>s.handleWeatherLayerPick(n)},[e[16]||(e[16]=r.createElementVNode("div",{class:"checkbox"},null,-1)),r.createElementVNode("span",null,r.toDisplayString(n.name),1)],10,Me))],64))),128))])]),r.createElementVNode("div",We,[e[18]||(e[18]=r.createElementVNode("div",{class:"layers-title"},"Other Layers",-1)),r.createElementVNode("div",Oe,[(r.openBlock(!0),r.createElementBlock(r.Fragment,null,r.renderList(i.layers.other,n=>(r.openBlock(),r.createElementBlock("div",{key:n.key,class:r.normalizeClass(s.computeLayerClass(n,i.otherLayers)),onClick:c=>s.handleOtherLayerPick(n)},[e[17]||(e[17]=r.createElementVNode("div",{class:"checkbox"},null,-1)),r.createElementVNode("span",null,r.toDisplayString(n.name),1)],10,je))),128))])]),r.createElementVNode("div",Fe,[e[19]||(e[19]=r.createElementVNode("span",{class:"layers-title"},"Forecast Model",-1)),r.createElementVNode("div",$e,[r.createElementVNode("span",{class:r.normalizeClass(i.source==="GFS"?"text active":"text"),onClick:e[6]||(e[6]=n=>s.handleSourceToggle("GFS"))},"GFS",2),r.createElementVNode("span",{class:r.normalizeClass(i.source==="CMEMS"?"text active":"text"),onClick:e[7]||(e[7]=n=>s.handleSourceToggle("CMEMS"))},"ECMWF",2)])])]),_:1})],2)],4)])}const Ue=C(Pe,[["render",He]]),Tr="",Ze={name:"IdmWindBarb",props:{map:{type:Object},wind:{type:Object},current:{type:Object},beforeLayer:{type:String},mapProjection:{type:String},showParticle:{type:Boolean,default:!1},toggleVersion:{type:Number},weatherLayers:{type:Object}},emits:["particle"],data(){return{source:"wind-barb-source",barbs:[0,2,5,10,15,20,25,30,35,40,45,50,55,60,65,70,75,80,85,90,95,100,105],empty:x.featureCollection([]),showFeather:!1,right:10,bottom:125,windBarbLoaded:!1}},watch:{"wind.version":{handler(){var a;(a=this.wind)!=null&&a.active&&this.showFeather?this.handleRender():this.handleClear()},deep:!0},showParticle:{handler(){this.showFeather=!this.showParticle},immediate:!0},showFeather:{handler(){this.handleToggle()},immediate:!0},toggleVersion:{handler(){var a,e;this.right=(((a=document.getElementsByClassName("available-layers-show")[0])==null?void 0:a.clientWidth)||0)+(((e=document.getElementsByClassName("fleet-list-container")[0])==null?void 0:e.clientWidth)||0)+10},immediate:!0},"current.version":{handler(){var a,e,t;this.bottom=(a=this.current)!=null&&a.active?(((e=document.getElementsByClassName("active-layers")[0])==null?void 0:e.clientHeight)||0)+135:(((t=document.getElementsByClassName("active-layers")[0])==null?void 0:t.clientHeight)||0)+105},immediate:!0},weatherLayers:{handler(){var a,e,t;this.bottom=(a=this.current)!=null&&a.active?(((e=document.getElementsByClassName("active-layers")[0])==null?void 0:e.clientHeight)||0)+135:(((t=document.getElementsByClassName("active-layers")[0])==null?void 0:t.clientHeight)||0)+105},immediate:!0}},methods:{handleParticle(){this.$emit("particle",{particle:!this.showParticle,key:"wind",weight:1})},handleRender(){var a,e,t,o;if(!this.map)setTimeout(()=>{this.handleRender()},500);else if(this.wind){const i=new Date().valueOf();let s=0,l=0,n=this.empty;if((a=this.wind)!=null&&a.active&&(n=(e=this.wind)==null?void 0:e.data),(t=this.map)!=null&&t.getSource(this.source))(o=this.map)==null||o.getSource(this.source).setData(n),l=new Date().valueOf()-(i+s),console.log("[wind] update elapsed: ",l,", total: ",s+=l);else{this.map.addSource(this.source,{type:"geojson",data:n});for(let c=0;c<(this.barbs??[]).length-1;c++){const h=(this.barbs??[])[c]||0,d=(this.barbs??[])[c+1]||0,m=h<10?`00${h}kts`:h<100?`0${h}kts`:`${h}kts`;this.map.addLayer({id:m,type:"symbol",filter:["all",[">=","spd",h],["<","spd",d]],source:this.source,layout:{"symbol-placement":"point","icon-image":m,"icon-size":.14,"icon-offset":[0,-20],"icon-allow-overlap":!0,"icon-rotation-alignment":"map","icon-rotate":{property:"val",stops:[[0,0],[360,360]]}},paint:{"icon-opacity":1,"text-color":"#222"}},this.beforeLayer)}this.windBarbLoaded=!0,l=new Date().valueOf()-(i+s),console.log("[wind] add elapsed: ",l,", total: ",s+=l)}}},handleToggle(){if(!this.windBarbLoaded)this.handleRender();else for(const a of this.barbs??[]){const e=a<10?`00${a}kts`:a<100?`0${a}kts`:`${a}kts`;this.map.getLayer(e)&&this.map.setLayoutProperty(e,"visibility",this.showFeather?"visible":"none")}},handleClear(){for(const a of this.barbs??[]){const e=a<10?`00${a}kts`:a<100?`0${a}kts`:`${a}kts`;this.map.getLayer(e)&&this.map.removeLayer(e)}this.map.getSource(this.source)&&this.map.removeSource(this.source),this.windBarbLoaded=!1}}},Ge={key:0},Je={key:0,class:"iconfont active"},Xe={key:1,class:"iconfont"},qe={key:0,class:"iconfont active"},Ye={key:1,class:"iconfont"};function Qe(a,e,t,o,i,s){var l;return(l=t.wind)!=null&&l.active?(r.openBlock(),r.createElementBlock("div",Ge,[r.createElementVNode("div",{class:"flex-center tool-bars",style:r.normalizeStyle([{position:"absolute"},{right:i.right+"px",bottom:i.bottom+"px"}])},[t.mapProjection==="mercator"?(r.openBlock(),r.createElementBlock("div",{key:0,class:"flex-start",onClick:e[0]||(e[0]=(...n)=>s.handleParticle&&s.handleParticle(...n))},[t.showParticle?(r.openBlock(),r.createElementBlock("i",Je,"")):(r.openBlock(),r.createElementBlock("i",Xe,"")),r.createElementVNode("span",{class:r.normalizeClass(t.showParticle?"active":"")},"Wind Particles",2)])):r.createCommentVNode("",!0),t.showParticle?(r.openBlock(),r.createElementBlock("div",{key:1,class:"flex-start",style:{"margin-left":"16px"},onClick:e[1]||(e[1]=n=>i.showFeather=!i.showFeather)},[i.showFeather?(r.openBlock(),r.createElementBlock("i",qe,"")):(r.openBlock(),r.createElementBlock("i",Ye,"")),r.createElementVNode("span",{class:r.normalizeClass(i.showFeather?"active":"")},"Wind Feather",2)])):r.createCommentVNode("",!0)],4)])):r.createCommentVNode("",!0)}const Ke=C(Ze,[["render",Qe],["__scopeId","data-v-b6fb74d9"]]);class pe{constructor(e){P(this,"map");P(this,"mercator");P(this,"rampColorLayer");P(this,"rampColorSource");P(this,"particleLayer");P(this,"particleSource");P(this,"rampColorCanvas");P(this,"particleCanvas");P(this,"ratio");this.map=e,this.mercator=new Se,this.rampColorLayer="ramp-color-layer",this.rampColorSource="ramp-color-source",this.particleLayer="particle-layer",this.particleSource="particle-source",this.rampColorCanvas=document.createElement("canvas"),this.particleCanvas=document.createElement("canvas"),this.ratio=window.devicePixelRatio}convertNLng(e,t=0){return e>180?this.convertNLng(e-360,t+1):e<-180?this.convertNLng(e+360,t+1):[e,t]}getBoundLngLat(){const e=this.map.getBounds();return[[e._sw.lng,e._ne.lat],[e._ne.lng,e._ne.lat],[e._ne.lng,e._sw.lat],[e._sw.lng,e._sw.lat]]}getBoundPixel(){const e=this.map.getBounds(),t=this.map.getZoom()+1,o=[e._ne.lng,e._ne.lat],i=[e._sw.lng,e._sw.lat],[s,l]=this.convertNLng(o[0]),[n,c]=this.convertNLng(i[0]),[h,d]=this.mercator.px([s,o[1]],t),[m,g]=this.mercator.px([n,i[1]],t),y=Math.round(this.mercator.size*Math.pow(2,t)*(l+c));return[m,g,h+y,d]}getBoundRange(){const e=this.map.getZoom()+1,t=this.mercator.size*Math.pow(2,e),o=this.getBoundPixel();return[o[0]/t,o[2]/t,o[3]/t,o[1]/t]}getWorldCopy(e,t){const o=2**t,[i,s,l,n]=e.map(d=>~~(d/(o*256))),c=[];for(let d=n;d<=s;d++)for(let m=i;m<=l;m++)c.push([m,d]);return c.map(d=>{const m=2**t*256;return[d[0]*m,d[1]*m,m]})}resize(){let e=this.map.getSource(this.rampColorSource);e.setCoordinates(this.getBoundLngLat()),e=this.map.getSource(this.particleSource),e.setCoordinates(this.getBoundLngLat()),this.rampColorCanvas.width=this.map._canvas.clientWidth,this.rampColorCanvas.height=this.map._canvas.clientHeight,this.particleCanvas.width=this.map._canvas.clientWidth,this.particleCanvas.height=this.map._canvas.clientHeight}toggle(e){const t=this.map.getLayoutProperty(this.rampColorLayer,"visibility"),o=e?"visible":"none";t!==o&&this.map.setLayoutProperty(this.rampColorLayer,"visibility",o)}toggleParticle(e){const t=this.map.getLayoutProperty(this.particleLayer,"visibility"),o=e?"visible":"none";t!==o&&this.map.setLayoutProperty(this.particleLayer,"visibility",o)}}class G{createShader(e,t,o){const i=e.createShader(t);if(i&&(e.shaderSource(i,o),e.compileShader(i),!e.getShaderParameter(i,e.COMPILE_STATUS)))throw new Error(e.getShaderInfoLog(i)||"error happened while create shader...");return i}createTexture(e,t,o,i,s,l,n){const c=e.createTexture();return e.bindTexture(e.TEXTURE_2D,c),e.texParameteri(e.TEXTURE_2D,e.TEXTURE_MIN_FILTER,t),e.texParameteri(e.TEXTURE_2D,e.TEXTURE_MAG_FILTER,o),e.texParameteri(e.TEXTURE_2D,e.TEXTURE_WRAP_S,i),e.texParameteri(e.TEXTURE_2D,e.TEXTURE_WRAP_T,i),s instanceof Uint8Array?e.texImage2D(e.TEXTURE_2D,0,e.RGBA,l,n,0,e.RGBA,e.UNSIGNED_BYTE,s):e.texImage2D(e.TEXTURE_2D,0,e.RGBA,e.RGBA,e.UNSIGNED_BYTE,s),e.bindTexture(e.TEXTURE_2D,null),c}createDataBuffer(e,t,o){if(e){const i=e.createBuffer();return t==="array"?(e.bindBuffer(e.ARRAY_BUFFER,i),o&&e.bufferData(e.ARRAY_BUFFER,o,e.STATIC_DRAW)):t==="element"&&(e.bindBuffer(e.ELEMENT_ARRAY_BUFFER,i),o&&e.bufferData(e.ELEMENT_ARRAY_BUFFER,o,e.STATIC_DRAW)),i}return null}createProgram(e,t,o){const i=e.createProgram(),s=this.createShader(e,e.VERTEX_SHADER,t),l=this.createShader(e,e.FRAGMENT_SHADER,o);if(i&&s&&l&&(e.attachShader(i,s),e.attachShader(i,l),e.linkProgram(i),!e.getProgramParameter(i,e.LINK_STATUS)))throw new Error(e.getProgramInfoLog(i)||"error happened while creating ramp color program");return i}createProgramWrapper(e,t,o){const i=this.createProgram(e,t,o);if(i){const s={program:i},l=e.getProgramParameter(i,e.ACTIVE_ATTRIBUTES);for(let c=0;c<l;c++){const h=e.getActiveAttrib(i,c);s[h.name]=e.getAttribLocation(i,h.name)}const n=e.getProgramParameter(i,e.ACTIVE_UNIFORMS);for(let c=0;c<n;c++){const h=e.getActiveUniform(i,c);s[h.name]=e.getUniformLocation(i,h.name)}return s}}setup(e,t,o=!1,i,s){const l=document.createElement("canvas");l.width=256,l.height=1;const n=l.getContext("2d");if(n&&e){const c=n==null?void 0:n.createLinearGradient(0,0,256,0);return t.forEach(([h,d])=>{c.addColorStop(h,d)}),n.fillStyle=c,n.fillRect(0,0,256,1),{canvas:l,texture:this.createTexture(e,e.LINEAR,e.LINEAR,e.CLAMP_TO_EDGE,o?new Uint8Array(n.getImageData(0,0,256,1).data):l,i,s)}}}setupParticle(e,t=1e3){const o=Math.ceil(Math.sqrt(t)),i=o*o,s=new Uint8Array(i*4);for(let d=0;d<s.length;d++)s[d]=Math.floor(Math.random()*256);const l=this.createTexture(e,e.NEAREST,e.NEAREST,e.CLAMP_TO_EDGE,s,o,o),n=this.createTexture(e,e.NEAREST,e.NEAREST,e.CLAMP_TO_EDGE,s,o,o),c=new Float32Array(i);for(let d=0;d<i;d++)c[d]=d;const h=this.createDataBuffer(e,"array",c);return{resolution:o,total:i,texture0:l,texture1:n,indexBuffer:h}}bind(e,t,o){const i=this.createProgram(e,t,o);if(i){const s=this.createDataBuffer(e,"array",void 0),l=e.getAttribLocation(i,"a_position");e.enableVertexAttribArray(l),e.vertexAttribPointer(l,2,e.FLOAT,!1,0,0);const n=new Float32Array([0,0,1,0,0,1,0,1,1,0,1,1]);this.createDataBuffer(e,"array",n);const c=e.getAttribLocation(i,"a_texCoord");return e.enableVertexAttribArray(c),e.vertexAttribPointer(c,2,e.FLOAT,!1,0,0),{program:i,aPositionBuffer:s}}return{}}bindParticle(e,t,o,i,s,l){const n=this.createProgramWrapper(e,t,o),c=this.createProgramWrapper(e,i,s),h=this.createProgramWrapper(e,i,l),d=this.createDataBuffer(e,"array",new Float32Array([0,0,1,0,0,1,0,1,1,0,1,1])),m=e.createFramebuffer();return{particle:n,screen:c,update:h,quadBuffer:d,frameBuffer:m}}draw(e,t,o,i,s,l,n){var c,h;if(t&&o){e.resize(),t==null||t.viewport(0,0,(c=t==null?void 0:t.canvas)==null?void 0:c.width,(h=t==null?void 0:t.canvas)==null?void 0:h.height),t.clearColor(0,0,0,0),t.clear(t.COLOR_BUFFER_BIT|t.DEPTH_BUFFER_BIT);try{const d=t.getUniformLocation(o,"u_resolution"),m=t.getUniformLocation(o,"u_image"),g=t.getUniformLocation(o,"u_color");if(t.useProgram(o),t.uniform2f(d,t.canvas.width*e.ratio,t.canvas.height*e.ratio),t.activeTexture(t.TEXTURE0),t.bindTexture(t.TEXTURE_2D,i),t.uniform1i(m,0),t.activeTexture(t.TEXTURE1),t.bindTexture(t.TEXTURE_2D,s),t.uniform1i(g,1),n!=null&&n.uvRange&&(n!=null&&n.sRange)){const p=t.getUniformLocation(o,"u_range_u_v"),L=t.getUniformLocation(o,"u_range_s");t.uniform2f(p,n.uvRange[0],n.uvRange[1]),t.uniform2f(L,n.sRange[0],n.sRange[1])}const y=e.getBoundPixel(),u=e.map.getZoom()+1,f=e.getWorldCopy(y,u);for(const p of f){const L=(p[0]-y[0])*e.ratio,b=(p[1]-y[3])*e.ratio,v=p[2]*e.ratio,[_,w,N,T]=[L,v+L,b,v+b],V=new Float32Array([_,N,w,N,_,T,_,T,w,N,w,T]);t.bindBuffer(t.ARRAY_BUFFER,l),t.bufferData(t.ARRAY_BUFFER,V,t.STATIC_DRAW),t.drawArrays(t.TRIANGLES,0,6)}}catch(d){console.log(`render failed...${d}`)}}}drawParticle(e,t,o,i,s){var l,n;t&&(t==null||t.viewport(0,0,(l=t==null?void 0:t.canvas)==null?void 0:l.width,(n=t==null?void 0:t.canvas)==null?void 0:n.height),t.disable(t.DEPTH_TEST),t.disable(t.STENCIL_TEST),t.activeTexture(t.TEXTURE0),t.bindTexture(t.TEXTURE_2D,o),t.activeTexture(t.TEXTURE1),t.bindTexture(t.TEXTURE_2D,i.texture0),this.renderScreen(e,t,i,s),this.updateParticles(e,t,i,s))}renderScreen(e,t,o,i){t.bindFramebuffer(t.FRAMEBUFFER,o.frameBuffer),t.framebufferTexture2D(t.FRAMEBUFFER,t.COLOR_ATTACHMENT0,t.TEXTURE_2D,o.screenTexture,0),t.viewport(0,0,t.canvas.width,t.canvas.height),this.renderScreenTexture(t,o.backgroundTexture,o.screen,o.quadBuffer,.95),this.renderParticles(e,t,o,i),t.bindFramebuffer(t.FRAMEBUFFER,null),this.renderScreenTexture(t,o.screenTexture,o.screen,o.quadBuffer,1);const s=o.backgroundTexture;o.backgroundTexture=o.screenTexture,o.screenTexture=s}renderScreenTexture(e,t,o,i,s){e&&(e.useProgram(o.program),e.bindBuffer(e.ARRAY_BUFFER,i),e.enableVertexAttribArray(o.a_pos),e.vertexAttribPointer(o.a_pos,2,e.FLOAT,!1,0,0),e.activeTexture(e.TEXTURE2),e.bindTexture(e.TEXTURE_2D,t),e.uniform1i(o.u_screen,2),e.uniform1f(o.u_opacity,s),e.drawArrays(e.TRIANGLES,0,6))}renderParticles(e,t,o,i){if(t){t.useProgram(o.particle.program),t.bindBuffer(t.ARRAY_BUFFER,o.indexBuffer),t.enableVertexAttribArray(o.particle.a_index),t.vertexAttribPointer(o.particle.a_index,1,t.FLOAT,!1,0,0),t.activeTexture(t.TEXTURE2),t.bindTexture(t.TEXTURE_2D,o.color.texture),t.uniform1i(o.particle.u_factor,0),t.uniform1i(o.particle.u_particles,1),t.uniform1i(o.particle.u_color_ramp,2),t.uniform1f(o.particle.u_particles_resolution,o.resolution*e.ratio),t.uniform1f(o.particle.u_point,e.ratio);const s=e.getBoundRange();t.uniform4f(o.particle.u_viewport,s[0],s[1],s[2],s[3]),t.uniform2f(o.particle.u_factor_min,i.uvRange[0],i.uvRange[0]),t.uniform2f(o.particle.u_factor_max,i.uvRange[1],i.uvRange[1]),t.drawArrays(t.POINTS,0,o.total)}}updateParticles(e,t,o,i){var l,n;if(t){t.bindFramebuffer(t.FRAMEBUFFER,o.frameBuffer),t.framebufferTexture2D(t.FRAMEBUFFER,t.COLOR_ATTACHMENT0,t.TEXTURE_2D,o.texture1,0),t.viewport(0,0,o.resolution,o.resolution),t.useProgram(o.update.program),t.bindBuffer(t.ARRAY_BUFFER,o.quadBuffer),t.enableVertexAttribArray(o.update.a_pos),t.vertexAttribPointer(o.update.a_pos,2,t.FLOAT,!1,0,0),t.uniform1i(o.update.u_factor,0),t.uniform1i(o.update.u_particles,1);const c=e.getBoundRange();t.uniform4f(o.update.u_viewport,c[0],c[1],c[2],c[3]),t.uniform1f(o.update.u_rand_seed,Math.random()),t.uniform2f(o.update.u_factor_res,(l=o==null?void 0:o.image)==null?void 0:l.width,(n=o==null?void 0:o.image)==null?void 0:n.height),t.uniform2f(o.update.u_factor_min,i.uvRange[0],i.uvRange[0]),t.uniform2f(o.update.u_factor_max,i.uvRange[1],i.uvRange[1]),t.uniform1f(o.update.u_speed_factor,i.speedFactor*e.ratio),t.uniform1f(o.update.u_drop_rate,i.dropRate),t.uniform1f(o.update.u_drop_rate_bump,i.dropRateBump),t.drawArrays(t.TRIANGLES,0,6)}const s=o.texture0;o.texture0=o.texture1,o.texture1=s}resize(e,t){e.resize();const o=new Uint8Array(t.canvas.width*t.canvas.height*4).fill(0,0,t.canvas.width*t.canvas.height*4),i=this.createTexture(t,t.NEAREST,t.NEAREST,t.CLAMP_TO_EDGE,o,t.canvas.width,t.canvas.height),s=this.createTexture(t,t.NEAREST,t.NEAREST,t.CLAMP_TO_EDGE,o,t.canvas.width,t.canvas.height);return{screenTexture:i,backgroundTexture:s}}async loadImg(e){return new Promise(t=>{const o=new Blob([e],{type:e.type}),i=URL.createObjectURL(o),s=new Image;s.crossOrigin="anonymous",s.src=i,s.onload=()=>t(s)})}}class D{}P(D,"vertexSchema",`
|
|
2
2
|
//canvas 坐标系上的坐标 (x, y)
|
|
3
3
|
attribute vec2 a_position; //像素坐标
|
|
4
4
|
attribute vec2 a_texCoord; //纹理坐标
|