@opengis/bi
Version:
BI data visualization module
556 lines (555 loc) • 18.7 kB
JavaScript
import { openBlock as l, createBlock as b, unref as w, mergeProps as v, createElementBlock as d, createElementVNode as c, withDirectives as D, toDisplayString as x, vShow as F, Fragment as P, renderList as V, normalizeClass as R, resolveComponent as W, createVNode as A } from "vue";
import { e as S, X as H, _ as L } from "./import-file-BBYAWahU.js";
/**
* @license lucide-vue-next v0.577.0 - ISC
*
* This source code is licensed under the ISC license.
* See the LICENSE file in the root directory of this source tree.
*/
const J = S("grip-vertical", [
["circle", { cx: "9", cy: "12", r: "1", key: "1vctgf" }],
["circle", { cx: "9", cy: "5", r: "1", key: "hp0tcf" }],
["circle", { cx: "9", cy: "19", r: "1", key: "fkjjf6" }],
["circle", { cx: "15", cy: "12", r: "1", key: "1tmaij" }],
["circle", { cx: "15", cy: "5", r: "1", key: "19l28e" }],
["circle", { cx: "15", cy: "19", r: "1", key: "f4zoj3" }]
]);
/**
* @license lucide-vue-next v0.577.0 - ISC
*
* This source code is licensed under the ISC license.
* See the LICENSE file in the root directory of this source tree.
*/
const N = S("house", [
["path", { d: "M15 21v-8a1 1 0 0 0-1-1h-4a1 1 0 0 0-1 1v8", key: "5wwlr5" }],
[
"path",
{
d: "M3 10a2 2 0 0 1 .709-1.528l7-6a2 2 0 0 1 2.582 0l7 6A2 2 0 0 1 21 10v9a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z",
key: "r6nss1"
}
]
]);
/**
* @license lucide-vue-next v0.577.0 - ISC
*
* This source code is licensed under the ISC license.
* See the LICENSE file in the root directory of this source tree.
*/
const O = S("list", [
["path", { d: "M3 5h.01", key: "18ugdj" }],
["path", { d: "M3 12h.01", key: "nlz23k" }],
["path", { d: "M3 19h.01", key: "noohij" }],
["path", { d: "M8 5h13", key: "1pao27" }],
["path", { d: "M8 12h13", key: "1za7za" }],
["path", { d: "M8 19h13", key: "m83p4d" }]
]), q = {
__name: "close",
setup(e) {
return (r, t) => (l(), b(w(H), v(r.$attrs, { size: 24 }), null, 16));
}
};
function U(e) {
return [
{
type: "fill",
paint: {
"fill-color": e.color || "#ccc",
"fill-outline-color": e.color || "blue",
"fill-opacity": e.opacity || 1
}
}
];
}
function X(e) {
return [
{
type: "line",
paint: {
"line-color": e.color || "#ccc",
"line-opacity": e.opacity || 1
}
}
];
}
function Z(e) {
return [
{
type: "circle",
paint: {
"circle-radius": e.radius || 6,
"circle-stroke-color": e.stroke || "#ccc",
"circle-stroke-width": e.width || 1,
"circle-color": e.color || "blue"
}
}
];
}
function C(e) {
if (!e) return null;
const r = e.type || "point";
return r === "polygon" ? U(e) : r === "line" ? X(e) : Z(e);
}
const K = {
data() {
return {
layerList: [],
activeLayer: ""
};
},
computed: {
interactiveSources() {
return this.layerList.filter((e) => e == null ? void 0 : e.interactive).map((e) => e.id);
}
},
methods: {
moveLayer(e, r = this.map) {
r.getStyle().layers.forEach((t) => {
t.id.match(e) && r.moveLayer(t.id);
});
},
async setVisible(e, r = !0, t = this.map) {
if (!e) return;
const i = (e == null ? void 0 : e.id) || e, n = this.layerList.find((s) => s.id === e) || e;
if (!(n != null && n.id)) throw new Error("MixinError: Layer has no id");
const o = t.getStyle().layers.filter((s) => s.id.match(i));
o.forEach((s) => {
t.setLayoutProperty(
s.id,
"visibility",
r ? "visible" : "none"
);
}), !o.length && r && await this.addLayer(n);
},
async addLayer(e, r = this == null ? void 0 : this.map) {
var n, o;
const t = this.layerList.find((s) => s.id === e) || e;
!this.map.getStyle() || this.map.getStyle().layers.find((s) => s.id === t.id) || (this.layerList.find((s) => s.id === t.id) || this.layerList.push(t), (t.service === "vtile" || t.service === "vector" || (n = t.url) != null && n.includes(".vmt")) && this.addVtileLayer(t, r), t.service === "geojson" && this.addGeoJsonLayer(t, r), ((o = t.url) != null && o.includes(".png") || ["tms", "raster"].includes(t.service)) && await this.addRasterLayer(t, r));
},
async addRasterLayer(e, r = this == null ? void 0 : this.map) {
var t, i;
r.getSource(e.id) || (await r.addSource(e.id, {
type: "raster",
tiles: [e == null ? void 0 : e.url],
tileSize: 256,
...e != null && e.scheme ? { scheme: e == null ? void 0 : e.scheme } : {}
}), await r.addLayer(
{
id: e.id,
type: "raster",
source: e.id,
minzoom: 0,
maxzoom: (e == null ? void 0 : e.maxzoom) || 22
},
e.basemap ? (i = (t = this.map.getStyle().layers) == null ? void 0 : t[0]) == null ? void 0 : i.id : null
));
},
async addVtileLayer(e, r = this == null ? void 0 : this.map) {
var o;
const t = ["props", "pointZoom"].filter((s) => e[s]).map((s) => `&${s}=${e[s]}`), i = {
type: "vector",
tiles: [
`${(o = e == null ? void 0 : e.url) != null && o.startsWith("http") ? "" : window.location.origin}${e == null ? void 0 : e.url}${t}`
],
minzoom: e.minzoom || 3,
maxzoom: e.maxzoom || 24
};
r.addSource(e.id, i), (C(e.style) || e.layers || []).forEach((s, h) => {
const a = {
...s,
id: `${e.id}-${h}`,
source: e.id,
"source-layer": s["source-layer"] || e.source || e.id,
maxzoom: +s.maxzoom || 24,
minzoom: +s.minzoom || 0
};
r.addLayer(a);
});
},
async addGeoJsonLayer(e, r = this.map) {
var n;
const t = e.data || ((n = e == null ? void 0 : e.url) != null && n.startsWith("http") ? "" : window.location.origin) + e.url;
r.addSource(e.id, { type: "geojson", data: t }), (C(e.style) || e.layers || []).forEach((o) => {
const s = {
...o,
source: e.id,
id: o.id || e.id,
maxzoom: +o.maxzoom || 24,
minzoom: +o.minzoom || 0,
type: o.type || "circle"
};
r.addLayer(s);
});
},
setLayerData(e, r) {
this.layerList = this.layerList.map((t) => t.id === e ? { ...t, ...r } : t);
},
async removeLayer(e, r = this.map) {
r.getSource(e) && (await r.getStyle().layers.forEach(async (t) => {
t.source === e && await r.removeLayer(t.id);
}), await r.removeSource(e));
},
async setFilter(e, r) {
var n, o;
const t = this.layerList.find((s) => s.id === e), i = await ((n = this.map) == null ? void 0 : n.getSource(e));
if (i && t.service === "vtile") {
await i.setTiles([
`${window.location.origin}${t.url}${t.url.includes("?") ? "&" : "?"}filter=${r}${t.props ? `&props=${t.props}` : ""}`
]);
return;
}
if (i && t.service === "geojson") {
if (typeof t.url == "string") {
const s = `${t.url}${t.url.includes("?") ? "&" : "?"}filter=${r}${t.props ? `&props=${t.props}` : ""}`, h = await fetch(
`${(o = t == null ? void 0 : t.url) != null && o.startsWith("http") ? "" : window.location.origin}${s}`
).then((a) => a.json());
await i.setData(h);
return;
}
t.data && await i.setData(t.data);
}
},
async changeBaseLayer(e) {
const r = e != null && e.id ? e : this.layerList.find((i) => i.id === e), { id: t } = r;
if (t && t !== this.activeLayer) {
if (this.activeLayer && this.map.setLayoutProperty(this.activeLayer, "visibility", "none"), this.activeLayer = t, this.map.getLayer(t)) {
this.map.setLayoutProperty(t, "visibility", "visible");
return;
}
await this.addRasterLayer(r);
}
},
async refreshLayer(e, r = this.map) {
await r.getStyle().layers.forEach((t) => {
t.source === e && r.removeLayer(t.id);
}), await r.removeSource(e), this.setVisible(e);
}
}
}, Q = "https://unpkg.com/maplibre-gl@5.6.2/dist/maplibre-gl.js", Y = "https://unpkg.com/maplibre-gl@5.6.2/dist/maplibre-gl.css";
let _ = null;
function T(e) {
return new Promise((r, t) => {
if (document.querySelector(`script[src="${e}"]`)) {
r();
return;
}
const i = document.createElement("script");
i.src = e, i.onload = () => r(), i.onerror = () => t(new Error(`Failed to load ${e}`)), document.head.appendChild(i);
});
}
function I(e) {
return new Promise((r, t) => {
if (document.querySelector(`link[href="${e}"]`)) {
r();
return;
}
const i = document.createElement("link");
i.rel = "stylesheet", i.href = e, i.onload = () => r(), i.onerror = () => t(new Error(`Failed to load ${e}`)), document.head.appendChild(i);
});
}
function xe() {
return typeof window > "u" ? Promise.resolve(null) : window.maplibregl ? Promise.resolve(window.maplibregl) : _ || (_ = I(Y).then(() => T(Q)).then(() => window.maplibregl), _);
}
const ee = {
__name: "legend",
setup(e) {
return (r, t) => (l(), b(w(O), v(r.$attrs, { size: 24 }), null, 16));
}
}, Se = {
pink: ["#fde7e2", "#feafbe", "#fd58a4", "#d7038e", "#86007b"],
blue: ["#f1eef6", "#bdc9e1", "#74a9cf", "#2b8cbe", "#045a8d"],
green: ["#edf8fb", "#b2e2e2", "#66c2a4", "#2ca25f", "#006d2c"],
pink2: ["#f1eef6", "#d7b5d8", "#df65b0", "#dd1c77", "#980043"],
red: ["#fef0d9", "#fdcc8a", "#fc8d59", "#e34a33", "#b30000"],
teal: ["#f6eff7", "#bdc9e1", "#67a9cf", "#1c9099", "#016c59"]
}, te = {
props: ["map", "coordinates"],
data() {
return {
isMenuVisible: !1
};
},
computed: {
getCoordinates() {
var r;
return !(this != null && this.coordinates) || ((r = this.coordinates) == null ? void 0 : r.length) !== 2 ? "" : (this == null ? void 0 : this.coordinates).slice().reverse().map((t) => Number(t).toFixed(5)).join(", ");
}
}
}, re = { class: "map__settings" }, ie = {
ref: "attribution",
class: "map__settings-attribution map__settings-item mt-[3px]"
};
function se(e, r, t, i, n, o) {
return l(), d("div", re, [
c("div", ie, [
D(c("div", {
ref: "mouse",
class: "map__settings-item",
style: { "min-width": "115px" }
}, x(o.getCoordinates), 513), [
[F, o.getCoordinates]
])
], 512)
]);
}
const Me = /* @__PURE__ */ L(te, [["render", se]]), oe = {
mixins: [K],
props: {
map: { type: Object, default: () => null }
},
data() {
return {
baseLayers: [
{
id: "orto10",
name: "Ortophoto 1:10К",
url: "https://data.gki.com.ua/api-user/rtile/orto10/ua/{z}/{x}/{y}.png",
service: "TMS",
image: "https://data.gki.com.ua/api-user/rtile/orto10/ua/13/4954/2876.png"
},
{
id: "graymap",
name: "Сіра карта",
url: "https://data.gki.com.ua/api-user/rtile/voyager/ua/{z}/{x}/{y}.png",
service: "TMS",
image: "https://data.gki.com.ua/api-user/rtile/positron/ua/10/601/348.png"
}
]
};
},
watch: {
map(e) {
e && e.on("load", this.handleMapLoad);
}
},
created() {
this.baseLayers.forEach((e) => {
const r = { ...e, basemap: !0 };
this.layerList.push(r);
});
},
methods: {
handleMapLoad() {
this.changeBaseLayer("graymap");
},
isLayerInFocus(e) {
return e.id === this.activeLayer;
}
}
}, ne = { class: "vs-map-slot-layers" }, ae = ["onClick"], ce = ["src"];
function le(e, r, t, i, n, o) {
return l(), d("div", ne, [
(l(!0), d(P, null, V(n.baseLayers, (s) => (l(), d("div", {
key: s.id,
class: R(["vs-map-slot-layers__layer", { focused: o.isLayerInFocus(s) }]),
onClick: (h) => e.changeBaseLayer(s.id)
}, [
c("img", {
src: s.image,
class: "vs-map-slot-layers__image"
}, null, 8, ce)
], 10, ae))), 128))
]);
}
const Ee = /* @__PURE__ */ L(oe, [["render", le]]);
function B(e, r, t) {
if (e !== null)
for (var i, n, o, s, h, a, y, $ = 0, u = 0, k, M = e.type, E = M === "FeatureCollection", G = M === "Feature", j = E ? e.features.length : 1, f = 0; f < j; f++) {
y = E ? (
// @ts-expect-error: Known type conflict
e.features[f].geometry
) : G ? (
// @ts-expect-error: Known type conflict
e.geometry
) : e, k = y ? y.type === "GeometryCollection" : !1, h = k ? y.geometries.length : 1;
for (var z = 0; z < h; z++) {
var p = 0, m = 0;
if (s = k ? y.geometries[z] : y, s !== null) {
a = s.coordinates;
var g = s.type;
switch ($ = 0, g) {
case null:
break;
case "Point":
if (
// @ts-expect-error: Known type conflict
r(
a,
u,
f,
p,
m
) === !1
)
return !1;
u++, p++;
break;
case "LineString":
case "MultiPoint":
for (i = 0; i < a.length; i++) {
if (
// @ts-expect-error: Known type conflict
r(
a[i],
u,
f,
p,
m
) === !1
)
return !1;
u++, g === "MultiPoint" && p++;
}
g === "LineString" && p++;
break;
case "Polygon":
case "MultiLineString":
for (i = 0; i < a.length; i++) {
for (n = 0; n < a[i].length - $; n++) {
if (
// @ts-expect-error: Known type conflict
r(
a[i][n],
u,
f,
p,
m
) === !1
)
return !1;
u++;
}
g === "MultiLineString" && p++, g === "Polygon" && m++;
}
g === "Polygon" && p++;
break;
case "MultiPolygon":
for (i = 0; i < a.length; i++) {
for (m = 0, n = 0; n < a[i].length; n++) {
for (o = 0; o < a[i][n].length - $; o++) {
if (
// @ts-expect-error: Known type conflict
r(
a[i][n][o],
u,
f,
p,
m
) === !1
)
return !1;
u++;
}
m++;
}
p++;
}
break;
case "GeometryCollection":
for (i = 0; i < s.geometries.length; i++)
if (
// @ts-expect-error: Known type conflict
B(s.geometries[i], r) === !1
)
return !1;
break;
default:
throw new Error("Unknown Geometry Type");
}
}
}
}
}
function pe(e, r = {}) {
if (e.bbox != null && r.recompute !== !0)
return e.bbox;
const t = [1 / 0, 1 / 0, -1 / 0, -1 / 0];
return B(e, (i) => {
t[0] > i[0] && (t[0] = i[0]), t[1] > i[1] && (t[1] = i[1]), t[2] < i[0] && (t[2] = i[0]), t[3] < i[1] && (t[3] = i[1]);
}), t;
}
const ue = {
__name: "home",
setup(e) {
return (r, t) => (l(), b(w(N), v(r.$attrs, { size: 24 }), null, 16));
}
}, de = {
props: ["bbox", "map"],
components: { homeIcon: ue },
methods: {
setBounds() {
const e = {
type: "Feature",
geometry: this == null ? void 0 : this.bbox
}, r = pe(e);
this.map.fitBounds(r);
}
}
}, he = { class: "z-100 flex justify-center items-center rounded-md w-[32px] h-[32px] cursor-pointer bg-white p-1 border-[2px]" };
function fe(e, r, t, i, n, o) {
const s = W("homeIcon");
return l(), d("div", he, [
A(s, { onClick: o.setBounds }, null, 8, ["onClick"])
]);
}
const Ce = /* @__PURE__ */ L(de, [["render", fe]]), me = {
__name: "menu",
setup(e) {
return (r, t) => (l(), b(w(J), v(r.$attrs, { size: 24 }), null, 16));
}
}, ye = {
components: { legendIcon: ee, menuIcon: me, closeIcon: q },
props: ["source", "count", "total", "mapId"],
data() {
return {
isOpenLegend: !1,
palette: ["#69D2E7", "yellow", "#FE4365"]
};
},
methods: {
calcSize(e) {
return e / this.maxValue * 100 * 50 / 100;
}
},
computed: {
maxValue() {
var e, r, t, i, n, o;
return ((e = this.sizes) == null ? void 0 : e[0]) > ((t = this.sizes) == null ? void 0 : t[((r = this.sizes) == null ? void 0 : r.length) - 1]) ? (i = this.sizes) == null ? void 0 : i[0] : (o = this.sizes) == null ? void 0 : o[((n = this.sizes) == null ? void 0 : n.length) - 1];
}
}
}, ge = { class: "w-full h-[calc(100%-40px)] bg-white" }, _e = { class: "w-full flex flex-col gap-[8px] h-[250px] overflow-auto [&::-webkit-scrollbar]:h-1.5 [&::-webkit-scrollbar]:w-1.5 [&::-webkit-scrollbar-thumb]:rounded-full [&::-webkit-scrollbar-thumb]:bg-gray-300 [&::-webkit-scrollbar-track]:bg-transparent text-xs" }, be = { class: "relative min-w-full bg-white text-[12px]" }, we = { class: "divide-gray-200 dark:divide-neutral-700" }, ve = { class: "px-2 py-1" }, Le = { class: "px-2 py-1" };
function $e(e, r, t, i, n, o) {
return l(), d("div", ge, [
c("div", _e, [
c("table", be, [
r[0] || (r[0] = c("thead", { class: "sticky top-[-1px] z-[1] bg-white w-full after:absolute after:content-[''] after:block after:w-full after:h-px after:bg-stone-200" }, [
c("tr", null, [
c("th", { class: "px-2 py-1 text-start" }, "Назва"),
c("th", { class: "px-2 py-1 text-start" }, "Метрика")
])
], -1)),
c("tbody", we, [
(l(!0), d(P, null, V(t.source, (s) => (l(), d("tr", {
key: s.id,
class: "border-b cursor-pointer hover:bg-gray-100 odd:bg-gray-50"
}, [
c("td", ve, x(s.title || "—"), 1),
c("td", Le, x(s.metric), 1)
]))), 128))
])
])
])
]);
}
const Pe = /* @__PURE__ */ L(ye, [["render", $e]]);
export {
Pe as V,
q as _,
ee as a,
Ce as b,
Ee as c,
Me as d,
K as e,
xe as l,
Se as p
};