@idmwx/idmui-gl2-h5
Version:
idm webgl
906 lines (872 loc) • 288 kB
JavaScript
var Qe = Object.defineProperty;
var et = (a, e, t) => e in a ? Qe(a, e, { enumerable: !0, configurable: !0, writable: !0, value: t }) : a[e] = t;
var ee = (a, e, t) => (et(a, typeof e != "symbol" ? e + "" : e, t), t);
import { LayerHelper as $e, CompanyHelper as tt } from "@idm-plugin/tag";
import { openBlock as L, createElementBlock as D, createElementVNode as p, normalizeStyle as pe, normalizeClass as ke, Fragment as Ue, renderList as Ge, toDisplayString as W, createCommentVNode as E, createStaticVNode as Pe, withDirectives as De, createTextVNode as at, vShow as Ae, resolveComponent as $, createVNode as Ne, mergeProps as U, createBlock as q } from "vue";
import * as T from "@turf/turf";
import it from "@mapbox/sphericalmercator";
import ge from "moment";
import Be from "mapbox-gl";
import { TropicalHelper as Ze, LngLatHelper as K, LaneHelper as ze } from "@idm-plugin/geo";
import Ie from "axios";
import { Meteo2Assist as He } from "@idm-plugin/meteo";
const N = (a, e) => {
const t = a.__vccOpts || a;
for (const [s, i] of e)
t[s] = i;
return t;
}, st = {
name: "IdmGlLayer",
props: {
map: {
type: Object
},
top: {
type: String,
default: "30px"
},
bottom: {
type: String,
default: "340px"
},
right: {
type: String,
default: "0px"
},
importReportLayers: {
type: Boolean,
default: !1
}
},
emits: ["weather", "other", "coordinate", "measure", "point", "3d", "particle"],
data() {
return {
showLayers: !1,
showPinLayers: !1,
source: "",
weatherLayers: [],
activeWeatherLayers: [],
autoActive: !0,
otherLayers: [],
layers: {
weather: [...$e.WEATHER_LAYERS],
other: [...$e.OTHER_LAYERS]
},
weatherLayersCache: "weatherLayersCache",
autoActiveCache: "autoActiveCache",
otherLayersCache: "otherLayersCache",
sourceCache: "defaultSourceCache",
showCoord: !1,
showMeasure: !1,
showPoint: !1,
show3d: !1,
version: {
v: "0.0.4",
k: "glCacheVersion"
},
weatherLayerImgUrl: "https://osshz.idmwx.com/layers/weather/icon/",
isParticleActive: !1,
maxLayerLength: 4
};
},
computed: {
computeLayerClass() {
return function(a, e) {
return a.enabled ? e.some((t) => t.key === a.key) ? "layer-option active" : "layer-option" : "layer-option disabled";
};
},
computeLayerPngClass() {
return function(a, e) {
return e.some((t) => t.key === a.key) ? "layer-png-option active" : "layer-png-option";
};
},
computeLayerSwitch() {
return function(a, e) {
return e.some((t) => t.key === a.key) ? "layer-switch-option active" : "layer-switch-option";
};
},
computeIsWindActive() {
return this.activeWeatherLayers.some((a) => a.key === "wind" || a.key === "current");
}
},
watch: {},
mounted() {
const a = localStorage.getItem(this.version.k);
this.version.v !== a && (localStorage.removeItem(this.weatherLayersCache), localStorage.setItem(this.version.k, this.version.v));
let e = localStorage.getItem(this.autoActiveCache);
this.autoActive = e !== "false", e = localStorage.getItem(this.weatherLayersCache);
let t = "";
this.importReportLayers ? t = JSON.parse(
'[{"weight":1,"name":"Wind","key":"wind","enabled":true,"type":"json","particle":true}, { "weight": 32, "name": "Current Direction", "key": "current-direction", "vendor": "cmems", "partly": true, "enabled": true, "type": "json" },{"weight": 16, "name": "Sig Waves", "key": "sig-wave-height", "h5": true, "enabled": true, "type": "json"}]'
) : t = JSON.parse(e || '[{"weight":256,"name":"Tropicals","key":"tropicals","enabled":true,"type":"json"}]'), this.weatherLayers = t, this.autoActive && (this.activeWeatherLayers = [...t]), e = localStorage.getItem(this.otherLayersCache), this.importReportLayers ? t = [] : t = JSON.parse(e || "[]"), this.otherLayers = t, e = localStorage.getItem(this.sourceCache), this.source = e || "GFS", this.handleConfirm();
},
methods: {
handleConfirm() {
this.$emit("weather", this.weatherLayers, this.activeWeatherLayers, this.source), this.$emit("other", this.otherLayers), localStorage.setItem(this.autoActiveCache, this.autoActive), localStorage.setItem(this.sourceCache, this.source);
},
handleWeatherLayerPick(a) {
this.weatherLayers.some((e) => e.key === a.key) ? (this.weatherLayers = this.weatherLayers.filter((e) => e.key !== a.key), this.activeWeatherLayers = this.activeWeatherLayers.filter((e) => e.key !== a.key)) : this.weatherLayers.length <= this.maxLayerLength && a.enabled && (["png", "jpg"].includes(a.type) && (this.weatherLayers = this.weatherLayers.filter((e) => e.type === "json" && !["wind", "current"].includes(e.key)), this.activeWeatherLayers = this.activeWeatherLayers.filter((e) => e.type === "json" && !["wind", "current"].includes(e.key))), ["wind", "current"].includes(a.key) && (this.weatherLayers = this.weatherLayers.filter((e) => e.type === "json" && !["wind", "current"].includes(e.key)), this.activeWeatherLayers = this.activeWeatherLayers.filter((e) => e.type === "json" && !["wind", "current"].includes(e.key))), this.weatherLayers.push(a), this.activeWeatherLayers.push(a)), localStorage.setItem(this.weatherLayersCache, JSON.stringify(this.weatherLayers)), this.handleConfirm();
},
handleActiveWeatherLayerPick(a) {
if (this.activeWeatherLayers.some((e) => e.key === a.key))
this.activeWeatherLayers = this.activeWeatherLayers.filter((e) => e.key !== a.key);
else if (a.enabled) {
this.activeWeatherLayers.push(a);
for (const e of this.weatherLayers)
a.weight > e.weight && a.weight & e.weight && this.activeWeatherLayers.push(e);
}
this.$emit("weather", this.weatherLayers, this.activeWeatherLayers, this.source);
},
handleOtherLayerPick(a) {
this.otherLayers.some((e) => e.key === a.key) ? this.otherLayers = this.otherLayers.filter((e) => e.key !== a.key) : a.enabled && this.otherLayers.push(a), localStorage.setItem(this.otherLayersCache, JSON.stringify(this.otherLayers)), this.handleConfirm();
},
handleCoordToggle() {
this.showCoord = !this.showCoord, this.$emit("coordinate", this.showCoord);
},
handlePointToggle() {
this.showPoint = !this.showPoint, this.$emit("point", this.showPoint);
},
handleMeasureToggle() {
this.showMeasure = !this.showMeasure, this.$emit("measure", this.showMeasure);
},
handle3DToggle() {
this.show3d = !this.show3d, this.$emit("3d", this.show3d);
},
handleParticlePick() {
this.isParticleActive = !this.isParticleActive, this.activeWeatherLayers.some((a) => a.key === "wind") ? this.$emit("particle", { particle: this.isParticleActive, key: "wind", weight: 1 }) : this.activeWeatherLayers.some((a) => a.key === "current") && this.$emit("particle", { particle: this.isParticleActive, key: "current", weight: 96 });
},
handleSourceToggle(a) {
this.source = a, this.handleConfirm();
}
}
}, rt = {
key: 0,
class: "idm-gl-layer"
}, ot = { class: "bar-item layer-bars" }, nt = { class: "bar-item tool-bars" }, lt = { class: "main" }, ht = { class: "content" }, dt = { class: "weather-layers" }, ct = { class: "body" }, pt = ["onClick"], mt = ["src"], ut = { class: "text" }, ft = { class: "other-layers" }, gt = { class: "body" }, vt = { class: "text" }, yt = ["onClick"], wt = ["onClick"], bt = { class: "layer-switch-option" }, _t = { class: "model-box" };
function Lt(a, e, t, s, i, r) {
var n;
return t.importReportLayers ? E("", !0) : (L(), D("div", rt, [
p("div", {
class: "menu-bar-box",
style: pe({ top: t.top, right: t.right })
}, [
p("div", ot, [
p("div", {
class: ke(i.showLayers ? "menu-icon active" : "menu-icon"),
onClick: e[0] || (e[0] = (o) => i.showLayers = !i.showLayers)
}, e[7] || (e[7] = [
p("span", { class: "iconfont" }, "", -1)
]), 2)
]),
p("div", nt, [
p("div", {
class: ke(i.showMeasure ? "menu-icon active" : "menu-icon"),
onClick: e[1] || (e[1] = (...o) => r.handleMeasureToggle && r.handleMeasureToggle(...o))
}, e[8] || (e[8] = [
p("span", { class: "iconfont" }, "", -1)
]), 2),
p("div", {
class: ke(i.showPoint ? "menu-icon active" : "menu-icon"),
onClick: e[2] || (e[2] = (...o) => r.handlePointToggle && r.handlePointToggle(...o))
}, e[9] || (e[9] = [
p("span", { class: "iconfont" }, "", -1)
]), 2),
p("div", {
class: ke(i.showCoord ? "menu-icon active" : "menu-icon"),
onClick: e[3] || (e[3] = (...o) => r.handleCoordToggle && r.handleCoordToggle(...o))
}, e[10] || (e[10] = [
p("span", { class: "iconfont" }, "", -1)
]), 2)
])
], 4),
p("div", {
class: "all-layers-box",
style: pe({ bottom: i.showLayers ? 0 : "-105vh" })
}, [
p("div", {
class: "mask",
onClick: e[4] || (e[4] = (o) => i.showLayers = !1)
}),
p("div", lt, [
p("div", ht, [
p("div", dt, [
e[12] || (e[12] = p("div", {
class: "title",
style: {}
}, [
p("div", null, "Weather Layers")
], -1)),
p("div", ct, [
(L(!0), D(Ue, null, Ge(i.layers.weather.filter((o) => o.h5 && o.enabled), (o) => (L(), D("div", {
key: o.key,
class: ke(r.computeLayerPngClass(o, i.weatherLayers)),
onClick: (l) => r.handleWeatherLayerPick(o)
}, [
e[11] || (e[11] = p("span", { class: "iconfont pin-icon" }, "", -1)),
p("img", {
class: "layer-png",
src: `${i.weatherLayerImgUrl}${o.key}.jpeg`
}, null, 8, mt),
p("div", ut, W(o.name), 1)
], 10, pt))), 128))
])
]),
p("div", ft, [
e[14] || (e[14] = p("div", { class: "title" }, "Display on Map", -1)),
p("div", gt, [
(L(!0), D(Ue, null, Ge((n = i.layers.other) == null ? void 0 : n.filter((o) => o.h5 && o.enabled && o.key !== "enc"), (o) => (L(), D("div", {
key: o.key,
class: ke(r.computeLayerSwitch(o, i.otherLayers))
}, [
p("span", vt, W(o.name), 1),
p("span", {
class: "iconfont switch-on",
onClick: (l) => r.handleOtherLayerPick(o)
}, "", 8, yt),
p("span", {
class: "iconfont switch-off",
onClick: (l) => r.handleOtherLayerPick(o)
}, "", 8, wt)
], 2))), 128)),
p("div", bt, [
e[13] || (e[13] = p("span", { class: "text" }, "Forecast Model", -1)),
p("div", _t, [
p("span", {
class: ke(i.source === "GFS" ? "text active" : "text"),
onClick: e[5] || (e[5] = (o) => r.handleSourceToggle("GFS"))
}, "GFS", 2),
p("span", {
class: ke(i.source === "CMEMS" ? "text active" : "text"),
onClick: e[6] || (e[6] = (o) => r.handleSourceToggle("CMEMS"))
}, "ECMWF", 2)
])
])
])
])
])
])
], 4)
]));
}
const xt = /* @__PURE__ */ N(st, [["render", Lt], ["__scopeId", "data-v-e63e3e9a"]]), X = "#fff", qe = {
"000kts": `<svg viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg" width="200" height="200"><path d="M512 245.76c-146.80064 0-266.24 119.43936-266.24 266.24s119.43936 266.24 266.24 266.24 266.24-119.43936 266.24-266.24-119.43936-266.24-266.24-266.24z m0 40.96c124.64128 0 225.28 100.63872 225.28 225.28s-100.63872 225.28-225.28 225.28-225.28-100.63872-225.28-225.28 100.63872-225.28 225.28-225.28z m0 81.92c-78.9504 0-143.36 64.4096-143.36 143.36s64.4096 143.36 143.36 143.36 143.36-64.4096 143.36-143.36-64.4096-143.36-143.36-143.36z m0 40.96c56.79104 0 102.4 45.60896 102.4 102.4s-45.60896 102.4-102.4 102.4-102.4-45.60896-102.4-102.4 45.60896-102.4 102.4-102.4z" fill="${X}"></path></svg>`,
"002kts": `<svg viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg" width="200" height="200"><path d="M638 835.99999999c0-63.288-47.10599999-115.524-108-124.30799999L530.00000001 62l-36.00000002 0 1e-8 649.692c-60.894 8.784-108 61.02-108 124.30799999 0 69.39 56.61 126 126 126s126-56.61 126-126z m-36 1e-8c0 49.91399999-40.086 90-90 90s-90-40.086-90-90 40.086-90 90-90 90 40.086 90 90z" fill="${X}"></path></svg>`,
"005kts": `<svg viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg" width="200" height="200"><path d="M702.116 166.634l-20.232-29.25000001L530 243.674 530.00000001 62l-36.00000002 0 1e-8 649.692c-60.894 8.784-108 61.02-108 124.30799999 0 69.39 56.61 126 126 126s126-56.61 126-126c0-63.288-47.10599999-115.524-108-124.30799999L530 287zM602 836c0 49.91400001-40.086 90-90 90s-90-40.086-90-90 40.086-90 90-90 90 40.086 90 90z" fill="${X}"></path></svg>`,
"010kts": `<svg viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg" width="200" height="200"><path d="M702.116 94.634L681.88400001 65.384l-180.00000001 126-7.884 5.04 0 515.268c-60.894 8.784-108 61.02-108 124.308 0 69.39 56.61 126 126 126s126-56.61 126-126c0-63.28800001-47.106-115.524-108-124.308L530 215zM602 836c0 49.91399999-40.086 90-90 90s-90-40.086-90-90 40.086-90 90-90 90 40.086 90 90z" fill="${X}" ></path></svg>`,
"015kts": `<svg viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg" width="200" height="200"><path d="M702.116 94.634L681.88400001 65.384l-180.00000001 126-7.884 5.04 0 515.268c-60.894 8.784-108 61.02-108 124.308 0 69.39 56.61 126 126 126s126-56.61 126-126c0-63.28800001-47.106-115.524-108-124.308L530 322.99999999l82.134-57.38399999-20.25-29.232L530 279.692 530 215zM602 836c0 49.91399999-40.086 90-90 90s-90-40.086-90-90 40.086-90 90-90 90 40.086 90 90z" fill="${X}"></path></svg>`,
"020kts": `<svg viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg" width="200" height="200"><path d="M702.116 94.634L681.88400001 65.384l-180.00000001 126-7.884 5.04 0 515.268c-60.894 8.784-108 61.02-108 124.308 0 69.39 56.61 126 126 126s126-56.61 126-126c0-63.28800001-47.106-115.524-108-124.308L530 322.99999999l172.134-120.38399999-20.268-29.24999999L530 279.71 530 215zM602 836c0 49.91399999-40.086 90-90 90s-90-40.086-90-90 40.086-90 90-90 90 40.086 90 90z" fill="${X}"></path></svg>`,
"025kts": `<svg viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg" width="200" height="200"><path d="M702.116 94.634L681.88400001 65.384l-180.00000001 126-7.884 5.04 0 515.268c-60.894 8.784-108 61.02-108 124.308 0 69.39 56.61 126 126 126s126-56.61 126-126c0-63.28800001-47.106-115.524-108-124.308L529.99999999 431l82.13400001-57.384-20.25-29.25L530 387.71 530 322.99999999l172.134-120.38399999-20.268-29.24999999L530 279.71 530 215zM602 836c0 49.91399999-40.086 90-90 90s-90-40.086-90-90 40.086-90 90-90 90 40.086 90 90z" fill="${X}"></path></svg>`,
"030kts": `<svg viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg" width="200" height="200"><path d="M702.116 94.634L681.88400001 65.384l-180.00000001 126-7.884 5.04 0 515.268c-60.894 8.784-108 61.02-108 124.308 0 69.39 56.61 126 126 126s126-56.61 126-126c0-63.28800001-47.106-115.524-108-124.308L529.99999999 431l172.13400001-120.384-20.26800001-29.232L530 387.674 530 322.99999999l172.134-120.38399999-20.268-29.24999999L530 279.71 530 215zM602 836c0 49.91399999-40.086 90-90 90s-90-40.086-90-90 40.086-90 90-90 90 40.086 90 90z" fill="${X}"></path></svg>`,
"035kts": `<svg viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg" width="200" height="200"><path d="M702.116 94.634L681.88400001 65.384l-180.00000001 126-7.884 5.04 0 515.268c-60.894 8.80199999-108 61.056-108 124.308 0 69.372 56.628 126 126 126s126-56.628 126-126c0-63.252-47.106-115.506-108-124.308L530 539l82.134-57.38400001-20.25-29.24999999L529.99999999 495.71 529.99999999 431l172.13400001-120.384-20.26800001-29.232L530 387.674 530 322.99999999l172.134-120.38399999-20.268-29.24999999L530 279.71 530 215l172.134-120.384zM602 836c0 49.91399999-40.086 90-90 90s-90-40.086-90-90 40.086-90 90-90 90 40.086 90 90z" fill="${X}"></path></svg>`,
"040kts": `<svg viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg" width="200" height="200"><path d="M702.116 94.634L681.88400001 65.384l-180.00000001 126-7.884 5.04 0 515.268c-60.894 8.784-108 61.02-108 124.308 0 69.39 56.61 126 126 126s126-56.61 126-126c0-63.28800001-47.106-115.524-108-124.308L530 539l172.134-120.384-20.268-29.25L529.99999999 495.71 529.99999999 431l172.13400001-120.384-20.26800001-29.232L530 387.674 530 322.99999999l172.134-120.38399999-20.268-29.24999999L530 279.71 530 215zM602 836c0 49.91399999-40.086 90-90 90s-90-40.086-90-90 40.086-90 90-90 90 40.086 90 90z" fill="${X}"></path></svg>`,
"045kts": `<svg viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg" width="200" height="200"><path d="M702.116 94.634L681.88400001 65.384l-180.00000001 126-7.884 5.04 0 515.268c-60.894 8.784-108 61.02-108 124.308 0 69.39 56.61 126 126 126s126-56.61 126-126c0-63.28800001-47.106-115.524-108-124.308L530 647l82.13400001-57.384-20.25000001-29.25L530 603.71 530 539l172.134-120.384-20.268-29.25L529.99999999 495.71 529.99999999 431l172.13400001-120.384-20.26800001-29.232L530 387.674 530 322.99999999l172.134-120.38399999-20.268-29.24999999L530 279.71 530 215zM602 836c0 49.91399999-40.086 90-90 90s-90-40.086-90-90 40.086-90 90-90 90 40.086 90 90z" fill="${X}"></path></svg>`,
"050kts": `<svg viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg" width="200" height="200"><path d="M749.366 62L494 62l0 649.692c-60.894 8.784-108 61.02-108 124.308 0 69.39 56.61 126 126 126s126-56.61 126-126c0-63.28800001-47.106-115.524-108-124.308L530 215l172.134-120.384zM602 836c0 49.91399999-40.086 90-90 90s-90-40.086-90-90 40.086-90 90-90 90 40.086 90 90z" fill="${X}" ></path></svg>`,
"055kts": `<svg viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg" width="200" height="200"><path d="M749.366 62L494 62l0 649.692c-60.894 8.784-108 61.02-108 124.308 0 69.39 56.61 126 126 126s126-56.61 126-126c0-63.28800001-47.106-115.524-108-124.308L530 322.99999999l82.134-57.38399999-20.25-29.232L530 279.692 530 215l172.134-120.384zM602 836c0 49.91399999-40.086 90-90 90s-90-40.086-90-90 40.086-90 90-90 90 40.086 90 90z" fill="${X}" ></path></svg>`,
"060kts": `<svg viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg" width="200" height="200"><path d="M749.366 62L494 62l0 649.692c-60.894 8.784-108 61.02-108 124.308 0 69.39 56.61 126 126 126s126-56.61 126-126c0-63.28800001-47.106-115.524-108-124.308L530 322.99999999l135.558-94.49999999-20.25000001-29.808-115.30799999 81L530 215l172.134-120.384zM602 836c0 49.91399999-40.086 90-90 90s-90-40.086-90-90 40.086-90 90-90 90 40.086 90 90z" fill="${X}" ></path></svg>`,
"065kts": `<svg viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg" width="200" height="200"><path d="M749.096 62L494 62l1e-8 649.44c-60.894 8.82-108 61.308-108.00000001 124.56 0 69.372 56.628 126 126 126s126-56.628 126-126c0-63.252-47.106-115.74-108.00000001-124.56L530 431.36l82.332-57.636-20.664-29.448L530 387.44l0-64.08 135.774-95.004-20.646-29.484L530 279.44 529.99999999 215.378 749.096 62zM602 836c0 49.932-40.068 90-90 90s-90-40.068-90-90 40.068-90 90-90 90 40.068 90 90z" fill="${X}" ></path></svg>`,
"070kts": `<svg viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg" width="200" height="200"><path d="M749.096 62L494 62l1e-8 649.44c-60.87599999 8.82-108 61.308-108.00000001 124.56 0 69.372 56.628 126 126 126s126-56.628 126-126c0-63.252-47.124-115.74-108.00000001-124.56L530 431.36l135.774-95.004-20.646-29.48399999L530 387.44l0-64.08 135.774-95.004-20.646-29.484L530 279.44 529.99999999 215.378 749.096 62zM602 836c0 49.91399999-40.086 90-90 90s-90-40.086-90-90 40.086-90 90-90 90 40.086 90 90z" fill="${X}"></path></svg>`,
"075kts": `<svg viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg" width="200" height="200"><path d="M749.096 62L494 62l1e-8 649.44c-60.87599999 8.82-108 61.308-108.00000001 124.56 0 69.372 56.628 126 126 126s126-56.628 126-126c0-63.252-47.124-115.74-108.00000001-124.56l0-172.08 82.33200001-57.636-20.664-29.448L530 495.44l0-64.08 135.774-95.004-20.646-29.48399999L530 387.44l0-64.08 135.774-95.004-20.646-29.484L530 279.44 529.99999999 215.378 749.096 62zM602 836c0 49.91399999-40.086 90-90 90s-90-40.086-90-90 40.086-90 90-90 90 40.086 90 90z" fill="${X}"></path></svg>`,
"080kts": `<svg viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg" width="200" height="200"><path d="M749.096 62L494 62l1e-8 649.44c-60.87599999 8.82-108 61.308-108.00000001 124.56 0 69.372 56.628 126 126 126s126-56.628 126-126c0-63.252-47.124-115.74-108.00000001-124.56l0-172.08 135.774-95.004-20.64599999-29.484L530 495.44l0-64.08 135.774-95.004-20.646-29.48399999L530 387.44l0-64.08 135.774-95.004-20.646-29.484L530 279.44 529.99999999 215.378 749.096 62zM602 836c0 49.91399999-40.086 90-90 90s-90-40.086-90-90 40.086-90 90-90 90 40.086 90 90z" fill="${X}"></path></svg>`,
"085kts": `<svg viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg" width="200" height="200"><path d="M749.096 62L494 62l1e-8 649.44c-60.87599999 8.82-108 61.308-108.00000001 124.56 0 69.372 56.628 126 126 126s126-56.628 126-126c0-63.252-47.124-115.74-108.00000001-124.56l1e-8-64.08 82.332-57.636-20.664-29.44800001L529.99999999 603.44l0-64.08 135.774-95.004-20.64599999-29.484L530 495.44l0-64.08 135.774-95.004-20.646-29.48399999L530 387.44l0-64.08 135.774-95.004-20.646-29.484L530 279.44 529.99999999 215.378 749.096 62zM602 836c0 49.91399999-40.086 90-90 90s-90-40.086-90-90 40.086-90 90-90 90 40.086 90 90z" fill="${X}"></path></svg>`,
"090kts": `<svg viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg" width="200" height="200"><path d="M749.096 62L494 62l1e-8 649.44c-60.87599999 8.82-108 61.308-108.00000001 124.56 0 69.372 56.628 126 126 126s126-56.628 126-126c0-63.252-47.124-115.74-108.00000001-124.56l1e-8-64.08 135.774-95.004-20.646-29.484L529.99999999 603.44l0-64.08 135.774-95.004-20.64599999-29.484L530 495.44l0-64.08 135.774-95.004-20.646-29.48399999L530 387.44l0-64.08 135.774-95.004-20.646-29.484L530 279.44 529.99999999 215.378 749.096 62zM602 836c0 49.91399999-40.086 90-90 90s-90-40.086-90-90 40.086-90 90-90 90 40.086 90 90z" fill="${X}"></path></svg>`,
"095kts": `<svg viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg" width="200" height="200"><path d="M749.096 62L494 62l1e-8 649.44c-60.87599999 8.82-108 61.308-108.00000001 124.56 0 69.372 56.628 126 126 126s126-56.628 126-126c0-63.252-47.124-115.74-108.00000001-124.56l1e-8-46.08 82.332-57.636-20.664-29.448L530 621.44l0-46.08 135.774-95.004-20.64600001-29.484L530 531.44l0-46.08 135.774-95.004-20.646-29.484L529.99999999 441.44l0-46.08 135.774-95.004-20.64599999-29.484L530 351.44l0-46.08 135.774-95.004-20.646-29.48400001L530 261.44 529.99999999 215.378 749.096 62zM602 836c0 49.91399999-40.086 90-90 90s-90-40.086-90-90 40.086-90 90-90 90 40.086 90 90z" fill="${X}" ></path></svg>`,
"100kts": `<svg viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg" width="200" height="200"><path d="M749.366 62L494 62l0 649.692c-60.894 8.784-108 61.02-108 124.308 0 69.39 56.61 126 126 126s126-56.61 126-126c0-63.28800001-47.106-115.524-108-124.308L530 360.116 746 206l-203.058 0 159.174-111.384zM602 836c0 49.91399999-40.086 90-90 90s-90-40.086-90-90 40.086-90 90-90 90 40.086 90 90z" fill="${X}" ></path></svg>`,
"105kts": `<svg viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg" width="200" height="200"><path d="M749.366 62L494 62l0 649.692c-60.894 8.784-108 61.02-108 124.308 0 69.39 56.61 126 126 126s126-56.61 126-126c0-63.28800001-47.106-115.524-108-124.308L530 467l135.558-94.5-20.25000001-29.808-115.30799999 81 0-63.576L746 206l-203.058 0 159.174-111.384zM602 836c0 49.91399999-40.086 90-90 90s-90-40.086-90-90 40.086-90 90-90 90 40.086 90 90z" fill="${X}" ></path></svg>`
};
const Ct = {
name: "IdmWindBarb",
props: {
map: {
type: Object
},
wind: {
type: Object
},
beforeLayer: {
type: String
},
left: {
type: String,
default: "10px"
},
bottom: {
type: String,
default: "280px"
},
right: {
type: String,
default: "10px"
},
showParticle: {
type: Boolean,
default: !1
},
importReportLayers: {
type: Boolean,
default: !1
}
},
emits: ["particle"],
data() {
return {
source: "wind-barb-source",
windSvg: qe,
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: T.featureCollection([]),
showFeather: !1
};
},
watch: {
"wind.version": {
handler() {
var a;
(a = this.wind) != null && a.active && this.showFeather ? this.handleRender() : this.handleClear();
},
deep: !0
},
showParticle: {
handler() {
this.showFeather = !this.showParticle;
}
},
showFeather: {
handler() {
var a, e;
this.handleParticle(), this.handleToggle(), this.showFeather && ((e = (a = this.map) == null ? void 0 : a.getLayer("grayland")) == null || e.setPaintProperty("raster-color", "#bbbfc2"));
}
},
importReportLayers: {
handler() {
this.importReportLayers && setTimeout(() => {
this.showFeather = !0;
}, 200);
},
immediate: !0
}
},
methods: {
handleParticle() {
this.$emit("particle", { particle: !this.showFeather, key: "wind", weight: 1 });
},
handleRender() {
var a, e, t, s;
if (!this.map)
setTimeout(() => {
this.handleRender();
}, 500);
else if (this.wind) {
const i = (/* @__PURE__ */ new Date()).valueOf();
let r = 0, n = 0, o = this.empty;
if ((a = this.wind) != null && a.active && (o = (e = this.wind) == null ? void 0 : e.data), (t = this.map) != null && t.getSource(this.source))
(s = this.map) == null || s.getSource(this.source).setData(o), n = (/* @__PURE__ */ new Date()).valueOf() - (i + r), console.log("[wind] update elapsed: ", n, ", total: ", r += n);
else {
this.map.addSource(this.source, { type: "geojson", data: o });
for (let l = 0; l < (this.barbs ?? []).length - 1; l++) {
const d = (this.barbs ?? [])[l] || 0, h = (this.barbs ?? [])[l + 1] || 0, c = d < 10 ? `00${d}kts` : d < 100 ? `0${d}kts` : `${d}kts`, u = new Image(72, 72), _ = qe[c], S = "data:image/svg+xml;base64," + window.btoa(unescape(encodeURIComponent(_)));
u.src = S, u.onload = () => {
this.map.hasImage("barbIcon" + c) || this.map.addImage("barbIcon" + c, u), this.map.addLayer(
{
id: c,
type: "symbol",
filter: [
"all",
// @ts-ignore
[">=", "spd", d],
// @ts-ignore
["<", "spd", h]
],
source: this.source,
layout: {
"symbol-placement": "point",
"icon-image": "barbIcon" + c,
"icon-size": {
base: 1,
stops: [
[2, 0.3],
[6, 0.5]
]
},
"icon-offset": [0, -20],
"icon-allow-overlap": !0,
"icon-rotation-alignment": "map",
"icon-rotate": {
property: "dir",
stops: [
[0, 0],
[360, 360]
]
}
},
paint: {
"icon-opacity": 1
}
},
this.beforeLayer
), this.handleToggle();
};
}
n = (/* @__PURE__ */ new Date()).valueOf() - (i + r), console.log("[wind] add elapsed: ", n, ", total: ", r += n);
}
this.handleToggle();
}
},
handleToggle() {
for (const a of this.barbs ?? []) {
const e = a < 10 ? `00${a}kts` : a < 100 ? `0${a}kts` : `${a}kts`;
this.map.getLayer(e) && this.map.setLayoutProperty(e, "visibility", this.showFeather ? "visible" : "none");
}
},
handleClear() {
for (const a of this.barbs ?? []) {
const e = a < 10 ? `00${a}kts` : a < 100 ? `0${a}kts` : `${a}kts`;
this.map.getLayer(e) && this.map.removeLayer(e);
}
this.map.getSource(this.source) && this.map.removeSource(this.source);
}
}
}, St = { class: "switch-box" };
function kt(a, e, t, s, i, r) {
var n;
return (n = t.wind) != null && n.active && !t.importReportLayers ? (L(), D("div", {
key: 0,
style: pe({ position: "absolute", right: t.right, bottom: t.bottom })
}, [
p("div", St, [
i.showFeather ? (L(), D("span", {
key: 0,
class: "iconfont switch-on",
onClick: e[0] || (e[0] = (o) => i.showFeather = !1)
}, "")) : E("", !0),
i.showFeather ? E("", !0) : (L(), D("span", {
key: 1,
class: "iconfont switch-off",
onClick: e[1] || (e[1] = (o) => i.showFeather = !0)
}, ""))
])
], 4)) : E("", !0);
}
const Pt = /* @__PURE__ */ N(Ct, [["render", kt], ["__scopeId", "data-v-d546ae7a"]]);
class Ve {
constructor(e) {
ee(this, "map");
ee(this, "mercator");
ee(this, "rampColorLayer");
ee(this, "rampColorSource");
ee(this, "particleLayer");
ee(this, "particleSource");
ee(this, "rampColorCanvas");
ee(this, "particleCanvas");
ee(this, "ratio");
this.map = e, this.mercator = new it(), 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;
}
/**
* 转换为[-180, 180]的经度，且包含转换次数
* @param lng
* @param n
*/
convertNLng(e, t = 0) {
return e > 180 ? this.convertNLng(e - 360, t + 1) : e < -180 ? this.convertNLng(e + 360, t + 1) : [e, t];
}
/**
* [4326坐标]
* 返回视窗边界经纬度(从西北方向逆时针返回四个角的经纬度)
* 依次为： NW, NE, SE, SW
* @param map
* @return [[lng, lat], [lng, lat], [lng, lat], [lng, lat]]
*/
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]
];
}
/**
* [视窗像素坐标]
* @see https://github.com/mapbox/sphericalmercator
* 返回视窗边界像素
* 依次为: 左下角(lf = left bottom)、右上角(rt = right top)
* @param [lb.x, lb.y, rt.x, rt.y]
*/
getBoundPixel() {
const e = this.map.getBounds(), t = this.map.getZoom() + 1, s = [e._ne.lng, e._ne.lat], i = [e._sw.lng, e._sw.lat], [r, n] = this.convertNLng(s[0]), [o, l] = this.convertNLng(i[0]), [d, h] = this.mercator.px([r, s[1]], t), [c, u] = this.mercator.px([o, i[1]], t), _ = Math.round(this.mercator.size * Math.pow(2, t) * (n + l));
return [c, u, d + _, h];
}
/**
* [视窗边界像素宽度]
*/
getBoundRange() {
const e = this.map.getZoom() + 1, t = this.mercator.size * Math.pow(2, e), s = this.getBoundPixel();
return [s[0] / t, s[2] / t, s[3] / t, s[1] / t];
}
/**
* 获取视窗世界（多世界复本）
* @param pixels
* @param zoom
*/
getWorldCopy(e, t) {
const s = 2 ** t, [i, r, n, o] = e.map((h) => ~~(h / (s * 256))), l = [];
for (let h = o; h <= r; h++)
for (let c = i; c <= n; c++)
l.push([c, h]);
return l.map((h) => {
const c = 2 ** t * 256;
return [h[0] * c, h[1] * c, c];
});
}
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) {
this.map.setLayoutProperty(this.rampColorLayer, "visibility", e ? "visible" : "none");
}
toggleParticle(e) {
this.map.setLayoutProperty(this.particleLayer, "visibility", e ? "visible" : "none");
}
}
class Te {
/**
* 创建着色器
* @see https://webglfundamentals.org/webgl/lessons/zh_cn/webgl-shaders-and-glsl.html
* @param gl
* @param type [VERTEX_SHADER, FRAGMENT_SHADER]
* @param schema 着色器渲染代码[GLSL]
*/
createShader(e, t, s) {
const i = e.createShader(t);
if (i && (e.shaderSource(i, s), e.compileShader(i), !e.getShaderParameter(i, e.COMPILE_STATUS)))
throw new Error(e.getShaderInfoLog(i) || "error happened while create shader...");
return i;
}
/**
* 创建纹理
* @see https://blog.csdn.net/qq_37987033/article/details/128745577
* @param gl
* @param minFilter
* @param magFilter
* @param wrapFilter
* @param data
* @param width??
* @param height??
*/
createTexture(e, t, s, i, r, n, o) {
const l = e.createTexture();
return e.bindTexture(e.TEXTURE_2D, l), e.texParameteri(e.TEXTURE_2D, e.TEXTURE_MIN_FILTER, t), e.texParameteri(e.TEXTURE_2D, e.TEXTURE_MAG_FILTER, s), e.texParameteri(e.TEXTURE_2D, e.TEXTURE_WRAP_S, i), e.texParameteri(e.TEXTURE_2D, e.TEXTURE_WRAP_T, i), r instanceof Uint8Array ? e.texImage2D(e.TEXTURE_2D, 0, e.RGBA, n, o, 0, e.RGBA, e.UNSIGNED_BYTE, r) : e.texImage2D(e.TEXTURE_2D, 0, e.RGBA, e.RGBA, e.UNSIGNED_BYTE, r), e.bindTexture(e.TEXTURE_2D, null), l;
}
/**
* 创建数据资源
* @param type [array, element]
* array: ARRAY_BUFFER
* element: ELEMENT_ARRAY_BUFFER
* @param resource 顶点数据
*/
createDataBuffer(e, t, s) {
if (e) {
const i = e.createBuffer();
return t === "array" ? (e.bindBuffer(e.ARRAY_BUFFER, i), s && e.bufferData(e.ARRAY_BUFFER, s, e.STATIC_DRAW)) : t === "element" && (e.bindBuffer(e.ELEMENT_ARRAY_BUFFER, i), s && e.bufferData(e.ELEMENT_ARRAY_BUFFER, s, e.STATIC_DRAW)), i;
}
return null;
}
/**
* 创建程序
* @param gl
* @param vertexSchema
* @param fragmentSchema
*/
createProgram(e, t, s) {
const i = e.createProgram(), r = this.createShader(e, e.VERTEX_SHADER, t), n = this.createShader(e, e.FRAGMENT_SHADER, s);
if (i && r && n && (e.attachShader(i, r), e.attachShader(i, n), e.linkProgram(i), !e.getProgramParameter(i, e.LINK_STATUS)))
throw new Error(e.getProgramInfoLog(i) || "error happened while creating ramp color program");
return i;
}
/**
* 创建程序并提取attrib & uniform参数
* @param gl
* @param vertexSchema
* @param fragmentSchema
*/
createProgramWrapper(e, t, s) {
const i = this.createProgram(e, t, s);
if (i) {
const r = { program: i }, n = e.getProgramParameter(i, e.ACTIVE_ATTRIBUTES);
for (let l = 0; l < n; l++) {
const d = e.getActiveAttrib(i, l);
r[d.name] = e.getAttribLocation(i, d.name);
}
const o = e.getProgramParameter(i, e.ACTIVE_UNIFORMS);
for (let l = 0; l < o; l++) {
const d = e.getActiveUniform(i, l);
r[d.name] = e.getUniformLocation(i, d.name);
}
return r;
}
}
/**
* 初始化渐变色纹理
* @param colors
*/
setup(e, t, s = !1, i, r) {
const n = document.createElement("canvas");
n.width = 256, n.height = 1;
const o = n.getContext("2d");
if (o && e) {
const l = o == null ? void 0 : o.createLinearGradient(0, 0, 256, 0);
return t.forEach(([d, h]) => {
l.addColorStop(d, h);
}), o.fillStyle = l, o.fillRect(0, 0, 256, 1), {
canvas: n,
texture: this.createTexture(
e,
e.LINEAR,
e.LINEAR,
e.CLAMP_TO_EDGE,
s ? new Uint8Array(o.getImageData(0, 0, 256, 1).data) : n,
i,
r
)
};
}
}
setupParticle(e, t = 1e3) {
const s = Math.ceil(Math.sqrt(t)), i = s * s, r = new Uint8Array(i * 4);
for (let h = 0; h < r.length; h++)
r[h] = Math.floor(Math.random() * 256);
const n = this.createTexture(e, e.NEAREST, e.NEAREST, e.CLAMP_TO_EDGE, r, s, s), o = this.createTexture(e, e.NEAREST, e.NEAREST, e.CLAMP_TO_EDGE, r, s, s), l = new Float32Array(i);
for (let h = 0; h < i; h++)
l[h] = h;
const d = this.createDataBuffer(e, "array", l);
return { resolution: s, total: i, texture0: n, texture1: o, indexBuffer: d };
}
bind(e, t, s) {
const i = this.createProgram(e, t, s);
if (i) {
const r = this.createDataBuffer(e, "array", void 0), n = e.getAttribLocation(i, "a_position");
e.enableVertexAttribArray(n), e.vertexAttribPointer(n, 2, e.FLOAT, !1, 0, 0);
const o = new Float32Array([0, 0, 1, 0, 0, 1, 0, 1, 1, 0, 1, 1]);
this.createDataBuffer(e, "array", o);
const l = e.getAttribLocation(i, "a_texCoord");
return e.enableVertexAttribArray(l), e.vertexAttribPointer(l, 2, e.FLOAT, !1, 0, 0), { program: i, aPositionBuffer: r };
}
return {};
}
bindParticle(e, t, s, i, r, n) {
const o = this.createProgramWrapper(e, t, s), l = this.createProgramWrapper(e, i, r), d = this.createProgramWrapper(e, i, n), h = this.createDataBuffer(e, "array", new Float32Array([0, 0, 1, 0, 0, 1, 0, 1, 1, 0, 1, 1])), c = e.createFramebuffer();
return { particle: o, screen: l, update: d, quadBuffer: h, frameBuffer: c };
}
draw(e, t, s, i, r, n, o) {
var l, d;
if (t && s) {
e.resize(), t == null || t.viewport(0, 0, (l = t == null ? void 0 : t.canvas) == null ? void 0 : l.width, (d = t == null ? void 0 : t.canvas) == null ? void 0 : d.height), t.clearColor(0, 0, 0, 0), t.clear(t.COLOR_BUFFER_BIT | t.DEPTH_BUFFER_BIT);
try {
const h = t.getUniformLocation(s, "u_resolution"), c = t.getUniformLocation(s, "u_image"), u = t.getUniformLocation(s, "u_color");
if (t.useProgram(s), t.uniform2f(h, t.canvas.width * e.ratio, t.canvas.height * e.ratio), t.activeTexture(t.TEXTURE0), t.bindTexture(t.TEXTURE_2D, i), t.uniform1i(c, 0), t.activeTexture(t.TEXTURE1), t.bindTexture(t.TEXTURE_2D, r), t.uniform1i(u, 1), o != null && o.uvRange && (o != null && o.sRange)) {
const k = t.getUniformLocation(s, "u_range_u_v"), g = t.getUniformLocation(s, "u_range_s");
t.uniform2f(k, o.uvRange[0], o.uvRange[1]), t.uniform2f(g, o.sRange[0], o.sRange[1]);
}
const _ = t.getUniformLocation(s, "u_scale");
t.uniform1f(_, (o == null ? void 0 : o.scale) || 1);
const S = e.getBoundPixel(), w = e.map.getZoom() + 1, y = e.getWorldCopy(S, w);
for (const k of y) {
const g = (k[0] - S[0]) * e.ratio, b = (k[1] - S[3]) * e.ratio, v = k[2] * e.ratio, [f, m, x, I] = [g, v + g, b, v + b], R = new Float32Array([f, x, m, x, f, I, f, I, m, x, m, I]);
t.bindBuffer(t.ARRAY_BUFFER, n), t.bufferData(t.ARRAY_BUFFER, R, t.STATIC_DRAW), t.drawArrays(t.TRIANGLES, 0, 6);
}
} catch (h) {
console.log(`render failed...${h}`);
}
}
}
drawParticle(e, t, s, i, r) {
var n, o;
t && (t == null || t.viewport(0, 0, (n = t == null ? void 0 : t.canvas) == null ? void 0 : n.width, (o = t == null ? void 0 : t.canvas) == null ? void 0 : o.height), t.disable(t.DEPTH_TEST), t.disable(t.STENCIL_TEST), t.activeTexture(t.TEXTURE0), t.bindTexture(t.TEXTURE_2D, s), t.activeTexture(t.TEXTURE1), t.bindTexture(t.TEXTURE_2D, i.texture0), this.renderScreen(e, t, i, r), this.updateParticles(e, t, i, r));
}
renderScreen(e, t, s, i) {
t.bindFramebuffer(t.FRAMEBUFFER, s.frameBuffer), t.framebufferTexture2D(t.FRAMEBUFFER, t.COLOR_ATTACHMENT0, t.TEXTURE_2D, s.screenTexture, 0), t.viewport(0, 0, t.canvas.width, t.canvas.height), this.renderScreenTexture(t, s.backgroundTexture, s.screen, s.quadBuffer, 0.95), this.renderParticles(e, t, s, i), t.bindFramebuffer(t.FRAMEBUFFER, null), this.renderScreenTexture(t, s.screenTexture, s.screen, s.quadBuffer, 0.6);
const r = s.backgroundTexture;
s.backgroundTexture = s.screenTexture, s.screenTexture = r;
}
renderScreenTexture(e, t, s, i, r) {
e && (e.useProgram(s.program), e.bindBuffer(e.ARRAY_BUFFER, i), e.enableVertexAttribArray(s.a_pos), e.vertexAttribPointer(s.a_pos, 2, e.FLOAT, !1, 0, 0), e.activeTexture(e.TEXTURE2), e.bindTexture(e.TEXTURE_2D, t), e.uniform1i(s.u_screen, 2), e.uniform1f(s.u_opacity, r), e.drawArrays(e.TRIANGLES, 0, 6));
}
renderParticles(e, t, s, i) {
if (t) {
t.useProgram(s.particle.program), t.bindBuffer(t.ARRAY_BUFFER, s.indexBuffer), t.enableVertexAttribArray(s.particle.a_index), t.vertexAttribPointer(s.particle.a_index, 1, t.FLOAT, !1, 0, 0), t.activeTexture(t.TEXTURE2), t.bindTexture(t.TEXTURE_2D, s.color.texture), t.uniform1i(s.particle.u_factor, 0), t.uniform1i(s.particle.u_particles, 1), t.uniform1i(s.particle.u_color_ramp, 2), t.uniform1f(s.particle.u_particles_resolution, s.resolution * e.ratio), t.uniform1f(s.particle.u_point, e.ratio);
const r = e.getBoundRange();
t.uniform4f(s.particle.u_viewport, r[0], r[1], r[2], r[3]), t.uniform2f(s.particle.u_factor_min, i.uvRange[0], i.uvRange[0]), t.uniform2f(s.particle.u_factor_max, i.uvRange[1], i.uvRange[1]), t.drawArrays(t.POINTS, 0, s.total);
}
}
updateParticles(e, t, s, i) {
var n, o;
if (t) {
t.bindFramebuffer(t.FRAMEBUFFER, s.frameBuffer), t.framebufferTexture2D(t.FRAMEBUFFER, t.COLOR_ATTACHMENT0, t.TEXTURE_2D, s.texture1, 0), t.viewport(0, 0, s.resolution, s.resolution), t.useProgram(s.update.program), t.bindBuffer(t.ARRAY_BUFFER, s.quadBuffer), t.enableVertexAttribArray(s.update.a_pos), t.vertexAttribPointer(s.update.a_pos, 2, t.FLOAT, !1, 0, 0), t.uniform1i(s.update.u_factor, 0), t.uniform1i(s.update.u_particles, 1);
const l = e.getBoundRange();
t.uniform4f(s.update.u_viewport, l[0], l[1], l[2], l[3]), t.uniform1f(s.update.u_rand_seed, Math.random()), t.uniform2f(s.update.u_factor_res, (n = s == null ? void 0 : s.image) == null ? void 0 : n.width, (o = s == null ? void 0 : s.image) == null ? void 0 : o.height), t.uniform2f(s.update.u_factor_min, i.uvRange[0], i.uvRange[0]), t.uniform2f(s.update.u_factor_max, i.uvRange[1], i.uvRange[1]), t.uniform1f(s.update.u_speed_factor, i.speedFactor * e.ratio), t.uniform1f(s.update.u_drop_rate, i.dropRate), t.uniform1f(s.update.u_drop_rate_bump, i.dropRateBump), t.drawArrays(t.TRIANGLES, 0, 6);
}
const r = s.texture0;
s.texture0 = s.texture1, s.texture1 = r;
}
resize(e, t) {
e.resize();
const s = new Uint8Array(t.canvas.width * t.canvas.height * 4).fill(0, 0, t.canvas.width * t.canvas.height * 4), i = this.createTexture(t, t.NEAREST, t.NEAREST, t.CLAMP_TO_EDGE, s, t.canvas.width, t.canvas.height), r = this.createTexture(t, t.NEAREST, t.NEAREST, t.CLAMP_TO_EDGE, s, t.canvas.width, t.canvas.height);
return { screenTexture: i, backgroundTexture: r };
}
async loadImg(e) {
return new Promise((t) => {
const s = new Blob([e], { type: e.type }), i = URL.createObjectURL(s), r = new Image();
r.crossOrigin = "anonymous", r.src = i, r.onload = () => t(r);
});
}
}
class Y {
}
// 顶点渲染
ee(Y, "vertexSchema", `
//canvas 坐标系上的坐标 (x, y)
attribute vec2 a_position; //像素坐标
attribute vec2 a_texCoord; //纹理坐标
// canvas 宽高
uniform vec2 u_resolution; //全局变量
varying vec2 v_texCoord; //向fragmentSchema传值
void main() {
// 将屏幕坐标系转化为裁剪坐标（裁剪坐标系） convert the position from pixels to 0.0 to 1.0
vec2 position = (a_position / u_resolution) * 2.0 - 1.0;
// canvas的 Y 轴坐标方向和 设备坐标系的相反
gl_Position = vec4(position * vec2(1, -1), 0.0, 1.0);
v_texCoord = a_texCoord;
}`), // 类如风、流等u v双变量片元渲染
ee(Y, "uvFragmentSchema", `
precision mediump float;
uniform sampler2D u_image;
uniform vec2 u_range_u_v;
uniform vec2 u_range_s;
uniform float u_scale;
uniform sampler2D u_color;
varying vec2 v_texCoord;
void main() {
vec4 uv = texture2D(u_image, v_texCoord);
float u = uv.r * (u_range_u_v.y - u_range_u_v.x) + u_range_u_v.x;
float v = uv.g * (u_range_u_v.y - u_range_u_v.x) + u_range_u_v.x;
float s = sqrt(u * u + v * v) * u_scale;
float r = (s - u_range_s.x) / (u_range_s.y - u_range_s.x);
float f = 1.0 - uv.b;
vec4 color = texture2D(u_color, vec2(r, 0.5)) * f;
gl_FragColor = color;
}`), // 类如浪、气压等单变量片元渲染
ee(Y, "fragmentSchema", `
precision mediump float;
uniform sampler2D u_image; // 灰度
uniform sampler2D u_color; // 色值映射
varying vec2 v_texCoord;// 坐标
void main() {
vec4 rgba = texture2D(u_image, v_texCoord);
vec4 color = texture2D(u_color, vec2(rgba.r, 0));
gl_FragColor = color;
}`);
class re {
}
ee(re, "vertexSchema", `
precision highp float;
attribute float a_index; // 索引
uniform sampler2D u_particles; // 粒子纹理
uniform float u_particles_resolution; // Math.ceil(Math.sqrt(numParticles)))
uniform float u_point;
uniform vec4 u_viewport;
varying vec2 v_particle_pos_uv;
void main() {
vec4 color = texture2D(u_particles, vec2(
fract(a_index / u_particles_resolution),
floor(a_index / u_particles_resolution) / u_particles_resolution));
vec2 v_particle_pos = vec2(color.r / 255.0 + color.b, color.g / 255.0 + color.a);
v_particle_pos_uv = vec2(fract(v_particle_pos.x * (u_viewport.y - u_viewport.x) + u_viewport.x), v_particle_pos.y * (u_viewport.w - u_viewport.z) + u_viewport.z);
gl_PointSize = 1.0;
// gl_PointSize = u_point;
gl_Position = vec4(2.0 * v_particle_pos.x - 1.0, 1.0 - 2.0 * v_particle_pos.y, 0, 1);
}`), ee(re, "fragmentSchema", `
precision highp float;
uniform sampler2D u_factor;
uniform vec2 u_factor_min;
uniform vec2 u_factor_max;
uniform sampler2D u_color_ramp;
varying vec2 v_particle_pos_uv;
void main() {
vec4 uv = texture2D(u_factor, v_particle_pos_uv);
vec2 velocity = mix(u_factor_min, u_factor_max, uv.rg);
float speed_t = length(velocity) / length(u_factor_max);
// color ramp is encoded in a 16x16 texture
vec2 ramp_pos = vec2(
fract(16.0 * speed_t),
floor(16.0 * speed_t) / 16.0);
float f = 1.0 - uv.b;
gl_FragColor = texture2D(u_color_ramp, ramp_pos) * f;
}`), ee(re, "quadVertSchema", `
precision highp float;
attribute vec2 a_pos;
varying vec2 v_tex_pos;
void main() {
v_tex_pos = a_pos;
gl_Position = vec4(1.0 - 2.0 * a_pos, 0, 1);
}`), ee(re, "screenFragmentSchema", `
precision highp float;
uniform sampler2D u_screen;
uniform float u_opacity;
varying vec2 v_tex_pos;
void main() {
vec4 color = texture2D(u_screen, 1.0 - v_tex_pos);
// a hack to guarantee opacity fade out even with a value close to 1.0
gl_FragColor = vec4(floor(255.0 * color * u_opacity) / 255.0);
}`), ee(re, "updateFragmentSchema", `
precision highp float;
uniform sampler2D u_particles;
uniform sampler2D u_factor;
uniform vec2 u_factor_res;
uniform vec2 u_factor_min;
uniform vec2 u_factor_max;
uniform float u_rand_seed;
uniform float u_speed_factor;
uniform float u_drop_rate;
uniform float u_drop_rate_bump;
uniform vec4 u_viewport;
varying vec2 v_tex_pos;
// pseudo-random generator
const vec3 rand_constants = vec3(989.6543, 43.456, 287.6543);
float rand(const vec2 co) {
float t = dot(rand_constants.xy, co);
return fract(sin(t) * (rand_constants.z + t));
}
// factor speed lookup; use manual bilinear filtering based on 4 adjacent pixels for smooth interpolation
vec2 lookup_factor(const vec2 uv) {
vec2 px = 1.0 / u_factor_res;
vec2 vc = (floor(uv * u_factor_res)) * px;
vec2 f = fract(uv * u_factor_res);
vec2 tl = texture2D(u_factor, vc).rg;
vec2 tr = texture2D(u_factor, vc + vec2(px.x, 0)).rg;
vec2 bl = texture2D(u_factor, vc + vec2(0, px.y)).rg;
vec2 br = texture2D(u_factor, vc + px).rg;
return mix(mix(tl, tr, f.x), mix(bl, br, f.x), f.y);
}
void main() {
vec4 color = texture2D(u_particles, v_tex_pos);
// decode particle position from pixel RGBA
vec2 pos = vec2(
color.r / 255.0 + color.b,
color.g / 255.0 + color.a);
vec2 pos_uv = vec2(
fract(pos.x * (u_viewport.y - u_viewport.x) + u_viewport.x),
pos.y * (u_viewport.w - u_viewport.z) + u_viewport.z);
vec2 velocity = mix(u_factor_min, u_factor_max, lookup_factor(pos_uv));
float speed_t = length(velocity) / length(u_factor_max);
float b = texture2D(u_factor, pos_uv).b;
float p = (b / -1.0) + 1.0;
velocity = velocity * p;
speed_t = speed_t * p;
// take EPSG:4236 distortion into account for calculating where the particle moved
float distortion = cos(radians(pos.y * 180.0 - 90.0));
// float distortion = cos(radians(pos.y * 180.0 - 90.0));
vec2 offset = vec2(velocity.x, -velocity.y) * 0.0001 * u_speed_factor;
// update particle position, wrapping around the date line
pos = fract(1.0 + pos + offset);
// a random seed to use for the particle drop
vec2 seed = (pos + v_tex_pos) * u_rand_seed;
// drop rate is a chance a particle will restart at random position, to avo