road-traffic-viewer 1.0.0

package/dist/road-traffic-viewer.es.js

@@ -0,0 +1,881 @@
+var I = Object.defineProperty;
+var H = (l, e, s) => e in l ? I(l, e, { enumerable: !0, configurable: !0, writable: !0, value: s }) : l[e] = s;
+var h = (l, e, s) => H(l, typeof e != "symbol" ? e + "" : e, s);
+import { defineComponent as D, ref as U, shallowRef as F, computed as y, onMounted as A, onUnmounted as O, watch as L, openBlock as P, createElementBlock as C, normalizeStyle as b } from "vue";
+const B = [
+  { key: 3, color: "#ff4d6a" },
+  // 严重拥堵
+  { key: 2, color: "#ff9500" },
+  // 拥堵
+  { key: 1, color: "#00bfff" },
+  // 缓行
+  { key: 0, color: "#00ff88" }
+  // 畅通
+], k = /^[kK](\d+)(?:\.(\d+))?$/, W = /^\d+(\.\d+)?$/;
+function T(l) {
+  if (typeof l == "number")
+    return Math.round(l);
+  const e = l.trim();
+  if (W.test(e))
+    return Math.round(parseFloat(e));
+  const t = e.replace("+", ".").match(k);
+  if (t) {
+    const a = parseInt(t[1], 10), n = t[2] || "0";
+    let r = 0;
+    if (n.length > 0) {
+      const o = n.padEnd(3, "0").substring(0, 3);
+      r = parseInt(o, 10);
+    }
+    return a * 1e3 + r;
+  }
+  const i = parseFloat(e);
+  return isNaN(i) ? (console.warn(`[pile-utils] 无法解析桩号: "${l}"，已当作 0 处理`), 0) : Math.round(i);
+}
+function V(l) {
+  const e = Math.round(l), s = Math.floor(e / 1e3), t = e % 1e3;
+  if (t === 0)
+    return `K${s}`;
+  const i = t.toString().padStart(3, "0");
+  return `K${s}+${i}`;
+}
+function fe(l) {
+  return `K${Math.floor(Math.round(l) / 1e3)}`;
+}
+const z = "#141a28", Y = "#1e2a3e", N = "#2a3a55", q = "#3a5070", $ = "#1a2535", G = "#ffb020", X = "#0a0f1a", K = "#3a5070", J = "#2a3a55", j = "#ffffff", Q = "#00ff88", Z = 28, x = 3, ee = 6, te = 16, se = 12, ie = 1e3, ne = 1e3, re = 1, ae = -1;
+class S {
+  /**
+   * 构造函数
+   *
+   * @param container - 容器 DOM 元素
+   * @param config    - 道路渲染配置
+   */
+  constructor(e, s) {
+    // ---- DOM 相关 ----
+    /** 容器 DOM 元素 */
+    h(this, "container");
+    /** Canvas 元素 */
+    h(this, "canvas");
+    /** 2D 渲染上下文 */
+    h(this, "ctx");
+    // ---- 配置 ----
+    /** 用户传入的原始配置（已补全默认值） */
+    h(this, "config");
+    /** 内部渲染度量参数（从配置计算得出） */
+    h(this, "metrics", null);
+    // ---- 数据缓存 ----
+    /** 车辆数据缓存 */
+    h(this, "cachedVehicles", []);
+    /** 路段流量数据缓存 */
+    h(this, "cachedTrafficFlows", []);
+    // ---- 渲染节流 ----
+    /** 是否有待处理的渲染请求 */
+    h(this, "renderPending", !1);
+    /** 设备像素比 */
+    h(this, "dpr", 1);
+    // ---- ResizeObserver ----
+    /** 监听容器尺寸变化 */
+    h(this, "resizeObserver", null);
+    // ---- 销毁标记 ----
+    /** 是否已销毁 */
+    h(this, "destroyed", !1);
+    // ---- 代码表缓存 ----
+    /** 流量状态 key → 颜色映射表（从配置数组构建，加速查找） */
+    h(this, "statusColorMap", /* @__PURE__ */ new Map());
+    // ---- SVG 图片缓存 ----
+    /** 已加载的 SVG Image 对象缓存（按 URL 去重） */
+    h(this, "svgImageCache", /* @__PURE__ */ new Map());
+    /** 道路底图 Image 对象 */
+    h(this, "roadBgImage", null);
+    /** 道路底图加载中标记 */
+    h(this, "roadBgImageLoading", !1);
+    // ---- 视口拖拽 ----
+    /** 当前视口左边缘对应的路线米数 */
+    h(this, "viewOffsetMeters", 0);
+    /** 鼠标拖拽中标记 */
+    h(this, "isDragging", !1);
+    /** 拖拽起始鼠标 X */
+    h(this, "dragStartX", 0);
+    /** 拖拽起始 viewOffset */
+    h(this, "dragStartOffset", 0);
+    /** 鼠标移动/抬起绑定的 this */
+    h(this, "_boundMouseMove", null);
+    h(this, "_boundMouseUp", null);
+    /**
+     * 窗口大小变化时的处理函数（箭头函数保持 this 绑定）
+     */
+    h(this, "_onWindowResize", () => {
+      this.destroyed || (this._resize(), this.renderPending || (this.renderPending = !0, requestAnimationFrame(() => this._doRender())));
+    });
+    // ==========================================================================
+    // 私有方法：鼠标拖拽平移
+    // ==========================================================================
+    /**
+     * 鼠标按下：开始拖拽平移视口
+     */
+    h(this, "_onMouseDown", (e) => {
+      if (this.destroyed || !this.metrics) return;
+      e.preventDefault(), this.isDragging = !0, this.dragStartX = e.clientX, this.dragStartOffset = this.viewOffsetMeters, this.canvas.style.cursor = "grabbing";
+      const s = (i) => this._onMouseMove(i), t = (i) => this._onMouseUp(i);
+      this._boundMouseMove = s, this._boundMouseUp = t, window.addEventListener("mousemove", s), window.addEventListener("mouseup", t);
+    });
+    /**
+     * 鼠标移动：更新视口偏移
+     */
+    h(this, "_onMouseMove", (e) => {
+      if (!this.isDragging || !this.metrics) return;
+      const s = this.metrics, i = (e.clientX - this.dragStartX) / s.canvasWidthPx * s.visibleMeters;
+      let a = this.dragStartOffset - i;
+      const n = s.effectiveStartM, r = Math.max(n, s.effectiveEndM - s.visibleMeters);
+      a = Math.max(n, Math.min(a, r)), this.viewOffsetMeters = a, s.viewOffsetMeters = a, this.renderPending || (this.renderPending = !0, requestAnimationFrame(() => this._doRender()));
+    });
+    /**
+     * 鼠标抬起：结束拖拽
+     */
+    h(this, "_onMouseUp", (e) => {
+      this.isDragging && (this.isDragging = !1, this.canvas.style.cursor = "grab", this._boundMouseMove && (window.removeEventListener("mousemove", this._boundMouseMove), this._boundMouseMove = null), this._boundMouseUp && (window.removeEventListener("mouseup", this._boundMouseUp), this._boundMouseUp = null));
+    });
+    if (!e)
+      throw new Error("[RoadTrafficCore] container 不能为空");
+    this.container = e, this.dpr = window.devicePixelRatio || 1, this.config = this._applyDefaults(s), this._buildStatusColorMap(), this.canvas = document.createElement("canvas"), this.canvas.style.display = "block", this.ctx = this.canvas.getContext("2d"), e.innerHTML = "", e.appendChild(this.canvas), this._resize(), this._drawEmptyRoad(), typeof ResizeObserver < "u" && (this.resizeObserver = new ResizeObserver(() => {
+      this._resize(), this.renderPending || (this.renderPending = !0, requestAnimationFrame(() => this._doRender()));
+    }), this.resizeObserver.observe(e)), window.addEventListener("resize", this._onWindowResize), this.canvas.addEventListener("mousedown", this._onMouseDown.bind(this)), this.canvas.style.cursor = "grab";
+  }
+  // ==========================================================================
+  // 公开方法
+  // ==========================================================================
+  /**
+   * 重绘道路（手动触发完整渲染）
+   *
+   * 可用于窗口 resize 后手动刷新，或首次挂载后确保道路可见。
+   * 内部调用 _resize() 重新计算尺寸并绘制空道路背景。
+   */
+  render() {
+    this.destroyed || (this._resize(), this._drawEmptyRoad());
+  }
+  /**
+   * 更新车辆数据
+   *
+   * 不立即渲染，而是缓存数据并通过 requestAnimationFrame 在下一帧渲染。
+   * 多次连续调用只会在下一帧执行一次渲染，实现自动节流。
+   *
+   * @param vehicles - 车辆数据数组
+   */
+  updateVehicles(e) {
+    this.destroyed || (this.cachedVehicles = e || [], this.renderPending || (this.renderPending = !0, requestAnimationFrame(() => this._doRender())));
+  }
+  /**
+   * 更新路段流量数据
+   *
+   * 与 updateVehicles 类似，缓存数据并通过 RAF 在下一帧渲染。
+   *
+   * @param flows - 路段流量数据数组
+   */
+  updateTrafficFlows(e) {
+    this.destroyed || (this.cachedTrafficFlows = e || [], this.renderPending || (this.renderPending = !0, requestAnimationFrame(() => this._doRender())));
+  }
+  /**
+   * 同时更新车辆和路段流量数据
+   *
+   * @param vehicles - 车辆数据数组
+   * @param flows    - 路段流量数据数组
+   */
+  updateAll(e, s) {
+    this.destroyed || (this.cachedVehicles = e || [], this.cachedTrafficFlows = s || [], this.renderPending || (this.renderPending = !0, requestAnimationFrame(() => this._doRender())));
+  }
+  /**
+   * 获取 Canvas 元素（供外部进行截图等操作）
+   */
+  getCanvas() {
+    return this.canvas;
+  }
+  /**
+   * 获取当前渲染度量参数
+   */
+  getMetrics() {
+    return this.metrics;
+  }
+  /**
+   * 更新配置（部分更新）
+   *
+   * 传入的字段会合并到现有配置中，触发重新计算度量并重绘。
+   *
+   * @param partial - 部分配置对象
+   */
+  updateConfig(e) {
+    this.destroyed || (this.config = { ...this.config, ...e }, e.trafficStatusColors && this._buildStatusColorMap(), this._resize(), this.renderPending || (this.renderPending = !0, requestAnimationFrame(() => this._doRender())));
+  }
+  /**
+   * 销毁实例
+   *
+   * 移除事件监听、清理 DOM、释放引用。
+   */
+  destroy() {
+    this.destroyed || (this.destroyed = !0, this.renderPending = !1, this.resizeObserver && (this.resizeObserver.disconnect(), this.resizeObserver = null), window.removeEventListener("resize", this._onWindowResize), this._boundMouseMove && (window.removeEventListener("mousemove", this._boundMouseMove), this._boundMouseMove = null), this._boundMouseUp && (window.removeEventListener("mouseup", this._boundMouseUp), this._boundMouseUp = null), this.container && (this.container.innerHTML = ""), this.cachedVehicles = [], this.cachedTrafficFlows = []);
+  }
+  // ==========================================================================
+  // 私有方法：配置处理
+  // ==========================================================================
+  /**
+   * 补全用户配置的默认值
+   *
+   * 用户未传入的字段使用预设默认值填充，返回完整的配置对象。
+   */
+  _applyDefaults(e) {
+    return {
+      // 桩号/路线
+      startPile: e.startPile,
+      endPile: e.endPile,
+      paddingStartMeters: e.paddingStartMeters ?? 0,
+      paddingEndMeters: e.paddingEndMeters ?? 0,
+      segmentIntervalMeters: e.segmentIntervalMeters ?? ie,
+      // 比例尺
+      scale: e.scale ?? ne,
+      // 画布尺寸
+      canvasWidth: e.canvasWidth ?? "100%",
+      canvasHeight: e.canvasHeight ?? "auto",
+      // 方向定义
+      directionDown: e.directionDown ?? re,
+      directionUp: e.directionUp ?? ae,
+      // 车道配置
+      lanesDown: e.lanesDown ?? 1,
+      lanesUp: e.lanesUp ?? 1,
+      laneHeight: e.laneHeight ?? Z,
+      laneLineColor: e.laneLineColor ?? j,
+      roadPadding: e.roadPadding ?? x,
+      medianHeight: e.medianHeight ?? ee,
+      // 颜色配置
+      roadBg: e.roadBg ?? z,
+      roadShoulder: e.roadShoulder ?? Y,
+      roadLine: e.roadLine ?? N,
+      roadEdge: e.roadEdge ?? q,
+      medianBg: e.medianBg ?? $,
+      medianLineColor: e.medianLineColor ?? G,
+      canvasBg: e.canvasBg ?? X,
+      markerColor: e.markerColor ?? K,
+      laneLabelColor: e.laneLabelColor ?? J,
+      // 车辆默认颜色
+      defaultCarColor: e.defaultCarColor ?? Q,
+      // 流量状态颜色
+      trafficStatusColors: e.trafficStatusColors ?? B,
+      // 车辆尺寸
+      carLength: e.carLength ?? te,
+      carWidth: e.carWidth ?? se,
+      // 车辆 SVG 图片
+      carSvgUrl: e.carSvgUrl ?? "",
+      // 道路底图
+      roadBgImage: e.roadBgImage ?? "",
+      // 车辆标签显示
+      showCarSpeed: e.showCarSpeed ?? !0,
+      showCarId: e.showCarId ?? !0
+    };
+  }
+  /**
+   * 从 trafficStatusColors 数组构建 key→color 映射表
+   *
+   * 使用 Map 加速渲染时的颜色查找。
+   */
+  _buildStatusColorMap() {
+    this.statusColorMap.clear();
+    const e = this.config.trafficStatusColors;
+    for (let s = 0; s < e.length; s++)
+      this.statusColorMap.set(e[s].key, e[s].color);
+  }
+  // ==========================================================================
+  // 私有方法：度量计算
+  // ==========================================================================
+  /**
+   * 计算内部渲染度量参数
+   *
+   * 从配置中解析桩号、计算道路总长度、画布尺寸等。
+   * 如果配置无效（如 startPile >= endPile），返回 null。
+   */
+  _computeMetrics() {
+    const e = this.config, s = T(e.startPile), t = T(e.endPile), i = s - e.paddingStartMeters, a = t + e.paddingEndMeters, n = a - i, r = n;
+    if (r <= 0)
+      return console.warn("[RoadTrafficCore] 路线长度无效 (<=0)，请检查 startPile/endPile"), null;
+    const o = e.scale, d = this.container.clientWidth;
+    let c;
+    const f = e.canvasWidth;
+    if (typeof f == "string" && f.endsWith("%")) {
+      const m = parseFloat(f) / 100;
+      c = d * m;
+    } else typeof f == "number" ? c = f : c = d;
+    const g = Math.min(o, r), p = e.roadPadding + e.lanesUp * e.laneHeight, w = e.roadPadding + e.lanesDown * e.laneHeight, v = p + e.medianHeight + w;
+    let u;
+    const _ = e.canvasHeight;
+    if (typeof _ == "string" && _.endsWith("%")) {
+      const m = this.container.clientHeight, E = parseFloat(_) / 100;
+      u = m * E;
+    } else typeof _ == "number" ? u = _ : u = v + 40;
+    const M = (u - v) / 2;
+    return c < 10 && (c = 10), u < 10 && (u = 10), {
+      totalMeters: r,
+      effectiveStartM: i,
+      effectiveEndM: a,
+      effectiveLengthM: n,
+      scale: o,
+      visibleMeters: g,
+      viewOffsetMeters: this.viewOffsetMeters,
+      canvasWidthPx: c,
+      canvasHeightPx: u,
+      laneHeight: e.laneHeight,
+      roadPadding: e.roadPadding,
+      medianHeight: e.medianHeight,
+      lanesDown: e.lanesDown,
+      lanesUp: e.lanesUp,
+      roadTotalHeight: v,
+      roadY: M,
+      directionDown: e.directionDown,
+      directionUp: e.directionUp
+    };
+  }
+  /**
+   * 计算桩号分段列表
+   *
+   * 从 effectiveStartM 到 effectiveEndM 按 segmentIntervalMeters 间隔
+   * 生成每个分段的信息（标签文本、米数、画布 X 坐标）。
+   */
+  _computeSegments() {
+    const e = this.metrics, s = this.config.segmentIntervalMeters, t = Math.ceil(e.effectiveStartM / s) * s, i = [];
+    for (let a = t; a <= e.effectiveEndM; a += s) {
+      const n = (a - e.viewOffsetMeters) / e.visibleMeters * e.canvasWidthPx;
+      i.push({
+        label: V(a),
+        meters: a,
+        x: n
+      });
+    }
+    return i;
+  }
+  // ==========================================================================
+  // 私有方法：尺寸管理
+  // ==========================================================================
+  /**
+   * 重新计算尺寸并设置 Canvas 宽高
+   *
+   * 处理 DPR（设备像素比）以确保高清渲染。
+   */
+  _resize() {
+    if (this.metrics = this._computeMetrics(), !this.metrics) return;
+    const e = this.metrics.effectiveStartM, s = Math.max(
+      e,
+      this.metrics.effectiveEndM - this.metrics.visibleMeters
+    );
+    this.viewOffsetMeters = Math.max(e, Math.min(this.viewOffsetMeters, s)), this.metrics.viewOffsetMeters = this.viewOffsetMeters;
+    const t = this.metrics, i = this.dpr;
+    this.canvas.width = t.canvasWidthPx * i, this.canvas.height = t.canvasHeightPx * i, this.canvas.style.width = t.canvasWidthPx + "px", this.canvas.style.height = t.canvasHeightPx + "px", this.ctx.setTransform(i, 0, 0, i, 0, 0);
+  }
+  // ==========================================================================
+  // 私有方法：主渲染循环
+  // ==========================================================================
+  /**
+   * 执行实际渲染（由 requestAnimationFrame 调用）
+   *
+   * 从缓存读取车辆/流量数据，绘制到 Canvas。
+   */
+  _doRender() {
+    if (this.renderPending = !1, this.destroyed || !this.metrics) return;
+    const e = this.metrics, s = this.ctx, t = e.canvasWidthPx, i = e.canvasHeightPx;
+    s.clearRect(0, 0, t, i), this._drawCanvasBg(s, t, i), this._drawRoad(s, t, i, e), this._drawTrafficFlowColors(s, t, e), this._drawMedian(s, t, e), this._drawLaneLines(s, t, e), this._drawPileMarkers(s, t, e), this._drawLaneLabels(s, e), this._drawVehicles(s, t, e);
+  }
+  /**
+   * 绘制空道路（无数据时的初始渲染）
+   */
+  _drawEmptyRoad() {
+    if (!this.metrics) return;
+    const e = this.metrics, s = this.ctx, t = e.canvasWidthPx, i = e.canvasHeightPx;
+    s.clearRect(0, 0, t, i), this._drawCanvasBg(s, t, i), this._drawRoad(s, t, i, e), this._drawMedian(s, t, e), this._drawLaneLines(s, t, e), this._drawPileMarkers(s, t, e), this._drawLaneLabels(s, e);
+  }
+  // ==========================================================================
+  // 私有方法：画布背景
+  // ==========================================================================
+  /**
+   * 绘制画布背景色
+   */
+  _drawCanvasBg(e, s, t) {
+    e.fillStyle = this.config.canvasBg, e.fillRect(0, 0, s, t);
+  }
+  // ==========================================================================
+  // 私有方法：道路背景
+  // ==========================================================================
+  /**
+   * 绘制道路主体背景和路肩
+   *
+   * 布局结构（从上到下）：
+   *   画布背景
+   *   上路肩
+   *   上行车道区域（多车道）—— direction=-1，桩号由小变大（左→右）
+   *   ═══ 中央隔离带 + 双黄线 ═══
+   *   下行车道区域（多车道）—— direction=1，桩号由大变小（右→左）
+   *   下路肩
+   *   画布背景
+   */
+  _drawRoad(e, s, t, i) {
+    const a = i.roadY, n = i.roadPadding + i.lanesUp * i.laneHeight, r = i.roadY + n + i.medianHeight, o = i.roadPadding + i.lanesDown * i.laneHeight, d = this._getRoadBgImage();
+    d ? e.drawImage(d, 0, i.roadY, s, i.roadTotalHeight) : (e.fillStyle = this.config.roadBg, e.fillRect(0, i.roadY, s, i.roadTotalHeight)), e.fillStyle = this.config.roadShoulder, e.fillRect(0, a, s, i.roadPadding), e.fillRect(0, r + o - i.roadPadding, s, i.roadPadding);
+  }
+  // ==========================================================================
+  // 私有方法：中央隔离带
+  // ==========================================================================
+  /**
+   * 绘制中央隔离带和双黄线
+   *
+   * 隔离带位于上行车道和下行车道之间。
+   * 双黄线绘制在隔离带正中。
+   */
+  _drawMedian(e, s, t) {
+    const i = t.roadPadding + t.lanesUp * t.laneHeight, a = t.roadY + i;
+    e.fillStyle = this.config.medianBg, e.fillRect(0, a, s, t.medianHeight);
+    const n = this.config.medianLineColor, r = 2, o = 3, d = a + t.medianHeight / 2;
+    e.strokeStyle = n, e.lineWidth = r, e.beginPath(), e.moveTo(0, d - o / 2 - r / 2), e.lineTo(s, d - o / 2 - r / 2), e.stroke(), e.beginPath(), e.moveTo(0, d + o / 2 + r / 2), e.lineTo(s, d + o / 2 + r / 2), e.stroke();
+  }
+  // ==========================================================================
+  // 私有方法：车道间隔虚线
+  // ==========================================================================
+  /**
+   * 绘制车道间的间隔虚线
+   *
+   * 每两个相邻车道之间绘制一条白色虚线。
+   * 下行和上行方向分别绘制。
+   */
+  _drawLaneLines(e, s, t) {
+    const i = t.roadY + t.roadPadding, a = t.lanesUp * t.laneHeight, n = t.roadY + t.roadPadding + a + t.medianHeight + t.roadPadding;
+    e.strokeStyle = this.config.laneLineColor, e.lineWidth = 1;
+    const d = [10, 8];
+    for (let c = 1; c < t.lanesUp; c++) {
+      const f = i + c * t.laneHeight;
+      this._drawDashedLine(e, 0, f, s, f, d);
+    }
+    for (let c = 1; c < t.lanesDown; c++) {
+      const f = n + c * t.laneHeight;
+      this._drawDashedLine(e, 0, f, s, f, d);
+    }
+  }
+  /**
+   * 绘制一条水平虚线
+   *
+   * @param ctx     - 2D 上下文
+   * @param x1, y1 - 起点
+   * @param x2, y2 - 终点
+   * @param pattern - [实线段长度, 空白段长度]
+   */
+  _drawDashedLine(e, s, t, i, a, n) {
+    const r = i - s, o = a - t, d = Math.sqrt(r * r + o * o), c = n[0], f = n[1], g = c + f;
+    let p = 0;
+    for (; p < d; ) {
+      const w = p, v = Math.min(p + c, d), u = w / d, _ = v / d;
+      e.beginPath(), e.moveTo(s + r * u, t + o * u), e.lineTo(s + r * _, t + o * _), e.stroke(), p += g;
+    }
+  }
+  // ==========================================================================
+  // 私有方法：路段流量颜色覆盖
+  // ==========================================================================
+  /**
+   * 根据路段流量数据在道路上绘制颜色覆盖
+   *
+   * 对于每个 TrafficFlow 条目，找到其起止桩号对应的画布 X 坐标范围，
+   * 在该范围内的车道背景上填充对应拥堵状态的颜色。
+   *
+   * 覆盖绘制在道路底色之上、车道线和车辆之下。
+   */
+  _drawTrafficFlowColors(e, s, t) {
+    if (this.cachedTrafficFlows.length === 0) return;
+    const i = t.roadY + t.roadPadding, a = t.lanesUp * t.laneHeight, n = t.roadY + t.roadPadding + a + t.medianHeight, r = t.roadPadding + t.lanesDown * t.laneHeight;
+    for (let o = 0; o < this.cachedTrafficFlows.length; o++) {
+      const d = this.cachedTrafficFlows[o], c = T(d.startPile), f = T(d.endPile);
+      if (f <= c) continue;
+      const g = Math.max(c, t.effectiveStartM), p = Math.min(f, t.effectiveEndM);
+      if (p <= g) continue;
+      const w = (g - t.viewOffsetMeters) / t.visibleMeters * s, v = (p - t.viewOffsetMeters) / t.visibleMeters * s, u = typeof d.status == "string" ? parseInt(d.status, 10) : d.status, _ = this._getStatusColor(u);
+      if (!_) continue;
+      const M = d.direction === this.config.directionUp, m = d.direction === this.config.directionDown;
+      e.fillStyle = _, M ? e.fillRect(w, i, v - w, a) : m && e.fillRect(w, n, v - w, r);
+    }
+  }
+  /**
+   * 根据流量状态值获取对应颜色
+   *
+   * @param status - 状态值 0/1/2/3
+   * @returns 颜色字符串，未匹配到时返回 undefined
+   */
+  _getStatusColor(e) {
+    return this.statusColorMap.get(e);
+  }
+  // ==========================================================================
+  // 私有方法：桩号标尺
+  // ==========================================================================
+  /**
+   * 绘制桩号标记和刻度线
+   *
+   * 在道路上方绘制桩号文本和对应的刻度线。
+   * 桩号文本整公里显示 "K112"，非整公里显示 "K112+500"。
+   */
+  _drawPileMarkers(e, s, t) {
+    const i = this._computeSegments();
+    e.font = '9px "JetBrains Mono", monospace', e.fillStyle = this.config.markerColor;
+    for (let a = 0; a < i.length; a++) {
+      const n = i[a], r = n.x;
+      r >= 0 && r <= s && (e.fillStyle = this.config.markerColor, e.fillRect(r, t.roadY - 6, 1, 5), e.fillStyle = this.config.markerColor, e.textAlign = "center", e.fillText(n.label, r, t.roadY - 9));
+    }
+    e.textAlign = "start";
+  }
+  // ==========================================================================
+  // 私有方法：车道标签
+  // ==========================================================================
+  /**
+   * 绘制车道方向标签（上行/下行）
+   *
+   * 在画布左侧标注方向文字。
+   */
+  _drawLaneLabels(e, s) {
+    const t = s.roadPadding + s.lanesDown * s.laneHeight, i = s.roadY + t + s.medianHeight;
+    e.font = '8px "JetBrains Mono", monospace', e.fillStyle = this.config.laneLabelColor;
+    const a = s.roadY + t / 2 + 3;
+    e.fillText("上行", 6, a);
+    const n = i + s.roadPadding + s.lanesUp * s.laneHeight / 2 + 3;
+    e.fillText("下行", 6, n);
+  }
+  // ==========================================================================
+  // 私有方法：车辆绘制
+  // ==========================================================================
+  /**
+   * 绘制所有车辆
+   *
+   * 遍历缓存的车辆数组，将每台车按其 position 和 lane 渲染到对应车道。
+   * 过滤超出有效范围的车辆。
+   */
+  _drawVehicles(e, s, t) {
+    if (this.cachedVehicles.length === 0) return;
+    const i = this.cachedVehicles, a = t.visibleMeters > 0 ? s / t.visibleMeters : 0;
+    for (let n = 0; n < i.length; n++) {
+      const r = i[n], o = T(r.position), d = t.viewOffsetMeters + t.visibleMeters;
+      if (o < t.viewOffsetMeters - 50 || o > d + 50)
+        continue;
+      const f = r.direction === this.config.directionUp ? "up" : "down", g = r.lane ?? 1, p = f === "down" ? t.lanesDown : t.lanesUp, w = Math.max(1, Math.min(g, p)), v = this._computeLaneY(t, f, w), u = (o - t.viewOffsetMeters) * a, _ = r.carColor || this.config.defaultCarColor, M = r.carSvgUrl || this.config.carSvgUrl || null;
+      this._drawSingleCar(e, u, v, _, r, M);
+    }
+  }
+  /**
+   * 计算指定车道中心的 Y 坐标
+   *
+   * @param m       - 渲染度量
+   * @param side    - 上行/下行
+   * @param laneNum - 车道编号（1-based，1 为最靠近隔离带的车道）
+   * @returns 该车道中心的 Y 坐标（像素）
+   */
+  _computeLaneY(e, s, t) {
+    if (s === "up") {
+      const i = e.roadY + e.roadPadding, a = t - 1;
+      return i + (e.lanesUp - 1 - a) * e.laneHeight + e.laneHeight / 2;
+    } else {
+      const i = e.roadPadding + e.lanesUp * e.laneHeight, a = e.roadY + i + e.medianHeight + e.roadPadding, n = t - 1;
+      return a + n * e.laneHeight + e.laneHeight / 2;
+    }
+  }
+  /**
+   * 绘制单台车辆（14 层精细渲染）
+   *
+   * 渲染层级（参考原 JS 工具类）：
+   *   1. 车身阴影
+   *   2. 车身主体（使用车辆颜色）
+   *   3. 车顶（深色窄矩形）
+   *   4. 前挡风玻璃
+   *   5. 后挡风玻璃
+   *   6. 前车灯
+   *   7. 尾灯
+   *   8. 车身轮廓线
+   *   9. 速度标签（车辆上方）
+   *   10. 车辆 ID 标签（车辆下方）
+   */
+  _drawSingleCar(e, s, t, i, a, n) {
+    const r = this.config.carLength, o = this.config.carWidth;
+    if (e.save(), e.translate(s, t), a.direction === this.config.directionUp && e.scale(-1, 1), n) {
+      const v = this._loadSvgImage(n);
+      if (v) {
+        e.drawImage(v, -r / 2, -o / 2, r, o), e.restore(), this._drawCarLabels(e, s, t, o, i, a);
+        return;
+      }
+    }
+    const d = this._hexToRgb(i), c = this._rgbToHex(
+      Math.floor(d[0] * 0.6),
+      Math.floor(d[1] * 0.6),
+      Math.floor(d[2] * 0.6)
+    );
+    e.fillStyle = "rgba(0,0,0,0.25)", this._drawCarPath(e, 1.5, 1.5, r, o), e.fill(), e.fillStyle = i, this._drawCarPath(e, 0, 0, r, o), e.fill(), e.fillStyle = c, this._drawCarPath(e, 0, 0, r * 0.45, o * 0.7), e.fill(), e.fillStyle = "rgba(150,200,255,0.5)";
+    const f = r * 0.12, g = o * 0.6, p = -r * 0.18;
+    this._drawRoundRect(e, p, -g / 2, f, g, 2), e.fillStyle = "rgba(150,200,255,0.35)";
+    const w = r * 0.12;
+    this._drawRoundRect(e, w, -g / 2, f * 0.8, g, 2), e.fillStyle = "rgba(255,255,200,0.8)", e.beginPath(), e.ellipse(-r / 2 + 2, -o / 2 + 2.5, 2.5, 1.8, 0, 0, Math.PI * 2), e.fill(), e.beginPath(), e.ellipse(-r / 2 + 2, o / 2 - 2.5, 2.5, 1.8, 0, 0, Math.PI * 2), e.fill(), e.fillStyle = "rgba(255,30,30,0.8)", e.beginPath(), e.ellipse(r / 2 - 2, -o / 2 + 2.5, 2, 1.5, 0, 0, Math.PI * 2), e.fill(), e.beginPath(), e.ellipse(r / 2 - 2, o / 2 - 2.5, 2, 1.5, 0, 0, Math.PI * 2), e.fill(), e.strokeStyle = "rgba(0,0,0,0.3)", e.lineWidth = 0.8, this._drawCarPath(e, 0, 0, r, o), e.stroke(), e.restore(), this._drawCarLabels(e, s, t, o, i, a);
+  }
+  /**
+   * 绘制车辆速度标签和 ID 标签
+   */
+  _drawCarLabels(e, s, t, i, a, n) {
+    if (this.config.showCarSpeed && n.speed != null) {
+      const r = Math.abs(n.speed);
+      e.font = 'bold 7px "JetBrains Mono", monospace', e.fillStyle = "rgba(255,255,255,0.7)", e.textAlign = "center", e.fillText(r.toFixed(0), s, t - i / 2 - 4);
+    }
+    this.config.showCarId && (e.font = "6px sans-serif", e.fillStyle = a, e.fillText("#" + String(n.id), s, t + i / 2 + 8)), e.textAlign = "start";
+  }
+  /**
+   * 加载 SVG 图片（带缓存）
+   *
+   * 同步返回已缓存的图片，异步加载未缓存的 URL。
+   * 首次加载时返回 null，后续帧生效。
+   */
+  _loadSvgImage(e) {
+    return this._loadImage(e, this.svgImageCache);
+  }
+  /**
+   * 获取道路底图 Image 对象
+   *
+   * 同步返回已缓存的底图，异步加载首次传入的 URL。
+   */
+  _getRoadBgImage() {
+    const e = this.config.roadBgImage;
+    if (!e) return null;
+    if (this.roadBgImage) return this.roadBgImage;
+    if (this.roadBgImageLoading) return null;
+    this.roadBgImageLoading = !0;
+    const s = new Image();
+    return s.onload = () => {
+      this.roadBgImage = s, this.roadBgImageLoading = !1, !this.destroyed && !this.renderPending && (this.renderPending = !0, requestAnimationFrame(() => this._doRender()));
+    }, s.onerror = () => {
+      this.roadBgImageLoading = !1, console.warn("[RoadTrafficCore] 道路底图加载失败");
+    }, s.src = this._resolveSvgSrc(e), null;
+  }
+  /**
+   * 通用图片加载器（带缓存）
+   */
+  _loadImage(e, s) {
+    const t = s.get(e);
+    if (t) return t;
+    const i = this._resolveSvgSrc(e), a = new Image();
+    return a.onload = () => {
+      s.set(e, a), !this.destroyed && !this.renderPending && (this.renderPending = !0, requestAnimationFrame(() => this._doRender()));
+    }, a.onerror = () => {
+      console.warn("[RoadTrafficCore] SVG 图片加载失败:", i.substring(0, 80) + "...");
+    }, a.src = i, null;
+  }
+  /**
+   * 解析 SVG 源：自动将原始 SVG 字符串转为 data URI
+   */
+  _resolveSvgSrc(e) {
+    const s = e.trim();
+    return s.startsWith("<svg") || s.startsWith("<?xml") ? "data:image/svg+xml," + encodeURIComponent(s) : s;
+  }
+  /**
+   * 创建俯视图车型轮廓路径
+   *
+   * 车型形状：车头圆角较大（前弧），车尾圆角较小（后弧）
+   * 参考原 JS 工具类 trajectory visualizer 的设计。
+   *
+   * @param ctx    - 2D 上下文
+   * @param ox, oy - 偏移量
+   * @param length - 车长
+   * @param width  - 车宽
+   */
+  _drawCarPath(e, s, t, i, a) {
+    const n = i / 2, r = a / 2, o = Math.min(n * 0.4, 5), d = Math.min(n * 0.25, 3);
+    e.beginPath(), e.moveTo(s - n + o, t - r), e.lineTo(s + n - d, t - r), e.quadraticCurveTo(s + n, t - r, s + n, t - r + d), e.lineTo(s + n, t + r - d), e.quadraticCurveTo(s + n, t + r, s + n - d, t + r), e.lineTo(s - n + o, t + r), e.quadraticCurveTo(s - n, t + r, s - n, t + r - o), e.lineTo(s - n, t - r + o), e.quadraticCurveTo(s - n, t - r, s - n + o, t - r), e.closePath();
+  }
+  /**
+   * 绘制圆角矩形路径并填充
+   *
+   * @param ctx  - 2D 上下文
+   * @param x, y - 矩形左上角
+   * @param w, h - 宽高
+   * @param r    - 圆角半径
+   */
+  _drawRoundRect(e, s, t, i, a, n) {
+    e.beginPath(), e.moveTo(s + n, t), e.lineTo(s + i - n, t), e.quadraticCurveTo(s + i, t, s + i, t + n), e.lineTo(s + i, t + a - n), e.quadraticCurveTo(s + i, t + a, s + i - n, t + a), e.lineTo(s + n, t + a), e.quadraticCurveTo(s, t + a, s, t + a - n), e.lineTo(s, t + n), e.quadraticCurveTo(s, t, s + n, t), e.closePath(), e.fill();
+  }
+  // ==========================================================================
+  // 私有方法：颜色工具
+  // ==========================================================================
+  /**
+   * 十六进制颜色字符串 → RGB 数组
+   *
+   * @param hex - 十六进制颜色（如 "#ff4d6a" 或 "ff4d6a"）
+   * @returns [R, G, B] 数组，每个分量 0-255
+   */
+  _hexToRgb(e) {
+    return e = e.replace("#", ""), [
+      parseInt(e.substring(0, 2), 16) || 0,
+      parseInt(e.substring(2, 4), 16) || 0,
+      parseInt(e.substring(4, 6), 16) || 0
+    ];
+  }
+  /**
+   * RGB 分量 → 十六进制颜色字符串
+   *
+   * @param r, g, b - RGB 分量，每个 0-255
+   * @returns 十六进制颜色（如 "#ff4d6a"）
+   */
+  _rgbToHex(e, s, t) {
+    return "#" + ((1 << 24) + (e << 16) + (s << 8) + t).toString(16).slice(1);
+  }
+}
+const oe = /* @__PURE__ */ D({
+  __name: "RoadTrafficViewer",
+  props: {
+    config: {},
+    vehicles: {},
+    trafficFlows: {}
+  },
+  emits: ["ready"],
+  setup(l, { expose: e, emit: s }) {
+    const t = l, i = s, a = U(null), n = F(null), r = y(() => {
+      const o = {
+        position: "relative",
+        overflow: "hidden"
+      }, d = t.config.canvasWidth, c = t.config.canvasHeight;
+      return d !== void 0 ? o.width = typeof d == "number" ? `${d}px` : d : o.width = "100%", c !== void 0 && (o.height = typeof c == "number" ? `${c}px` : c), o;
+    });
+    return A(() => {
+      if (!a.value) {
+        console.warn("[RoadTrafficViewer] 容器 DOM 未找到");
+        return;
+      }
+      const o = new S(a.value, t.config);
+      n.value = o, o.render(), t.vehicles && t.vehicles.length > 0 && o.updateVehicles(t.vehicles), t.trafficFlows && t.trafficFlows.length > 0 && o.updateTrafficFlows(t.trafficFlows), i("ready", o);
+    }), O(() => {
+      n.value && (n.value.destroy(), n.value = null);
+    }), L(
+      () => t.vehicles,
+      (o) => {
+        n.value && o && n.value.updateVehicles(o);
+      },
+      { deep: !0 }
+    ), L(
+      () => t.trafficFlows,
+      (o) => {
+        n.value && n.value.updateTrafficFlows(o ?? []);
+      },
+      { deep: !0 }
+    ), e({
+      /** 核心渲染实例 */
+      core: n,
+      /** 容器 DOM 引用 */
+      containerRef: a
+    }), (o, d) => (P(), C("div", {
+      ref_key: "containerRef",
+      ref: a,
+      class: "road-traffic-viewer",
+      style: b(r.value)
+    }, null, 4));
+  }
+}), R = (l, e) => {
+  const s = l.__vccOpts || l;
+  for (const [t, i] of e)
+    s[t] = i;
+  return s;
+}, ue = /* @__PURE__ */ R(oe, [["__scopeId", "data-v-c2f245be"]]), de = {
+  name: "RoadTrafficViewerV2",
+  props: {
+    /**
+     * 道路渲染配置
+     *
+     * 至少需要提供 startPile 和 endPile
+     */
+    config: {
+      type: Object,
+      required: !0
+    },
+    /**
+     * 车辆数据集
+     *
+     * 变化时自动触发渲染更新
+     */
+    vehicles: {
+      type: Array,
+      default: function() {
+        return [];
+      }
+    },
+    /**
+     * 路段流量数据集
+     *
+     * 变化时自动触发路段颜色更新
+     */
+    trafficFlows: {
+      type: Array,
+      default: function() {
+        return [];
+      }
+    }
+  },
+  emits: ["ready"],
+  data() {
+    return {
+      /** 核心渲染实例 */
+      coreInstance: null
+    };
+  },
+  computed: {
+    /**
+     * 根据 config 中的 canvasWidth/canvasHeight 计算容器样式
+     *
+     * 支持 px 数值和百分比字符串
+     */
+    containerStyle() {
+      var l = {
+        position: "relative",
+        overflow: "hidden"
+      }, e = this.config.canvasWidth, s = this.config.canvasHeight;
+      return e !== void 0 ? l.width = typeof e == "number" ? e + "px" : e : l.width = "100%", s !== void 0 && (l.height = typeof s == "number" ? s + "px" : s), l;
+    }
+  },
+  watch: {
+    /**
+     * 监听 vehicles 数据变化
+     *
+     * 使用 deep: true 检测数组内部变化。
+     * 对于超大车辆数组（>1000），建议父组件中使用不可变替换来触发更新。
+     */
+    vehicles: {
+      handler: function(l) {
+        this.coreInstance && l && this.coreInstance.updateVehicles(l);
+      },
+      deep: !0
+    },
+    /**
+     * 监听 trafficFlows 数据变化
+     */
+    trafficFlows: {
+      handler: function(l) {
+        this.coreInstance && this.coreInstance.updateTrafficFlows(l || []);
+      },
+      deep: !0
+    }
+  },
+  mounted() {
+    var l = this.$refs.container;
+    if (!l) {
+      console.warn("[RoadTrafficViewerV2] 容器 DOM 未找到");
+      return;
+    }
+    var e = new S(l, this.config);
+    this.coreInstance = e, e.render(), this.vehicles && this.vehicles.length > 0 && e.updateVehicles(this.vehicles), this.trafficFlows && this.trafficFlows.length > 0 && e.updateTrafficFlows(this.trafficFlows), this.$emit("ready", e);
+  },
+  beforeDestroy() {
+    this.coreInstance && (this.coreInstance.destroy(), this.coreInstance = null);
+  }
+};
+function le(l, e, s, t, i, a) {
+  return P(), C("div", {
+    ref: "container",
+    class: "road-traffic-viewer-v2",
+    style: b(a.containerStyle)
+  }, null, 4);
+}
+const ge = /* @__PURE__ */ R(de, [["render", le], ["__scopeId", "data-v-51c2f40a"]]);
+export {
+  B as DEFAULT_TRAFFIC_STATUS_COLORS,
+  S as RoadTrafficCore,
+  ue as RoadTrafficViewer,
+  ge as RoadTrafficViewerV2,
+  V as formatPile,
+  fe as formatPileShort,
+  T as parsePile
+};