@skzz/components-gis 0.1.4 → 0.1.6

package/dist/zz-layer-mvt-R1-GwSIW.js

@@ -0,0 +1,609 @@
+import { a as e, r as t } from "./layerStack-CbiVJONn.js";
+import { r as n } from "./zz-layer-geojson-CtTpn_f9.js";
+import { computed as r, createBlock as i, createCommentVNode as a, inject as o, onMounted as s, onUnmounted as c, openBlock as l, ref as u, resolveComponent as d, watch as f } from "vue";
+import { VectorTileset as p } from "@liumaorong/cesium-vectortile-gl-plus";
+//#region src/utils/buildMvtWfsLabelUrl.ts
+function m(e, t, n, r) {
+	let i = String(e || "").replace(/\/$/, ""), a = encodeURIComponent(String(t || "")), o = encodeURIComponent(String(n || ""));
+	return !i || !a || !o ? "" : `${i}/v1/wfs/layer/wfsInfo?dictCode=${a}&serviceName=${o}${r == null ? "" : `&_label=${r}`}`;
+}
+//#endregion
+//#region src/zz-layer/zz-layer-mvt/index.vue
+var h = "https://fonts.openmaptiles.org/{fontstack}/{range}.pbf", g = {
+	__name: "index",
+	props: {
+		provider: {
+			type: Object,
+			default: () => ({})
+		},
+		options: {
+			type: Object,
+			default: () => ({})
+		},
+		stackIndex: {
+			type: Number,
+			default: -1
+		},
+		subStackIndex: {
+			type: Number,
+			default: 0
+		},
+		groupKey: {
+			type: String,
+			default: ""
+		}
+	},
+	emits: ["loaded"],
+	setup(g, { emit: _ }) {
+		let v = o("cesiumViewer"), y = u(null), b = u(!1), x = g, S = _, C = {
+			url: "",
+			layer: "",
+			sourceLayer: "",
+			minzoom: 1,
+			maxzoom: 14,
+			scheme: "xyz",
+			token: "",
+			workerUrl: "",
+			maximumActiveTasks: 4,
+			dictCode: "",
+			wfsBasePath: ""
+		}, w = {
+			styleByProperty: {},
+			fillColor: "#1968df",
+			fillOpacity: .85,
+			opacity: 1,
+			fillOutlineColor: "#47cf11",
+			lineColor: "#c30cbf",
+			lineWidth: 1,
+			visibility: "visible",
+			minzoom: "1",
+			maxzoom: "14",
+			glyphs: "",
+			note: {},
+			hiddenValues: [],
+			labelOverlay: {}
+		}, T = {
+			微软雅黑: "Microsoft YaHei Regular",
+			"Microsoft YaHei": "Microsoft YaHei Regular",
+			宋体: "SimSun Regular",
+			SimSun: "SimSun Regular",
+			黑体: "SimHei Regular",
+			SimHei: "SimHei Regular",
+			楷体: "KaiTi Regular",
+			KaiTi: "KaiTi Regular",
+			Arial: "Arial Regular",
+			"Times New Roman": "Times New Roman Regular"
+		}, E = (e) => {
+			let t = String(e || "").trim();
+			return T[t] || t || "Microsoft YaHei Regular";
+		}, D = (e, t = {}) => String(e.glyphs || t.glyphs || h).trim(), O = (e, t) => {
+			let n = [
+				"coalesce",
+				["to-string", ["get", e]],
+				""
+			], r = t?.wrap === !0 || t?.wrap === "true" || t?.wrap === 1, i = Number(t?.maxChars);
+			if (!r || !Number.isFinite(i) || i <= 0) return n;
+			let a = [];
+			for (let e = 0; e < 80; e += i) e > 0 && a.push("\n"), a.push([
+				"slice",
+				n,
+				e,
+				e + i
+			]);
+			return ["concat", ...a];
+		}, k = ["-", [
+			"coalesce",
+			["to-number", ["get", "Shape_Area"]],
+			["to-number", ["get", "shape_area"]],
+			["to-number", ["get", "SHAPE_Area"]],
+			["to-number", ["get", "AREA"]],
+			["to-number", ["get", "area"]],
+			0
+		]], A = (e, t, n = {}, r = "default") => {
+			let i = r === "polygon";
+			return {
+				"text-field": O(e, t),
+				"text-size": Number(t.fontSize ?? 14),
+				"text-font": [E(t.fontFamily)],
+				"text-allow-overlap": !i,
+				"text-ignore-placement": !i,
+				"text-optional": !0,
+				"text-line-height": 1.15,
+				"text-anchor": "bottom",
+				"text-offset": [0, -.7],
+				"symbol-placement": "point",
+				...i ? {
+					"symbol-sort-key": k,
+					"text-padding": 2
+				} : {},
+				...n
+			};
+		}, j = (e) => String(e || "mvt").replace(/[^a-zA-Z0-9_-]/g, "_"), M = (e) => {
+			let t = Number(e);
+			return Number.isFinite(t) ? Math.max(0, Math.min(1, t)) : 1;
+		}, N = (e) => {
+			let t = `${j(e)}-${Date.now()}-${Math.random().toString(36).slice(2, 8)}`;
+			return {
+				source: `${t}-source`,
+				circle: `${t}-circle`,
+				line: `${t}-line`,
+				fill: `${t}-fill`,
+				label: `${t}-label`
+			};
+		}, P = r(() => ({
+			...C,
+			...x.provider
+		})), F = r(() => ({
+			...w,
+			...x.options
+		})), I = r(() => n(P.value)), L = r(() => JSON.stringify(F.value)), R = r(() => {
+			let e = P.value, t = F.value;
+			return !!(e.url && e.layer && e.sourceLayer && t.styleByProperty);
+		}), z = u(Date.now()), B = r(() => F.value.note || {}), V = (e = {}) => {
+			let t = e.colorList || {};
+			return t.point || t.line || t.polygon ? t : e.point || e.line || e.polygon ? e : t;
+		}, H = r(() => !!V(F.value.styleByProperty || {}).polygon), U = r(() => !!(typeof B.value.fieldName == "string" && B.value.fieldName.trim()) && H.value), W = r(() => {
+			let e = F.value.labelOverlay || {};
+			if (e.enabled === !1) return "";
+			if (e.wfsUrl) return String(e.wfsUrl);
+			let t = P.value, n = t.wfsBasePath || "";
+			return !t.dictCode || !t.layer || !n ? "" : m(n, t.dictCode, t.layer, z.value);
+		}), G = r(() => U.value && !!W.value), K = () => {
+			if (!U.value || G.value) return !1;
+			let e = P.value;
+			return e.dictCode && e.layer && !(e.wfsBasePath || F.value.labelOverlay?.wfsUrl) && console.warn("[zz-layer-mvt] 面注记缺少 dictCode/wfsBasePath，回退 MapLibre 落点"), !0;
+		}, q = (e) => {
+			if (e == null) return "";
+			let t = String(e).trim(), n = Number(t);
+			return !Number.isNaN(n) && t !== "" ? String(n) : t;
+		}, J = (e = {}) => {
+			if (e.point) {
+				let t = e.point || {};
+				return {
+					fill: t.fill || t.color || "#FF0000",
+					borderColor: t.stroke?.outlineColor || t.borderColor || "#FFFFFF",
+					borderWidth: Number(t.stroke?.outlineWidth ?? t.borderWidth ?? 1),
+					strokeVisible: t.stroke?.visible !== !1,
+					stroke: {
+						type: t.stroke?.type || "solid",
+						color: t.stroke?.color || t.color || t.fill || "#FF0000",
+						radius: Number(t.stroke.radius ?? 5),
+						outlineColor: t.stroke?.outlineColor || t.borderColor || "#FFFFFF",
+						outlineWidth: Number(t.stroke?.outlineWidth ?? t.borderWidth ?? 1),
+						dashLength: Number(t.stroke?.dashLength ?? 0),
+						gapLength: Number(t.stroke?.gapLength ?? 0),
+						borderColor: t.stroke?.borderColor || t.borderColor || "#FFFFFF",
+						borderWidth: Number(t.stroke?.borderWidth ?? t.borderWidth ?? 1)
+					}
+				};
+			} else if (e.line) {
+				let t = e.line || {};
+				return {
+					strokeVisible: t.stroke?.visible !== !1,
+					stroke: {
+						type: t.stroke?.type || t.type || "solid",
+						color: t.stroke?.color || t.color || "#FFFF00",
+						outlineColor: t.stroke?.outlineColor || t.outlineColor || "#FFFF00",
+						outlineWidth: Number(t.stroke?.outlineWidth ?? t.outlineWidth ?? t.width ?? 1),
+						dashLength: Number(t.stroke?.dashLength ?? t.dashLength ?? 0),
+						gapLength: Number(t.stroke?.gapLength ?? t.gapLength ?? 0),
+						borderColor: t.stroke?.borderColor || t.borderColor || "#000000",
+						borderWidth: Number(t.stroke?.borderWidth ?? t.borderWidth ?? 0)
+					}
+				};
+			} else if (e.polygon) {
+				let t = e.polygon || {};
+				return {
+					fill: t.fill || t.color || "rgba(255, 255, 0, 0.3)",
+					outlineColor: t.stroke?.outlineColor || t.outlineColor || "#FFFF00",
+					outlineWidth: Number(t.stroke?.outlineWidth ?? t.outlineWidth ?? 2),
+					strokeVisible: t.stroke?.visible !== !1,
+					stroke: {
+						type: t.stroke?.type || "solid",
+						color: t.stroke?.color || t.color || "#FFFF00",
+						outlineColor: t.stroke?.outlineColor || t.outlineColor || "#FFFF00",
+						outlineWidth: Number(t.stroke?.outlineWidth ?? t.outlineWidth ?? 2),
+						dashLength: Number(t.stroke?.dashLength ?? 0),
+						gapLength: Number(t.stroke?.gapLength ?? 0),
+						borderColor: t.stroke?.borderColor || t.outlineColor || "#FFFF00",
+						borderWidth: Number(t.stroke?.borderWidth ?? t.outlineWidth ?? 2)
+					}
+				};
+			}
+		}, Y = () => {
+			if (!R.value) return null;
+			let e = P.value, t = F.value, n = e.sourceLayer || e.layer, r = N(e.layer || n), i = e.url ? [e.url] : [], a = t.styleByProperty || {}, o = a.type || "", s = a.fieldName || "", c = Array.isArray(a.colorListArray) ? a.colorListArray : [], l = a.colorList || {}, u = l.point || l.line || l.polygon ? l : a.point || a.line || a.polygon ? a : l, d = t.note || {}, f = M(t.opacity);
+			console.log("[zz-layer-mvt] buildStyle", {
+				sourceLayer: n,
+				styleIds: r,
+				type: o,
+				fieldName: s,
+				colorCount: c.length,
+				firstColorItem: c[0] || null,
+				noteField: d.fieldName || "",
+				noteFontFamily: d.fontFamily || "",
+				noteGlyphs: t.glyphs || ""
+			});
+			let p = J(u);
+			if (!p) return console.warn("[zz-layer-mvt] colorList missing point/line/polygon style", u), null;
+			let m = typeof d.fieldName == "string" ? d.fieldName.trim() : "", h = !!m, g = h ? D(t, d) : "", _ = h ? A(m, d) : null, v = {
+				"text-color": d.fontColor || "#000",
+				"text-halo-color": "rgba(255,255,255,0.85)",
+				"text-halo-width": 1,
+				"text-opacity": f
+			}, y = () => {
+				let e = {
+					version: 8,
+					name: "MVT Layer"
+				};
+				return h && g && (e.glyphs = g), e;
+			}, b = new Set((Array.isArray(t.hiddenValues) ? t.hiddenValues : []).map(String)), x = "rgba(0,0,0,0)", S = a.strictClassifiedStyle === !0 && ["uniqueShp", "gradedColor"].includes(o), C = (e) => {
+				let t = q(e?.value);
+				return b.has(t) || b.has(String(e?.value ?? ""));
+			}, w = (e) => {
+				let t = `${e?.valueMin}..${e?.valueMax}`, n = `${Number(e?.valueMin)}..${Number(e?.valueMax)}`;
+				return b.has(t) || b.has(n);
+			}, T = (e) => b.has("__default__") ? x : e, E = (e) => S ? x : T(e), O = (e, t) => e.color || (S ? x : t), k = String(a?.colorType || "continuous") === "continuous", j = (e, t) => {
+				if (!k || e.length < 2 || e.some((e) => w(e))) return null;
+				let n = [
+					"interpolate",
+					["linear"],
+					["to-number", ["get", s]]
+				], r = -Infinity, i = 0, a = (e, t) => {
+					!Number.isFinite(e) || e <= r || (n.push(e, t), r = e, i += 1);
+				};
+				for (let n of e) a(Number(n.valueMin), O(n, t));
+				let o = e[e.length - 1];
+				return a(Number(o.valueMax), O(o, t)), i >= 2 ? n : null;
+			}, I = (() => {
+				if (!u.point && !u.line && !u.polygon) return "#1968df";
+				if (u.point) {
+					if (o === "gradedColor") {
+						if (c.length === 0) return E(p.fill);
+						let e = [...c].filter((e) => e && e.valueMin !== void 0 && e.valueMax !== void 0).sort((e, t) => Number(e.valueMin) - Number(t.valueMin)), t = j(e, p.fill);
+						if (t) return t;
+						let n = ["case"];
+						for (let t of e) {
+							let e = Number(t.valueMin), r = Number(t.valueMax), i = w(t) ? x : O(t, p.fill);
+							n.push([
+								"all",
+								[
+									">=",
+									["to-number", ["get", s]],
+									e
+								],
+								[
+									"<",
+									["to-number", ["get", s]],
+									r
+								]
+							], i);
+						}
+						return n.push(E(p.fill)), n;
+					}
+					if (o === "uniqueShp") {
+						if (c.length === 0) return E(p.fill);
+						let e = ["match", ["to-string", ["get", s]]];
+						for (let t of c) e.push(q(t.value), C(t) ? x : O(t, p.fill));
+						return e.push(E(p.fill)), e;
+					}
+					return p.fill;
+				}
+				if (u.line) {
+					if (o === "gradedColor") {
+						if (c.length === 0) return E(p.stroke.outlineColor);
+						let e = [...c].filter((e) => e && e.valueMin !== void 0 && e.valueMax !== void 0).sort((e, t) => Number(e.valueMin) - Number(t.valueMin)), t = j(e, p.stroke.outlineColor);
+						if (t) return t;
+						let n = ["case"];
+						for (let t of e) {
+							let e = Number(t.valueMin), r = Number(t.valueMax), i = w(t) ? x : O(t, p.stroke.outlineColor);
+							n.push([
+								"all",
+								[
+									">=",
+									["to-number", ["get", s]],
+									e
+								],
+								[
+									"<",
+									["to-number", ["get", s]],
+									r
+								]
+							], i);
+						}
+						return n.push(E(p.stroke.outlineColor)), n;
+					}
+					if (o === "uniqueShp") {
+						if (c.length === 0) return E(p.stroke.outlineColor);
+						let e = ["match", ["to-string", ["get", s]]];
+						for (let t of c) e.push(q(t.value), C(t) ? x : O(t, p.stroke.outlineColor));
+						return e.push(E(p.stroke.outlineColor)), e;
+					}
+					return p.stroke.outlineColor;
+				}
+				if (u.polygon) {
+					if (o === "gradedColor") {
+						if (c.length === 0) return E(p.fill);
+						let e = [...c].filter((e) => e && e.valueMin !== void 0 && e.valueMax !== void 0).sort((e, t) => Number(e.valueMin) - Number(t.valueMin)), t = j(e, p.fill);
+						if (t) return t;
+						let n = ["case"];
+						for (let t of e) {
+							let e = Number(t.valueMin), r = Number(t.valueMax), i = w(t) ? x : O(t, p.fill);
+							n.push([
+								"all",
+								[
+									">=",
+									["to-number", ["get", s]],
+									e
+								],
+								[
+									"<",
+									["to-number", ["get", s]],
+									r
+								]
+							], i);
+						}
+						return n.push(E(p.fill)), n;
+					}
+					if (o === "uniqueShp") {
+						if (c.length === 0) return E(p.fill);
+						let e = ["match", ["to-string", ["get", s]]];
+						for (let t of c) e.push(q(t.value), C(t) ? x : O(t, p.fill));
+						return e.push(E(p.fill)), e;
+					}
+					return p.fill;
+				}
+			})(), L = S ? [
+				"case",
+				[
+					"==",
+					I,
+					x
+				],
+				0,
+				f
+			] : f, z = S ? [
+				"case",
+				[
+					"==",
+					I,
+					x
+				],
+				0,
+				M(t.fillOpacity)
+			] : M(t.fillOpacity), B = p?.strokeVisible !== !1, V = t.legendFilter || null, H = (e) => !V || !e ? e : {
+				...e,
+				filter: V
+			}, U = S ? [
+				"case",
+				[
+					"==",
+					I,
+					x
+				],
+				x,
+				p.stroke.outlineColor
+			] : p.stroke.outlineColor;
+			if (u.point) return console.log("进入pointpointpoint"), {
+				...y(),
+				sources: { [r.source]: {
+					type: "vector",
+					tiles: i,
+					minzoom: Number(t.minzoom ?? 1),
+					maxzoom: Number(t.maxzoom ?? 14),
+					scheme: e.scheme === "tms" ? "tms" : "xyz"
+				} },
+				layers: [H({
+					id: r.circle,
+					type: "circle",
+					source: r.source,
+					"source-layer": n,
+					layout: { visibility: t.visibility || "visible" },
+					paint: {
+						"circle-color": I,
+						"circle-radius": p.stroke.radius,
+						"circle-opacity": L,
+						"circle-stroke-color": B ? U : x,
+						"circle-stroke-opacity": B ? L : 0,
+						"circle-stroke-width": B ? p.stroke.outlineWidth : 0
+					}
+				}), ...h ? [H({
+					id: r.label,
+					type: "symbol",
+					source: r.source,
+					"source-layer": n,
+					layout: _,
+					paint: v
+				})] : []]
+			};
+			if (u.line) return console.log(t.minzoom, t.maxzoom, "option.maxzoomoption.maxzoom"), {
+				...y(),
+				sources: { "mvt:source": {
+					type: "vector",
+					tiles: i,
+					minzoom: Number(t.minzoom ?? 1),
+					maxzoom: Number(t.maxzoom ?? 14),
+					scheme: e.scheme === "tms" ? "tms" : "xyz"
+				} },
+				layers: [H({
+					id: "mvt-line",
+					type: "line",
+					source: "mvt:source",
+					"source-layer": n,
+					layout: { visibility: t.visibility },
+					paint: {
+						"line-color": I,
+						"line-opacity": L,
+						"line-width": p.stroke.outlineWidth ?? t.lineWidth,
+						"line-dasharray": p.stroke.type === "dashed" ? [2, 2] : [1, 0]
+					}
+				}), ...h ? [H({
+					id: r.label,
+					type: "symbol",
+					source: "mvt:source",
+					"source-layer": n,
+					layout: A(m, d, { "text-offset": [0, -1.8] }),
+					paint: v
+				})] : []]
+			};
+			if (u.polygon) {
+				let r = B ? U : x;
+				return {
+					...y(),
+					sources: { "mvt:source": {
+						type: "vector",
+						tiles: i,
+						minzoom: Number(t.minzoom ?? 1),
+						maxzoom: Number(t.maxzoom ?? 14),
+						scheme: e.scheme === "tms" ? "tms" : "xyz"
+					} },
+					layers: [
+						H({
+							id: "mvt-fill",
+							type: "fill",
+							source: "mvt:source",
+							"source-layer": n,
+							layout: { visibility: t.visibility },
+							paint: {
+								"fill-color": I,
+								"fill-opacity": z,
+								"fill-outline-color": r
+							}
+						}),
+						H({
+							id: "mvt-line",
+							type: "line",
+							source: "mvt:source",
+							"source-layer": n,
+							layout: { visibility: t.visibility },
+							paint: {
+								"line-color": r,
+								"line-opacity": B ? L : 0,
+								"line-width": B ? p.stroke.outlineWidth ?? t.lineWidth : 0,
+								"line-dasharray": p.stroke.type === "dashed" ? [2, 2] : [1, 0]
+							}
+						}),
+						...K() ? [H({
+							id: "mvt-label",
+							type: "symbol",
+							source: "mvt:source",
+							"source-layer": n,
+							layout: A(m, d, { "text-offset": [0, -1.8] }, "polygon"),
+							paint: v
+						})] : []
+					]
+				};
+			}
+		}, ee = () => {
+			let e = y.value;
+			S("loaded", e), (v?.value?.container || window)?.dispatchEvent(new CustomEvent("loaded", { detail: e }));
+		}, te = (e) => {
+			console.error("[zz-layer-mvt] vector tile error:", e), (v?.value?.container || window)?.dispatchEvent(new CustomEvent("error", { detail: e }));
+		}, X = () => {
+			try {
+				v?.value?.scene?.requestRender?.();
+			} catch (e) {
+				console.warn("[zz-layer-mvt] request render failed:", e);
+			}
+		}, Z = () => {
+			let e = v?.value;
+			if (e && y.value) {
+				try {
+					e.scene.primitives.remove(y.value);
+				} catch (e) {
+					console.warn("[zz-layer-mvt] remove tileset failed:", e);
+				}
+				try {
+					y.value.destroy?.();
+				} catch (e) {
+					console.warn("[zz-layer-mvt] destroy tileset failed:", e);
+				}
+				y.value = null, b.value = !1;
+			}
+		}, ne = async () => {
+			if (!v?.value) return;
+			let e = P.value;
+			if (!R.value || !e.url || !e.sourceLayer || !e.layer) {
+				Z();
+				return;
+			}
+			Z();
+			let n = Y();
+			if (!n) {
+				Z();
+				return;
+			}
+			let r = e.workerUrl || void 0;
+			try {
+				let i = new p({
+					style: n,
+					workerUrl: r,
+					maximumActiveTasks: Number(e.maximumActiveTasks ?? 4)
+				});
+				if (i.readyEvent?.addEventListener(() => {
+					b.value = !0, X(), ee();
+				}), e.token) try {
+					i.token = e.token;
+				} catch (e) {
+					console.warn("[zz-layer-mvt] set token failed:", e);
+				}
+				t(v.value, i, x.stackIndex, 0, {
+					layerType: "mvt",
+					groupKey: x.groupKey || e.layer || String(x.stackIndex),
+					subStackIndex: x.subStackIndex
+				}), X(), y.value = i;
+			} catch (e) {
+				te(e);
+			}
+		}, Q = null, $ = () => {
+			Q && clearTimeout(Q), Q = setTimeout(() => {
+				Q = null, ne();
+			}, 0);
+		};
+		return f(I, (e, t) => {
+			!e || e === t || $();
+		}), f(L, (e, t) => {
+			!e || e === t || (z.value = Date.now(), $());
+		}), f(() => F.value.hiddenValues, () => {
+			z.value = Date.now();
+		}, { deep: !0 }), f(() => [
+			x.stackIndex,
+			x.subStackIndex,
+			x.groupKey
+		], () => {
+			y.value && v.value && x.stackIndex >= 0 && e(v.value, y.value, x.stackIndex, {
+				layerType: "mvt",
+				groupKey: x.groupKey || P.value.layer || String(x.stackIndex),
+				subStackIndex: x.subStackIndex
+			});
+		}), f(v, (e) => {
+			e && $();
+		}), s(() => {
+			$();
+		}), c(() => {
+			Q &&= (clearTimeout(Q), null), Z();
+		}), (e, t) => {
+			let n = d("zz-layer-geojson");
+			return G.value && b.value ? (l(), i(n, {
+				key: `mvt-wfs-label-${z.value}`,
+				geojson: W.value,
+				token: P.value.token,
+				note: B.value,
+				"note-only": !0,
+				"style-by-property": F.value.styleByProperty,
+				"hidden-values": F.value.hiddenValues || [],
+				"clamp-to-ground": !0,
+				"fit-to-layer": !1,
+				"layer-z-index": 1e3
+			}, null, 8, [
+				"geojson",
+				"token",
+				"note",
+				"style-by-property",
+				"hidden-values"
+			])) : a("", !0);
+		};
+	}
+};
+//#endregion
+export { g as default };