@caoguo/maplibre 0.0.5 → 0.0.6

package/dist/index.cjs

@@ -866,39 +866,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],
   // 青蓝：管线
@@ -952,9 +967,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();
@@ -978,12 +997,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");
@@ -994,15 +1018,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) {
@@ -1321,7 +1361,10 @@ var Map2 = 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）。