@movk/maplibre 1.1.0 → 1.2.0

package/dist/module.d.mts

@@ -1,4 +1,4 @@
-import * as _nuxt_schema from '@nuxt/schema';
+import { NuxtModule } from '@nuxt/schema';
 export * from '../dist/runtime/types/index.js';
 
 interface ModuleOptions {
@@ -19,9 +19,11 @@ interface ModuleOptions {
         pmtiles?: boolean;
         /** 注册 `cog://` 协议，依赖 @geomatico/maplibre-cog-protocol */
         cog?: boolean;
+        /** 注册 `zzts://` 协议（ZZTS 二维动态切片服务），无额外依赖；需自定义请求时改为自行调用 `registerZztsProtocol` */
+        zzts?: boolean;
     };
 }
-declare const _default: _nuxt_schema.NuxtModule<ModuleOptions, ModuleOptions, false>;
+declare const module$1: NuxtModule<ModuleOptions, ModuleOptions, false>;
 
-export { _default as default };
+export { module$1 as default };
 export type { ModuleOptions };

package/dist/module.d.ts

@@ -1,4 +1,4 @@
-import * as _nuxt_schema from '@nuxt/schema';
+import { NuxtModule } from '@nuxt/schema';
 export * from '../dist/runtime/types/index.js';
 
 interface ModuleOptions {
@@ -19,9 +19,11 @@ interface ModuleOptions {
         pmtiles?: boolean;
         /** 注册 `cog://` 协议，依赖 @geomatico/maplibre-cog-protocol */
         cog?: boolean;
+        /** 注册 `zzts://` 协议（ZZTS 二维动态切片服务），无额外依赖；需自定义请求时改为自行调用 `registerZztsProtocol` */
+        zzts?: boolean;
     };
 }
-declare const _default: _nuxt_schema.NuxtModule<ModuleOptions, ModuleOptions, false>;
+declare const module$1: NuxtModule<ModuleOptions, ModuleOptions, false>;
 
-export { _default as default };
+export { module$1 as default };
 export type { ModuleOptions };

package/dist/module.json

@@ -1,6 +1,6 @@
 {
   "name": "@movk/maplibre",
-  "version": "1.1.0",
+  "version": "1.2.0",
   "configKey": "maplibre",
   "compatibility": {
     "nuxt": ">=4.0.0"

package/dist/module.mjs

@@ -3,7 +3,7 @@ import { defineNuxtModule, createResolver, addComponentsDir, addImportsDir, addP
 import { defu } from 'defu';
 
 const name = "@movk/maplibre";
-const version = "1.1.0";
+const version = "1.2.0";
 
 const OPTIONAL_DEPS = ["lottie-web", "pmtiles", "@geomatico/maplibre-cog-protocol", "maplibre-contour"];
 const module$1 = defineNuxtModule({
@@ -45,7 +45,8 @@ const module$1 = defineNuxtModule({
     });
     const protocols = [
       options.protocols?.pmtiles && { path: "./runtime/utils/pmtiles", register: "registerPmtilesProtocol" },
-      options.protocols?.cog && { path: "./runtime/utils/cog", register: "registerCogProtocol" }
+      options.protocols?.cog && { path: "./runtime/utils/cog", register: "registerCogProtocol" },
+      options.protocols?.zzts && { path: "./runtime/utils/zzts", register: "registerZztsProtocol" }
     ].filter((item) => !!item);
     if (protocols.length) {
       addPluginTemplate({

package/dist/runtime/utils/zzts-tile.d.ts

@@ -0,0 +1,54 @@
+/** 经纬度包围盒 [west, south, east, north] */
+export type LngLatBBox = [number, number, number, number];
+export interface ZztsExtent {
+    xmin: number;
+    ymin: number;
+    xmax: number;
+    ymax: number;
+}
+/** elements 接口返回的单个元素：一张按 extent 贴图的 GeoSOT 网格图片 */
+export interface ZztsElement {
+    id: string;
+    type: string;
+    url: string;
+    extent: ZztsExtent;
+}
+/** media 接口返回的图层元数据（WGS84） */
+export interface ZztsMedia {
+    name: string;
+    extent: ZztsExtent;
+    minZoom: number;
+    maxZoom: number;
+    /** 原始影像分辨率（米） */
+    resolution: number;
+}
+export interface TileCoord {
+    z: number;
+    x: number;
+    y: number;
+}
+/** 源矩形为元素图片的比例坐标 [x, y, w, h]（0-1），目标矩形为瓦片像素坐标 */
+export interface ZztsDraw {
+    source: [number, number, number, number];
+    target: [number, number, number, number];
+}
+export declare const ZZTS_TILE_SIZE = 512;
+export declare function parseZztsUrl(url: string): {
+    mediaUrl: string;
+    tile?: TileCoord;
+};
+export declare function tileBBox({ z, x, y }: TileCoord): LngLatBBox;
+/** 瓦片在给定纬度处的比例尺分母，与公司 Cesium 组件的取值口径一致，保证服务端选出相同的网格级别 */
+export declare function tileScale(z: number, lat: number): number;
+export declare function zztsTileJson(url: string, media: ZztsMedia): {
+    tiles: string[];
+    bounds: LngLatBBox;
+    minzoom: number;
+    maxzoom: number;
+    tileSize: number;
+    name: string;
+};
+/** `coarser` 为相对瓦片默认级别向上取粗的级数，每级比例尺翻倍，服务端随之降一级 GeoSOT 网格 */
+export declare function elementsUrl(mediaUrl: string, tile: TileCoord, coarser?: number): string;
+/** 规划元素图片在瓦片上的绘制：经向线性；纬向在低级别按等高条带分段，逐段换算墨卡托以消除拉伸误差 */
+export declare function planDraws(extent: ZztsExtent, tile: TileCoord): ZztsDraw[];

package/dist/runtime/utils/zzts-tile.js

@@ -0,0 +1,85 @@
+export const ZZTS_TILE_SIZE = 512;
+const PROTOCOL_PREFIX = "zzts://";
+const TILE_HASH = /#(\d+)\/(\d+)\/(\d+)$/;
+const EARTH_CIRCUMFERENCE = 2 * Math.PI * 6378137;
+const METERS_PER_PIXEL_TO_SCALE = 96 / 0.0254;
+const MAX_BBOX_SPAN = 20;
+const LINEAR_ZOOM = 8;
+const STRIP_HEIGHT = 32;
+export function parseZztsUrl(url) {
+  const raw = url.startsWith(PROTOCOL_PREFIX) ? url.slice(PROTOCOL_PREFIX.length) : url;
+  const match = raw.match(TILE_HASH);
+  if (!match) return { mediaUrl: raw };
+  return {
+    mediaUrl: raw.slice(0, match.index),
+    tile: { z: Number(match[1]), x: Number(match[2]), y: Number(match[3]) }
+  };
+}
+const lngAt = (x, z) => x / 2 ** z * 360 - 180;
+function snapOut(x, y, w, h) {
+  const left = Math.floor(x);
+  const top = Math.floor(y);
+  return [left, top, Math.ceil(x + w) - left, Math.ceil(y + h) - top];
+}
+const latAt = (y, z) => Math.atan(Math.sinh(Math.PI * (1 - 2 * y / 2 ** z))) * 180 / Math.PI;
+const rowAt = (lat, z) => (1 - Math.asinh(Math.tan(lat * Math.PI / 180)) / Math.PI) / 2 * 2 ** z;
+export function tileBBox({ z, x, y }) {
+  return [lngAt(x, z), latAt(y + 1, z), lngAt(x + 1, z), latAt(y, z)];
+}
+export function tileScale(z, lat) {
+  const metersPerPixel = EARTH_CIRCUMFERENCE * Math.cos(lat * Math.PI / 180) / (ZZTS_TILE_SIZE * 2 ** z);
+  return metersPerPixel * METERS_PER_PIXEL_TO_SCALE;
+}
+export function zztsTileJson(url, media) {
+  const { xmin, ymin, xmax, ymax } = media.extent;
+  const centerLat = (ymin + ymax) / 2;
+  const minzoom = Math.ceil(Math.log2(360 / MAX_BBOX_SPAN));
+  const nativeZoom = Math.ceil(Math.log2(EARTH_CIRCUMFERENCE * Math.cos(centerLat * Math.PI / 180) / (ZZTS_TILE_SIZE * media.resolution)));
+  return {
+    tiles: [`${url}#{z}/{x}/{y}`],
+    bounds: [xmin, ymin, xmax, ymax],
+    minzoom,
+    maxzoom: Math.max(minzoom, nativeZoom),
+    tileSize: ZZTS_TILE_SIZE,
+    name: media.name
+  };
+}
+export function elementsUrl(mediaUrl, tile, coarser = 0) {
+  const [west, south, east, north] = tileBBox(tile);
+  const url = new URL(mediaUrl);
+  url.pathname = `${url.pathname.replace(/\/$/, "")}/elements`;
+  url.searchParams.set("width", String(ZZTS_TILE_SIZE));
+  url.searchParams.set("height", String(ZZTS_TILE_SIZE));
+  url.searchParams.set("scale", String(tileScale(tile.z, (south + north) / 2) * 2 ** coarser));
+  url.searchParams.set("bbox", [west, south, east, north].join(","));
+  return url.toString();
+}
+export function planDraws(extent, tile) {
+  const [west, south, east, north] = tileBBox(tile);
+  const left = Math.max(extent.xmin, west);
+  const right = Math.min(extent.xmax, east);
+  const bottom = Math.max(extent.ymin, south);
+  const top = Math.min(extent.ymax, north);
+  if (left >= right || bottom >= top) return [];
+  const { z, x, y } = tile;
+  const width = extent.xmax - extent.xmin;
+  const height = extent.ymax - extent.ymin;
+  const sx = (left - extent.xmin) / width;
+  const sw = (right - left) / width;
+  const dx = ((left + 180) / 360 * 2 ** z - x) * ZZTS_TILE_SIZE;
+  const dw = (right - left) / 360 * 2 ** z * ZZTS_TILE_SIZE;
+  const dyTop = (rowAt(top, z) - y) * ZZTS_TILE_SIZE;
+  const dyBottom = (rowAt(bottom, z) - y) * ZZTS_TILE_SIZE;
+  const strips = z >= LINEAR_ZOOM ? 1 : Math.max(1, Math.ceil((dyBottom - dyTop) / STRIP_HEIGHT));
+  const stripHeight = (dyBottom - dyTop) / strips;
+  const latAtPixel = (py) => latAt(y + py / ZZTS_TILE_SIZE, z);
+  return Array.from({ length: strips }, (_, i) => {
+    const dy = dyTop + i * stripHeight;
+    const latTop = i === 0 ? top : latAtPixel(dy);
+    const latBottom = i === strips - 1 ? bottom : latAtPixel(dy + stripHeight);
+    return {
+      source: [sx, (extent.ymax - latTop) / height, sw, (latTop - latBottom) / height],
+      target: snapOut(dx, dy, dw, stripHeight)
+    };
+  });
+}

package/dist/runtime/utils/zzts.d.ts

@@ -0,0 +1,14 @@
+export interface ZztsProtocolOptions {
+    /** 自定义请求，元数据、元素列表与元素图片共用；用于附加鉴权头或改走代理 */
+    fetch?: typeof globalThis.fetch;
+    /**
+     * 元素图片缓存数量；相邻瓦片常共用同一网格图片，命中时不再重复下载
+     * @defaultValue 256
+     */
+    cacheSize?: number;
+}
+/**
+ * 注册 `zzts://` 协议（全局单例、幂等）：把 ZZTS 二维动态切片服务适配为 512 墨卡托栅格瓦片。
+ * `MaplibreRasterLayer` 的 `url` 写成 `zzts://` + media 接口地址即可。
+ */
+export declare function registerZztsProtocol(options?: ZztsProtocolOptions): void;

package/dist/runtime/utils/zzts.js

@@ -0,0 +1,72 @@
+import { addProtocol } from "maplibre-gl";
+import { defineGlobalSingleton } from "@movk/core";
+import { ZZTS_TILE_SIZE, elementsUrl, parseZztsUrl, planDraws, zztsTileJson } from "./zzts-tile.js";
+const EMPTY_TILE = new ArrayBuffer(0);
+const MAX_FALLBACK_LEVELS = 3;
+async function getJson(request, url, signal) {
+  const res = await request(url, { signal });
+  if (!res.ok) throw new Error(`ZZTS \u8BF7\u6C42\u5931\u8D25\uFF1AHTTP ${res.status}`);
+  return await res.json();
+}
+function imageElements(payload) {
+  if (!Array.isArray(payload.elements)) throw new Error(payload.msg || "ZZTS \u5143\u7D20\u8BF7\u6C42\u5931\u8D25");
+  return payload.elements.filter(
+    (element, i, list) => element.type === "image" && list.findIndex((item) => item.id === element.id) === i
+  );
+}
+function createImageCache(request, size) {
+  const cache = /* @__PURE__ */ new Map();
+  return (url) => {
+    const hit = cache.get(url);
+    if (hit) {
+      cache.delete(url);
+      cache.set(url, hit);
+      return hit;
+    }
+    const pending = request(url).then(async (res) => {
+      if (res.status === 404) return void 0;
+      if (!res.ok) throw new Error(`ZZTS \u56FE\u7247\u52A0\u8F7D\u5931\u8D25\uFF1AHTTP ${res.status}`);
+      return createImageBitmap(await res.blob());
+    });
+    pending.catch(() => cache.delete(url));
+    cache.set(url, pending);
+    if (cache.size > size) cache.delete(cache.keys().next().value);
+    return pending;
+  };
+}
+function compose(tile, items) {
+  const canvas = new OffscreenCanvas(ZZTS_TILE_SIZE, ZZTS_TILE_SIZE);
+  const context = canvas.getContext("2d");
+  for (const { element, image } of items) {
+    for (const { source: [sx, sy, sw, sh], target: [dx, dy, dw, dh] } of planDraws(element.extent, tile)) {
+      context.drawImage(image, sx * image.width, sy * image.height, sw * image.width, sh * image.height, dx, dy, dw, dh);
+    }
+  }
+  return canvas.transferToImageBitmap();
+}
+function createZztsProtocol({ fetch: request = globalThis.fetch.bind(globalThis), cacheSize = 256 } = {}) {
+  const loadImage = createImageCache(request, cacheSize);
+  async function loadLevel(mediaUrl, tile, coarser, signal) {
+    const elements = imageElements(await getJson(request, elementsUrl(mediaUrl, tile, coarser), signal));
+    const images = await Promise.all(elements.map((element) => loadImage(element.url).catch(() => void 0)));
+    const layers = elements.flatMap((element, i) => images[i] ? [{ element, image: images[i] }] : []);
+    if (layers.length === elements.length || coarser >= MAX_FALLBACK_LEVELS) return layers;
+    return [...await loadLevel(mediaUrl, tile, coarser + 1, signal), ...layers];
+  }
+  return async ({ url }, { signal }) => {
+    const { mediaUrl, tile } = parseZztsUrl(url);
+    if (!tile) {
+      const media = await getJson(request, mediaUrl, signal);
+      return { data: zztsTileJson(url, media) };
+    }
+    const layers = await loadLevel(mediaUrl, tile, 0, signal);
+    signal.throwIfAborted();
+    return { data: layers.length ? compose(tile, layers) : EMPTY_TILE };
+  };
+}
+export function registerZztsProtocol(options) {
+  defineGlobalSingleton("movk-maplibre:protocol:zzts", () => {
+    addProtocol("zzts", createZztsProtocol(options));
+    return true;
+  });
+}

package/package.json

@@ -1,8 +1,8 @@
 {
   "name": "@movk/maplibre",
   "type": "module",
-  "version": "1.1.0",
-  "packageManager": "pnpm@12.6.0",
+  "version": "1.2.0",
+  "packageManager": "pnpm@12.10.1",
   "description": "声明式 MapLibre GL 封装库：MaplibreMap/Source/Layer 等组件与 composables，原生支持 Nuxt 4 模块，并通过 Vite 插件在纯 Vue + Vite 项目中可用。无需 access token，内置 3D 建筑、雷达/扩散/辉光等动态效果，sky/terrain 环境，绘制（terra-draw）、天地图、WMS/WMTS 与多坐标系本土化支持。",
   "author": "YiXuan <mhaibaraai@gmail.com>",
   "license": "MIT",
@@ -155,28 +155,28 @@
   "devDependencies": {
     "@geomatico/maplibre-cog-protocol": "^0.10.0",
     "@nuxt/eslint-config": "^1.17.0",
-    "@nuxt/kit": "^4.5.2",
+    "@nuxt/kit": "^4.6.0",
     "@nuxt/module-builder": "^1.0.3",
-    "@nuxt/schema": "^4.5.2",
+    "@nuxt/schema": "^4.6.0",
     "@release-it/conventional-changelog": "^12.0.2",
     "@types/geojson": "^7946.0.16",
     "@vitejs/plugin-vue": "^6.0.9",
     "@vue/test-utils": "^2.5.1",
-    "eslint": "^10.11.0",
-    "happy-dom": "^20.14.5",
+    "eslint": "^10.12.0",
+    "happy-dom": "^20.14.6",
     "lottie-web": "^5.13.0",
     "maplibre-contour": "^0.1.1",
-    "maplibre-gl": "^6.11.2",
-    "nuxt": "^4.5.2",
+    "maplibre-gl": "^6.13.0",
+    "nuxt": "^4.6.0",
     "pmtiles": "^4.5.0",
-    "release-it": "^21.1.0",
-    "terra-draw": "^1.35.0",
-    "terra-draw-maplibre-gl-adapter": "^1.4.1",
+    "release-it": "^21.1.1",
+    "terra-draw": "^1.37.0",
+    "terra-draw-maplibre-gl-adapter": "^1.5.0",
     "typescript": "^6.0.3",
     "unbuild": "^3.6.1",
     "unplugin": "^3.4.0",
-    "vitest": "^5.0.2",
+    "vitest": "^5.0.3",
     "vue": "^3.5.43",
-    "vue-tsc": "^3.3.11"
+    "vue-tsc": "^3.3.12"
   }
 }