@movk/maplibre 1.0.0 → 1.2.0

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/dist/unplugin.d.mts

@@ -19,7 +19,7 @@ declare function maplibreComponentResolver(options?: MaplibreResolverOptions): {
         from: string;
     } | undefined;
 };
-/** 本库 composables + 工具的自动导入项，注入既有 unplugin-auto-import 实例复用 */
+/** 本库 composables 的自动导入项，注入既有 unplugin-auto-import 实例复用 */
 declare function maplibreAutoImports(): {
     from: string;
     imports: string[];

package/dist/unplugin.d.ts

@@ -19,7 +19,7 @@ declare function maplibreComponentResolver(options?: MaplibreResolverOptions): {
         from: string;
     } | undefined;
 };
-/** 本库 composables + 工具的自动导入项，注入既有 unplugin-auto-import 实例复用 */
+/** 本库 composables 的自动导入项，注入既有 unplugin-auto-import 实例复用 */
 declare function maplibreAutoImports(): {
     from: string;
     imports: string[];

package/dist/unplugin.mjs

@@ -6,10 +6,6 @@ import Components from 'unplugin-vue-components';
 import AutoImport from 'unplugin-auto-import';
 
 const runtimeDir = fileURLToPath(new URL("./runtime", import.meta.url));
-const UTIL_MANIFEST = {
-  movkDrawModes: "draw-modes",
-  drawThemeStyles: "utils/draw-theme"
-};
 function componentMap() {
   const dir = join(runtimeDir, "components");
   const map = /* @__PURE__ */ new Map();
@@ -33,9 +29,7 @@ function maplibreComponentResolver(options = {}) {
 }
 function maplibreAutoImports() {
   const cdir = join(runtimeDir, "composables");
-  const composables = readdirSync(cdir).filter((f) => f.endsWith(".ts")).map((f) => f.slice(0, -".ts".length)).map((name) => ({ from: join(cdir, name), imports: [name] }));
-  const utils = Object.entries(UTIL_MANIFEST).map(([name, file]) => ({ from: join(runtimeDir, file), imports: [name] }));
-  return [...composables, ...utils];
+  return readdirSync(cdir).filter((f) => f.endsWith(".ts")).map((f) => f.slice(0, -".ts".length)).map((name) => ({ from: join(cdir, name), imports: [name] }));
 }
 const MaplibreUnplugin = createUnplugin((options = {}, meta) => {
   const dts = options.dts ?? true;

package/package.json

@@ -1,8 +1,8 @@
 {
   "name": "@movk/maplibre",
   "type": "module",
-  "version": "1.0.0",
-  "packageManager": "pnpm@12.5.1",
+  "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",
@@ -49,10 +49,6 @@
       "types": "./dist/vue-plugin.d.mts",
       "import": "./dist/vue-plugin.mjs"
     },
-    "./draw-modes": {
-      "types": "./dist/runtime/draw-modes/index.d.ts",
-      "import": "./dist/runtime/draw-modes/index.js"
-    },
     "./index.css": "./dist/runtime/index.css",
     "./runtime/*": "./dist/runtime/*",
     "./components/*": "./dist/runtime/components/*",
@@ -75,9 +71,6 @@
       "vue-plugin": [
         "./dist/vue-plugin.d.mts"
       ],
-      "draw-modes": [
-        "./dist/runtime/draw-modes/index.d.ts"
-      ],
       "runtime/*": [
         "./dist/runtime/*"
       ],
@@ -95,16 +88,28 @@
     "dist"
   ],
   "peerDependencies": {
+    "@geomatico/maplibre-cog-protocol": ">=0.10.0",
     "lottie-web": ">=5.0.0",
+    "maplibre-contour": ">=0.1.0",
     "maplibre-gl": ">=6.0.0",
+    "pmtiles": ">=4.0.0",
     "terra-draw": ">=1.0.0",
     "terra-draw-maplibre-gl-adapter": ">=1.0.0",
     "vue": ">=3.5.0"
   },
   "peerDependenciesMeta": {
+    "@geomatico/maplibre-cog-protocol": {
+      "optional": true
+    },
     "lottie-web": {
       "optional": true
     },
+    "maplibre-contour": {
+      "optional": true
+    },
+    "pmtiles": {
+      "optional": true
+    },
     "terra-draw": {
       "optional": true
     },
@@ -131,7 +136,7 @@
   },
   "dependencies": {
     "@maplibre/maplibre-gl-style-spec": "^26.4.4",
-    "@movk/core": "^1.4.1",
+    "@movk/core": "^1.5.0",
     "@turf/area": "^7.4.0",
     "@turf/bearing": "^7.4.0",
     "@turf/buffer": "^7.4.0",
@@ -148,27 +153,30 @@
     "unplugin-vue-components": "^32.1.0"
   },
   "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-gl": "^6.10.0",
-    "nuxt": "^4.5.2",
-    "release-it": "^21.1.0",
-    "terra-draw": "^1.35.0",
-    "terra-draw-maplibre-gl-adapter": "^1.4.1",
+    "maplibre-contour": "^0.1.1",
+    "maplibre-gl": "^6.13.0",
+    "nuxt": "^4.6.0",
+    "pmtiles": "^4.5.0",
+    "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.1",
+    "vitest": "^5.0.3",
     "vue": "^3.5.43",
-    "vue-tsc": "^3.3.11"
+    "vue-tsc": "^3.3.12"
   }
 }

package/dist/runtime/draw-modes/index.d.ts

@@ -1,16 +0,0 @@
-import type { TerraDrawExtend } from 'terra-draw';
-import type { DrawThemeOptions } from '../utils/draw-theme';
-/** 内置绘制模式名（不含选择模式 'select'） */
-export declare const DRAW_MODE_NAMES: readonly ["point", "linestring", "polygon", "rectangle", "circle", "ellipse", "sector"];
-export type DrawModeName = (typeof DRAW_MODE_NAMES)[number];
-/** terra-draw 模式实例（绘制或选择模式） */
-export type DrawMode = TerraDrawExtend.TerraDrawBaseDrawMode<TerraDrawExtend.CustomStyling>;
-export interface MovkDrawModesOptions {
-    /** 绘制主题，参见 drawThemeStyles */
-    theme?: DrawThemeOptions;
-}
-/**
- * 预设 terra-draw 模式集合：选择模式 + 全部内置绘制模式，统一应用主题。
- * 每次调用返回新实例，模式实例不可在多个 TerraDraw 间共享。
- */
-export declare function movkDrawModes(options?: MovkDrawModesOptions): DrawMode[];

package/dist/runtime/draw-modes/index.js

@@ -1,32 +0,0 @@
-import {
-  TerraDrawCircleMode,
-  TerraDrawEllipseMode,
-  TerraDrawLineStringMode,
-  TerraDrawPointMode,
-  TerraDrawPolygonMode,
-  TerraDrawRectangleMode,
-  TerraDrawSectorMode,
-  TerraDrawSelectMode
-} from "terra-draw";
-import { drawThemeStyles } from "../utils/draw-theme.js";
-export const DRAW_MODE_NAMES = ["point", "linestring", "polygon", "rectangle", "circle", "ellipse", "sector"];
-const EDITABLE_COORDINATES = { draggable: true, deletable: true, midpoints: true };
-export function movkDrawModes(options = {}) {
-  const styles = drawThemeStyles(options.theme);
-  const flags = Object.fromEntries(DRAW_MODE_NAMES.map((name) => [name, {
-    feature: {
-      draggable: true,
-      ...name === "linestring" || name === "polygon" ? { coordinates: EDITABLE_COORDINATES } : {}
-    }
-  }]));
-  return [
-    new TerraDrawSelectMode({ flags, styles: styles.select }),
-    new TerraDrawPointMode({ styles: styles.point }),
-    new TerraDrawLineStringMode({ styles: styles.linestring }),
-    new TerraDrawPolygonMode({ styles: styles.polygon }),
-    new TerraDrawRectangleMode({ styles: styles.rectangle }),
-    new TerraDrawCircleMode({ styles: styles.circle }),
-    new TerraDrawEllipseMode({ styles: styles.ellipse }),
-    new TerraDrawSectorMode({ styles: styles.sector })
-  ];
-}

package/dist/runtime/utils/draw-theme.d.ts

@@ -1,47 +0,0 @@
-import type { GeoJSONStoreFeatures, HexColor } from 'terra-draw';
-export interface DrawThemeOptions {
-    /**
-     * 非激活态主色
-     * @defaultValue '#3b82f6'
-     */
-    color?: HexColor;
-    /**
-     * 激活态（绘制辅助点/选中）主色
-     * @defaultValue '#f59e0b'
-     */
-    activeColor?: HexColor;
-    /**
-     * 多边形填充不透明度
-     * @defaultValue 0.1
-     */
-    fillOpacity?: number;
-    /**
-     * 线宽
-     * @defaultValue 2
-     */
-    lineWidth?: number;
-    /**
-     * 顶点圆半径
-     * @defaultValue 5
-     */
-    vertexRadius?: number;
-}
-type ColorStyle = (feature: GeoJSONStoreFeatures) => HexColor;
-type ModeStyles = Record<string, number | HexColor | ColorStyle>;
-/** 各模式的 terra-draw styles，键为模式名 */
-export interface DrawThemeStyles {
-    select: Record<string, number | HexColor>;
-    point: ModeStyles;
-    linestring: ModeStyles;
-    polygon: ModeStyles;
-    rectangle: ModeStyles;
-    circle: ModeStyles;
-    ellipse: ModeStyles;
-    sector: ModeStyles;
-}
-/**
- * 生成 terra-draw 各模式的主题样式。
- * 要素 `properties.color` 优先于主题色，便于按要素单独着色（配合 setFeatureProperty）。
- */
-export declare function drawThemeStyles(options?: DrawThemeOptions): DrawThemeStyles;
-export {};