@caoguo/maplibre 0.0.2 → 0.0.5

package/dist/index.cjs

@@ -197,7 +197,7 @@ function buildTiandituSources(type, opts) {
   const { base, label } = LAYER_MAP[type];
   const tileSize = opts.tileSize ?? 256;
   const maxzoom = opts.maxzoom ?? 18;
-  const attr = "\xA9 \u5929\u5730\u56FE GS(2023)3295\u53F7";
+  const attr = "\xA9 \u5929\u5730\u56FE GS(2023)3295\u53F7 \xB7 \u8349\u679C\u5730\u56FE";
   return [
     {
       id: `tianditu-${base}`,
@@ -765,15 +765,96 @@ var ThemeSwitcher = class {
   }
 };
 
+// src/controls/LegendControl.ts
+function escapeHtml(s) {
+  return s.replace(
+    /[&<>"']/g,
+    (c) => c === "&" ? "&amp;" : c === "<" ? "&lt;" : c === ">" ? "&gt;" : c === '"' ? "&quot;" : "&#39;"
+  );
+}
+function renderLegendHtml(items, title) {
+  const titleHtml = title ? `<div class="cg-legend-title">${escapeHtml(title)}</div>` : "";
+  const itemsHtml = items.map((it) => {
+    const swatch = it.shape === "line" ? `<span class="cg-legend-swatch cg-legend-swatch--line" style="background:${it.color}"></span>` : `<span class="cg-legend-swatch" style="background:${it.color}"></span>`;
+    return `<div class="cg-legend-item">${swatch}<span>${escapeHtml(it.label)}</span></div>`;
+  }).join("");
+  return `<div class="cg-legend-body">${titleHtml}${itemsHtml}</div>`;
+}
+var LegendControl = class {
+  constructor(options) {
+    this.opts = { title: options.title ?? "", items: options.items };
+    this.el = options.container ?? document.createElement("div");
+    this.el.className = "caoguo-legend-control";
+    this.el.style.cssText = "position:absolute;right:10px;top:10px;padding:8px 10px;background:rgba(10,15,30,.72);color:#cfe;border-radius:6px;font:12px/1.5 system-ui,sans-serif;z-index:2;max-width:220px;";
+    this.bodyEl = document.createElement("div");
+    this.el.appendChild(this.bodyEl);
+    this.render();
+  }
+  render() {
+    this.bodyEl.innerHTML = renderLegendHtml(this.opts.items, this.opts.title || void 0);
+  }
+  /** 运行时更新图例项（随图层切换重新渲染） */
+  setItems(items, title) {
+    if (title !== void 0) this.opts.title = title;
+    this.opts.items = items;
+    this.render();
+  }
+  /** 挂载到容器 */
+  addTo(container) {
+    if (!this.el.parentElement) container.appendChild(this.el);
+    return this;
+  }
+  remove() {
+    this.el.remove();
+  }
+};
+
+// src/controls/ExportControl.ts
+function triggerDownload(dataUrl, filename) {
+  const a = document.createElement("a");
+  a.href = dataUrl;
+  a.download = filename.endsWith(".png") ? filename : `${filename}.png`;
+  document.body.appendChild(a);
+  a.click();
+  a.remove();
+}
+var ExportControl = class {
+  constructor(map, options = {}) {
+    this.onClick = () => this.export();
+    this.map = map;
+    this.filename = options.filename ?? "caoguo-map";
+    this.el = options.container ?? document.createElement("button");
+    this.el.className = "caoguo-export-control";
+    this.el.textContent = options.buttonText ?? "\u5BFC\u51FA PNG";
+    this.el.style.cssText = "position:absolute;right:10px;top:10px;padding:5px 10px;background:rgba(10,15,30,.72);color:#cfe;border:1px solid #2a3550;border-radius:4px;font:12px system-ui,sans-serif;cursor:pointer;z-index:3;";
+    this.el.addEventListener("click", this.onClick);
+  }
+  /** 导出当前地图视图为 PNG 并下载 */
+  export() {
+    const canvas = this.map.getCanvas();
+    const url = canvas.toDataURL("image/png");
+    triggerDownload(url, this.filename);
+  }
+  /** 挂载到容器 */
+  addTo(container) {
+    if (!this.el.parentElement) container.appendChild(this.el);
+    return this;
+  }
+  remove() {
+    this.el.removeEventListener("click", this.onClick);
+    this.el.remove();
+  }
+};
+
 // src/shaders/glowGeometry.ts
-function glowPasses(passes = 4, coreOpacity = 1) {
+function glowPasses(passes = 4, baseWidth = 3) {
   if (passes < 1) passes = 1;
   const out = [];
   for (let i = 0; i < passes; i++) {
     const t = passes === 1 ? 1 : 1 - i / (passes - 1);
     out.push({
-      widthScale: 1 + (1 - t) * (passes - 1) * 1.5,
-      opacity: coreOpacity * (0.12 + 0.88 * t)
+      width: baseWidth * (1 + (1 - t) * (passes - 1) * 1.8),
+      opacity: 0.1 + 0.9 * t * t
     });
   }
   return out;
@@ -781,17 +862,40 @@ function glowPasses(passes = 4, coreOpacity = 1) {
 function projectSimple(lng, lat) {
   const x = lng / 180;
   const y = Math.log(Math.tan(Math.PI / 4 + lat * Math.PI / 360)) / Math.PI;
-  return [x, Math.max(-1, Math.min(1, y))];
+  return [x, Math.max(-1, Math.min(1, y / Math.PI))];
 }
 function buildGlowGeometry(lines, opts = {}) {
-  const passes = glowPasses(opts.passes ?? 4, opts.coreOpacity ?? 1);
-  let vertexCount = 0;
-  const projected = lines.map((l) => {
-    const points = l.coordinates.map(([lng, lat]) => projectSimple(lng, lat));
-    vertexCount += Math.max(0, points.length - 1) * 2;
-    return { points, group: l.group };
-  });
-  return { lines: projected, passes, vertexCount };
+  const passes = glowPasses(opts.passes ?? 4, opts.baseWidth ?? 3);
+  const stride = 5;
+  const verts = [];
+  const passRanges = [];
+  for (const pass of passes) {
+    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]);
+        }
+      }
+    }
+    const count = verts.length / stride - start;
+    passRanges.push({ start, count });
+  }
+  return { vertices: new Float32Array(verts), passRanges, passes, stride };
 }
 
 // src/shaders/CustomLineLayer.ts
@@ -805,17 +909,21 @@ var DEFAULT_COLORS = {
 };
 var VERT = `
 attribute vec2 aPos;
-attribute float aMiter;
+attribute vec2 aDir;
+attribute float aSide;
 uniform mat4 uMatrix;
 uniform float uWidth;
 uniform vec2 uResolution;
 void main() {
-  // \u7B80\u5316\uFF1A\u6CBF\u6CD5\u7EBF\u65B9\u5411\u504F\u79FB width\uFF08\u5C4F\u5E55\u7A7A\u95F4\uFF09\uFF0C\u8FD9\u91CC\u4EC5\u6F14\u793A\u6838\u5FC3\u6295\u5F71
   vec4 clip = uMatrix * vec4(aPos, 0.0, 1.0);
-  vec2 screen = clip.xy / clip.w;
-  // \u6CE8\uFF1A\u7CBE\u786E\u7EBF\u5BBD\u9700\u6CD5\u7EBF\u8BA1\u7B97\uFF0C\u793A\u8303\u5C42\u7528\u70B9\u5BBD\u8FD1\u4F3C
-  vec2 offset = vec2(aMiter * uWidth / uResolution.x * 2.0, 0.0);
-  gl_Position = vec4(screen + offset * clip.w, clip.z, clip.w);
+  // \u6BB5\u65B9\u5411\u4E5F\u6295\u5F71\uFF0C\u6C42\u5C4F\u5E55\u7A7A\u95F4\u65B9\u5411
+  vec4 clipDir = uMatrix * vec4(aPos + aDir, 0.0, 1.0);
+  vec2 s0 = clip.xy / clip.w;
+  vec2 s1 = clipDir.xy / clipDir.w;
+  vec2 dir = normalize(s1 - s0 + vec2(1e-6));
+  vec2 normal = vec2(-dir.y, dir.x);
+  vec2 offset = normal * aSide * (uWidth / uResolution * 2.0);
+  gl_Position = vec4(s0 + offset * clip.w, clip.z, clip.w);
 }
 `;
 var FRAG = `
@@ -830,6 +938,9 @@ function compile(gl, type, src) {
   const sh = gl.createShader(type);
   gl.shaderSource(sh, src);
   gl.compileShader(sh);
+  if (!gl.getShaderParameter(sh, gl.COMPILE_STATUS)) {
+    console.error("[CustomLineLayer] shader \u7F16\u8BD1\u5931\u8D25:", gl.getShaderInfoLog(sh));
+  }
   return sh;
 }
 var CustomLineLayer = class {
@@ -840,8 +951,7 @@ var CustomLineLayer = class {
     this.lines = opts.lines;
     this.colors = { ...DEFAULT_COLORS, ...opts.colors };
     this.baseWidth = opts.baseWidth ?? 3;
-    this.passes = opts.passes ?? 4;
-    this.geometry = buildGlowGeometry(this.lines, { passes: this.passes });
+    this.geometry = buildGlowGeometry(this.lines, { passes: opts.passes ?? 4, baseWidth: this.baseWidth });
   }
   onAdd(map, gl) {
     this.map = map;
@@ -851,29 +961,29 @@ var CustomLineLayer = class {
     gl.attachShader(prog, vs);
     gl.attachShader(prog, fs);
     gl.linkProgram(prog);
-    this.program = prog;
-    const verts = [];
-    for (const line of this.geometry.lines) {
-      const pts = line.points;
-      for (let i = 0; i < pts.length - 1; i++) {
-        verts.push(pts[i][0], pts[i][1], 0, pts[i + 1][0], pts[i + 1][1], 0);
-      }
+    if (!gl.getProgramParameter(prog, gl.LINK_STATUS)) {
+      console.error("[CustomLineLayer] program \u94FE\u63A5\u5931\u8D25:", gl.getProgramInfoLog(prog));
     }
+    this.program = prog;
     const buf = gl.createBuffer();
     gl.bindBuffer(gl.ARRAY_BUFFER, buf);
-    gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(verts), gl.STATIC_DRAW);
+    gl.bufferData(gl.ARRAY_BUFFER, this.geometry.vertices, gl.STATIC_DRAW);
     this.buffer = buf;
   }
   render(gl, matrix) {
     if (!this.program || !this.buffer) return;
     gl.useProgram(this.program);
     gl.bindBuffer(gl.ARRAY_BUFFER, this.buffer);
+    const stride = this.geometry.stride * 4;
     const aPos = gl.getAttribLocation(this.program, "aPos");
-    const aMiter = gl.getAttribLocation(this.program, "aMiter");
+    const aDir = gl.getAttribLocation(this.program, "aDir");
+    const aSide = gl.getAttribLocation(this.program, "aSide");
     gl.enableVertexAttribArray(aPos);
-    gl.vertexAttribPointer(aPos, 2, gl.FLOAT, false, 24, 0);
-    gl.enableVertexAttribArray(aMiter);
-    gl.vertexAttribPointer(aMiter, 1, gl.FLOAT, false, 24, 16);
+    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);
     const uMatrix = gl.getUniformLocation(this.program, "uMatrix");
     gl.uniformMatrix4fv(uMatrix, false, new Float32Array(matrix));
     const uWidth = gl.getUniformLocation(this.program, "uWidth");
@@ -885,11 +995,14 @@ var CustomLineLayer = class {
     gl.enable(gl.BLEND);
     gl.blendFunc(gl.SRC_ALPHA, gl.ONE);
     const color = this.colors[this.lines[0]?.group ?? "pipe"] ?? this.colors.pipe;
-    for (const pass of this.geometry.passes) {
-      gl.uniform1f(uWidth, this.baseWidth * pass.widthScale);
+    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;
+      gl.uniform1f(uWidth, pass.width);
       gl.uniform3f(uColor, color[0], color[1], color[2]);
       gl.uniform1f(uOpacity, pass.opacity);
-      gl.drawArrays(gl.LINES, 0, this.geometry.vertexCount);
+      gl.drawArrays(gl.TRIANGLES, range.start, range.count);
     }
   }
   onRemove(_map, gl) {
@@ -953,17 +1066,119 @@ var LodController = class {
   }
 };
 
+// src/terrain.ts
+var DEFAULT_TERRAIN_TILES = [
+  "https://elevation-tiles-prod.s3.amazonaws.com/terrarium/{z}/{x}/{y}.png"
+];
+function applyTerrain(mlMap, opts = {}) {
+  const sourceId = opts.sourceId ?? "cg-dem";
+  if (!mlMap.getSource(sourceId)) {
+    mlMap.addSource(sourceId, {
+      type: "raster-dem",
+      tiles: opts.tiles ?? DEFAULT_TERRAIN_TILES,
+      encoding: opts.encoding ?? "terrarium",
+      tileSize: 256,
+      maxzoom: opts.maxzoom ?? 15
+    });
+  }
+  mlMap.setTerrain({ source: sourceId, exaggeration: opts.exaggeration ?? 1.5 });
+}
+function removeTerrain(mlMap, sourceId = "cg-dem") {
+  mlMap.setTerrain(null);
+  if (mlMap.getSource(sourceId)) {
+    mlMap.removeSource(sourceId);
+  }
+}
+
+// src/sourceUtils.ts
+function upsertSource(mlMap, id, data) {
+  if (mlMap.getSource(id)) {
+    if (mlMap.setData) {
+      mlMap.setData(id, data);
+    } else if (mlMap.addSource) {
+      mlMap.addSource(id, data);
+    }
+  } else if (mlMap.addSource) {
+    mlMap.addSource(id, data);
+  }
+}
+function removeSourceSafe(mlMap, id) {
+  if (mlMap.getSource(id) && mlMap.removeSource) {
+    mlMap.removeSource(id);
+  }
+}
+function removeSourcesSafe(mlMap, ids) {
+  for (const id of ids) {
+    removeSourceSafe(mlMap, id);
+  }
+}
+
 // src/index.ts
+var WebGLUnavailableError = class extends Error {
+  constructor(message = "\u5F53\u524D\u73AF\u5883\u4E0D\u652F\u6301 WebGL\uFF0C\u65E0\u6CD5\u6E32\u67D3\u5730\u56FE") {
+    super(message);
+    this.name = "WebGLUnavailableError";
+  }
+};
+function isWebGLAvailable() {
+  try {
+    const canvas = document.createElement("canvas");
+    let failed = false;
+    const onErr = () => {
+      failed = true;
+    };
+    canvas.addEventListener("webglcontextcreationerror", onErr, { once: true });
+    const gl = canvas.getContext("webgl2") || canvas.getContext("webgl") || canvas.getContext("experimental-webgl");
+    canvas.removeEventListener("webglcontextcreationerror", onErr);
+    if (failed || !gl) return false;
+    const vendor = gl.getParameter(gl.VERSION);
+    if (!vendor) return false;
+    const vs = gl.createShader(gl.VERTEX_SHADER);
+    if (!vs) return false;
+    gl.shaderSource(vs, "attribute vec2 p; void main(){ gl_Position = vec4(p,0.0,1.0); }");
+    gl.compileShader(vs);
+    if (!gl.getShaderParameter(vs, gl.COMPILE_STATUS)) return false;
+    return true;
+  } catch {
+    return false;
+  }
+}
+var GLOBAL_KEY = "__caoguoMapConfig__";
+function setGlobalConfig(cfg) {
+  const prev = getGlobalConfig();
+  globalThis[GLOBAL_KEY] = { ...prev, ...cfg };
+}
+function getGlobalConfig() {
+  return globalThis[GLOBAL_KEY] ?? {};
+}
 var Map2 = class {
   constructor(options) {
     /** 离线瓦片后端（默认浏览器 IndexedDB / Node 内存） */
     this._store = createDefaultStore();
     this._dataCRS = options.dataCRS ?? "WGS84";
+    if (!isWebGLAvailable()) {
+      throw new WebGLUnavailableError();
+    }
+    let style = osmRasterStyle();
+    if (options.style) {
+      style = options.style;
+    } else if (options.tianditu) {
+      if (!options.tianditu.token) throw new MissingTokenError();
+      style = tiandituStyle(
+        options.tianditu.type ?? "vector",
+        options.tianditu
+      );
+    } else {
+      const g = getGlobalConfig();
+      if (g.tiandituToken) {
+        style = tiandituStyle("vector", { token: g.tiandituToken });
+      }
+    }
     this._map = new maplibregl__default.default.Map({
       container: options.container,
       center: options.center ?? WUHAN_CENTER,
       zoom: options.zoom ?? WUHAN_ZOOM,
-      style: options.style ?? osmRasterStyle(),
+      style,
       pitch: options.pitch ?? 0,
       bearing: options.bearing ?? 0,
       attributionControl: { compact: true }
@@ -1032,8 +1247,23 @@ var Map2 = class {
     else this._map.on(event, cb);
   }
   addSource(id, source) {
+    if (this._map.getSource(id)) {
+      try {
+        this._map.removeSource(id);
+      } catch {
+      }
+    }
     this._map.addSource(id, source);
   }
+  /** 安全移除 source（不存在时静默忽略） */
+  removeSource(id) {
+    if (this._map.getSource(id)) {
+      try {
+        this._map.removeSource(id);
+      } catch {
+      }
+    }
+  }
   getSource(id) {
     return this._map.getSource(id);
   }
@@ -1063,6 +1293,26 @@ var Map2 = class {
     ctrl.addTo(container);
     return ctrl;
   }
+  /**
+   * 挂载图例控件（通用）：渲染数据驱动的色块/线段图例，说明专题图层语义。
+   * 返回控件实例，可调用 .setItems() 随图层切换更新、.remove() 卸载。
+   */
+  addLegendControl(options) {
+    const ctrl = new LegendControl(options);
+    const container = this._map.getContainer();
+    ctrl.addTo(container);
+    return ctrl;
+  }
+  /**
+   * 挂载地图导出控件（通用）：点击按钮将当前视图导出为 PNG 下载。
+   * 返回控件实例，可调用 .remove() 卸载。
+   */
+  addExportControl(options = {}) {
+    const ctrl = new ExportControl(this._map, options);
+    const container = this._map.getContainer();
+    ctrl.addTo(container);
+    return ctrl;
+  }
   /**
    * 挂载辉光管线 Custom Layer（T6 / F-1.3）。
    * 传入 GeoJSON 线集合，叠加渲染管线/路网/水系辉光效果。
@@ -1083,6 +1333,24 @@ var Map2 = class {
     ctrl.evaluate(true);
     return ctrl;
   }
+  /**
+   * 启用 3D 地形渲染（F-1.5）。
+   *
+   * 注入 raster-dem 高程源并调用 maplibre-gl 原生 `setTerrain`，使地图呈现地形起伏。
+   * DEM 瓦片默认使用公共 Terrarium 源（elevation-tiles-prod，Terrain-RGB 编码，支持 CORS），
+   * 可在 opts.tiles 覆盖为私有瓦片服务（如 MinIO / 本地 MBTiles 服务）。
+   *
+   * @param opts.exaggeration 地形夸张系数（默认 1.5）
+   * @param opts.tiles DEM 瓦片模板，{z}/{x}/{y} 占位
+   * @param opts.encoding 'terrarium'（默认，Mapzen）| 'mapbox'
+   */
+  enableTerrain(opts = {}) {
+    applyTerrain(this._map, opts);
+  }
+  /** 关闭 3D 地形渲染（F-1.5），并移除 DEM 源 */
+  disableTerrain(sourceId = "cg-dem") {
+    removeTerrain(this._map, sourceId);
+  }
   get instance() {
     return this._map;
   }
@@ -1096,7 +1364,9 @@ Object.defineProperty(exports, "maplibregl", {
 exports.CACHEABLE_HOSTS = CACHEABLE_HOSTS;
 exports.CACHE_NAME = CACHE_NAME;
 exports.CustomLineLayer = CustomLineLayer;
+exports.ExportControl = ExportControl;
 exports.IdbTileStore = IdbTileStore;
+exports.LegendControl = LegendControl;
 exports.LodController = LodController;
 exports.MSG_AIRGAP = MSG_AIRGAP;
 exports.Map = Map2;
@@ -1108,6 +1378,7 @@ exports.ScaleControl = ScaleControl;
 exports.ThemeSwitcher = ThemeSwitcher;
 exports.WUHAN_CENTER = WUHAN_CENTER;
 exports.WUHAN_ZOOM = WUHAN_ZOOM;
+exports.WebGLUnavailableError = WebGLUnavailableError;
 exports.addTiandituBaseMap = addTiandituBaseMap;
 exports.buildGlowGeometry = buildGlowGeometry;
 exports.buildTiandituSources = buildTiandituSources;
@@ -1120,9 +1391,11 @@ exports.createTransformer = createTransformer;
 exports.default = src_default;
 exports.fromWgs84 = fromWgs84;
 exports.gcj02ToWgs84 = gcj02ToWgs84;
+exports.getGlobalConfig = getGlobalConfig;
 exports.glowPasses = glowPasses;
 exports.installServiceWorker = installServiceWorker;
 exports.isInChina = isInChina;
+exports.isWebGLAvailable = isWebGLAvailable;
 exports.offlineGeoJSONSource = offlineGeoJSONSource;
 exports.offlineSourceTiles = offlineSourceTiles;
 exports.offlineTileUrl = offlineTileUrl;
@@ -1133,12 +1406,16 @@ exports.parseOfflineUrl = parseOfflineUrl;
 exports.projectSimple = projectSimple;
 exports.registerOfflineProtocol = registerOfflineProtocol;
 exports.registerOfflineServiceWorker = registerOfflineServiceWorker;
+exports.removeSourceSafe = removeSourceSafe;
+exports.removeSourcesSafe = removeSourcesSafe;
+exports.renderLegendHtml = renderLegendHtml;
 exports.resolveCacheKey = resolveCacheKey;
 exports.resolveFromStore = resolveFromStore;
 exports.resolveLod = resolveLod;
 exports.resolveResponse = resolveResponse;
 exports.setAirgap = setAirgap;
 exports.setCgcs2000GridShift = setCgcs2000GridShift;
+exports.setGlobalConfig = setGlobalConfig;
 exports.shouldCache = shouldCache;
 exports.suggestDensity = suggestDensity;
 exports.themeFromStyle = themeFromStyle;
@@ -1148,6 +1425,8 @@ exports.tileKey = tileKey;
 exports.toWgs84 = toWgs84;
 exports.transformBounds = transformBounds;
 exports.transformPoint = transformPoint;
+exports.triggerDownload = triggerDownload;
+exports.upsertSource = upsertSource;
 exports.wgs84ToCgcs2000 = wgs84ToCgcs2000;
 exports.wgs84ToGcj02 = wgs84ToGcj02;
 //# sourceMappingURL=index.cjs.map