@idmwx/idmui-gl3 3.6.9 → 3.7.0
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 +3 -3
- package/dist/index.umd.cjs +1 -1
- package/dist/style.css +1 -1
- package/package.json +1 -1
package/dist/index.js
CHANGED
|
@@ -65,7 +65,7 @@ const T = (t, e) => {
|
|
|
65
65
|
k: "glCacheVersion"
|
|
66
66
|
},
|
|
67
67
|
right: 10,
|
|
68
|
-
rampColorLayers: ["
|
|
68
|
+
rampColorLayers: ["visibility", "precip3h", "temp", "water-temp", "arctic"]
|
|
69
69
|
};
|
|
70
70
|
},
|
|
71
71
|
computed: {
|
|
@@ -150,7 +150,7 @@ const T = (t, e) => {
|
|
|
150
150
|
this.source = t, this.handleConfirm();
|
|
151
151
|
}
|
|
152
152
|
}
|
|
153
|
-
}, Z = (t) => (U("data-v-
|
|
153
|
+
}, Z = (t) => (U("data-v-c4783062"), t = t(), G(), t), dt = { class: "idm-gl-layer" }, pt = { class: "bar-item layer-bars" }, mt = /* @__PURE__ */ Z(() => /* @__PURE__ */ l("span", { class: "iconfont" }, "", -1)), ut = [
|
|
154
154
|
mt
|
|
155
155
|
], yt = { class: "bar-item tool-bars" }, ft = /* @__PURE__ */ Z(() => /* @__PURE__ */ l("span", { class: "iconfont" }, "", -1)), gt = [
|
|
156
156
|
ft
|
|
@@ -285,7 +285,7 @@ function Ft(t, e, a, r, i, o) {
|
|
|
285
285
|
], 4)
|
|
286
286
|
]);
|
|
287
287
|
}
|
|
288
|
-
const Vt = /* @__PURE__ */ T(ht, [["render", Ft], ["__scopeId", "data-v-
|
|
288
|
+
const Vt = /* @__PURE__ */ T(ht, [["render", Ft], ["__scopeId", "data-v-c4783062"]]);
|
|
289
289
|
const Ut = {
|
|
290
290
|
name: "IdmWindBarb",
|
|
291
291
|
props: {
|
package/dist/index.umd.cjs
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
(function(k,v){typeof exports=="object"&&typeof module<"u"?v(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"],v):(k=typeof globalThis<"u"?globalThis:k||self,v(k["idm-gl"]={},k["@idmwx/idmwx-base"],k.Vue,k["@turf/turf"],k["@mapbox/sphericalmercator"],k.moment,k["mapbox-gl"],k["@idm-plugin/geo"],k.axios))})(this,function(k,v,o,Ae,Me,O,G,Ee,Z){"use strict";var ki=Object.defineProperty;var Ei=(k,v,o)=>v in k?ki(k,v,{enumerable:!0,configurable:!0,writable:!0,value:o}):k[v]=o;var z=(k,v,o)=>(Ei(k,typeof v!="symbol"?v+"":v,o),o);function We(t){const e=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(t){for(const a in t)if(a!=="default"){const r=Object.getOwnPropertyDescriptor(t,a);Object.defineProperty(e,a,r.get?r:{enumerable:!0,get:()=>t[a]})}}return e.default=t,Object.freeze(e)}const x=We(Ae),zi="",Pi="",S=(t,e)=>{const a=t.__vccOpts||t;for(const[r,i]of e)a[r]=i;return a},Oe={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:[...v.LayerHelper.WEATHER_LAYERS],other:[...v.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:["wind","current","visibility","precip3h","temp","water-temp","arctic"]}},computed:{computeLayerClass(){return function(t,e){let a="layer";return e.some(r=>r.key===t.key)&&(a="layer active"),(!t.enabled||this.rampColorLayers.includes(t.key)&&this.mapProjection==="globe")&&(a="layer disabled"),a}}},watch:{showLayers:{handler(){this.$nextTick(()=>{var t,e;this.$emit("menu",this.showLayers?!1:this.toggleMenu),this.$emit("toggleVersion",Math.random()),this.right=(((t=document.getElementsByClassName("available-layers-show")[0])==null?void 0:t.clientWidth)||0)+(((e=document.getElementsByClassName("fleet-list-container")[0])==null?void 0:e.clientWidth)||0)+10})}},toggleMenu:{handler(){this.$nextTick(()=>{var t,e;this.showLayers=this.toggleMenu?!1:this.showLayers,this.$emit("toggleVersion",Math.random()),this.right=(((t=document.getElementsByClassName("available-layers-show")[0])==null?void 0:t.clientWidth)||0)+(((e=document.getElementsByClassName("fleet-list-container")[0])==null?void 0:e.clientWidth)||0)+10})}}},mounted(){const t=localStorage.getItem(this.version.k);this.version.v!==t&&(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 a=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=a,this.autoActive&&(this.activeWeatherLayers=[...a]),e=localStorage.getItem(this.otherLayersCache),a=JSON.parse(e||'[{"weight":4,"name":"ECA Zones","key":"eca-zones","enabled":true,"type":"json"}]'),this.otherLayers=a,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(t){if(this.rampColorLayers.includes(t.key)&&this.mapProjection==="globe")return!1;this.weatherLayers.some(e=>e.key===t.key)?(this.weatherLayers=this.weatherLayers.filter(e=>e.key!==t.key),this.activeWeatherLayers=this.activeWeatherLayers.filter(e=>e.key!==t.key)):this.weatherLayers.length<12&&t.enabled&&(["png","jpg"].includes(t.type)&&(this.weatherLayers=this.weatherLayers.filter(e=>e.type==="json"),this.activeWeatherLayers=this.activeWeatherLayers.filter(e=>e.type==="json")),this.weatherLayers.push(t),this.activeWeatherLayers.push(t)),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(t){if(this.rampColorLayers.includes(t.key)&&this.mapProjection==="globe")return!1;if(this.activeWeatherLayers.some(e=>e.key===t.key))this.activeWeatherLayers=this.activeWeatherLayers.filter(e=>e.key!==t.key);else if(t.enabled){this.activeWeatherLayers.push(t);for(const e of this.weatherLayers)t.weight>e.weight&&t.weight&e.weight&&this.activeWeatherLayers.push(e)}this.$emit("weather",this.weatherLayers,this.activeWeatherLayers,this.source)},handleOtherLayerPick(t){this.otherLayers.some(e=>e.key===t.key)?this.otherLayers=this.otherLayers.filter(e=>e.key!==t.key):t.enabled&&this.otherLayers.push(t),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(t){this.source=t,this.handleConfirm()}}},B=t=>(o.pushScopeId("data-v-fc1c05ef"),t=t(),o.popScopeId(),t),je={class:"idm-gl-layer"},Fe={class:"bar-item layer-bars"},Ue=[B(()=>o.createElementVNode("span",{class:"iconfont"},"",-1))],He={class:"bar-item tool-bars"},Ge=[B(()=>o.createElementVNode("span",{class:"iconfont"},"",-1))],Ze=[B(()=>o.createElementVNode("span",{class:"iconfont"},"",-1))],Je=[B(()=>o.createElementVNode("span",{class:"iconfont"},"",-1))],Xe=[B(()=>o.createElementVNode("span",{class:"iconfont"},"",-1))],qe=["onClick"],Ye=B(()=>o.createElementVNode("div",{class:"checkbox"},null,-1)),Qe=[B(()=>o.createElementVNode("i",{class:"iconfont"},"",-1))],Ke={class:"weather-layers"},et={class:"layers-title",style:{display:"flex","align-items":"center","justify-content":"space-between"}},tt={style:{"font-size":"12px"}},at={class:"layers-body"},ot=["onClick"],it=B(()=>o.createElementVNode("div",{class:"checkbox"},null,-1)),rt={class:"other-layers"},st=B(()=>o.createElementVNode("div",{class:"layers-title"},"Other Layers",-1)),nt={class:"layers-body"},lt=["onClick"],ct=B(()=>o.createElementVNode("div",{class:"checkbox"},null,-1)),ht={class:"source-layers"},dt=B(()=>o.createElementVNode("span",{class:"layers-title"},"Forecast Model",-1)),pt={class:"layers-body model-box"};function mt(t,e,a,r,i,s){const l=o.resolveComponent("ElScrollbar");return o.openBlock(),o.createElementBlock("div",je,[o.createElementVNode("div",{class:"menu-bar-box",style:o.normalizeStyle({top:a.top+10+"px",right:i.right+"px"})},[o.createElementVNode("div",Fe,[o.createElementVNode("div",{class:o.normalizeClass(i.showLayers?"menu-icon active":"menu-icon"),onClick:e[0]||(e[0]=(...n)=>s.handleMenuToggle&&s.handleMenuToggle(...n))},Ue,2)])],4),o.createElementVNode("div",{class:"menu-bar-box",style:o.normalizeStyle({top:a.top+160+"px",right:i.right+"px"})},[o.createElementVNode("div",He,[o.createElementVNode("div",{class:o.normalizeClass(i.showMeasure?"menu-icon active":"menu-icon"),onClick:e[1]||(e[1]=(...n)=>s.handleMeasureToggle&&s.handleMeasureToggle(...n))},Ge,2),o.createElementVNode("div",{class:o.normalizeClass(i.showPoint?"menu-icon active":"menu-icon"),onClick:e[2]||(e[2]=(...n)=>s.handlePointToggle&&s.handlePointToggle(...n))},Ze,2),o.createElementVNode("div",{class:o.normalizeClass(i.showCoord?"menu-icon active":"menu-icon"),onClick:e[3]||(e[3]=(...n)=>s.handleCoordToggle&&s.handleCoordToggle(...n))},Je,2),o.createElementVNode("div",{class:o.normalizeClass(i.show3d?"menu-icon active":"menu-icon"),onClick:e[4]||(e[4]=(...n)=>s.handle3DToggle&&s.handle3DToggle(...n))},Xe,2)])],4),o.createElementVNode("div",{class:"active-layers",style:o.normalizeStyle({right:i.right+"px",bottom:"100px"})},[(o.openBlock(!0),o.createElementBlock(o.Fragment,null,o.renderList(i.weatherLayers,n=>(o.openBlock(),o.createElementBlock("div",{key:n.key,class:o.normalizeClass(s.computeLayerClass(n,i.activeWeatherLayers)),onClick:c=>s.handleActiveWeatherLayerPick(n)},[Ye,o.createElementVNode("span",null,o.toDisplayString(n.name),1)],10,qe))),128))],4),o.createElementVNode("div",{class:"available-layers flex-center",style:o.normalizeStyle({top:a.top+"px",right:i.showLayers?"0px":"-240px"})},[o.createElementVNode("div",{class:"side-bar",style:o.normalizeStyle({right:i.showLayers?"0px":"-240px"}),onClick:e[5]||(e[5]=(...n)=>s.handleMenuToggle&&s.handleMenuToggle(...n))},Qe,4),o.createElementVNode("div",{class:o.normalizeClass(["list-box",i.showLayers?"available-layers-show":""])},[o.createVNode(l,{style:{flex:"1"}},{default:o.withCtx(()=>[o.createElementVNode("div",Ke,[o.createElementVNode("div",et,[o.createElementVNode("div",null,[o.createTextVNode(" Weather Layers "),o.createElementVNode("span",tt,"("+o.toDisplayString(i.weatherLayers.length)+"/12)",1)])]),o.createElementVNode("div",at,[(o.openBlock(!0),o.createElementBlock(o.Fragment,null,o.renderList(i.layers.weather,n=>(o.openBlock(),o.createElementBlock(o.Fragment,{key:n.key},[n.hide?o.createCommentVNode("",!0):(o.openBlock(),o.createElementBlock("div",{key:0,class:o.normalizeClass(s.computeLayerClass(n,i.weatherLayers)),onClick:c=>s.handleWeatherLayerPick(n)},[it,o.createElementVNode("span",null,o.toDisplayString(n.name),1)],10,ot))],64))),128))])]),o.createElementVNode("div",rt,[st,o.createElementVNode("div",nt,[(o.openBlock(!0),o.createElementBlock(o.Fragment,null,o.renderList(i.layers.other,n=>(o.openBlock(),o.createElementBlock("div",{key:n.key,class:o.normalizeClass(s.computeLayerClass(n,i.otherLayers)),onClick:c=>s.handleOtherLayerPick(n)},[ct,o.createElementVNode("span",null,o.toDisplayString(n.name),1)],10,lt))),128))])]),o.createElementVNode("div",ht,[dt,o.createElementVNode("div",pt,[o.createElementVNode("span",{class:o.normalizeClass(i.source==="GFS"?"text active":"text"),onClick:e[6]||(e[6]=n=>s.handleSourceToggle("GFS"))},"GFS",2),o.createElementVNode("span",{class:o.normalizeClass(i.source==="CMEMS"?"text active":"text"),onClick:e[7]||(e[7]=n=>s.handleSourceToggle("CMEMS"))},"ECMWF",2)])])]),_:1})],2)],4)])}const yt=S(Oe,[["render",mt],["__scopeId","data-v-fc1c05ef"]]),$i="",ft={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 t;(t=this.wind)!=null&&t.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 t,e;this.right=(((t=document.getElementsByClassName("available-layers-show")[0])==null?void 0:t.clientWidth)||0)+(((e=document.getElementsByClassName("fleet-list-container")[0])==null?void 0:e.clientWidth)||0)+10},immediate:!0},"current.version":{handler(){var t,e,a;this.bottom=(t=this.current)!=null&&t.active?(((e=document.getElementsByClassName("active-layers")[0])==null?void 0:e.clientHeight)||0)+135:(((a=document.getElementsByClassName("active-layers")[0])==null?void 0:a.clientHeight)||0)+105},immediate:!0},weatherLayers:{handler(){var t,e,a;this.bottom=(t=this.current)!=null&&t.active?(((e=document.getElementsByClassName("active-layers")[0])==null?void 0:e.clientHeight)||0)+135:(((a=document.getElementsByClassName("active-layers")[0])==null?void 0:a.clientHeight)||0)+105},immediate:!0}},methods:{handleParticle(){this.$emit("particle",{particle:!this.showParticle,key:"wind",weight:1})},handleRender(){var t,e,a,r;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((t=this.wind)!=null&&t.active&&(n=(e=this.wind)==null?void 0:e.data),(a=this.map)!=null&&a.getSource(this.source))(r=this.map)==null||r.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,p=h<10?`00${h}kts`:h<100?`0${h}kts`:`${h}kts`;this.map.addLayer({id:p,type:"symbol",filter:["all",[">=","spd",h],["<","spd",d]],source:this.source,layout:{"symbol-placement":"point","icon-image":p,"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 t of this.barbs??[]){const e=t<10?`00${t}kts`:t<100?`0${t}kts`:`${t}kts`;this.map.getLayer(e)&&this.map.setLayoutProperty(e,"visibility",this.showFeather?"visible":"none")}},handleClear(){for(const t of this.barbs??[]){const e=t<10?`00${t}kts`:t<100?`0${t}kts`:`${t}kts`;this.map.getLayer(e)&&this.map.removeLayer(e)}this.map.getSource(this.source)&&this.map.removeSource(this.source),this.windBarbLoaded=!1}}},ut={key:0},gt={key:0,class:"iconfont active"},bt={key:1,class:"iconfont"},_t={key:0,class:"iconfont active"},Lt={key:1,class:"iconfont"};function wt(t,e,a,r,i,s){var l;return(l=a.wind)!=null&&l.active?(o.openBlock(),o.createElementBlock("div",ut,[o.createElementVNode("div",{class:"flex-center tool-bars",style:o.normalizeStyle([{position:"absolute"},{right:i.right+"px",bottom:i.bottom+"px"}])},[a.mapProjection==="mercator"?(o.openBlock(),o.createElementBlock("div",{key:0,class:"flex-start",onClick:e[0]||(e[0]=(...n)=>s.handleParticle&&s.handleParticle(...n))},[a.showParticle?(o.openBlock(),o.createElementBlock("i",gt,"")):(o.openBlock(),o.createElementBlock("i",bt,"")),o.createElementVNode("span",{class:o.normalizeClass(a.showParticle?"active":"")},"Wind Particles",2)])):o.createCommentVNode("",!0),a.showParticle?(o.openBlock(),o.createElementBlock("div",{key:1,class:"flex-start",style:{"margin-left":"16px"},onClick:e[1]||(e[1]=n=>i.showFeather=!i.showFeather)},[i.showFeather?(o.openBlock(),o.createElementBlock("i",_t,"")):(o.openBlock(),o.createElementBlock("i",Lt,"")),o.createElementVNode("span",{class:o.normalizeClass(i.showFeather?"active":"")},"Wind Feather",2)])):o.createCommentVNode("",!0)],4)])):o.createCommentVNode("",!0)}const vt=S(ft,[["render",wt],["__scopeId","data-v-f409772c"]]);class we{constructor(e){z(this,"map");z(this,"mercator");z(this,"rampColorLayer");z(this,"rampColorSource");z(this,"particleLayer");z(this,"particleSource");z(this,"rampColorCanvas");z(this,"particleCanvas");z(this,"ratio");this.map=e,this.mercator=new Me,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,a=0){return e>180?this.convertNLng(e-360,a+1):e<-180?this.convertNLng(e+360,a+1):[e,a]}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(),a=this.map.getZoom()+1,r=[e._ne.lng,e._ne.lat],i=[e._sw.lng,e._sw.lat],[s,l]=this.convertNLng(r[0]),[n,c]=this.convertNLng(i[0]),[h,d]=this.mercator.px([s,r[1]],a),[p,u]=this.mercator.px([n,i[1]],a),m=Math.round(this.mercator.size*Math.pow(2,a)*(l+c));return[p,u,h+m,d]}getBoundRange(){const e=this.map.getZoom()+1,a=this.mercator.size*Math.pow(2,e),r=this.getBoundPixel();return[r[0]/a,r[2]/a,r[3]/a,r[1]/a]}getWorldCopy(e,a){const r=2**a,[i,s,l,n]=e.map(d=>~~(d/(r*256))),c=[];for(let d=n;d<=s;d++)for(let p=i;p<=l;p++)c.push([p,d]);return c.map(d=>{const p=2**a*256;return[d[0]*p,d[1]*p,p]})}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 a=this.map.getLayoutProperty(this.rampColorLayer,"visibility"),r=e?"visible":"none";a!==r&&this.map.setLayoutProperty(this.rampColorLayer,"visibility",r)}toggleParticle(e){const a=this.map.getLayoutProperty(this.particleLayer,"visibility"),r=e?"visible":"none";a!==r&&this.map.setLayoutProperty(this.particleLayer,"visibility",r)}}class J{createShader(e,a,r){const i=e.createShader(a);if(i&&(e.shaderSource(i,r),e.compileShader(i),!e.getShaderParameter(i,e.COMPILE_STATUS)))throw new Error(e.getShaderInfoLog(i)||"error happened while create shader...");return i}createTexture(e,a,r,i,s,l,n){const c=e.createTexture();return e.bindTexture(e.TEXTURE_2D,c),e.texParameteri(e.TEXTURE_2D,e.TEXTURE_MIN_FILTER,a),e.texParameteri(e.TEXTURE_2D,e.TEXTURE_MAG_FILTER,r),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,a,r){if(e){const i=e.createBuffer();return a==="array"?(e.bindBuffer(e.ARRAY_BUFFER,i),r&&e.bufferData(e.ARRAY_BUFFER,r,e.STATIC_DRAW)):a==="element"&&(e.bindBuffer(e.ELEMENT_ARRAY_BUFFER,i),r&&e.bufferData(e.ELEMENT_ARRAY_BUFFER,r,e.STATIC_DRAW)),i}return null}createProgram(e,a,r){const i=e.createProgram(),s=this.createShader(e,e.VERTEX_SHADER,a),l=this.createShader(e,e.FRAGMENT_SHADER,r);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,a,r){const i=this.createProgram(e,a,r);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,a,r=!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 a.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,r?new Uint8Array(n.getImageData(0,0,256,1).data):l,i,s)}}}setupParticle(e,a=1e3){const r=Math.ceil(Math.sqrt(a)),i=r*r,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,r,r),n=this.createTexture(e,e.NEAREST,e.NEAREST,e.CLAMP_TO_EDGE,s,r,r),c=new Float32Array(i);for(let d=0;d<i;d++)c[d]=d;const h=this.createDataBuffer(e,"array",c);return{resolution:r,total:i,texture0:l,texture1:n,indexBuffer:h}}bind(e,a,r){const i=this.createProgram(e,a,r);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,a,r,i,s,l){const n=this.createProgramWrapper(e,a,r),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])),p=e.createFramebuffer();return{particle:n,screen:c,update:h,quadBuffer:d,frameBuffer:p}}draw(e,a,r,i,s,l,n){var c,h;if(a&&r){e.resize(),a==null||a.viewport(0,0,(c=a==null?void 0:a.canvas)==null?void 0:c.width,(h=a==null?void 0:a.canvas)==null?void 0:h.height),a.clearColor(0,0,0,0),a.clear(a.COLOR_BUFFER_BIT|a.DEPTH_BUFFER_BIT);try{const d=a.getUniformLocation(r,"u_resolution"),p=a.getUniformLocation(r,"u_image"),u=a.getUniformLocation(r,"u_color");if(a.useProgram(r),a.uniform2f(d,a.canvas.width*e.ratio,a.canvas.height*e.ratio),a.activeTexture(a.TEXTURE0),a.bindTexture(a.TEXTURE_2D,i),a.uniform1i(p,0),a.activeTexture(a.TEXTURE1),a.bindTexture(a.TEXTURE_2D,s),a.uniform1i(u,1),n!=null&&n.uvRange&&(n!=null&&n.sRange)){const y=a.getUniformLocation(r,"u_range_u_v"),_=a.getUniformLocation(r,"u_range_s");a.uniform2f(y,n.uvRange[0],n.uvRange[1]),a.uniform2f(_,n.sRange[0],n.sRange[1])}const m=e.getBoundPixel(),g=e.map.getZoom()+1,f=e.getWorldCopy(m,g);for(const y of f){const _=(y[0]-m[0])*e.ratio,b=(y[1]-m[3])*e.ratio,w=y[2]*e.ratio,[C,L,P,N]=[_,w+_,b,w+b],I=new Float32Array([C,P,L,P,C,N,C,N,L,P,L,N]);a.bindBuffer(a.ARRAY_BUFFER,l),a.bufferData(a.ARRAY_BUFFER,I,a.STATIC_DRAW),a.drawArrays(a.TRIANGLES,0,6)}}catch(d){console.log(`render failed...${d}`)}}}drawParticle(e,a,r,i,s){var l,n;a&&(a==null||a.viewport(0,0,(l=a==null?void 0:a.canvas)==null?void 0:l.width,(n=a==null?void 0:a.canvas)==null?void 0:n.height),a.disable(a.DEPTH_TEST),a.disable(a.STENCIL_TEST),a.activeTexture(a.TEXTURE0),a.bindTexture(a.TEXTURE_2D,r),a.activeTexture(a.TEXTURE1),a.bindTexture(a.TEXTURE_2D,i.texture0),this.renderScreen(e,a,i,s),this.updateParticles(e,a,i,s))}renderScreen(e,a,r,i){a.bindFramebuffer(a.FRAMEBUFFER,r.frameBuffer),a.framebufferTexture2D(a.FRAMEBUFFER,a.COLOR_ATTACHMENT0,a.TEXTURE_2D,r.screenTexture,0),a.viewport(0,0,a.canvas.width,a.canvas.height),this.renderScreenTexture(a,r.backgroundTexture,r.screen,r.quadBuffer,.95),this.renderParticles(e,a,r,i),a.bindFramebuffer(a.FRAMEBUFFER,null),this.renderScreenTexture(a,r.screenTexture,r.screen,r.quadBuffer,1);const s=r.backgroundTexture;r.backgroundTexture=r.screenTexture,r.screenTexture=s}renderScreenTexture(e,a,r,i,s){e&&(e.useProgram(r.program),e.bindBuffer(e.ARRAY_BUFFER,i),e.enableVertexAttribArray(r.a_pos),e.vertexAttribPointer(r.a_pos,2,e.FLOAT,!1,0,0),e.activeTexture(e.TEXTURE2),e.bindTexture(e.TEXTURE_2D,a),e.uniform1i(r.u_screen,2),e.uniform1f(r.u_opacity,s),e.drawArrays(e.TRIANGLES,0,6))}renderParticles(e,a,r,i){if(a){a.useProgram(r.particle.program),a.bindBuffer(a.ARRAY_BUFFER,r.indexBuffer),a.enableVertexAttribArray(r.particle.a_index),a.vertexAttribPointer(r.particle.a_index,1,a.FLOAT,!1,0,0),a.activeTexture(a.TEXTURE2),a.bindTexture(a.TEXTURE_2D,r.color.texture),a.uniform1i(r.particle.u_factor,0),a.uniform1i(r.particle.u_particles,1),a.uniform1i(r.particle.u_color_ramp,2),a.uniform1f(r.particle.u_particles_resolution,r.resolution*e.ratio),a.uniform1f(r.particle.u_point,e.ratio);const s=e.getBoundRange();a.uniform4f(r.particle.u_viewport,s[0],s[1],s[2],s[3]),a.uniform2f(r.particle.u_factor_min,i.uvRange[0],i.uvRange[0]),a.uniform2f(r.particle.u_factor_max,i.uvRange[1],i.uvRange[1]),a.drawArrays(a.POINTS,0,r.total)}}updateParticles(e,a,r,i){var l,n;if(a){a.bindFramebuffer(a.FRAMEBUFFER,r.frameBuffer),a.framebufferTexture2D(a.FRAMEBUFFER,a.COLOR_ATTACHMENT0,a.TEXTURE_2D,r.texture1,0),a.viewport(0,0,r.resolution,r.resolution),a.useProgram(r.update.program),a.bindBuffer(a.ARRAY_BUFFER,r.quadBuffer),a.enableVertexAttribArray(r.update.a_pos),a.vertexAttribPointer(r.update.a_pos,2,a.FLOAT,!1,0,0),a.uniform1i(r.update.u_factor,0),a.uniform1i(r.update.u_particles,1);const c=e.getBoundRange();a.uniform4f(r.update.u_viewport,c[0],c[1],c[2],c[3]),a.uniform1f(r.update.u_rand_seed,Math.random()),a.uniform2f(r.update.u_factor_res,(l=r==null?void 0:r.image)==null?void 0:l.width,(n=r==null?void 0:r.image)==null?void 0:n.height),a.uniform2f(r.update.u_factor_min,i.uvRange[0],i.uvRange[0]),a.uniform2f(r.update.u_factor_max,i.uvRange[1],i.uvRange[1]),a.uniform1f(r.update.u_speed_factor,i.speedFactor*e.ratio),a.uniform1f(r.update.u_drop_rate,i.dropRate),a.uniform1f(r.update.u_drop_rate_bump,i.dropRateBump),a.drawArrays(a.TRIANGLES,0,6)}const s=r.texture0;r.texture0=r.texture1,r.texture1=s}resize(e,a){e.resize();const r=new Uint8Array(a.canvas.width*a.canvas.height*4).fill(0,0,a.canvas.width*a.canvas.height*4),i=this.createTexture(a,a.NEAREST,a.NEAREST,a.CLAMP_TO_EDGE,r,a.canvas.width,a.canvas.height),s=this.createTexture(a,a.NEAREST,a.NEAREST,a.CLAMP_TO_EDGE,r,a.canvas.width,a.canvas.height);return{screenTexture:i,backgroundTexture:s}}async loadImg(e){return new Promise(a=>{const r=new Blob([e],{type:e.type}),i=URL.createObjectURL(r),s=new Image;s.crossOrigin="anonymous",s.src=i,s.onload=()=>a(s)})}}class T{}z(T,"vertexSchema",`
|
|
1
|
+
(function(k,v){typeof exports=="object"&&typeof module<"u"?v(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"],v):(k=typeof globalThis<"u"?globalThis:k||self,v(k["idm-gl"]={},k["@idmwx/idmwx-base"],k.Vue,k["@turf/turf"],k["@mapbox/sphericalmercator"],k.moment,k["mapbox-gl"],k["@idm-plugin/geo"],k.axios))})(this,function(k,v,o,Ae,Me,O,G,Ee,Z){"use strict";var ki=Object.defineProperty;var Ei=(k,v,o)=>v in k?ki(k,v,{enumerable:!0,configurable:!0,writable:!0,value:o}):k[v]=o;var z=(k,v,o)=>(Ei(k,typeof v!="symbol"?v+"":v,o),o);function We(t){const e=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(t){for(const a in t)if(a!=="default"){const r=Object.getOwnPropertyDescriptor(t,a);Object.defineProperty(e,a,r.get?r:{enumerable:!0,get:()=>t[a]})}}return e.default=t,Object.freeze(e)}const x=We(Ae),zi="",Pi="",S=(t,e)=>{const a=t.__vccOpts||t;for(const[r,i]of e)a[r]=i;return a},Oe={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:[...v.LayerHelper.WEATHER_LAYERS],other:[...v.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(t,e){let a="layer";return e.some(r=>r.key===t.key)&&(a="layer active"),(!t.enabled||this.rampColorLayers.includes(t.key)&&this.mapProjection==="globe")&&(a="layer disabled"),a}}},watch:{showLayers:{handler(){this.$nextTick(()=>{var t,e;this.$emit("menu",this.showLayers?!1:this.toggleMenu),this.$emit("toggleVersion",Math.random()),this.right=(((t=document.getElementsByClassName("available-layers-show")[0])==null?void 0:t.clientWidth)||0)+(((e=document.getElementsByClassName("fleet-list-container")[0])==null?void 0:e.clientWidth)||0)+10})}},toggleMenu:{handler(){this.$nextTick(()=>{var t,e;this.showLayers=this.toggleMenu?!1:this.showLayers,this.$emit("toggleVersion",Math.random()),this.right=(((t=document.getElementsByClassName("available-layers-show")[0])==null?void 0:t.clientWidth)||0)+(((e=document.getElementsByClassName("fleet-list-container")[0])==null?void 0:e.clientWidth)||0)+10})}}},mounted(){const t=localStorage.getItem(this.version.k);this.version.v!==t&&(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 a=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=a,this.autoActive&&(this.activeWeatherLayers=[...a]),e=localStorage.getItem(this.otherLayersCache),a=JSON.parse(e||'[{"weight":4,"name":"ECA Zones","key":"eca-zones","enabled":true,"type":"json"}]'),this.otherLayers=a,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(t){if(this.rampColorLayers.includes(t.key)&&this.mapProjection==="globe")return!1;this.weatherLayers.some(e=>e.key===t.key)?(this.weatherLayers=this.weatherLayers.filter(e=>e.key!==t.key),this.activeWeatherLayers=this.activeWeatherLayers.filter(e=>e.key!==t.key)):this.weatherLayers.length<12&&t.enabled&&(["png","jpg"].includes(t.type)&&(this.weatherLayers=this.weatherLayers.filter(e=>e.type==="json"),this.activeWeatherLayers=this.activeWeatherLayers.filter(e=>e.type==="json")),this.weatherLayers.push(t),this.activeWeatherLayers.push(t)),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(t){if(this.rampColorLayers.includes(t.key)&&this.mapProjection==="globe")return!1;if(this.activeWeatherLayers.some(e=>e.key===t.key))this.activeWeatherLayers=this.activeWeatherLayers.filter(e=>e.key!==t.key);else if(t.enabled){this.activeWeatherLayers.push(t);for(const e of this.weatherLayers)t.weight>e.weight&&t.weight&e.weight&&this.activeWeatherLayers.push(e)}this.$emit("weather",this.weatherLayers,this.activeWeatherLayers,this.source)},handleOtherLayerPick(t){this.otherLayers.some(e=>e.key===t.key)?this.otherLayers=this.otherLayers.filter(e=>e.key!==t.key):t.enabled&&this.otherLayers.push(t),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(t){this.source=t,this.handleConfirm()}}},B=t=>(o.pushScopeId("data-v-c4783062"),t=t(),o.popScopeId(),t),je={class:"idm-gl-layer"},Fe={class:"bar-item layer-bars"},Ue=[B(()=>o.createElementVNode("span",{class:"iconfont"},"",-1))],He={class:"bar-item tool-bars"},Ge=[B(()=>o.createElementVNode("span",{class:"iconfont"},"",-1))],Ze=[B(()=>o.createElementVNode("span",{class:"iconfont"},"",-1))],Je=[B(()=>o.createElementVNode("span",{class:"iconfont"},"",-1))],Xe=[B(()=>o.createElementVNode("span",{class:"iconfont"},"",-1))],qe=["onClick"],Ye=B(()=>o.createElementVNode("div",{class:"checkbox"},null,-1)),Qe=[B(()=>o.createElementVNode("i",{class:"iconfont"},"",-1))],Ke={class:"weather-layers"},et={class:"layers-title",style:{display:"flex","align-items":"center","justify-content":"space-between"}},tt={style:{"font-size":"12px"}},at={class:"layers-body"},ot=["onClick"],it=B(()=>o.createElementVNode("div",{class:"checkbox"},null,-1)),rt={class:"other-layers"},st=B(()=>o.createElementVNode("div",{class:"layers-title"},"Other Layers",-1)),nt={class:"layers-body"},lt=["onClick"],ct=B(()=>o.createElementVNode("div",{class:"checkbox"},null,-1)),ht={class:"source-layers"},dt=B(()=>o.createElementVNode("span",{class:"layers-title"},"Forecast Model",-1)),pt={class:"layers-body model-box"};function mt(t,e,a,r,i,s){const l=o.resolveComponent("ElScrollbar");return o.openBlock(),o.createElementBlock("div",je,[o.createElementVNode("div",{class:"menu-bar-box",style:o.normalizeStyle({top:a.top+10+"px",right:i.right+"px"})},[o.createElementVNode("div",Fe,[o.createElementVNode("div",{class:o.normalizeClass(i.showLayers?"menu-icon active":"menu-icon"),onClick:e[0]||(e[0]=(...n)=>s.handleMenuToggle&&s.handleMenuToggle(...n))},Ue,2)])],4),o.createElementVNode("div",{class:"menu-bar-box",style:o.normalizeStyle({top:a.top+160+"px",right:i.right+"px"})},[o.createElementVNode("div",He,[o.createElementVNode("div",{class:o.normalizeClass(i.showMeasure?"menu-icon active":"menu-icon"),onClick:e[1]||(e[1]=(...n)=>s.handleMeasureToggle&&s.handleMeasureToggle(...n))},Ge,2),o.createElementVNode("div",{class:o.normalizeClass(i.showPoint?"menu-icon active":"menu-icon"),onClick:e[2]||(e[2]=(...n)=>s.handlePointToggle&&s.handlePointToggle(...n))},Ze,2),o.createElementVNode("div",{class:o.normalizeClass(i.showCoord?"menu-icon active":"menu-icon"),onClick:e[3]||(e[3]=(...n)=>s.handleCoordToggle&&s.handleCoordToggle(...n))},Je,2),o.createElementVNode("div",{class:o.normalizeClass(i.show3d?"menu-icon active":"menu-icon"),onClick:e[4]||(e[4]=(...n)=>s.handle3DToggle&&s.handle3DToggle(...n))},Xe,2)])],4),o.createElementVNode("div",{class:"active-layers",style:o.normalizeStyle({right:i.right+"px",bottom:"100px"})},[(o.openBlock(!0),o.createElementBlock(o.Fragment,null,o.renderList(i.weatherLayers,n=>(o.openBlock(),o.createElementBlock("div",{key:n.key,class:o.normalizeClass(s.computeLayerClass(n,i.activeWeatherLayers)),onClick:c=>s.handleActiveWeatherLayerPick(n)},[Ye,o.createElementVNode("span",null,o.toDisplayString(n.name),1)],10,qe))),128))],4),o.createElementVNode("div",{class:"available-layers flex-center",style:o.normalizeStyle({top:a.top+"px",right:i.showLayers?"0px":"-240px"})},[o.createElementVNode("div",{class:"side-bar",style:o.normalizeStyle({right:i.showLayers?"0px":"-240px"}),onClick:e[5]||(e[5]=(...n)=>s.handleMenuToggle&&s.handleMenuToggle(...n))},Qe,4),o.createElementVNode("div",{class:o.normalizeClass(["list-box",i.showLayers?"available-layers-show":""])},[o.createVNode(l,{style:{flex:"1"}},{default:o.withCtx(()=>[o.createElementVNode("div",Ke,[o.createElementVNode("div",et,[o.createElementVNode("div",null,[o.createTextVNode(" Weather Layers "),o.createElementVNode("span",tt,"("+o.toDisplayString(i.weatherLayers.length)+"/12)",1)])]),o.createElementVNode("div",at,[(o.openBlock(!0),o.createElementBlock(o.Fragment,null,o.renderList(i.layers.weather,n=>(o.openBlock(),o.createElementBlock(o.Fragment,{key:n.key},[n.hide?o.createCommentVNode("",!0):(o.openBlock(),o.createElementBlock("div",{key:0,class:o.normalizeClass(s.computeLayerClass(n,i.weatherLayers)),onClick:c=>s.handleWeatherLayerPick(n)},[it,o.createElementVNode("span",null,o.toDisplayString(n.name),1)],10,ot))],64))),128))])]),o.createElementVNode("div",rt,[st,o.createElementVNode("div",nt,[(o.openBlock(!0),o.createElementBlock(o.Fragment,null,o.renderList(i.layers.other,n=>(o.openBlock(),o.createElementBlock("div",{key:n.key,class:o.normalizeClass(s.computeLayerClass(n,i.otherLayers)),onClick:c=>s.handleOtherLayerPick(n)},[ct,o.createElementVNode("span",null,o.toDisplayString(n.name),1)],10,lt))),128))])]),o.createElementVNode("div",ht,[dt,o.createElementVNode("div",pt,[o.createElementVNode("span",{class:o.normalizeClass(i.source==="GFS"?"text active":"text"),onClick:e[6]||(e[6]=n=>s.handleSourceToggle("GFS"))},"GFS",2),o.createElementVNode("span",{class:o.normalizeClass(i.source==="CMEMS"?"text active":"text"),onClick:e[7]||(e[7]=n=>s.handleSourceToggle("CMEMS"))},"ECMWF",2)])])]),_:1})],2)],4)])}const yt=S(Oe,[["render",mt],["__scopeId","data-v-c4783062"]]),$i="",ft={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 t;(t=this.wind)!=null&&t.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 t,e;this.right=(((t=document.getElementsByClassName("available-layers-show")[0])==null?void 0:t.clientWidth)||0)+(((e=document.getElementsByClassName("fleet-list-container")[0])==null?void 0:e.clientWidth)||0)+10},immediate:!0},"current.version":{handler(){var t,e,a;this.bottom=(t=this.current)!=null&&t.active?(((e=document.getElementsByClassName("active-layers")[0])==null?void 0:e.clientHeight)||0)+135:(((a=document.getElementsByClassName("active-layers")[0])==null?void 0:a.clientHeight)||0)+105},immediate:!0},weatherLayers:{handler(){var t,e,a;this.bottom=(t=this.current)!=null&&t.active?(((e=document.getElementsByClassName("active-layers")[0])==null?void 0:e.clientHeight)||0)+135:(((a=document.getElementsByClassName("active-layers")[0])==null?void 0:a.clientHeight)||0)+105},immediate:!0}},methods:{handleParticle(){this.$emit("particle",{particle:!this.showParticle,key:"wind",weight:1})},handleRender(){var t,e,a,r;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((t=this.wind)!=null&&t.active&&(n=(e=this.wind)==null?void 0:e.data),(a=this.map)!=null&&a.getSource(this.source))(r=this.map)==null||r.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,p=h<10?`00${h}kts`:h<100?`0${h}kts`:`${h}kts`;this.map.addLayer({id:p,type:"symbol",filter:["all",[">=","spd",h],["<","spd",d]],source:this.source,layout:{"symbol-placement":"point","icon-image":p,"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 t of this.barbs??[]){const e=t<10?`00${t}kts`:t<100?`0${t}kts`:`${t}kts`;this.map.getLayer(e)&&this.map.setLayoutProperty(e,"visibility",this.showFeather?"visible":"none")}},handleClear(){for(const t of this.barbs??[]){const e=t<10?`00${t}kts`:t<100?`0${t}kts`:`${t}kts`;this.map.getLayer(e)&&this.map.removeLayer(e)}this.map.getSource(this.source)&&this.map.removeSource(this.source),this.windBarbLoaded=!1}}},ut={key:0},gt={key:0,class:"iconfont active"},bt={key:1,class:"iconfont"},_t={key:0,class:"iconfont active"},Lt={key:1,class:"iconfont"};function wt(t,e,a,r,i,s){var l;return(l=a.wind)!=null&&l.active?(o.openBlock(),o.createElementBlock("div",ut,[o.createElementVNode("div",{class:"flex-center tool-bars",style:o.normalizeStyle([{position:"absolute"},{right:i.right+"px",bottom:i.bottom+"px"}])},[a.mapProjection==="mercator"?(o.openBlock(),o.createElementBlock("div",{key:0,class:"flex-start",onClick:e[0]||(e[0]=(...n)=>s.handleParticle&&s.handleParticle(...n))},[a.showParticle?(o.openBlock(),o.createElementBlock("i",gt,"")):(o.openBlock(),o.createElementBlock("i",bt,"")),o.createElementVNode("span",{class:o.normalizeClass(a.showParticle?"active":"")},"Wind Particles",2)])):o.createCommentVNode("",!0),a.showParticle?(o.openBlock(),o.createElementBlock("div",{key:1,class:"flex-start",style:{"margin-left":"16px"},onClick:e[1]||(e[1]=n=>i.showFeather=!i.showFeather)},[i.showFeather?(o.openBlock(),o.createElementBlock("i",_t,"")):(o.openBlock(),o.createElementBlock("i",Lt,"")),o.createElementVNode("span",{class:o.normalizeClass(i.showFeather?"active":"")},"Wind Feather",2)])):o.createCommentVNode("",!0)],4)])):o.createCommentVNode("",!0)}const vt=S(ft,[["render",wt],["__scopeId","data-v-f409772c"]]);class we{constructor(e){z(this,"map");z(this,"mercator");z(this,"rampColorLayer");z(this,"rampColorSource");z(this,"particleLayer");z(this,"particleSource");z(this,"rampColorCanvas");z(this,"particleCanvas");z(this,"ratio");this.map=e,this.mercator=new Me,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,a=0){return e>180?this.convertNLng(e-360,a+1):e<-180?this.convertNLng(e+360,a+1):[e,a]}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(),a=this.map.getZoom()+1,r=[e._ne.lng,e._ne.lat],i=[e._sw.lng,e._sw.lat],[s,l]=this.convertNLng(r[0]),[n,c]=this.convertNLng(i[0]),[h,d]=this.mercator.px([s,r[1]],a),[p,u]=this.mercator.px([n,i[1]],a),m=Math.round(this.mercator.size*Math.pow(2,a)*(l+c));return[p,u,h+m,d]}getBoundRange(){const e=this.map.getZoom()+1,a=this.mercator.size*Math.pow(2,e),r=this.getBoundPixel();return[r[0]/a,r[2]/a,r[3]/a,r[1]/a]}getWorldCopy(e,a){const r=2**a,[i,s,l,n]=e.map(d=>~~(d/(r*256))),c=[];for(let d=n;d<=s;d++)for(let p=i;p<=l;p++)c.push([p,d]);return c.map(d=>{const p=2**a*256;return[d[0]*p,d[1]*p,p]})}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 a=this.map.getLayoutProperty(this.rampColorLayer,"visibility"),r=e?"visible":"none";a!==r&&this.map.setLayoutProperty(this.rampColorLayer,"visibility",r)}toggleParticle(e){const a=this.map.getLayoutProperty(this.particleLayer,"visibility"),r=e?"visible":"none";a!==r&&this.map.setLayoutProperty(this.particleLayer,"visibility",r)}}class J{createShader(e,a,r){const i=e.createShader(a);if(i&&(e.shaderSource(i,r),e.compileShader(i),!e.getShaderParameter(i,e.COMPILE_STATUS)))throw new Error(e.getShaderInfoLog(i)||"error happened while create shader...");return i}createTexture(e,a,r,i,s,l,n){const c=e.createTexture();return e.bindTexture(e.TEXTURE_2D,c),e.texParameteri(e.TEXTURE_2D,e.TEXTURE_MIN_FILTER,a),e.texParameteri(e.TEXTURE_2D,e.TEXTURE_MAG_FILTER,r),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,a,r){if(e){const i=e.createBuffer();return a==="array"?(e.bindBuffer(e.ARRAY_BUFFER,i),r&&e.bufferData(e.ARRAY_BUFFER,r,e.STATIC_DRAW)):a==="element"&&(e.bindBuffer(e.ELEMENT_ARRAY_BUFFER,i),r&&e.bufferData(e.ELEMENT_ARRAY_BUFFER,r,e.STATIC_DRAW)),i}return null}createProgram(e,a,r){const i=e.createProgram(),s=this.createShader(e,e.VERTEX_SHADER,a),l=this.createShader(e,e.FRAGMENT_SHADER,r);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,a,r){const i=this.createProgram(e,a,r);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,a,r=!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 a.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,r?new Uint8Array(n.getImageData(0,0,256,1).data):l,i,s)}}}setupParticle(e,a=1e3){const r=Math.ceil(Math.sqrt(a)),i=r*r,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,r,r),n=this.createTexture(e,e.NEAREST,e.NEAREST,e.CLAMP_TO_EDGE,s,r,r),c=new Float32Array(i);for(let d=0;d<i;d++)c[d]=d;const h=this.createDataBuffer(e,"array",c);return{resolution:r,total:i,texture0:l,texture1:n,indexBuffer:h}}bind(e,a,r){const i=this.createProgram(e,a,r);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,a,r,i,s,l){const n=this.createProgramWrapper(e,a,r),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])),p=e.createFramebuffer();return{particle:n,screen:c,update:h,quadBuffer:d,frameBuffer:p}}draw(e,a,r,i,s,l,n){var c,h;if(a&&r){e.resize(),a==null||a.viewport(0,0,(c=a==null?void 0:a.canvas)==null?void 0:c.width,(h=a==null?void 0:a.canvas)==null?void 0:h.height),a.clearColor(0,0,0,0),a.clear(a.COLOR_BUFFER_BIT|a.DEPTH_BUFFER_BIT);try{const d=a.getUniformLocation(r,"u_resolution"),p=a.getUniformLocation(r,"u_image"),u=a.getUniformLocation(r,"u_color");if(a.useProgram(r),a.uniform2f(d,a.canvas.width*e.ratio,a.canvas.height*e.ratio),a.activeTexture(a.TEXTURE0),a.bindTexture(a.TEXTURE_2D,i),a.uniform1i(p,0),a.activeTexture(a.TEXTURE1),a.bindTexture(a.TEXTURE_2D,s),a.uniform1i(u,1),n!=null&&n.uvRange&&(n!=null&&n.sRange)){const y=a.getUniformLocation(r,"u_range_u_v"),_=a.getUniformLocation(r,"u_range_s");a.uniform2f(y,n.uvRange[0],n.uvRange[1]),a.uniform2f(_,n.sRange[0],n.sRange[1])}const m=e.getBoundPixel(),g=e.map.getZoom()+1,f=e.getWorldCopy(m,g);for(const y of f){const _=(y[0]-m[0])*e.ratio,b=(y[1]-m[3])*e.ratio,w=y[2]*e.ratio,[C,L,P,N]=[_,w+_,b,w+b],I=new Float32Array([C,P,L,P,C,N,C,N,L,P,L,N]);a.bindBuffer(a.ARRAY_BUFFER,l),a.bufferData(a.ARRAY_BUFFER,I,a.STATIC_DRAW),a.drawArrays(a.TRIANGLES,0,6)}}catch(d){console.log(`render failed...${d}`)}}}drawParticle(e,a,r,i,s){var l,n;a&&(a==null||a.viewport(0,0,(l=a==null?void 0:a.canvas)==null?void 0:l.width,(n=a==null?void 0:a.canvas)==null?void 0:n.height),a.disable(a.DEPTH_TEST),a.disable(a.STENCIL_TEST),a.activeTexture(a.TEXTURE0),a.bindTexture(a.TEXTURE_2D,r),a.activeTexture(a.TEXTURE1),a.bindTexture(a.TEXTURE_2D,i.texture0),this.renderScreen(e,a,i,s),this.updateParticles(e,a,i,s))}renderScreen(e,a,r,i){a.bindFramebuffer(a.FRAMEBUFFER,r.frameBuffer),a.framebufferTexture2D(a.FRAMEBUFFER,a.COLOR_ATTACHMENT0,a.TEXTURE_2D,r.screenTexture,0),a.viewport(0,0,a.canvas.width,a.canvas.height),this.renderScreenTexture(a,r.backgroundTexture,r.screen,r.quadBuffer,.95),this.renderParticles(e,a,r,i),a.bindFramebuffer(a.FRAMEBUFFER,null),this.renderScreenTexture(a,r.screenTexture,r.screen,r.quadBuffer,1);const s=r.backgroundTexture;r.backgroundTexture=r.screenTexture,r.screenTexture=s}renderScreenTexture(e,a,r,i,s){e&&(e.useProgram(r.program),e.bindBuffer(e.ARRAY_BUFFER,i),e.enableVertexAttribArray(r.a_pos),e.vertexAttribPointer(r.a_pos,2,e.FLOAT,!1,0,0),e.activeTexture(e.TEXTURE2),e.bindTexture(e.TEXTURE_2D,a),e.uniform1i(r.u_screen,2),e.uniform1f(r.u_opacity,s),e.drawArrays(e.TRIANGLES,0,6))}renderParticles(e,a,r,i){if(a){a.useProgram(r.particle.program),a.bindBuffer(a.ARRAY_BUFFER,r.indexBuffer),a.enableVertexAttribArray(r.particle.a_index),a.vertexAttribPointer(r.particle.a_index,1,a.FLOAT,!1,0,0),a.activeTexture(a.TEXTURE2),a.bindTexture(a.TEXTURE_2D,r.color.texture),a.uniform1i(r.particle.u_factor,0),a.uniform1i(r.particle.u_particles,1),a.uniform1i(r.particle.u_color_ramp,2),a.uniform1f(r.particle.u_particles_resolution,r.resolution*e.ratio),a.uniform1f(r.particle.u_point,e.ratio);const s=e.getBoundRange();a.uniform4f(r.particle.u_viewport,s[0],s[1],s[2],s[3]),a.uniform2f(r.particle.u_factor_min,i.uvRange[0],i.uvRange[0]),a.uniform2f(r.particle.u_factor_max,i.uvRange[1],i.uvRange[1]),a.drawArrays(a.POINTS,0,r.total)}}updateParticles(e,a,r,i){var l,n;if(a){a.bindFramebuffer(a.FRAMEBUFFER,r.frameBuffer),a.framebufferTexture2D(a.FRAMEBUFFER,a.COLOR_ATTACHMENT0,a.TEXTURE_2D,r.texture1,0),a.viewport(0,0,r.resolution,r.resolution),a.useProgram(r.update.program),a.bindBuffer(a.ARRAY_BUFFER,r.quadBuffer),a.enableVertexAttribArray(r.update.a_pos),a.vertexAttribPointer(r.update.a_pos,2,a.FLOAT,!1,0,0),a.uniform1i(r.update.u_factor,0),a.uniform1i(r.update.u_particles,1);const c=e.getBoundRange();a.uniform4f(r.update.u_viewport,c[0],c[1],c[2],c[3]),a.uniform1f(r.update.u_rand_seed,Math.random()),a.uniform2f(r.update.u_factor_res,(l=r==null?void 0:r.image)==null?void 0:l.width,(n=r==null?void 0:r.image)==null?void 0:n.height),a.uniform2f(r.update.u_factor_min,i.uvRange[0],i.uvRange[0]),a.uniform2f(r.update.u_factor_max,i.uvRange[1],i.uvRange[1]),a.uniform1f(r.update.u_speed_factor,i.speedFactor*e.ratio),a.uniform1f(r.update.u_drop_rate,i.dropRate),a.uniform1f(r.update.u_drop_rate_bump,i.dropRateBump),a.drawArrays(a.TRIANGLES,0,6)}const s=r.texture0;r.texture0=r.texture1,r.texture1=s}resize(e,a){e.resize();const r=new Uint8Array(a.canvas.width*a.canvas.height*4).fill(0,0,a.canvas.width*a.canvas.height*4),i=this.createTexture(a,a.NEAREST,a.NEAREST,a.CLAMP_TO_EDGE,r,a.canvas.width,a.canvas.height),s=this.createTexture(a,a.NEAREST,a.NEAREST,a.CLAMP_TO_EDGE,r,a.canvas.width,a.canvas.height);return{screenTexture:i,backgroundTexture:s}}async loadImg(e){return new Promise(a=>{const r=new Blob([e],{type:e.type}),i=URL.createObjectURL(r),s=new Image;s.crossOrigin="anonymous",s.src=i,s.onload=()=>a(s)})}}class T{}z(T,"vertexSchema",`
|
|
2
2
|
//canvas 坐标系上的坐标 (x, y)
|
|
3
3
|
attribute vec2 a_position; //像素坐标
|
|
4
4
|
attribute vec2 a_texCoord; //纹理坐标
|
package/dist/style.css
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
@charset "UTF-8";:root{--idm-white: rgba(255, 255, 255, 1);--idm-white-9: rgba(255, 255, 255, .9);--idm-white-8: rgba(255, 255, 255, .8);--idm-white-7: rgba(255, 255, 255, .7);--idm-white-6: rgba(255, 255, 255, .6);--idm-white-5: rgba(255, 255, 255, .5);--idm-white-4: rgba(255, 255, 255, .4);--idm-white-3: rgba(255, 255, 255, .3);--idm-white-2: rgba(255, 255, 255, .2);--idm-white-1: rgba(255, 255, 255, .1);--idm-black: rgba(0, 0, 0, 1);--idm-black-9: rgba(0, 0, 0, .9);--idm-black-8: rgba(0, 0, 0, .8);--idm-black-7: rgba(0, 0, 0, .7);--idm-black-6: rgba(0, 0, 0, .6);--idm-black-5: rgba(0, 0, 0, .5);--idm-black-4: rgba(0, 0, 0, .4);--idm-black-3: rgba(0, 0, 0, .3);--idm-black-2: rgba(0, 0, 0, .2);--idm-black-1: rgba(0, 0, 0, .1);--idm-gray-light: rgba(239, 239, 239, 1);--idm-primary-color: rgba(42, 87, 183, 1);--idm-primary-color-light: #6c8ad9;--idm-primary-color-light2: #a7c4ff;--idm-primary-color-dark: #053a7e;--idm-primary-color-dark2: #002e6b;--idm-primary-color-9: rgba(42, 87, 183, .9);--idm-primary-color-8: rgba(42, 87, 183, .8);--idm-primary-color-7: rgba(42, 87, 183, .7);--idm-primary-color-6: rgba(42, 87, 183, .6);--idm-primary-color-5: rgba(42, 87, 183, .5);--idm-primary-color-4: rgba(42, 87, 183, .4);--idm-primary-color-3: rgba(42, 87, 183, .3);--idm-primary-color-2: rgba(42, 87, 183, .2);--idm-primary-color-1: rgba(42, 87, 183, .1);--idm-success-color: #0ddd9f;--idm-success-color-light: #92f7d9;--idm-success-color-dark: #06a074;--idm-success-color-dark2: #06694c;--idm-warning-color: #ff9500;--idm-warning-color-light: #ffcc00;--idm-warning-color-dark: #c77402;--idm-danger-color: #f44336;--idm-danger-color-light: #fb796e;--idm-danger-color-dark: #ad251b;--idm-info-color: #6e6e6e;--idm-info-color-light: #969696;--idm-info-color-light2: #c0c0c0;--idm-info-color-light3: #e2e2e2;--idm-info-color-dark: #494949;--idm-dangerous: #f44336;--idm-severe: #ff9500;--idm-heavy: #ffff00;--idm-vessel-cargo-color: lightgreen;--idm-vessel-tanker-color: red;--idm-vessel-passenger-color: blue;--idm-vessel-other-color: lightgrey;--idm-perf-cii-a: var(--idm-success-color);--idm-perf-cii-b: var(--idm-success-color-light);--idm-perf-cii-c: var(--idm-warning-color);--idm-perf-cii-d: var(--idm-danger-color-light);--idm-perf-cii-e: var(--idm-danger-color);--idm-tropicals-td: #03f869;--idm-tropicals-ts: #f2f202;--idm-tropicals-sts: #ff9100;--idm-tropicals-ty: #f44336;--idm-tropicals-sty: #c604a4;--idm-tropicals-super-ty: #6b05bb;--idm-tropicals-r7: #ff9100;--idm-tropicals-r10: #f44336;--idm-text-shadow: 0px 0px 4px rgba(0, 0, 0, 1);--idm-dashed-border: 1px dashed var(--idm-white-5);--idm-solid-border: 1px solid var(--idm-white-4);--idm-background-color: var(--idm-primary-color-9);--idm-background-color-dark: var(--idm-primary-color-dark);--idm-background-color-light: var(--idm-primary-color-light);--idm-background-color-light2: #f3f5f8;--idm-active-background-light: linear-gradient(130deg, rgba(142, 163, 255, .93) 20%, rgb(90 67 193 / 93%) 100%);--idm-active-text-shadow-light: 0 0 7px rgb(194, 255, 247), 0 0 21px rgb(194, 255, 247), 0 0 30px rgba(182, 211, 207, .4), 0 0 12px rgba(15, 115, 223, .6), 0 0 22px rgba(15, 115, 223, .8), 0 0 38px rgba(15, 115, 223, .9), 0 0 60px rgba(15, 115, 223, 1);--idm-background-opaque-linear-gradient-top: linear-gradient(to top, rgba(41, 32, 165) 0%, rgba(44, 93, 184) 80%, rgba(32, 90, 165) 100%);--idm-background-linear-gradient-top: linear-gradient(to top, rgba(19, 23, 152, .85) 0%, rgba(44, 93, 184, .85) 80%, rgba(64, 110, 196, .85) 100%);--idm-background-linear-gradient-bottom: linear-gradient(to bottom, rgba(19, 23, 152, .85) 0%, rgba(44, 93, 184, .85) 80%, rgba(64, 110, 196, .85) 100%);--idm-background-linear-gradient-right: linear-gradient(to right, rgba(19, 23, 152, .85) 0%, rgba(44, 93, 184, .85) 80%, rgba(64, 110, 196, .85) 100%);--idm-background-linear-gradient-left: linear-gradient(to left, rgba(19, 23, 152, .85) 0%, rgba(44, 93, 184, .85) 80%, rgba(64, 110, 196, .85) 100%);--idm-blink-animation: blink .8s ease-out infinite alternate}:root[colorTheme=black]{--idm-background-opaque-linear-gradient-top: linear-gradient(to top, rgba(0, 0, 0, .8) 0%, rgba(0, 0, 0, .8) 80%, rgb(0, 0, 0, .8) 100%);--idm-background-linear-gradient-top: linear-gradient(to top, rgba(0, 0, 0, .6) 0%, rgba(0, 0, 0, .7) 70%, rgb(0, 0, 0, .7) 100%);--idm-background-linear-gradient-bottom: linear-gradient(to top, rgba(0, 0, 0, .6) 0%, rgba(0, 0, 0, .7) 70%, rgb(0, 0, 0, .7) 100%);--idm-background-linear-gradient-right: linear-gradient(to top, rgba(0, 0, 0, .6) 0%, rgba(0, 0, 0, .7) 70%, rgb(0, 0, 0, .7) 100%);--idm-background-linear-gradient-left: linear-gradient(to top, rgba(0, 0, 0, .6) 0%, rgba(0, 0, 0, .7) 70%, rgb(0, 0, 0, .7) 100%);--idm-active-background-light: linear-gradient(130deg, rgba(117, 117, 117, .93) 30%, rgba(200, 200, 200, .93) 100%);--idm-active-text-shadow-light: 0 0 7px rgb(253, 253, 253), 0 0 21px rgb(226, 226, 226), 0 0 30px rgba(185, 185, 185, .4), 0 0 12px rgba(67, 67, 67, .6), 0 0 22px rgba(27, 27, 27, .8), 0 0 38px rgba(15, 115, 223, .9), 0 0 60px rgba(15, 115, 223, 1);--idm-primary-color: rgba(0, 0, 0, .7);--idm-primary-color-light: #757575;--idm-primary-color-light2: #a5a5a5;--idm-primary-color-dark: rgba(0, 0, 0, .8);--idm-primary-color-dark2: rgba(0, 0, 0, 1);--idm-primary-color-9: rgba(0, 0, 0, .9);--idm-primary-color-7: rgba(0, 0, 0, .7);--idm-primary-color-5: rgba(0, 0, 0, .5);--idm-primary-color-3: rgba(0, 0, 0, .3);--idm-primary-color-1: rgba(0, 0, 0, .1)}:root[colorTheme=blue]{--idm-background-opaque-linear-gradient-top: linear-gradient(to top, rgba(41, 32, 165) 0%, rgba(44, 93, 184) 80%, rgba(32, 90, 165) 100%);--idm-background-linear-gradient-top: linear-gradient(to top, rgba(19, 23, 152, .85) 0%, rgba(44, 93, 184, .85) 80%, rgba(64, 110, 196, .85) 100%);--idm-background-linear-gradient-bottom: linear-gradient(to bottom, rgba(19, 23, 152, .85) 0%, rgba(44, 93, 184, .85) 80%, rgba(64, 110, 196, .85) 100%);--idm-background-linear-gradient-right: linear-gradient(to right, rgba(19, 23, 152, .85) 0%, rgba(44, 93, 184, .85) 80%, rgba(64, 110, 196, .85) 100%);--idm-background-linear-gradient-left: linear-gradient(to left, rgba(19, 23, 152, .85) 0%, rgba(44, 93, 184, .85) 80%, rgba(64, 110, 196, .85) 100%);--idm-active-background-light: linear-gradient(130deg, rgba(142, 163, 255, .93) 20%, rgb(90 67 193 / 93%) 100%);--idm-active-text-shadow-light: 0 0 7px rgb(194, 255, 247), 0 0 21px rgb(194, 255, 247), 0 0 30px rgba(182, 211, 207, .4), 0 0 12px rgba(15, 115, 223, .6), 0 0 22px rgba(15, 115, 223, .8), 0 0 38px rgba(15, 115, 223, .9), 0 0 60px rgba(15, 115, 223, 1);--idm-primary-color: rgba(42, 87, 183, 1);--idm-primary-color-light: #6c8ad9;--idm-primary-color-light2: #a7c4ff;--idm-primary-color-dark: #053a7e;--idm-primary-color-dark2: #002e6b;--idm-primary-color-9: rgba(42, 87, 183, .9);--idm-primary-color-8: rgba(42, 87, 183, .8);--idm-primary-color-7: rgba(42, 87, 183, .7);--idm-primary-color-6: rgba(42, 87, 183, .6);--idm-primary-color-5: rgba(42, 87, 183, .5);--idm-primary-color-4: rgba(42, 87, 183, .4);--idm-primary-color-3: rgba(42, 87, 183, .3);--idm-primary-color-2: rgba(42, 87, 183, .2);--idm-primary-color-1: rgba(42, 87, 183, .1)}:root[colorTheme=dark-blue]{--idm-background-opaque-linear-gradient-top: linear-gradient(to top, rgba(16, 22, 79, .85) 0%, rgba(15, 41, 89, .85) 80%, rgba(19, 47, 108, .85) 100%);--idm-background-linear-gradient-top: linear-gradient(to top, rgba(16, 22, 79, .85) 0%, rgba(15, 41, 89, .85) 80%, rgba(19, 47, 108, .85) 100%);--idm-background-linear-gradient-bottom: linear-gradient(to bottom, rgba(16, 22, 79, .85) 0%, rgba(15, 41, 89, .85) 80%, rgba(19, 47, 108, .85) 100%);--idm-background-linear-gradient-right: linear-gradient(to right, rgba(16, 22, 79, .85) 0%, rgba(15, 41, 89, .85) 80%, rgba(19, 47, 108, .85) 100%);--idm-background-linear-gradient-left: linear-gradient(to left, rgba(16, 22, 79, .85) 0%, rgba(15, 41, 89, .85) 80%, rgba(19, 47, 108, .85) 100%);--idm-active-background-light: linear-gradient(130deg, rgba(104, 104, 226, .93) 20%, rgba(22, 49, 182, .93) 100%);--idm-active-text-shadow-light: 0 0 7px rgb(194, 255, 247), 0 0 21px rgb(194, 255, 247), 0 0 30px rgba(182, 211, 207, .4), 0 0 12px rgba(15, 115, 223, .6), 0 0 22px rgba(15, 115, 223, .8), 0 0 38px rgba(15, 115, 223, .9), 0 0 60px rgba(15, 115, 223, 1);--idm-primary-color: rgba(42, 87, 183, 1);--idm-primary-color-light: #6266e0;--idm-primary-color-light2: #89b0ff;--idm-primary-color-dark: #00224e;--idm-primary-color-dark2: #021a39;--idm-primary-color-9: rgba(19, 47, 108, .9);--idm-primary-color-7: rgba(19, 47, 108, .7);--idm-primary-color-5: rgba(19, 47, 108, .5);--idm-primary-color-3: rgba(19, 47, 108, .3);--idm-primary-color-1: rgba(19, 47, 108, .1)}@font-face{font-family:iconfont;src:url(https://iconfont.idmwx.com/iconfont.woff2) format("woff2"),url(https://iconfont.idmwx.com/iconfont.woff) format("woff"),url(https://iconfont.idmwx.com/iconfont.ttf) format("truetype"),url(https://iconfont.idmwx.com/iconfont.svg?#iconfont) format("svg")}.iconfont{font-family:iconfont!important;font-style:normal;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}*,*:before,*:after{box-sizing:border-box;margin:0}.text-ellipsis{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.flex-start{display:flex;align-items:center;justify-content:flex-start}.flex-end{display:flex;align-items:center;justify-content:flex-end}.flex-center{display:flex;align-items:center;justify-content:center}.flex-between,.flex-space{display:flex;align-items:center;justify-content:space-between}.flex-around{display:flex;align-items:center;justify-content:space-around}.flex-evenly{display:flex;align-items:center;justify-content:space-evenly}.flex{flex:1}.dropdown{position:relative;display:inline-block!important}.dropdown .dropdown-content{display:none;position:absolute;z-index:1}.dropdown:hover .dropdown-content{display:block}.loading{position:fixed;top:0;left:0;right:0;bottom:0;background:var(--idm-black-5);z-index:1000;display:flex;justify-content:center;align-items:center;flex-direction:column}.loading i{font-size:30px;color:var(--idm-white);margin-bottom:16px;animation:rotate 2s linear infinite}.loading div{color:var(--idm-white);font-size:16px}@keyframes blink{0%{box-shadow:0 0 20px var(--idm-warning-color-dark) inset}to{box-shadow:0 0 20px var(--idm-success-color) inset}}@keyframes rotate{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.idm-gl-layer .fade-enter-active[data-v-fc1c05ef],.idm-gl-layer .fade-leave-active[data-v-fc1c05ef]{transition:opacity .4s}.idm-gl-layer .fade-enter[data-v-fc1c05ef],.idm-gl-layer .fade-leave-to[data-v-fc1c05ef]{opacity:0}.idm-gl-layer .menu-bar-box[data-v-fc1c05ef]{position:absolute;overflow-y:hidden;box-sizing:border-box;display:flex;flex-direction:column;align-items:flex-end;justify-content:flex-start;transition:all .4s ease-in-out;z-index:2}.idm-gl-layer .menu-bar-box .bar-item[data-v-fc1c05ef]{position:relative;margin-bottom:15px;border-radius:5px;background:var(--idm-white);cursor:pointer;box-shadow:0 2px 12px #0003}.idm-gl-layer .menu-bar-box .bar-item .menu-icon[data-v-fc1c05ef]{padding:8px;display:flex}.idm-gl-layer .menu-bar-box .bar-item .menu-icon[data-v-fc1c05ef]:first-child{border-top-left-radius:5px;border-top-right-radius:5px}.idm-gl-layer .menu-bar-box .bar-item .menu-icon[data-v-fc1c05ef]:last-child{border-bottom-left-radius:5px;border-bottom-right-radius:5px}.idm-gl-layer .menu-bar-box .bar-item .menu-icon span[data-v-fc1c05ef]{font-size:20px;font-weight:600;color:var(--idm-black-8)}.idm-gl-layer .menu-bar-box .bar-item .menu-icon.active[data-v-fc1c05ef]{background:var(--idm-primary-color)}.idm-gl-layer .menu-bar-box .bar-item .menu-icon.active span[data-v-fc1c05ef]{color:var(--idm-white)}.idm-gl-layer .layer[data-v-fc1c05ef]{cursor:pointer;display:inline-flex;align-items:center;padding:5px 0}.idm-gl-layer .layer.disabled[data-v-fc1c05ef]{cursor:not-allowed}.idm-gl-layer .layer.disabled span[data-v-fc1c05ef]{color:var(--idm-black-4)}.idm-gl-layer .layer.disabled .checkbox[data-v-fc1c05ef]{border:1px solid var(--idm-black-2)}.idm-gl-layer .layer.active .checkbox[data-v-fc1c05ef]{border:var(--idm-primary-color);background:var(--idm-primary-color)}.idm-gl-layer .layer.active .checkbox[data-v-fc1c05ef]:after{content:"✔";color:var(--idm-white);font-size:12px;display:flex;align-items:center;justify-content:center}.idm-gl-layer .layer.active span[data-v-fc1c05ef]{color:var(--idm-primary-color)}.idm-gl-layer .layer .checkbox[data-v-fc1c05ef]{width:16px;height:16px;margin-right:4px;border:1px solid var(--idm-black-8)}.idm-gl-layer .layer span[data-v-fc1c05ef]{color:var(--idm-black-8);font-size:14px;width:max-content}.idm-gl-layer .other-bars[data-v-fc1c05ef]{position:absolute;top:36px;border-radius:5px;background:var(--idm-background-linear-gradient-top);box-shadow:0 2px 12px #0003}.idm-gl-layer .active-layers[data-v-fc1c05ef]{position:absolute;max-width:250px;min-width:200px;display:flex;flex-wrap:wrap;align-items:center;background:var(--idm-white);border-radius:5px;box-shadow:0 2px 12px #0003;transition:all .4s ease-in-out}.idm-gl-layer .active-layers .layer[data-v-fc1c05ef]{width:auto;padding:5px}.idm-gl-layer .available-layers[data-v-fc1c05ef]{position:absolute;height:calc(100vh - 120px);box-sizing:border-box;transition:all .4s ease-in-out}.idm-gl-layer .available-layers .side-bar[data-v-fc1c05ef]{margin-right:10px;box-sizing:border-box}.idm-gl-layer .available-layers .side-bar i[data-v-fc1c05ef]{padding:15px 1px;background:var(--idm-white-7);border-radius:5px;cursor:pointer;font-size:18px;font-weight:600;color:var(--idm-black)}.idm-gl-layer .available-layers .list-box[data-v-fc1c05ef]{height:inherit;width:200px;padding:10px 0;overflow-y:auto;color:var(--idm-black-8);background:var(--idm-white);display:flex;flex-direction:column;box-shadow:0 2px 12px #0003;z-index:1}.idm-gl-layer .available-layers .list-box .layers-title[data-v-fc1c05ef]{font-size:16px;font-weight:600;padding:0 10px 10px;color:var(--idm-black-8);border-bottom:var(--idm-dashed-border)}.idm-gl-layer .available-layers .list-box .layers-body[data-v-fc1c05ef]{display:flex;flex-wrap:wrap;align-items:center;justify-content:flex-start;padding:0 10px;font-size:14px}.idm-gl-layer .available-layers .list-box .layers-body .layer[data-v-fc1c05ef]{width:140px}.idm-gl-layer .available-layers .list-box .model-box[data-v-fc1c05ef]{display:flex;align-items:center;justify-content:flex-start;margin:10px 0;cursor:pointer}.idm-gl-layer .available-layers .list-box .model-box span[data-v-fc1c05ef]{padding:3px 10px;border:1px solid #cecece}.idm-gl-layer .available-layers .list-box .model-box span.active[data-v-fc1c05ef]{color:var(--idm-white);border:1px solid var(--idm-primary-color);background:var(--idm-primary-color)}.idm-gl-layer .available-layers .list-box .model-box span[data-v-fc1c05ef]:first-child{border-top-left-radius:5px;border-bottom-left-radius:5px}.idm-gl-layer .available-layers .list-box .model-box span[data-v-fc1c05ef]:last-child{border-top-right-radius:5px;border-bottom-right-radius:5px;border-left:none}.tool-bars[data-v-f409772c]{transition:all .4s ease-in-out}.tool-bars i[data-v-f409772c]{cursor:pointer;font-size:30px;color:var(--idm-white-8);text-shadow:var(--idm-text-shadow)}.tool-bars i.active[data-v-f409772c]{color:var(--idm-white)}.tool-bars span[data-v-f409772c]{cursor:pointer;font-size:12px;color:var(--idm-black-8);margin-left:4px;background:var(--idm-white-8);padding:2px 4px;border-radius:5px;box-shadow:0 2px 12px #0003}.tool-bars span.active[data-v-f409772c]{color:var(--idm-white);background:var(--idm-primary-color)}.legend-bars[data-v-6e0050df]{transition:all .4s ease-in-out;background:linear-gradient(to right,rgb(98,113,184),rgb(98,113,184),rgb(98,113,184),rgb(98,113,184),rgb(61,110,163),rgb(74,148,170),rgb(74,146,148),rgb(77,142,124),rgb(76,164,76),rgb(103,164,54),rgb(162,135,64),rgb(162,109,92),rgb(141,63,92),rgb(151,75,145),rgb(95,100,160),rgb(91,136,161),rgb(91,136,161));padding:2px 0;border-radius:10px;box-shadow:var(--idm-gl-box-shadow)}.legend-bars span[data-v-6e0050df]{font-size:12px;text-align:center;color:var(--idm-white-8);width:32px}.tool-bars[data-v-4f257fc7]{transition:all .4s ease-in-out}.tool-bars i[data-v-4f257fc7]{cursor:pointer;font-size:30px;color:var(--idm-white-8);text-shadow:var(--idm-text-shadow)}.tool-bars i.active[data-v-4f257fc7]{color:var(--idm-white)}.tool-bars span[data-v-4f257fc7]{cursor:pointer;font-size:12px;color:var(--idm-black-8);margin-left:4px;background:var(--idm-white-8);padding:2px 4px;border-radius:5px;box-shadow:0 2px 12px #0003}.tool-bars span.active[data-v-4f257fc7]{color:var(--idm-white);background:var(--idm-primary-color)}.legend-bars[data-v-ec0ae348]{transition:all .4s ease-in-out;background:linear-gradient(to right,rgb(84,170,230),rgb(84,170,230),rgb(84,170,230),rgb(84,170,230),rgb(64,127,115),rgb(58,164,58),rgb(191,182,67),rgb(197,154,68),rgb(160,70,94),rgb(138,84,166),rgb(82,113,165),rgb(84,142,152),rgb(150,181,184),rgb(195,194,194),rgb(195,194,194));padding:2px 0;border-radius:10px;box-shadow:var(--idm-gl-box-shadow)}.legend-bars span[data-v-ec0ae348]{font-size:12px;text-align:center;color:var(--idm-white);width:36px}.active-tropical[data-v-813afc6d]{bottom:unset;background:var(--idm-white-9);padding:10px;border-radius:5px;z-index:5}.active-tropical .header-box[data-v-813afc6d]{min-width:360px;margin-bottom:10px;box-sizing:border-box;color:var(--idm-black-8)}.active-tropical .header-box .close-btn[data-v-813afc6d]{position:relative;height:0px;text-align:right;font-size:22px;color:var(--idm-primary-color)}.active-tropical .header-box .main[data-v-813afc6d]{font-size:16px}.active-tropical .header-box .sub[data-v-813afc6d]{margin:3px 0;font-size:12px;color:var(--idm-info-color)}.active-tropical .main-box[data-v-813afc6d]{min-width:360px;color:var(--idm-black-8);overflow-y:auto;box-sizing:border-box;font-size:12px;z-index:4}.active-tropical .main-box .content[data-v-813afc6d]{padding:5px 0;border-radius:5px;background:var(--idm-gray-light)}.active-tropical .main-box .row[data-v-813afc6d]{width:100%;padding:4px 10px;box-sizing:border-box;display:flex;align-items:center;justify-content:space-between}.active-tropical .main-box .row .col[data-v-813afc6d]{display:flex;align-items:center;justify-content:space-between}.active-tropical .main-box .row .col label[data-v-813afc6d]{width:82px;margin-right:4px;color:var(--idm-info-color)}.active-tropical .main-box .row .col.col-24[data-v-813afc6d]{width:100%}.active-tropical .main-box .row .col.col-left[data-v-813afc6d]{width:55%}.active-tropical .main-box .row .col.col-right[data-v-813afc6d]{width:40%}.active-tropical .main-box .row .col .icon[data-v-813afc6d]{font-size:30px;color:var(--idm-black-4)}.active-tropical .main-box .row .col .icon.active[data-v-813afc6d]{color:var(--idm-primary-color)}.forecast-models[data-v-813afc6d]{display:flex;justify-content:flex-end;flex:1;margin-left:5px;flex-wrap:wrap}.forecast-models .model[data-v-813afc6d]{font-size:12px;padding:0 6px 4px;display:flex;border:1px solid var(--idm-primary-color)}.forecast-models .model span[data-v-813afc6d]{border-bottom:2px dashed var(--idm-white)}.forecast-models .model span.cma[data-v-813afc6d]{border-color:#e2ea03cc}.forecast-models .model span.jma[data-v-813afc6d]{border-color:#01d2b7cc}.forecast-models .model span.ecmwf[data-v-813afc6d]{border-color:#f582f2cc}.forecast-models .model span.ukm[data-v-813afc6d]{border-color:#f5bb47cc}.forecast-models .model span.noaa-at[data-v-813afc6d],.forecast-models .model span.noaa-ep[data-v-813afc6d]{border-color:#9758fbcc}.forecast-models .model.active[data-v-813afc6d]{border:1px solid var(--idm-primary-color);background-color:var(--idm-primary-color);color:var(--idm-white)}.forecast-models .model[data-v-813afc6d]:first-child{border-top-left-radius:4px;border-bottom-left-radius:4px}.forecast-models .model.center-child[data-v-813afc6d]{border-left:1px solid var(--idm-primary-color);border-right:1px solid var(--idm-primary-color)}.forecast-models .model[data-v-813afc6d]:last-child{border-top-right-radius:4px;border-bottom-right-radius:4px}.legend[data-v-813afc6d]{display:flex;align-items:center;color:var(--idm-info-color)}.legend .icon[data-v-813afc6d]{height:14px;width:14px;border-radius:50%;border:3px solid #fff;margin-right:3px}.legend .icon.td[data-v-813afc6d]{background-color:var(--idm-tropicals-td)}.legend .icon.ts[data-v-813afc6d]{background-color:var(--idm-tropicals-ts)}.legend .icon.sts[data-v-813afc6d]{background-color:var(--idm-tropicals-sts)}.legend .icon.ty[data-v-813afc6d]{background-color:var(--idm-tropicals-ty)}.legend .icon.sty[data-v-813afc6d]{background-color:var(--idm-tropicals-sty)}.legend .icon.supper-ty[data-v-813afc6d]{background-color:var(--idm-tropicals-super-ty)}.legend .icon.r7[data-v-813afc6d]{border:1.5px solid var(--idm-tropicals-r7)}.legend .icon.r10[data-v-813afc6d]{border:1.5px solid var(--idm-tropicals-r10)}.legend .icon.history[data-v-813afc6d]{border:none;border-radius:0;height:4px;background:var(--idm-black-5)}.legend .button[data-v-813afc6d]{cursor:pointer;padding:0 4px;border-radius:4px;border:1px solid var(--idm-primary-color);color:var(--idm-primary-color)}.more[data-v-813afc6d]{display:flex;align-items:center;justify-content:flex-end;color:var(--idm-primary-color);font-weight:700;margin-top:5px}.legend-bars[data-v-dec867b8]{transition:all .4s ease-in-out;background:linear-gradient(to right,rgba(59,126,162,0),rgb(172,210,255),rgb(172,210,255),rgb(3,248,103),rgb(14,201,3),rgb(190,226,2),rgb(248,1,1),rgb(197,5,58),rgb(197,5,58));padding:2px 0;border-radius:10px;box-shadow:var(--idm-gl-box-shadow)}.legend-bars span[data-v-dec867b8]{font-size:12px;text-align:center;color:var(--idm-white);width:35px}.legend-bars[data-v-952dee5c]{transition:all .4s ease-in-out;background:linear-gradient(to right,rgb(189,50,160),rgb(189,50,160),rgb(189,50,160),rgb(189,50,160),rgb(208,56,56),rgb(208,56,56),rgb(190,226,2),rgb(190,226,2),rgb(4,210,64),rgb(4,210,64),rgb(172,210,255),rgb(172,210,255));padding:2px 0;border-radius:10px;box-shadow:var(--idm-gl-box-shadow)}.legend-bars span[data-v-952dee5c]{font-size:12px;text-align:center;color:var(--idm-white);width:40px}.legend-bars[data-v-67e5094b]{transition:all .4s ease-in-out;background:linear-gradient(to right,rgb(95,143,197),rgb(95,143,197),rgb(95,143,197),rgb(95,143,197),rgb(80,140,62),rgb(121,146,28),rgb(171,161,14),rgb(223,177,6),rgb(243,150,6),rgb(236,95,21),rgb(190,65,18),rgb(138,43,10),rgb(138,43,10));padding:2px 0;border-radius:10px;box-shadow:var(--idm-gl-box-shadow)}.legend-bars span[data-v-67e5094b]{font-size:12px;text-align:center;color:var(--idm-white);width:32px}.legend-bars[data-v-389ea886]{transition:all .4s ease-in-out;background:linear-gradient(to right,rgb(149,137,211),rgb(149,137,211),rgb(149,137,211),rgb(149,137,211),rgb(150,209,216),rgb(129,204,197),rgb(103,180,186),rgb(95,143,197),rgb(80,140,62),rgb(121,146,28),rgb(171,161,14),rgb(223,177,6),rgb(243,150,6),rgb(236,95,21),rgb(190,65,18),rgb(138,43,10),rgb(138,43,10));padding:2px 0;border-radius:10px;box-shadow:var(--idm-gl-box-shadow)}.legend-bars span[data-v-389ea886]{font-size:12px;text-align:center;color:var(--idm-white);width:32px}.legend-bars[data-v-db805141]{transition:all .4s ease-in-out;background:linear-gradient(to right,rgb(76,165,228),rgb(76,165,228),rgb(76,165,228),rgb(76,165,228),rgb(103,180,186),rgb(129,204,197),rgb(150,209,216),rgb(180,209,216));padding:2px 0;border-radius:10px;box-shadow:var(--idm-gl-box-shadow)}.legend-bars span[data-v-db805141]{font-size:12px;text-align:center;color:var(--idm-white);width:40px}.point-meteo[data-v-fb5b12d6]{bottom:unset}.point-meteo .meteo-box[data-v-fb5b12d6]{position:absolute;color:var(--idm-black-8);top:0;left:5px;padding:10px;background-color:var(--idm-white-9);-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px);width:260px;border-top-right-radius:5px;border-bottom-right-radius:5px;z-index:2}.point-meteo .meteo-box .header-box[data-v-fb5b12d6]{margin-bottom:10px;box-sizing:border-box;color:var(--idm-black-8)}.point-meteo .meteo-box .header-box .close[data-v-fb5b12d6]{position:relative;height:0px;text-align:right;font-size:22px;color:var(--idm-primary-color)}.point-meteo .meteo-box .header-box .main[data-v-fb5b12d6]{font-size:16px}.point-meteo .meteo-box .header-box .sub[data-v-fb5b12d6]{margin:3px 0;font-size:12px;color:var(--idm-info-color)}.point-meteo .meteo-box .main-box[data-v-fb5b12d6]{padding:0 5px;border-radius:5px;background:var(--idm-gray-light)}.point-meteo .meteo-box .main-box .flex-space[data-v-fb5b12d6]{padding:3px 0;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid var(--idm-white);box-sizing:border-box}.point-meteo .meteo-box .main-box .flex-space label[data-v-fb5b12d6]{color:var(--idm-black-8)}.point-meteo .meteo-box .main-box .flex-space label[data-v-fb5b12d6]:after{content:":"}.point-meteo .meteo-box .main-box .flex-space[data-v-fb5b12d6]:last-child{border-bottom:none}.point-meteo .meteo-box .more[data-v-fb5b12d6]{margin-top:5px;color:var(--idm-primary-color);font-weight:700;cursor:pointer}.point-meteo[data-v-fb5b12d6]:after{display:block;width:8px;height:8px;border-radius:50%;content:"";background-color:var(--idm-white-9);margin-bottom:360px}.point-meteo[data-v-fb5b12d6]:before{display:block;content:"";width:2px;height:360px;margin-left:3px;border-left:2px solid var(--idm-white-9)}#zone-info[data-v-c0864afc]{position:absolute;background:var(--idm-white);color:var(--idm-black-8);z-index:10}#zone-info .rich-context[data-v-c0864afc]{width:100vw;height:100vh;padding:10px;font-size:14px;font-weight:400;color:var(--idm-black-8)!important;overflow-y:auto}#zone-info .close[data-v-c0864afc]{position:relative;color:var(--idm-info-color-light2);font-size:24px;height:0;text-align:right;margin:5px 5px 0 0}#port-info[data-v-30e545a2]{position:absolute;background:var(--idm-white);color:var(--idm-black-8);padding:10px;border-radius:6px;cursor:default;z-index:1000;height:fit-content}#port-info .port-box[data-v-30e545a2]{margin-top:10px;max-width:240px}#port-info .port-box .flex-start[data-v-30e545a2]{line-height:2}#port-info .port-box .flex-start label[data-v-30e545a2]{color:var(--idm-info-color);margin-right:10px;width:50px}#port-info .port-box .flex-start span[data-v-30e545a2]{flex:1;flex-wrap:wrap;text-align:justify-all;color:var(--idm-black-8)}#port-info .port-box .flex-start span.link[data-v-30e545a2]{cursor:pointer;text-decoration:underline}#port-info .port-box .flex-start span.link[data-v-30e545a2]:hover{font-weight:600}#port-info .close[data-v-30e545a2]{position:relative;text-align:right;height:0px;color:var(--idm-info-color-light2);font-size:24px}.lat-lng-tip[data-v-51cc4052]{position:absolute;padding:2px 10px;border-radius:5px;color:var(--idm-primary-color);font-size:12px;top:unset;background:var(--idm-white);box-shadow:0 2px 12px #0003;transition:all .4s ease-in-out}.menu-bar-box[data-v-ab627b83]{display:flex;flex-direction:column;align-items:flex-end;justify-content:flex-start;transition:all .4s ease-in-out}.menu-bar-box .bar-item[data-v-ab627b83]{position:relative;margin-bottom:15px;border-radius:5px;background:var(--idm-white);cursor:pointer;box-shadow:0 2px 12px #0003}.menu-bar-box .bar-item .menu-icon[data-v-ab627b83]{padding:8px;display:flex}.menu-bar-box .bar-item .menu-icon[data-v-ab627b83]:first-child{border-top-left-radius:5px;border-top-right-radius:5px}.menu-bar-box .bar-item .menu-icon[data-v-ab627b83]:last-child{border-bottom-left-radius:5px;border-bottom-right-radius:5px}.menu-bar-box .bar-item .menu-icon span[data-v-ab627b83]{font-size:18px;font-weight:500;color:var(--idm-black-8)}.menu-bar-box .bar-item .menu-icon.active[data-v-ab627b83]{background:var(--idm-primary-color)}.menu-bar-box .bar-item .menu-icon.active span[data-v-ab627b83]{color:var(--idm-white)}:root{--idm-tropicals-td: #03f869;--idm-tropicals-ts: #f2f202;--idm-tropicals-sts: #ff9100;--idm-tropicals-ty: #f44336;--idm-tropicals-sty: #c604a4;--idm-tropicals-super-ty: #6b05bb;--idm-tropicals-r7: #ff9100;--idm-tropicals-r10: #f44336;--idm-gl-box-shadow-color: rgba(0, 0, 0, .5);--idm-gl-box-shadow: 0px 12px 32px 4px rgba(0, 0, 0, .04), 0px 8px 20px rgba(0, 0, 0, .08);--idm-gl-box-shadow-light: 0px 0px 12px rgba(0, 0, 0, .12);--idm-gl-box-shadow-lighter: 0px 0px 6px rgba(0, 0, 0, .12);--idm-gl-box-shadow-dark: 0px 16px 48px 16px rgba(0, 0, 0, .08), 0px 12px 32px rgba(0, 0, 0, .12), 0px 8px 16px -8px rgba(0, 0, 0, .16)}.point-marker{pointer-events:none!important}.point-marker .marker-circle{pointer-events:inherit;width:12px;height:12px;border-radius:50%;border:2px solid var(--idm-white);background:var(--idm-danger-color)}.point-marker .marker-circle:hover{cursor:pointer}.point-marker.closed{pointer-events:auto!important}.point-summary-marker,.point-contextmenu-marker{color:var(--idm-white);font-size:12px;background:var(--idm-danger-color);border:1px solid var(--idm-white);padding:2px 5px;border-radius:5px;cursor:pointer}.point-summary-marker .marker-close,.point-contextmenu-marker .marker-close{pointer-events:auto;position:absolute;background:var(--idm-danger-color);border:1px dashed var(--idm-white);display:flex;align-items:center;justify-content:center;width:20px;height:20px;right:-17px;top:-17px;cursor:pointer;font-size:20px}.tip-marker{color:var(--idm-white);font-size:12px;text-shadow:var(--idm-text-shadow);background-color:var(--idm-black-6);padding:2px 5px;border-radius:5px;cursor:pointer}.tip-marker .marker-label{border-bottom:var(--idm-dashed-border)}.tip-marker .marker-label:last-child{border-bottom:none}.tip-marker .marker-label b{font-weight:600;color:var(--idm-danger-color)}.hurricane-hourly-marker .iconfont{font-size:34px!important;color:var(--idm-danger-color)}.hurricane-hourly-marker svg{height:34px;width:34px}.hurricane-hourly-marker .center{box-sizing:border-box;display:flex;align-items:center;justify-content:center}.hurricane-hourly-marker .center.north{animation:anticlockwise 2s linear infinite}.hurricane-hourly-marker .center.south{animation:clockwise 2s linear infinite}@keyframes clockwise{0%{transform:rotate(0)}to{transform:rotate(360deg)}}@keyframes anticlockwise{0%{transform:rotate(0)}to{transform:rotate(-360deg)}}
|
|
1
|
+
@charset "UTF-8";:root{--idm-white: rgba(255, 255, 255, 1);--idm-white-9: rgba(255, 255, 255, .9);--idm-white-8: rgba(255, 255, 255, .8);--idm-white-7: rgba(255, 255, 255, .7);--idm-white-6: rgba(255, 255, 255, .6);--idm-white-5: rgba(255, 255, 255, .5);--idm-white-4: rgba(255, 255, 255, .4);--idm-white-3: rgba(255, 255, 255, .3);--idm-white-2: rgba(255, 255, 255, .2);--idm-white-1: rgba(255, 255, 255, .1);--idm-black: rgba(0, 0, 0, 1);--idm-black-9: rgba(0, 0, 0, .9);--idm-black-8: rgba(0, 0, 0, .8);--idm-black-7: rgba(0, 0, 0, .7);--idm-black-6: rgba(0, 0, 0, .6);--idm-black-5: rgba(0, 0, 0, .5);--idm-black-4: rgba(0, 0, 0, .4);--idm-black-3: rgba(0, 0, 0, .3);--idm-black-2: rgba(0, 0, 0, .2);--idm-black-1: rgba(0, 0, 0, .1);--idm-gray-light: rgba(239, 239, 239, 1);--idm-primary-color: rgba(42, 87, 183, 1);--idm-primary-color-light: #6c8ad9;--idm-primary-color-light2: #a7c4ff;--idm-primary-color-dark: #053a7e;--idm-primary-color-dark2: #002e6b;--idm-primary-color-9: rgba(42, 87, 183, .9);--idm-primary-color-8: rgba(42, 87, 183, .8);--idm-primary-color-7: rgba(42, 87, 183, .7);--idm-primary-color-6: rgba(42, 87, 183, .6);--idm-primary-color-5: rgba(42, 87, 183, .5);--idm-primary-color-4: rgba(42, 87, 183, .4);--idm-primary-color-3: rgba(42, 87, 183, .3);--idm-primary-color-2: rgba(42, 87, 183, .2);--idm-primary-color-1: rgba(42, 87, 183, .1);--idm-success-color: #0ddd9f;--idm-success-color-light: #92f7d9;--idm-success-color-dark: #06a074;--idm-success-color-dark2: #06694c;--idm-warning-color: #ff9500;--idm-warning-color-light: #ffcc00;--idm-warning-color-dark: #c77402;--idm-danger-color: #f44336;--idm-danger-color-light: #fb796e;--idm-danger-color-dark: #ad251b;--idm-info-color: #6e6e6e;--idm-info-color-light: #969696;--idm-info-color-light2: #c0c0c0;--idm-info-color-light3: #e2e2e2;--idm-info-color-dark: #494949;--idm-dangerous: #f44336;--idm-severe: #ff9500;--idm-heavy: #ffff00;--idm-vessel-cargo-color: lightgreen;--idm-vessel-tanker-color: red;--idm-vessel-passenger-color: blue;--idm-vessel-other-color: lightgrey;--idm-perf-cii-a: var(--idm-success-color);--idm-perf-cii-b: var(--idm-success-color-light);--idm-perf-cii-c: var(--idm-warning-color);--idm-perf-cii-d: var(--idm-danger-color-light);--idm-perf-cii-e: var(--idm-danger-color);--idm-tropicals-td: #03f869;--idm-tropicals-ts: #f2f202;--idm-tropicals-sts: #ff9100;--idm-tropicals-ty: #f44336;--idm-tropicals-sty: #c604a4;--idm-tropicals-super-ty: #6b05bb;--idm-tropicals-r7: #ff9100;--idm-tropicals-r10: #f44336;--idm-text-shadow: 0px 0px 4px rgba(0, 0, 0, 1);--idm-dashed-border: 1px dashed var(--idm-white-5);--idm-solid-border: 1px solid var(--idm-white-4);--idm-background-color: var(--idm-primary-color-9);--idm-background-color-dark: var(--idm-primary-color-dark);--idm-background-color-light: var(--idm-primary-color-light);--idm-background-color-light2: #f3f5f8;--idm-active-background-light: linear-gradient(130deg, rgba(142, 163, 255, .93) 20%, rgb(90 67 193 / 93%) 100%);--idm-active-text-shadow-light: 0 0 7px rgb(194, 255, 247), 0 0 21px rgb(194, 255, 247), 0 0 30px rgba(182, 211, 207, .4), 0 0 12px rgba(15, 115, 223, .6), 0 0 22px rgba(15, 115, 223, .8), 0 0 38px rgba(15, 115, 223, .9), 0 0 60px rgba(15, 115, 223, 1);--idm-background-opaque-linear-gradient-top: linear-gradient(to top, rgba(41, 32, 165) 0%, rgba(44, 93, 184) 80%, rgba(32, 90, 165) 100%);--idm-background-linear-gradient-top: linear-gradient(to top, rgba(19, 23, 152, .85) 0%, rgba(44, 93, 184, .85) 80%, rgba(64, 110, 196, .85) 100%);--idm-background-linear-gradient-bottom: linear-gradient(to bottom, rgba(19, 23, 152, .85) 0%, rgba(44, 93, 184, .85) 80%, rgba(64, 110, 196, .85) 100%);--idm-background-linear-gradient-right: linear-gradient(to right, rgba(19, 23, 152, .85) 0%, rgba(44, 93, 184, .85) 80%, rgba(64, 110, 196, .85) 100%);--idm-background-linear-gradient-left: linear-gradient(to left, rgba(19, 23, 152, .85) 0%, rgba(44, 93, 184, .85) 80%, rgba(64, 110, 196, .85) 100%);--idm-blink-animation: blink .8s ease-out infinite alternate}:root[colorTheme=black]{--idm-background-opaque-linear-gradient-top: linear-gradient(to top, rgba(0, 0, 0, .8) 0%, rgba(0, 0, 0, .8) 80%, rgb(0, 0, 0, .8) 100%);--idm-background-linear-gradient-top: linear-gradient(to top, rgba(0, 0, 0, .6) 0%, rgba(0, 0, 0, .7) 70%, rgb(0, 0, 0, .7) 100%);--idm-background-linear-gradient-bottom: linear-gradient(to top, rgba(0, 0, 0, .6) 0%, rgba(0, 0, 0, .7) 70%, rgb(0, 0, 0, .7) 100%);--idm-background-linear-gradient-right: linear-gradient(to top, rgba(0, 0, 0, .6) 0%, rgba(0, 0, 0, .7) 70%, rgb(0, 0, 0, .7) 100%);--idm-background-linear-gradient-left: linear-gradient(to top, rgba(0, 0, 0, .6) 0%, rgba(0, 0, 0, .7) 70%, rgb(0, 0, 0, .7) 100%);--idm-active-background-light: linear-gradient(130deg, rgba(117, 117, 117, .93) 30%, rgba(200, 200, 200, .93) 100%);--idm-active-text-shadow-light: 0 0 7px rgb(253, 253, 253), 0 0 21px rgb(226, 226, 226), 0 0 30px rgba(185, 185, 185, .4), 0 0 12px rgba(67, 67, 67, .6), 0 0 22px rgba(27, 27, 27, .8), 0 0 38px rgba(15, 115, 223, .9), 0 0 60px rgba(15, 115, 223, 1);--idm-primary-color: rgba(0, 0, 0, .7);--idm-primary-color-light: #757575;--idm-primary-color-light2: #a5a5a5;--idm-primary-color-dark: rgba(0, 0, 0, .8);--idm-primary-color-dark2: rgba(0, 0, 0, 1);--idm-primary-color-9: rgba(0, 0, 0, .9);--idm-primary-color-7: rgba(0, 0, 0, .7);--idm-primary-color-5: rgba(0, 0, 0, .5);--idm-primary-color-3: rgba(0, 0, 0, .3);--idm-primary-color-1: rgba(0, 0, 0, .1)}:root[colorTheme=blue]{--idm-background-opaque-linear-gradient-top: linear-gradient(to top, rgba(41, 32, 165) 0%, rgba(44, 93, 184) 80%, rgba(32, 90, 165) 100%);--idm-background-linear-gradient-top: linear-gradient(to top, rgba(19, 23, 152, .85) 0%, rgba(44, 93, 184, .85) 80%, rgba(64, 110, 196, .85) 100%);--idm-background-linear-gradient-bottom: linear-gradient(to bottom, rgba(19, 23, 152, .85) 0%, rgba(44, 93, 184, .85) 80%, rgba(64, 110, 196, .85) 100%);--idm-background-linear-gradient-right: linear-gradient(to right, rgba(19, 23, 152, .85) 0%, rgba(44, 93, 184, .85) 80%, rgba(64, 110, 196, .85) 100%);--idm-background-linear-gradient-left: linear-gradient(to left, rgba(19, 23, 152, .85) 0%, rgba(44, 93, 184, .85) 80%, rgba(64, 110, 196, .85) 100%);--idm-active-background-light: linear-gradient(130deg, rgba(142, 163, 255, .93) 20%, rgb(90 67 193 / 93%) 100%);--idm-active-text-shadow-light: 0 0 7px rgb(194, 255, 247), 0 0 21px rgb(194, 255, 247), 0 0 30px rgba(182, 211, 207, .4), 0 0 12px rgba(15, 115, 223, .6), 0 0 22px rgba(15, 115, 223, .8), 0 0 38px rgba(15, 115, 223, .9), 0 0 60px rgba(15, 115, 223, 1);--idm-primary-color: rgba(42, 87, 183, 1);--idm-primary-color-light: #6c8ad9;--idm-primary-color-light2: #a7c4ff;--idm-primary-color-dark: #053a7e;--idm-primary-color-dark2: #002e6b;--idm-primary-color-9: rgba(42, 87, 183, .9);--idm-primary-color-8: rgba(42, 87, 183, .8);--idm-primary-color-7: rgba(42, 87, 183, .7);--idm-primary-color-6: rgba(42, 87, 183, .6);--idm-primary-color-5: rgba(42, 87, 183, .5);--idm-primary-color-4: rgba(42, 87, 183, .4);--idm-primary-color-3: rgba(42, 87, 183, .3);--idm-primary-color-2: rgba(42, 87, 183, .2);--idm-primary-color-1: rgba(42, 87, 183, .1)}:root[colorTheme=dark-blue]{--idm-background-opaque-linear-gradient-top: linear-gradient(to top, rgba(16, 22, 79, .85) 0%, rgba(15, 41, 89, .85) 80%, rgba(19, 47, 108, .85) 100%);--idm-background-linear-gradient-top: linear-gradient(to top, rgba(16, 22, 79, .85) 0%, rgba(15, 41, 89, .85) 80%, rgba(19, 47, 108, .85) 100%);--idm-background-linear-gradient-bottom: linear-gradient(to bottom, rgba(16, 22, 79, .85) 0%, rgba(15, 41, 89, .85) 80%, rgba(19, 47, 108, .85) 100%);--idm-background-linear-gradient-right: linear-gradient(to right, rgba(16, 22, 79, .85) 0%, rgba(15, 41, 89, .85) 80%, rgba(19, 47, 108, .85) 100%);--idm-background-linear-gradient-left: linear-gradient(to left, rgba(16, 22, 79, .85) 0%, rgba(15, 41, 89, .85) 80%, rgba(19, 47, 108, .85) 100%);--idm-active-background-light: linear-gradient(130deg, rgba(104, 104, 226, .93) 20%, rgba(22, 49, 182, .93) 100%);--idm-active-text-shadow-light: 0 0 7px rgb(194, 255, 247), 0 0 21px rgb(194, 255, 247), 0 0 30px rgba(182, 211, 207, .4), 0 0 12px rgba(15, 115, 223, .6), 0 0 22px rgba(15, 115, 223, .8), 0 0 38px rgba(15, 115, 223, .9), 0 0 60px rgba(15, 115, 223, 1);--idm-primary-color: rgba(42, 87, 183, 1);--idm-primary-color-light: #6266e0;--idm-primary-color-light2: #89b0ff;--idm-primary-color-dark: #00224e;--idm-primary-color-dark2: #021a39;--idm-primary-color-9: rgba(19, 47, 108, .9);--idm-primary-color-7: rgba(19, 47, 108, .7);--idm-primary-color-5: rgba(19, 47, 108, .5);--idm-primary-color-3: rgba(19, 47, 108, .3);--idm-primary-color-1: rgba(19, 47, 108, .1)}@font-face{font-family:iconfont;src:url(https://iconfont.idmwx.com/iconfont.woff2) format("woff2"),url(https://iconfont.idmwx.com/iconfont.woff) format("woff"),url(https://iconfont.idmwx.com/iconfont.ttf) format("truetype"),url(https://iconfont.idmwx.com/iconfont.svg?#iconfont) format("svg")}.iconfont{font-family:iconfont!important;font-style:normal;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}*,*:before,*:after{box-sizing:border-box;margin:0}.text-ellipsis{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.flex-start{display:flex;align-items:center;justify-content:flex-start}.flex-end{display:flex;align-items:center;justify-content:flex-end}.flex-center{display:flex;align-items:center;justify-content:center}.flex-between,.flex-space{display:flex;align-items:center;justify-content:space-between}.flex-around{display:flex;align-items:center;justify-content:space-around}.flex-evenly{display:flex;align-items:center;justify-content:space-evenly}.flex{flex:1}.dropdown{position:relative;display:inline-block!important}.dropdown .dropdown-content{display:none;position:absolute;z-index:1}.dropdown:hover .dropdown-content{display:block}.loading{position:fixed;top:0;left:0;right:0;bottom:0;background:var(--idm-black-5);z-index:1000;display:flex;justify-content:center;align-items:center;flex-direction:column}.loading i{font-size:30px;color:var(--idm-white);margin-bottom:16px;animation:rotate 2s linear infinite}.loading div{color:var(--idm-white);font-size:16px}@keyframes blink{0%{box-shadow:0 0 20px var(--idm-warning-color-dark) inset}to{box-shadow:0 0 20px var(--idm-success-color) inset}}@keyframes rotate{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.idm-gl-layer .fade-enter-active[data-v-c4783062],.idm-gl-layer .fade-leave-active[data-v-c4783062]{transition:opacity .4s}.idm-gl-layer .fade-enter[data-v-c4783062],.idm-gl-layer .fade-leave-to[data-v-c4783062]{opacity:0}.idm-gl-layer .menu-bar-box[data-v-c4783062]{position:absolute;overflow-y:hidden;box-sizing:border-box;display:flex;flex-direction:column;align-items:flex-end;justify-content:flex-start;transition:all .4s ease-in-out;z-index:2}.idm-gl-layer .menu-bar-box .bar-item[data-v-c4783062]{position:relative;margin-bottom:15px;border-radius:5px;background:var(--idm-white);cursor:pointer;box-shadow:0 2px 12px #0003}.idm-gl-layer .menu-bar-box .bar-item .menu-icon[data-v-c4783062]{padding:8px;display:flex}.idm-gl-layer .menu-bar-box .bar-item .menu-icon[data-v-c4783062]:first-child{border-top-left-radius:5px;border-top-right-radius:5px}.idm-gl-layer .menu-bar-box .bar-item .menu-icon[data-v-c4783062]:last-child{border-bottom-left-radius:5px;border-bottom-right-radius:5px}.idm-gl-layer .menu-bar-box .bar-item .menu-icon span[data-v-c4783062]{font-size:20px;font-weight:600;color:var(--idm-black-8)}.idm-gl-layer .menu-bar-box .bar-item .menu-icon.active[data-v-c4783062]{background:var(--idm-primary-color)}.idm-gl-layer .menu-bar-box .bar-item .menu-icon.active span[data-v-c4783062]{color:var(--idm-white)}.idm-gl-layer .layer[data-v-c4783062]{cursor:pointer;display:inline-flex;align-items:center;padding:5px 0}.idm-gl-layer .layer.disabled[data-v-c4783062]{cursor:not-allowed}.idm-gl-layer .layer.disabled span[data-v-c4783062]{color:var(--idm-black-4)}.idm-gl-layer .layer.disabled .checkbox[data-v-c4783062]{border:1px solid var(--idm-black-2)}.idm-gl-layer .layer.active .checkbox[data-v-c4783062]{border:var(--idm-primary-color);background:var(--idm-primary-color)}.idm-gl-layer .layer.active .checkbox[data-v-c4783062]:after{content:"✔";color:var(--idm-white);font-size:12px;display:flex;align-items:center;justify-content:center}.idm-gl-layer .layer.active span[data-v-c4783062]{color:var(--idm-primary-color)}.idm-gl-layer .layer .checkbox[data-v-c4783062]{width:16px;height:16px;margin-right:4px;border:1px solid var(--idm-black-8)}.idm-gl-layer .layer span[data-v-c4783062]{color:var(--idm-black-8);font-size:14px;width:max-content}.idm-gl-layer .other-bars[data-v-c4783062]{position:absolute;top:36px;border-radius:5px;background:var(--idm-background-linear-gradient-top);box-shadow:0 2px 12px #0003}.idm-gl-layer .active-layers[data-v-c4783062]{position:absolute;max-width:250px;min-width:200px;display:flex;flex-wrap:wrap;align-items:center;background:var(--idm-white);border-radius:5px;box-shadow:0 2px 12px #0003;transition:all .4s ease-in-out}.idm-gl-layer .active-layers .layer[data-v-c4783062]{width:auto;padding:5px}.idm-gl-layer .available-layers[data-v-c4783062]{position:absolute;height:calc(100vh - 120px);box-sizing:border-box;transition:all .4s ease-in-out}.idm-gl-layer .available-layers .side-bar[data-v-c4783062]{margin-right:10px;box-sizing:border-box}.idm-gl-layer .available-layers .side-bar i[data-v-c4783062]{padding:15px 1px;background:var(--idm-white-7);border-radius:5px;cursor:pointer;font-size:18px;font-weight:600;color:var(--idm-black)}.idm-gl-layer .available-layers .list-box[data-v-c4783062]{height:inherit;width:200px;padding:10px 0;overflow-y:auto;color:var(--idm-black-8);background:var(--idm-white);display:flex;flex-direction:column;box-shadow:0 2px 12px #0003;z-index:1}.idm-gl-layer .available-layers .list-box .layers-title[data-v-c4783062]{font-size:16px;font-weight:600;padding:0 10px 10px;color:var(--idm-black-8);border-bottom:var(--idm-dashed-border)}.idm-gl-layer .available-layers .list-box .layers-body[data-v-c4783062]{display:flex;flex-wrap:wrap;align-items:center;justify-content:flex-start;padding:0 10px;font-size:14px}.idm-gl-layer .available-layers .list-box .layers-body .layer[data-v-c4783062]{width:140px}.idm-gl-layer .available-layers .list-box .model-box[data-v-c4783062]{display:flex;align-items:center;justify-content:flex-start;margin:10px 0;cursor:pointer}.idm-gl-layer .available-layers .list-box .model-box span[data-v-c4783062]{padding:3px 10px;border:1px solid #cecece}.idm-gl-layer .available-layers .list-box .model-box span.active[data-v-c4783062]{color:var(--idm-white);border:1px solid var(--idm-primary-color);background:var(--idm-primary-color)}.idm-gl-layer .available-layers .list-box .model-box span[data-v-c4783062]:first-child{border-top-left-radius:5px;border-bottom-left-radius:5px}.idm-gl-layer .available-layers .list-box .model-box span[data-v-c4783062]:last-child{border-top-right-radius:5px;border-bottom-right-radius:5px;border-left:none}.tool-bars[data-v-f409772c]{transition:all .4s ease-in-out}.tool-bars i[data-v-f409772c]{cursor:pointer;font-size:30px;color:var(--idm-white-8);text-shadow:var(--idm-text-shadow)}.tool-bars i.active[data-v-f409772c]{color:var(--idm-white)}.tool-bars span[data-v-f409772c]{cursor:pointer;font-size:12px;color:var(--idm-black-8);margin-left:4px;background:var(--idm-white-8);padding:2px 4px;border-radius:5px;box-shadow:0 2px 12px #0003}.tool-bars span.active[data-v-f409772c]{color:var(--idm-white);background:var(--idm-primary-color)}.legend-bars[data-v-6e0050df]{transition:all .4s ease-in-out;background:linear-gradient(to right,rgb(98,113,184),rgb(98,113,184),rgb(98,113,184),rgb(98,113,184),rgb(61,110,163),rgb(74,148,170),rgb(74,146,148),rgb(77,142,124),rgb(76,164,76),rgb(103,164,54),rgb(162,135,64),rgb(162,109,92),rgb(141,63,92),rgb(151,75,145),rgb(95,100,160),rgb(91,136,161),rgb(91,136,161));padding:2px 0;border-radius:10px;box-shadow:var(--idm-gl-box-shadow)}.legend-bars span[data-v-6e0050df]{font-size:12px;text-align:center;color:var(--idm-white-8);width:32px}.tool-bars[data-v-4f257fc7]{transition:all .4s ease-in-out}.tool-bars i[data-v-4f257fc7]{cursor:pointer;font-size:30px;color:var(--idm-white-8);text-shadow:var(--idm-text-shadow)}.tool-bars i.active[data-v-4f257fc7]{color:var(--idm-white)}.tool-bars span[data-v-4f257fc7]{cursor:pointer;font-size:12px;color:var(--idm-black-8);margin-left:4px;background:var(--idm-white-8);padding:2px 4px;border-radius:5px;box-shadow:0 2px 12px #0003}.tool-bars span.active[data-v-4f257fc7]{color:var(--idm-white);background:var(--idm-primary-color)}.legend-bars[data-v-ec0ae348]{transition:all .4s ease-in-out;background:linear-gradient(to right,rgb(84,170,230),rgb(84,170,230),rgb(84,170,230),rgb(84,170,230),rgb(64,127,115),rgb(58,164,58),rgb(191,182,67),rgb(197,154,68),rgb(160,70,94),rgb(138,84,166),rgb(82,113,165),rgb(84,142,152),rgb(150,181,184),rgb(195,194,194),rgb(195,194,194));padding:2px 0;border-radius:10px;box-shadow:var(--idm-gl-box-shadow)}.legend-bars span[data-v-ec0ae348]{font-size:12px;text-align:center;color:var(--idm-white);width:36px}.active-tropical[data-v-813afc6d]{bottom:unset;background:var(--idm-white-9);padding:10px;border-radius:5px;z-index:5}.active-tropical .header-box[data-v-813afc6d]{min-width:360px;margin-bottom:10px;box-sizing:border-box;color:var(--idm-black-8)}.active-tropical .header-box .close-btn[data-v-813afc6d]{position:relative;height:0px;text-align:right;font-size:22px;color:var(--idm-primary-color)}.active-tropical .header-box .main[data-v-813afc6d]{font-size:16px}.active-tropical .header-box .sub[data-v-813afc6d]{margin:3px 0;font-size:12px;color:var(--idm-info-color)}.active-tropical .main-box[data-v-813afc6d]{min-width:360px;color:var(--idm-black-8);overflow-y:auto;box-sizing:border-box;font-size:12px;z-index:4}.active-tropical .main-box .content[data-v-813afc6d]{padding:5px 0;border-radius:5px;background:var(--idm-gray-light)}.active-tropical .main-box .row[data-v-813afc6d]{width:100%;padding:4px 10px;box-sizing:border-box;display:flex;align-items:center;justify-content:space-between}.active-tropical .main-box .row .col[data-v-813afc6d]{display:flex;align-items:center;justify-content:space-between}.active-tropical .main-box .row .col label[data-v-813afc6d]{width:82px;margin-right:4px;color:var(--idm-info-color)}.active-tropical .main-box .row .col.col-24[data-v-813afc6d]{width:100%}.active-tropical .main-box .row .col.col-left[data-v-813afc6d]{width:55%}.active-tropical .main-box .row .col.col-right[data-v-813afc6d]{width:40%}.active-tropical .main-box .row .col .icon[data-v-813afc6d]{font-size:30px;color:var(--idm-black-4)}.active-tropical .main-box .row .col .icon.active[data-v-813afc6d]{color:var(--idm-primary-color)}.forecast-models[data-v-813afc6d]{display:flex;justify-content:flex-end;flex:1;margin-left:5px;flex-wrap:wrap}.forecast-models .model[data-v-813afc6d]{font-size:12px;padding:0 6px 4px;display:flex;border:1px solid var(--idm-primary-color)}.forecast-models .model span[data-v-813afc6d]{border-bottom:2px dashed var(--idm-white)}.forecast-models .model span.cma[data-v-813afc6d]{border-color:#e2ea03cc}.forecast-models .model span.jma[data-v-813afc6d]{border-color:#01d2b7cc}.forecast-models .model span.ecmwf[data-v-813afc6d]{border-color:#f582f2cc}.forecast-models .model span.ukm[data-v-813afc6d]{border-color:#f5bb47cc}.forecast-models .model span.noaa-at[data-v-813afc6d],.forecast-models .model span.noaa-ep[data-v-813afc6d]{border-color:#9758fbcc}.forecast-models .model.active[data-v-813afc6d]{border:1px solid var(--idm-primary-color);background-color:var(--idm-primary-color);color:var(--idm-white)}.forecast-models .model[data-v-813afc6d]:first-child{border-top-left-radius:4px;border-bottom-left-radius:4px}.forecast-models .model.center-child[data-v-813afc6d]{border-left:1px solid var(--idm-primary-color);border-right:1px solid var(--idm-primary-color)}.forecast-models .model[data-v-813afc6d]:last-child{border-top-right-radius:4px;border-bottom-right-radius:4px}.legend[data-v-813afc6d]{display:flex;align-items:center;color:var(--idm-info-color)}.legend .icon[data-v-813afc6d]{height:14px;width:14px;border-radius:50%;border:3px solid #fff;margin-right:3px}.legend .icon.td[data-v-813afc6d]{background-color:var(--idm-tropicals-td)}.legend .icon.ts[data-v-813afc6d]{background-color:var(--idm-tropicals-ts)}.legend .icon.sts[data-v-813afc6d]{background-color:var(--idm-tropicals-sts)}.legend .icon.ty[data-v-813afc6d]{background-color:var(--idm-tropicals-ty)}.legend .icon.sty[data-v-813afc6d]{background-color:var(--idm-tropicals-sty)}.legend .icon.supper-ty[data-v-813afc6d]{background-color:var(--idm-tropicals-super-ty)}.legend .icon.r7[data-v-813afc6d]{border:1.5px solid var(--idm-tropicals-r7)}.legend .icon.r10[data-v-813afc6d]{border:1.5px solid var(--idm-tropicals-r10)}.legend .icon.history[data-v-813afc6d]{border:none;border-radius:0;height:4px;background:var(--idm-black-5)}.legend .button[data-v-813afc6d]{cursor:pointer;padding:0 4px;border-radius:4px;border:1px solid var(--idm-primary-color);color:var(--idm-primary-color)}.more[data-v-813afc6d]{display:flex;align-items:center;justify-content:flex-end;color:var(--idm-primary-color);font-weight:700;margin-top:5px}.legend-bars[data-v-dec867b8]{transition:all .4s ease-in-out;background:linear-gradient(to right,rgba(59,126,162,0),rgb(172,210,255),rgb(172,210,255),rgb(3,248,103),rgb(14,201,3),rgb(190,226,2),rgb(248,1,1),rgb(197,5,58),rgb(197,5,58));padding:2px 0;border-radius:10px;box-shadow:var(--idm-gl-box-shadow)}.legend-bars span[data-v-dec867b8]{font-size:12px;text-align:center;color:var(--idm-white);width:35px}.legend-bars[data-v-952dee5c]{transition:all .4s ease-in-out;background:linear-gradient(to right,rgb(189,50,160),rgb(189,50,160),rgb(189,50,160),rgb(189,50,160),rgb(208,56,56),rgb(208,56,56),rgb(190,226,2),rgb(190,226,2),rgb(4,210,64),rgb(4,210,64),rgb(172,210,255),rgb(172,210,255));padding:2px 0;border-radius:10px;box-shadow:var(--idm-gl-box-shadow)}.legend-bars span[data-v-952dee5c]{font-size:12px;text-align:center;color:var(--idm-white);width:40px}.legend-bars[data-v-67e5094b]{transition:all .4s ease-in-out;background:linear-gradient(to right,rgb(95,143,197),rgb(95,143,197),rgb(95,143,197),rgb(95,143,197),rgb(80,140,62),rgb(121,146,28),rgb(171,161,14),rgb(223,177,6),rgb(243,150,6),rgb(236,95,21),rgb(190,65,18),rgb(138,43,10),rgb(138,43,10));padding:2px 0;border-radius:10px;box-shadow:var(--idm-gl-box-shadow)}.legend-bars span[data-v-67e5094b]{font-size:12px;text-align:center;color:var(--idm-white);width:32px}.legend-bars[data-v-389ea886]{transition:all .4s ease-in-out;background:linear-gradient(to right,rgb(149,137,211),rgb(149,137,211),rgb(149,137,211),rgb(149,137,211),rgb(150,209,216),rgb(129,204,197),rgb(103,180,186),rgb(95,143,197),rgb(80,140,62),rgb(121,146,28),rgb(171,161,14),rgb(223,177,6),rgb(243,150,6),rgb(236,95,21),rgb(190,65,18),rgb(138,43,10),rgb(138,43,10));padding:2px 0;border-radius:10px;box-shadow:var(--idm-gl-box-shadow)}.legend-bars span[data-v-389ea886]{font-size:12px;text-align:center;color:var(--idm-white);width:32px}.legend-bars[data-v-db805141]{transition:all .4s ease-in-out;background:linear-gradient(to right,rgb(76,165,228),rgb(76,165,228),rgb(76,165,228),rgb(76,165,228),rgb(103,180,186),rgb(129,204,197),rgb(150,209,216),rgb(180,209,216));padding:2px 0;border-radius:10px;box-shadow:var(--idm-gl-box-shadow)}.legend-bars span[data-v-db805141]{font-size:12px;text-align:center;color:var(--idm-white);width:40px}.point-meteo[data-v-fb5b12d6]{bottom:unset}.point-meteo .meteo-box[data-v-fb5b12d6]{position:absolute;color:var(--idm-black-8);top:0;left:5px;padding:10px;background-color:var(--idm-white-9);-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px);width:260px;border-top-right-radius:5px;border-bottom-right-radius:5px;z-index:2}.point-meteo .meteo-box .header-box[data-v-fb5b12d6]{margin-bottom:10px;box-sizing:border-box;color:var(--idm-black-8)}.point-meteo .meteo-box .header-box .close[data-v-fb5b12d6]{position:relative;height:0px;text-align:right;font-size:22px;color:var(--idm-primary-color)}.point-meteo .meteo-box .header-box .main[data-v-fb5b12d6]{font-size:16px}.point-meteo .meteo-box .header-box .sub[data-v-fb5b12d6]{margin:3px 0;font-size:12px;color:var(--idm-info-color)}.point-meteo .meteo-box .main-box[data-v-fb5b12d6]{padding:0 5px;border-radius:5px;background:var(--idm-gray-light)}.point-meteo .meteo-box .main-box .flex-space[data-v-fb5b12d6]{padding:3px 0;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid var(--idm-white);box-sizing:border-box}.point-meteo .meteo-box .main-box .flex-space label[data-v-fb5b12d6]{color:var(--idm-black-8)}.point-meteo .meteo-box .main-box .flex-space label[data-v-fb5b12d6]:after{content:":"}.point-meteo .meteo-box .main-box .flex-space[data-v-fb5b12d6]:last-child{border-bottom:none}.point-meteo .meteo-box .more[data-v-fb5b12d6]{margin-top:5px;color:var(--idm-primary-color);font-weight:700;cursor:pointer}.point-meteo[data-v-fb5b12d6]:after{display:block;width:8px;height:8px;border-radius:50%;content:"";background-color:var(--idm-white-9);margin-bottom:360px}.point-meteo[data-v-fb5b12d6]:before{display:block;content:"";width:2px;height:360px;margin-left:3px;border-left:2px solid var(--idm-white-9)}#zone-info[data-v-c0864afc]{position:absolute;background:var(--idm-white);color:var(--idm-black-8);z-index:10}#zone-info .rich-context[data-v-c0864afc]{width:100vw;height:100vh;padding:10px;font-size:14px;font-weight:400;color:var(--idm-black-8)!important;overflow-y:auto}#zone-info .close[data-v-c0864afc]{position:relative;color:var(--idm-info-color-light2);font-size:24px;height:0;text-align:right;margin:5px 5px 0 0}#port-info[data-v-30e545a2]{position:absolute;background:var(--idm-white);color:var(--idm-black-8);padding:10px;border-radius:6px;cursor:default;z-index:1000;height:fit-content}#port-info .port-box[data-v-30e545a2]{margin-top:10px;max-width:240px}#port-info .port-box .flex-start[data-v-30e545a2]{line-height:2}#port-info .port-box .flex-start label[data-v-30e545a2]{color:var(--idm-info-color);margin-right:10px;width:50px}#port-info .port-box .flex-start span[data-v-30e545a2]{flex:1;flex-wrap:wrap;text-align:justify-all;color:var(--idm-black-8)}#port-info .port-box .flex-start span.link[data-v-30e545a2]{cursor:pointer;text-decoration:underline}#port-info .port-box .flex-start span.link[data-v-30e545a2]:hover{font-weight:600}#port-info .close[data-v-30e545a2]{position:relative;text-align:right;height:0px;color:var(--idm-info-color-light2);font-size:24px}.lat-lng-tip[data-v-51cc4052]{position:absolute;padding:2px 10px;border-radius:5px;color:var(--idm-primary-color);font-size:12px;top:unset;background:var(--idm-white);box-shadow:0 2px 12px #0003;transition:all .4s ease-in-out}.menu-bar-box[data-v-ab627b83]{display:flex;flex-direction:column;align-items:flex-end;justify-content:flex-start;transition:all .4s ease-in-out}.menu-bar-box .bar-item[data-v-ab627b83]{position:relative;margin-bottom:15px;border-radius:5px;background:var(--idm-white);cursor:pointer;box-shadow:0 2px 12px #0003}.menu-bar-box .bar-item .menu-icon[data-v-ab627b83]{padding:8px;display:flex}.menu-bar-box .bar-item .menu-icon[data-v-ab627b83]:first-child{border-top-left-radius:5px;border-top-right-radius:5px}.menu-bar-box .bar-item .menu-icon[data-v-ab627b83]:last-child{border-bottom-left-radius:5px;border-bottom-right-radius:5px}.menu-bar-box .bar-item .menu-icon span[data-v-ab627b83]{font-size:18px;font-weight:500;color:var(--idm-black-8)}.menu-bar-box .bar-item .menu-icon.active[data-v-ab627b83]{background:var(--idm-primary-color)}.menu-bar-box .bar-item .menu-icon.active span[data-v-ab627b83]{color:var(--idm-white)}:root{--idm-tropicals-td: #03f869;--idm-tropicals-ts: #f2f202;--idm-tropicals-sts: #ff9100;--idm-tropicals-ty: #f44336;--idm-tropicals-sty: #c604a4;--idm-tropicals-super-ty: #6b05bb;--idm-tropicals-r7: #ff9100;--idm-tropicals-r10: #f44336;--idm-gl-box-shadow-color: rgba(0, 0, 0, .5);--idm-gl-box-shadow: 0px 12px 32px 4px rgba(0, 0, 0, .04), 0px 8px 20px rgba(0, 0, 0, .08);--idm-gl-box-shadow-light: 0px 0px 12px rgba(0, 0, 0, .12);--idm-gl-box-shadow-lighter: 0px 0px 6px rgba(0, 0, 0, .12);--idm-gl-box-shadow-dark: 0px 16px 48px 16px rgba(0, 0, 0, .08), 0px 12px 32px rgba(0, 0, 0, .12), 0px 8px 16px -8px rgba(0, 0, 0, .16)}.point-marker{pointer-events:none!important}.point-marker .marker-circle{pointer-events:inherit;width:12px;height:12px;border-radius:50%;border:2px solid var(--idm-white);background:var(--idm-danger-color)}.point-marker .marker-circle:hover{cursor:pointer}.point-marker.closed{pointer-events:auto!important}.point-summary-marker,.point-contextmenu-marker{color:var(--idm-white);font-size:12px;background:var(--idm-danger-color);border:1px solid var(--idm-white);padding:2px 5px;border-radius:5px;cursor:pointer}.point-summary-marker .marker-close,.point-contextmenu-marker .marker-close{pointer-events:auto;position:absolute;background:var(--idm-danger-color);border:1px dashed var(--idm-white);display:flex;align-items:center;justify-content:center;width:20px;height:20px;right:-17px;top:-17px;cursor:pointer;font-size:20px}.tip-marker{color:var(--idm-white);font-size:12px;text-shadow:var(--idm-text-shadow);background-color:var(--idm-black-6);padding:2px 5px;border-radius:5px;cursor:pointer}.tip-marker .marker-label{border-bottom:var(--idm-dashed-border)}.tip-marker .marker-label:last-child{border-bottom:none}.tip-marker .marker-label b{font-weight:600;color:var(--idm-danger-color)}.hurricane-hourly-marker .iconfont{font-size:34px!important;color:var(--idm-danger-color)}.hurricane-hourly-marker svg{height:34px;width:34px}.hurricane-hourly-marker .center{box-sizing:border-box;display:flex;align-items:center;justify-content:center}.hurricane-hourly-marker .center.north{animation:anticlockwise 2s linear infinite}.hurricane-hourly-marker .center.south{animation:clockwise 2s linear infinite}@keyframes clockwise{0%{transform:rotate(0)}to{transform:rotate(360deg)}}@keyframes anticlockwise{0%{transform:rotate(0)}to{transform:rotate(-360deg)}}
|