@caoguo/maplibre 0.0.5 → 0.0.6

package/dist/index.d.cts

@@ -268,7 +268,7 @@ declare class ExportControl {
 interface GlowLine {
     /** 线坐标 [lng, lat][] */
     coordinates: [number, number][];
-    /** 该线所属分组（如 'pipe' | 'road' | 'water'），用于着色 */
+    /** 该线所属分组（如 'pipe' | 'road' | 'water'），用于按组分色。缺省归入 'default'。 */
     group?: string;
 }
 interface GlowPass {
@@ -279,11 +279,12 @@ interface GlowPass {
 }
 interface GlowGeometry {
     /**
-     * 扁平化顶点缓冲。每个顶点 5 个 float：
-     * [worldX, worldY, dirX, dirY, side]
+     * 扁平化顶点缓冲。每个顶点 6 个 float：
+     * [worldX, worldY, dirX, dirY, side, groupIndex]
      * - worldX/worldY：该端点的归一化世界坐标
      * - dirX/dirY：所在线段的世界空间方向（用于屏幕空间法线）
      * - side：±1，左/右扩展符号
+     * - groupIndex：该顶点所属分组在 `groups` 中的下标（用于按组分色）
      */
     vertices: Float32Array;
     /** 每遍在 vertices 中的顶点区间 [start, count]（按顶点数，非 float 数） */
@@ -295,6 +296,15 @@ interface GlowGeometry {
     passes: GlowPass[];
     /** 顶点属性跨距（float 数） */
     stride: number;
+    /** 参与渲染的去重分组名（与上层 colorMap 对应，下标即 groupIndex） */
+    groups: string[];
+    /** 逐遍、逐分组的连续顶点区间，供按组分色绘制 */
+    renderGroups: {
+        passIndex: number;
+        group: string;
+        start: number;
+        count: number;
+    }[];
 }
 /**
  * 生成辉光多遍档位。
@@ -362,9 +372,15 @@ declare class CustomLineLayer implements CustomLayerInterface {
     private buffer?;
     private geometry;
     private map?;
+    private gl?;
     constructor(opts: GlowLayerOptions);
     onAdd(map: unknown, gl: WebGLRenderingContext): void;
     render(gl: WebGLRenderingContext, matrix: number[]): void;
+    /**
+     * 动态更新线集合（高亮选中、切换数据等无需重建图层）。
+     * 浏览器环境会刷新 GPU 缓冲；纯逻辑/测试环境仅更新几何与数据。
+     */
+    setLines(lines: GlowLine[]): void;
     onRemove(_map: unknown, gl: WebGLRenderingContext): void;
 }
 
@@ -516,6 +532,13 @@ interface CaoguoMapGlobalConfig {
 }
 declare function setGlobalConfig(cfg: CaoguoMapGlobalConfig): void;
 declare function getGlobalConfig(): CaoguoMapGlobalConfig;
+/** `addGlowLayer` 返回的句柄：既提供图层 id（用于 removeLayer），也支持动态更新线数据。 */
+interface GlowLayerHandle {
+    /** 图层 id，可用于 map.removeLayer(id) */
+    id: string;
+    /** 动态替换线集合（高亮选中 / 切换数据，无需重建图层） */
+    setLines: (lines: GlowLine[]) => void;
+}
 interface MapOptions {
     container: string | HTMLElement;
     center?: [number, number];
@@ -645,7 +668,7 @@ declare class Map {
         colors?: Record<string, [number, number, number]>;
         baseWidth?: number;
         passes?: number;
-    }): string;
+    }): GlowLayerHandle;
     /**
      * 挂载 LOD 控制器（T7 / F-1.7）。
      * 随 zoom 切换数据密度等级，并在等级变化时回调（调用方据此 setData / 切源）。
@@ -675,4 +698,4 @@ declare class Map {
     get instance(): Map$1;
 }
 
-export { type Bounds, type CRS, type CaoguoMapGlobalConfig, type CustomLayerInterface, CustomLineLayer, ExportControl, type ExportOptions, type GlowGeometry, type GlowLayerOptions, type GlowLine, type GlowPass, type GridShiftProvider, LegendControl, type LegendItem, type LegendOptions, type LngLat, type LodChangeEvent, LodController, type LodLevel, Map, type MapInstance, type MapOptions, type MlMapSourceApi, type Point, type ScaleBar, ScaleControl, type ScaleControlOptions, ThemeSwitcher, type ThemeSwitcherOptions, TiandituOptions, TiandituType, TileStoreBackend, type Transformer, WebGLUnavailableError, buildGlowGeometry, cgcs2000ToWgs84, computeScaleBar, createTransformer, Map as default, fromWgs84, gcj02ToWgs84, getGlobalConfig, glowPasses, isInChina, isWebGLAvailable, oppositeTheme, packGeoJSONToStore, projectSimple, removeSourceSafe, removeSourcesSafe, renderLegendHtml, resolveLod, setCgcs2000GridShift, setGlobalConfig, suggestDensity, themeFromStyle, toWgs84, transformBounds, transformPoint, triggerDownload, upsertSource, wgs84ToCgcs2000, wgs84ToGcj02 };
+export { type Bounds, type CRS, type CaoguoMapGlobalConfig, type CustomLayerInterface, CustomLineLayer, ExportControl, type ExportOptions, type GlowGeometry, type GlowLayerHandle, type GlowLayerOptions, type GlowLine, type GlowPass, type GridShiftProvider, LegendControl, type LegendItem, type LegendOptions, type LngLat, type LodChangeEvent, LodController, type LodLevel, Map, type MapInstance, type MapOptions, type MlMapSourceApi, type Point, type ScaleBar, ScaleControl, type ScaleControlOptions, ThemeSwitcher, type ThemeSwitcherOptions, TiandituOptions, TiandituType, TileStoreBackend, type Transformer, WebGLUnavailableError, buildGlowGeometry, cgcs2000ToWgs84, computeScaleBar, createTransformer, Map as default, fromWgs84, gcj02ToWgs84, getGlobalConfig, glowPasses, isInChina, isWebGLAvailable, oppositeTheme, packGeoJSONToStore, projectSimple, removeSourceSafe, removeSourcesSafe, renderLegendHtml, resolveLod, setCgcs2000GridShift, setGlobalConfig, suggestDensity, themeFromStyle, toWgs84, transformBounds, transformPoint, triggerDownload, upsertSource, wgs84ToCgcs2000, wgs84ToGcj02 };

package/dist/index.d.ts

@@ -268,7 +268,7 @@ declare class ExportControl {
 interface GlowLine {
     /** 线坐标 [lng, lat][] */
     coordinates: [number, number][];
-    /** 该线所属分组（如 'pipe' | 'road' | 'water'），用于着色 */
+    /** 该线所属分组（如 'pipe' | 'road' | 'water'），用于按组分色。缺省归入 'default'。 */
     group?: string;
 }
 interface GlowPass {
@@ -279,11 +279,12 @@ interface GlowPass {
 }
 interface GlowGeometry {
     /**
-     * 扁平化顶点缓冲。每个顶点 5 个 float：
-     * [worldX, worldY, dirX, dirY, side]
+     * 扁平化顶点缓冲。每个顶点 6 个 float：
+     * [worldX, worldY, dirX, dirY, side, groupIndex]
      * - worldX/worldY：该端点的归一化世界坐标
      * - dirX/dirY：所在线段的世界空间方向（用于屏幕空间法线）
      * - side：±1，左/右扩展符号
+     * - groupIndex：该顶点所属分组在 `groups` 中的下标（用于按组分色）
      */
     vertices: Float32Array;
     /** 每遍在 vertices 中的顶点区间 [start, count]（按顶点数，非 float 数） */
@@ -295,6 +296,15 @@ interface GlowGeometry {
     passes: GlowPass[];
     /** 顶点属性跨距（float 数） */
     stride: number;
+    /** 参与渲染的去重分组名（与上层 colorMap 对应，下标即 groupIndex） */
+    groups: string[];
+    /** 逐遍、逐分组的连续顶点区间，供按组分色绘制 */
+    renderGroups: {
+        passIndex: number;
+        group: string;
+        start: number;
+        count: number;
+    }[];
 }
 /**
  * 生成辉光多遍档位。
@@ -362,9 +372,15 @@ declare class CustomLineLayer implements CustomLayerInterface {
     private buffer?;
     private geometry;
     private map?;
+    private gl?;
     constructor(opts: GlowLayerOptions);
     onAdd(map: unknown, gl: WebGLRenderingContext): void;
     render(gl: WebGLRenderingContext, matrix: number[]): void;
+    /**
+     * 动态更新线集合（高亮选中、切换数据等无需重建图层）。
+     * 浏览器环境会刷新 GPU 缓冲；纯逻辑/测试环境仅更新几何与数据。
+     */
+    setLines(lines: GlowLine[]): void;
     onRemove(_map: unknown, gl: WebGLRenderingContext): void;
 }
 
@@ -516,6 +532,13 @@ interface CaoguoMapGlobalConfig {
 }
 declare function setGlobalConfig(cfg: CaoguoMapGlobalConfig): void;
 declare function getGlobalConfig(): CaoguoMapGlobalConfig;
+/** `addGlowLayer` 返回的句柄：既提供图层 id（用于 removeLayer），也支持动态更新线数据。 */
+interface GlowLayerHandle {
+    /** 图层 id，可用于 map.removeLayer(id) */
+    id: string;
+    /** 动态替换线集合（高亮选中 / 切换数据，无需重建图层） */
+    setLines: (lines: GlowLine[]) => void;
+}
 interface MapOptions {
     container: string | HTMLElement;
     center?: [number, number];
@@ -645,7 +668,7 @@ declare class Map {
         colors?: Record<string, [number, number, number]>;
         baseWidth?: number;
         passes?: number;
-    }): string;
+    }): GlowLayerHandle;
     /**
      * 挂载 LOD 控制器（T7 / F-1.7）。
      * 随 zoom 切换数据密度等级，并在等级变化时回调（调用方据此 setData / 切源）。
@@ -675,4 +698,4 @@ declare class Map {
     get instance(): Map$1;
 }
 
-export { type Bounds, type CRS, type CaoguoMapGlobalConfig, type CustomLayerInterface, CustomLineLayer, ExportControl, type ExportOptions, type GlowGeometry, type GlowLayerOptions, type GlowLine, type GlowPass, type GridShiftProvider, LegendControl, type LegendItem, type LegendOptions, type LngLat, type LodChangeEvent, LodController, type LodLevel, Map, type MapInstance, type MapOptions, type MlMapSourceApi, type Point, type ScaleBar, ScaleControl, type ScaleControlOptions, ThemeSwitcher, type ThemeSwitcherOptions, TiandituOptions, TiandituType, TileStoreBackend, type Transformer, WebGLUnavailableError, buildGlowGeometry, cgcs2000ToWgs84, computeScaleBar, createTransformer, Map as default, fromWgs84, gcj02ToWgs84, getGlobalConfig, glowPasses, isInChina, isWebGLAvailable, oppositeTheme, packGeoJSONToStore, projectSimple, removeSourceSafe, removeSourcesSafe, renderLegendHtml, resolveLod, setCgcs2000GridShift, setGlobalConfig, suggestDensity, themeFromStyle, toWgs84, transformBounds, transformPoint, triggerDownload, upsertSource, wgs84ToCgcs2000, wgs84ToGcj02 };
+export { type Bounds, type CRS, type CaoguoMapGlobalConfig, type CustomLayerInterface, CustomLineLayer, ExportControl, type ExportOptions, type GlowGeometry, type GlowLayerHandle, type GlowLayerOptions, type GlowLine, type GlowPass, type GridShiftProvider, LegendControl, type LegendItem, type LegendOptions, type LngLat, type LodChangeEvent, LodController, type LodLevel, Map, type MapInstance, type MapOptions, type MlMapSourceApi, type Point, type ScaleBar, ScaleControl, type ScaleControlOptions, ThemeSwitcher, type ThemeSwitcherOptions, TiandituOptions, TiandituType, TileStoreBackend, type Transformer, WebGLUnavailableError, buildGlowGeometry, cgcs2000ToWgs84, computeScaleBar, createTransformer, Map as default, fromWgs84, gcj02ToWgs84, getGlobalConfig, glowPasses, isInChina, isWebGLAvailable, oppositeTheme, packGeoJSONToStore, projectSimple, removeSourceSafe, removeSourcesSafe, renderLegendHtml, resolveLod, setCgcs2000GridShift, setGlobalConfig, suggestDensity, themeFromStyle, toWgs84, transformBounds, transformPoint, triggerDownload, upsertSource, wgs84ToCgcs2000, wgs84ToGcj02 };

package/dist/index.js

@@ -359,39 +359,54 @@ function projectSimple(lng, lat) {
 }
 function buildGlowGeometry(lines, opts = {}) {
   const passes = glowPasses(opts.passes ?? 4, opts.baseWidth ?? 3);
-  const stride = 5;
+  const stride = 6;
   const verts = [];
   const passRanges = [];
-  for (const pass of passes) {
+  const renderGroups = [];
+  const groups = [];
+  for (const line of lines) {
+    const g = line.group ?? "default";
+    if (!groups.includes(g)) groups.push(g);
+  }
+  for (let p = 0; p < passes.length; p++) {
+    passes[p];
     const start = verts.length / stride;
-    for (const line of lines) {
-      const pts = line.coordinates.map(([lng, lat]) => projectSimple(lng, lat));
-      if (pts.length < 2) continue;
-      for (let i = 0; i < pts.length - 1; i++) {
-        const a = pts[i];
-        const b = pts[i + 1];
-        const dx = b[0] - a[0];
-        const dy = b[1] - a[1];
-        const quad = [
-          [a[0], a[1], dx, dy, 1],
-          [a[0], a[1], dx, dy, -1],
-          [b[0], b[1], dx, dy, 1],
-          [b[0], b[1], dx, dy, -1]
-        ];
-        const idx = [0, 1, 2, 2, 1, 3];
-        for (const k of idx) {
-          const v = quad[k];
-          verts.push(v[0], v[1], v[2], v[3], v[4]);
+    for (const group of groups) {
+      const groupStart = verts.length / stride;
+      const groupIndex = groups.indexOf(group);
+      for (const line of lines) {
+        if ((line.group ?? "default") !== group) continue;
+        const pts = line.coordinates.map(([lng, lat]) => projectSimple(lng, lat));
+        if (pts.length < 2) continue;
+        for (let i = 0; i < pts.length - 1; i++) {
+          const a = pts[i];
+          const b = pts[i + 1];
+          const dx = b[0] - a[0];
+          const dy = b[1] - a[1];
+          const quad = [
+            [a[0], a[1], dx, dy, 1, groupIndex],
+            [a[0], a[1], dx, dy, -1, groupIndex],
+            [b[0], b[1], dx, dy, 1, groupIndex],
+            [b[0], b[1], dx, dy, -1, groupIndex]
+          ];
+          const idx = [0, 1, 2, 2, 1, 3];
+          for (const k of idx) {
+            const v = quad[k];
+            verts.push(v[0], v[1], v[2], v[3], v[4], v[5]);
+          }
         }
       }
+      const count2 = verts.length / stride - groupStart;
+      if (count2 > 0) renderGroups.push({ passIndex: p, group, start: groupStart, count: count2 });
     }
     const count = verts.length / stride - start;
     passRanges.push({ start, count });
   }
-  return { vertices: new Float32Array(verts), passRanges, passes, stride };
+  return { vertices: new Float32Array(verts), passRanges, passes, stride, groups, renderGroups };
 }
 
 // src/shaders/CustomLineLayer.ts
+var FALLBACK_COLOR = [0.6, 0.7, 0.9];
 var DEFAULT_COLORS = {
   pipe: [0.2, 0.85, 1],
   // 青蓝：管线
@@ -445,9 +460,13 @@ var CustomLineLayer = class {
     this.colors = { ...DEFAULT_COLORS, ...opts.colors };
     this.baseWidth = opts.baseWidth ?? 3;
     this.geometry = buildGlowGeometry(this.lines, { passes: opts.passes ?? 4, baseWidth: this.baseWidth });
+    for (const g of this.geometry.groups) {
+      if (!(g in this.colors)) this.colors[g] = FALLBACK_COLOR;
+    }
   }
   onAdd(map, gl) {
     this.map = map;
+    this.gl = gl;
     const vs = compile(gl, gl.VERTEX_SHADER, VERT);
     const fs = compile(gl, gl.FRAGMENT_SHADER, FRAG);
     const prog = gl.createProgram();
@@ -471,12 +490,17 @@ var CustomLineLayer = class {
     const aPos = gl.getAttribLocation(this.program, "aPos");
     const aDir = gl.getAttribLocation(this.program, "aDir");
     const aSide = gl.getAttribLocation(this.program, "aSide");
+    const aGroup = gl.getAttribLocation(this.program, "aGroup");
     gl.enableVertexAttribArray(aPos);
     gl.vertexAttribPointer(aPos, 2, gl.FLOAT, false, stride, 0);
     gl.enableVertexAttribArray(aDir);
     gl.vertexAttribPointer(aDir, 2, gl.FLOAT, false, stride, 8);
     gl.enableVertexAttribArray(aSide);
     gl.vertexAttribPointer(aSide, 1, gl.FLOAT, false, stride, 16);
+    if (aGroup >= 0) {
+      gl.enableVertexAttribArray(aGroup);
+      gl.vertexAttribPointer(aGroup, 1, gl.FLOAT, false, stride, 20);
+    }
     const uMatrix = gl.getUniformLocation(this.program, "uMatrix");
     gl.uniformMatrix4fv(uMatrix, false, new Float32Array(matrix));
     const uWidth = gl.getUniformLocation(this.program, "uWidth");
@@ -487,15 +511,31 @@ var CustomLineLayer = class {
     gl.uniform2f(uRes, canvas?.width ?? 1024, canvas?.height ?? 768);
     gl.enable(gl.BLEND);
     gl.blendFunc(gl.SRC_ALPHA, gl.ONE);
-    const color = this.colors[this.lines[0]?.group ?? "pipe"] ?? this.colors.pipe;
-    for (let p = 0; p < this.geometry.passes.length; p++) {
-      const pass = this.geometry.passes[p];
-      const range = this.geometry.passRanges[p];
-      if (range.count <= 0) continue;
+    for (const rg of this.geometry.renderGroups) {
+      const pass = this.geometry.passes[rg.passIndex];
+      const color = this.colors[rg.group] ?? FALLBACK_COLOR;
       gl.uniform1f(uWidth, pass.width);
       gl.uniform3f(uColor, color[0], color[1], color[2]);
       gl.uniform1f(uOpacity, pass.opacity);
-      gl.drawArrays(gl.TRIANGLES, range.start, range.count);
+      gl.drawArrays(gl.TRIANGLES, rg.start, rg.count);
+    }
+  }
+  /**
+   * 动态更新线集合（高亮选中、切换数据等无需重建图层）。
+   * 浏览器环境会刷新 GPU 缓冲；纯逻辑/测试环境仅更新几何与数据。
+   */
+  setLines(lines) {
+    this.lines = lines;
+    this.geometry = buildGlowGeometry(this.lines, {
+      passes: this.geometry.passes.length,
+      baseWidth: this.baseWidth
+    });
+    for (const g of this.geometry.groups) {
+      if (!(g in this.colors)) this.colors[g] = FALLBACK_COLOR;
+    }
+    if (this.buffer && this.gl) {
+      this.gl.bindBuffer(this.gl.ARRAY_BUFFER, this.buffer);
+      this.gl.bufferData(this.gl.ARRAY_BUFFER, this.geometry.vertices, this.gl.STATIC_DRAW);
     }
   }
   onRemove(_map, gl) {
@@ -814,7 +854,10 @@ var Map = class {
   addGlowLayer(opts) {
     const layer = new CustomLineLayer(opts);
     this._map.addLayer(layer);
-    return layer.id;
+    return {
+      id: layer.id,
+      setLines: (lines) => layer.setLines(lines)
+    };
   }
   /**
    * 挂载 LOD 控制器（T7 / F-1.7）。