npm - @y250031003/amap-sky-debug - Versions diffs - 0.1.0 - Mend

@y250031003/amap-sky-debug 0.1.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.

Files changed (6) hide show

package/README.md +74 -0
package/dist-lib/amap-sky-debug.css +2 -0
package/dist-lib/amap-sky-debug.js +184 -0
package/dist-lib/amap-sky-debug.umd.cjs +1 -0
package/package.json +43 -0
package/types/index.d.ts +61 -0

package/README.md ADDED Viewed

@@ -0,0 +1,74 @@
+# @y250031003/amap-sky-debug
+用于覆盖和调试高德 3D 地图天空颜色。
+提供两种用法：
+- 方法：`setFixedSkyColors`
+  直接在地图初始化时覆盖内部颜色，不依赖组件。
+- 组件：`SkyDebugPanel`
+  在页面右上角显示调试面板，实时查看和调整颜色。
+## 安装
+```bash
+npm i @y250031003/amap-sky-debug
+```
+如果你要使用调试面板，需要额外引入样式：
+```js
+import '@y250031003/amap-sky-debug/dist-lib/amap-sky-debug.css'
+```
+## 方法用法
+```js
+import { setFixedSkyColors } from '@y250031003/amap-sky-debug'
+setFixedSkyColors(map, {
+  sky: '#548cd6',
+  atmosphere: '#548cd6',
+  ground: '#0000ff',
+})
+```
+说明：
+- `sky`
+  顶部天空主色
+- `atmosphere`
+  大气层颜色，低缩放时更明显
+- `ground`
+  地平线过渡色
+## 组件用法
+```vue
+<template>
+  <SkyDebugPanel :map="mapRef" />
+</template>
+<script setup>
+import { ref } from 'vue'
+import { SkyDebugPanel } from '@y250031003/amap-sky-debug'
+import '@y250031003/amap-sky-debug/dist-lib/amap-sky-debug.css'
+const mapRef = ref(null)
+</script>
+```
+## 导出
+```js
+import {
+  SkyDebugPanel,
+  defaultSkyPalette,
+  setFixedSkyColors,
+  readSkyDebugState,
+} from '@y250031003/amap-sky-debug'
+```
+## 类型
+包内自带 `types/index.d.ts`，可直接在 TypeScript 项目中使用。

package/dist-lib/amap-sky-debug.css ADDED Viewed

	@@ -0,0 +1,2 @@
1	+ .debug-panel[data-v-c91aa86d]{z-index:10;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);color:#e8eefc;background:#0c121ed1;border:1px solid #ffffff24;border-radius:12px;min-width:320px;padding:14px 16px;font:12px/1.4 SFMono-Regular,Menlo,Monaco,Consolas,Liberation Mono,Courier New,monospace;position:absolute;top:16px;right:16px}.debug-title[data-v-c91aa86d]{margin-bottom:10px;font-size:13px;font-weight:700}.debug-summary[data-v-c91aa86d]{color:#e8eefcb8;margin-bottom:12px}.debug-row[data-v-c91aa86d]{align-items:center;gap:10px;display:flex}.debug-row+.debug-row[data-v-c91aa86d]{margin-top:10px}.debug-swatch[data-v-c91aa86d]{border:1px solid #ffffff2e;border-radius:4px;flex:0 0 18px;width:18px;height:18px}.debug-label[data-v-c91aa86d]{color:#e8eefcb8}.debug-help[data-v-c91aa86d]{color:#e8eefc8f;margin-top:2px}.debug-value[data-v-c91aa86d]{word-break:break-all;margin-top:2px}.debug-meta[data-v-c91aa86d]{color:#e8eefcb8;margin-top:12px}.debug-controls[data-v-c91aa86d]{border-top:1px solid #ffffff14;margin-top:14px;padding-top:12px}.debug-toggle[data-v-c91aa86d]{color:#e8eefce6;align-items:center;gap:8px;margin-bottom:10px;display:flex}.debug-control[data-v-c91aa86d]{justify-content:space-between;align-items:center;gap:12px;display:flex}.debug-control+.debug-control[data-v-c91aa86d]{margin-top:8px}.debug-control-label[data-v-c91aa86d]{color:#e8eefcb8}.debug-color[data-v-c91aa86d]{cursor:pointer;background:0 0;border:1px solid #ffffff2e;border-radius:6px;width:42px;height:28px;padding:0}
2	+ /$vite$:1/

package/dist-lib/amap-sky-debug.js ADDED Viewed

@@ -0,0 +1,184 @@
+import { createElementBlock as e, createElementVNode as t, normalizeStyle as n, onBeforeUnmount as r, openBlock as i, ref as a, toDisplayString as o, vModelCheckbox as s, vModelText as c, watch as l, withDirectives as u } from "vue";
+//#region src/utils/skyColors.js
+var d = {
+	sky: "#548cd6",
+	atmosphere: "#548cd6",
+	ground: "#0000ff"
+}, f = /* @__PURE__ */ new WeakMap(), p = (e) => {
+	if (typeof e != "string" || !/^#([\da-f]{6})$/i.test(e)) return [
+		0,
+		0,
+		0,
+		1
+	];
+	let t = e.slice(1).match(/.{2}/g).map((e) => parseInt(e, 16));
+	return [
+		t[0] / 255,
+		t[1] / 255,
+		t[2] / 255,
+		1
+	];
+}, m = (e) => {
+	let [t, n, r] = p(e);
+	return [
+		Math.round(t * 255),
+		Math.round(n * 255),
+		Math.round(r * 255),
+		255
+	];
+}, h = (e) => {
+	if (!Array.isArray(e) || e.length < 4) return "rgba(0, 0, 0, 0)";
+	let t = e.slice(0, 3).map((e) => Math.round(e <= 1 ? e * 255 : e)), n = e[3] > 1 ? +(e[3] / 255).toFixed(3) : +e[3].toFixed(3);
+	return `rgba(${t[0]}, ${t[1]}, ${t[2]}, ${n})`;
+}, g = (e = "rgba(0, 0, 0, 0)") => ({
+	css: e,
+	text: e
+}), _ = (e, t = d, n = !0) => {
+	if (!e?.mapStyle) return;
+	let r = f.get(e);
+	if (r || (r = {
+		JF: e.JF.bind(e),
+		sX: e.sX.bind(e),
+		dn: e.mapStyle.dn.bind(e.mapStyle)
+	}, f.set(e, r)), !n) {
+		e.JF = r.JF, e.sX = r.sX, e.mapStyle.dn = r.dn, e.setNeedUpdate(!0);
+		return;
+	}
+	e.JF = () => p(t.sky), e.sX = () => p(t.atmosphere), e.mapStyle.dn = (...e) => {
+		let n = r.dn(...e);
+		if (e[0] === 30001 && e[1] === 1) {
+			let e = m(t.ground), r = p(t.ground);
+			return {
+				...n,
+				faceColor: {
+					...n?.faceColor || {},
+					rgba: e,
+					U8t: r,
+					normalize() {
+						return r;
+					}
+				}
+			};
+		}
+		return n;
+	}, e.setNeedUpdate(!0);
+}, v = (e) => {
+	if (!e?.mapStyle?.dn) return {
+		zoom: "-",
+		sky: g(),
+		atmosphere: g(),
+		ground: g()
+	};
+	let t = Math.floor(e.getZoom()), n = e.mapStyle.dn(30001, 1, t), r = n?.faceColor?.rgba || n?.faceColor?.U8t;
+	return {
+		zoom: t,
+		sky: {
+			css: h(e.JF?.(t)),
+			text: h(e.JF?.(t))
+		},
+		atmosphere: {
+			css: h(e.sX?.(t)),
+			text: h(e.sX?.(t))
+		},
+		ground: {
+			css: h(r),
+			text: h(r)
+		}
+	};
+}, y = (e, t) => {
+	let n = e.__vccOpts || e;
+	for (let [e, r] of t) n[e] = r;
+	return n;
+}, b = { class: "debug-panel" }, x = { class: "debug-row" }, S = { class: "debug-value" }, C = { class: "debug-row" }, w = { class: "debug-value" }, T = { class: "debug-row" }, E = { class: "debug-value" }, D = { class: "debug-controls" }, O = { class: "debug-toggle" }, k = { class: "debug-control" }, A = { class: "debug-control" }, j = { class: "debug-control" }, M = { class: "debug-meta" }, N = /* @__PURE__ */ y({
+	__name: "SkyDebugPanel",
+	props: {
+		map: {
+			type: Object,
+			default: null
+		},
+		initialPalette: {
+			type: Object,
+			default: () => d
+		},
+		enabledByDefault: {
+			type: Boolean,
+			default: !0
+		}
+	},
+	setup(f) {
+		let p = f, m = 0, h = a({
+			zoom: "-",
+			sky: g(),
+			atmosphere: g(),
+			ground: g()
+		}), y = a({
+			enabled: p.enabledByDefault,
+			...d,
+			...p.initialPalette
+		}), N = () => {
+			p.map && _(p.map, y.value, y.value.enabled);
+		}, P = () => {
+			p.map && (h.value = v(p.map), m = requestAnimationFrame(P));
+		};
+		return l(() => p.map, (e) => {
+			cancelAnimationFrame(m), e && (N(), P());
+		}, { immediate: !0 }), r(() => {
+			cancelAnimationFrame(m);
+		}), (r, a) => (i(), e("div", b, [
+			a[14] ||= t("div", { class: "debug-title" }, "天空调试面板 / Sky Debug", -1),
+			a[15] ||= t("div", { class: "debug-summary" }, " 用于覆盖高德内部天空取色逻辑。 `JF` 控制顶部天空，`sX` 控制低缩放大气层，`30001-1` 控制地平线过渡色。 ", -1),
+			t("div", x, [t("span", {
+				class: "debug-swatch",
+				style: n({ background: h.value.sky.css })
+			}, null, 4), t("div", null, [
+				a[4] ||= t("div", { class: "debug-label" }, "顶部天空 / Top Sky (`JF`)", -1),
+				a[5] ||= t("div", { class: "debug-help" }, "高缩放时主要可见，控制天空上半部分主色。", -1),
+				t("div", S, o(h.value.sky.text), 1)
+			])]),
+			t("div", C, [t("span", {
+				class: "debug-swatch",
+				style: n({ background: h.value.atmosphere.css })
+			}, null, 4), t("div", null, [
+				a[6] ||= t("div", { class: "debug-label" }, "大气层 / Atmosphere (`sX`)", -1),
+				a[7] ||= t("div", { class: "debug-help" }, "低缩放更明显，通常在 `zoom <= 11` 时更容易看到。", -1),
+				t("div", w, o(h.value.atmosphere.text), 1)
+			])]),
+			t("div", T, [t("span", {
+				class: "debug-swatch",
+				style: n({ background: h.value.ground.css })
+			}, null, 4), t("div", null, [
+				a[8] ||= t("div", { class: "debug-label" }, "地平线过渡 / Horizon Blend (`30001-1`)", -1),
+				a[9] ||= t("div", { class: "debug-help" }, "来自地面主色，会参与天空靠近地面的过渡混色。", -1),
+				t("div", E, o(h.value.ground.text), 1)
+			])]),
+			t("div", D, [
+				t("label", O, [u(t("input", {
+					"onUpdate:modelValue": a[0] ||= (e) => y.value.enabled = e,
+					type: "checkbox",
+					onChange: N
+				}, null, 544), [[s, y.value.enabled]]), a[10] ||= t("span", null, "启用覆盖 / Enable Override", -1)]),
+				t("div", k, [a[11] ||= t("span", { class: "debug-control-label" }, "顶部天空 / Top Sky", -1), u(t("input", {
+					"onUpdate:modelValue": a[1] ||= (e) => y.value.sky = e,
+					class: "debug-color",
+					type: "color",
+					onInput: N
+				}, null, 544), [[c, y.value.sky]])]),
+				t("div", A, [a[12] ||= t("span", { class: "debug-control-label" }, "大气层 / Atmosphere", -1), u(t("input", {
+					"onUpdate:modelValue": a[2] ||= (e) => y.value.atmosphere = e,
+					class: "debug-color",
+					type: "color",
+					onInput: N
+				}, null, 544), [[c, y.value.atmosphere]])]),
+				t("div", j, [a[13] ||= t("span", { class: "debug-control-label" }, "地平线过渡 / Horizon", -1), u(t("input", {
+					"onUpdate:modelValue": a[3] ||= (e) => y.value.ground = e,
+					class: "debug-color",
+					type: "color",
+					onInput: N
+				}, null, 544), [[c, y.value.ground]])])
+			]),
+			t("div", M, "当前缩放 / Zoom " + o(h.value.zoom), 1)
+		]));
+	}
+}, [["__scopeId", "data-v-c91aa86d"]]);
+//#endregion
+export { N as SkyDebugPanel, g as createColorState, d as defaultSkyPalette, m as hexToByteRgba, p as hexToUnitRgba, v as readSkyDebugState, h as rgbaToCss, _ as setFixedSkyColors };

package/dist-lib/amap-sky-debug.umd.cjs ADDED Viewed

@@ -0,0 +1 @@

package/package.json ADDED Viewed

@@ -0,0 +1,43 @@
+{
+  "name": "@y250031003/amap-sky-debug",
+  "private": false,
+  "version": "0.1.0",
+  "type": "module",
+  "main": "./dist-lib/amap-sky-debug.umd.cjs",
+  "module": "./dist-lib/amap-sky-debug.js",
+  "types": "./types/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./types/index.d.ts",
+      "import": "./dist-lib/amap-sky-debug.js",
+      "require": "./dist-lib/amap-sky-debug.umd.cjs"
+    }
+  },
+  "files": [
+    "dist-lib",
+    "types"
+  ],
+  "scripts": {
+    "dev": "vite",
+    "build": "vue-tsc -b && vite build",
+    "build:lib": "vite build --mode lib",
+    "prepublishOnly": "npm run build:lib",
+    "preview": "vite preview"
+  },
+  "dependencies": {
+    "@vuemap/vue-amap": "^2.1.17",
+    "@vuemap/vue-amap-loca": "^2.1.2",
+    "vue": "^3.5.32"
+  },
+  "peerDependencies": {
+    "vue": "^3.5.0"
+  },
+  "devDependencies": {
+    "@types/node": "^24.12.2",
+    "@vitejs/plugin-vue": "^6.0.5",
+    "@vue/tsconfig": "^0.9.1",
+    "typescript": "~6.0.2",
+    "vite": "^8.0.4",
+    "vue-tsc": "^3.2.6"
+  }
+}

package/types/index.d.ts ADDED Viewed

@@ -0,0 +1,61 @@
+import type { DefineComponent } from 'vue'
+export interface SkyPalette {
+  sky: string
+  atmosphere: string
+  ground: string
+}
+export interface ColorState {
+  css: string
+  text: string
+}
+export interface SkyDebugState {
+  zoom: number | '-'
+  sky: ColorState
+  atmosphere: ColorState
+  ground: ColorState
+}
+export interface AMapLike {
+  JF: (zoom?: number) => number[]
+  sX: (zoom?: number) => number[]
+  getZoom: () => number
+  setNeedUpdate: (needUpdate: boolean) => void
+  mapStyle: {
+    dn: (...args: any[]) => any
+  }
+}
+export interface SkyDebugPanelProps {
+  map?: AMapLike | null
+  initialPalette?: Partial<SkyPalette>
+  enabledByDefault?: boolean
+}
+export const defaultSkyPalette: SkyPalette
+export function hexToUnitRgba(hex: string): number[]
+export function hexToByteRgba(hex: string): number[]
+export function rgbaToCss(rgba: number[]): string
+export function createColorState(css?: string): ColorState
+/**
+ * 覆写高德 3D 地图内部天空取色逻辑。
+ *
+ * - `map.JF()`：顶部天空主色
+ * - `map.sX()`：大气层底色
+ * - `map.mapStyle.dn(30001, 1, zoom).faceColor`：地平线过渡色
+ */
+export function setFixedSkyColors(
+  map: AMapLike,
+  palette?: Partial<SkyPalette>,
+  enabled?: boolean
+): void
+export function readSkyDebugState(map: AMapLike | null | undefined): SkyDebugState
+export const SkyDebugPanel: DefineComponent<SkyDebugPanelProps>
+export default SkyDebugPanel