gisviewer-vue3-arcgis/es/src/gis-map-ol/utils/echarts/index.mjs

在应用中引入私服的包， 项目根目录下 新建文件 .npmrc 在 .npmrc 中对包源进行配置：

import * as Z from "echarts/core";
import L from "../../../../node_modules/.pnpm/ol-echarts@4.0.1_echarts@6.0.0_ol@10.7.0/node_modules/ol-echarts/dist/ol-echarts.esm.mjs";
import { boundingExtent as q } from "ol/extent";
import { unByKey as B } from "ol/Observable";
class _ {
  constructor(s) {
    this.hasGpu = !1, this.odChart = null, this.odSelectionListener = null, this.odPairs = /* @__PURE__ */ new Map(), this.map = s;
    const y = localStorage.getItem("gpu");
    this.hasGpu = y !== "Unknown";
  }
  showODLines(s) {
    var $, A, T, k, R;
    const y = s.odPairs.filter(
      (o) => o.fromId === o.toId
    ).length;
    y > 0 && (s.odPairs = s.odPairs.filter(
      (o) => o.fromId !== o.toId
    ), console.warn(`已删除 ${y} 条起终点相同的无效 OD 数据`));
    const a = (o) => {
      if (o) {
        if (Array.isArray(o)) {
          if (o.length >= 4)
            return `rgba(${o[0]}, ${o[1]}, ${o[2]}, ${o[3]})`;
          if (o.length >= 3)
            return `rgb(${o[0]}, ${o[1]}, ${o[2]})`;
        }
        return o;
      }
    }, M = (o, e, r, n) => {
      const d = a(o), c = a(e);
      if (!d && !c)
        return;
      const i = d ?? c, N = c ?? d;
      if (!i || !N)
        return;
      const [f, h] = r ? this.map.getPixelFromCoordinate(r) : [0, 0], [z, G] = n ? this.map.getPixelFromCoordinate(n) : [1, 1];
      return new Z.graphic.LinearGradient(
        f <= z ? 0 : 1,
        h <= G ? 0 : 1,
        f <= z ? 1 : 0,
        h <= G ? 1 : 0,
        [
          {
            offset: 0,
            color: i
          },
          {
            offset: 1,
            color: N
          }
        ],
        !1
      );
    };
    s.odPairs.forEach((o) => {
      o.fromId !== o.toId && this.odPairs.set(`${o.fromId}-${o.toId}`, o);
    });
    const u = a(($ = s.options) == null ? void 0 : $.fromColor), p = a((A = s.options) == null ? void 0 : A.toColor), g = Array.from(this.odPairs.values()).sort(
      (o, e) => {
        const r = a(o.fromColor) !== u || a(o.toColor) !== p, n = a(e.fromColor) !== u || a(e.toColor) !== p;
        return Number(n) - Number(r);
      }
    ), w = g.some(
      (o) => o.fromColor !== void 0 || o.toColor !== void 0
    ) || u !== void 0 || p !== void 0, C = /* @__PURE__ */ new Map(), O = /* @__PURE__ */ new Map(), b = /* @__PURE__ */ new Map(), D = /* @__PURE__ */ new Map(), t = (o, e, r, n) => {
      C.set(o, (C.get(o) || 0) + 1), O.has(o) || O.set(o, e), b.has(o) || b.set(o, r), !D.has(o) && n && D.set(o, n);
    };
    g.forEach((o) => {
      var n, d;
      const e = a(
        o.fromColor ?? ((n = s.options) == null ? void 0 : n.fromColor)
      ), r = a(o.toColor ?? ((d = s.options) == null ? void 0 : d.toColor));
      t(
        o.fromId,
        o.fromCoord,
        o.fromName,
        e ?? r
      ), t(o.toId, o.toCoord, o.toName, r ?? e);
    });
    const m = Array.from(O.values());
    if (m.length > 0) {
      const o = q(m);
      this.map.getView().fit(o, { padding: [10, 10, 10, 10] });
    }
    const l = Array.from(C.entries()).map(
      ([o, e]) => {
        const r = O.get(o), n = b.get(o) || o, d = D.get(o);
        return {
          id: o,
          name: n,
          value: [r[0], r[1], e],
          ...w && d ? {
            itemStyle: {
              color: d
            }
          } : {}
        };
      }
    ), S = Math.min(...l.map((o) => o.value[2]), 1), v = Math.max(...l.map((o) => o.value[2]), 1), E = {
      backgroundColor: "transparent",
      ...w ? {} : {
        visualMap: {
          show: !1,
          min: 1,
          max: v,
          dimension: 2,
          seriesIndex: 1,
          inRange: {
            color: ["#ff9999", "#ff4d4d", "#e60000", "#cc0000", "#800000"]
          }
        }
      },
      series: [
        {
          name: "od线",
          type: "lines",
          effect: {
            show: this.hasGpu,
            // 只有在有GPU的情况下才显示特效
            constantSpeed: 30,
            symbol: "pin",
            symbolSize: 6,
            trailLength: 0
          },
          lineStyle: {
            ...w ? {} : { color: "#808080" },
            opacity: 0.8,
            width: 1.2,
            curveness: 0.2
          },
          data: g.map((o) => {
            var c, i;
            const e = a(
              o.fromColor ?? ((c = s.options) == null ? void 0 : c.fromColor)
            ), r = a(
              o.toColor ?? ((i = s.options) == null ? void 0 : i.toColor)
            ), n = C.get(o.fromId) || 1, d = C.get(o.toId) || 1;
            return {
              fromName: o.fromName,
              toName: o.toName,
              coords: [o.fromCoord, o.toCoord],
              value: [
                o.fromCoord[0],
                o.fromCoord[1],
                Math.max(n, d)
              ],
              ...w ? {
                lineStyle: {
                  color: M(
                    e,
                    r,
                    o.fromCoord,
                    o.toCoord
                  ),
                  opacity: 0.8,
                  width: 1.2,
                  curveness: 0.2
                }
              } : {}
            };
          })
        },
        {
          name: "路口",
          type: this.hasGpu ? "effectScatter" : "scatter",
          zlevel: 3,
          cursor: "pointer",
          symbolSize: (o) => {
            const e = o[2] || S;
            return v === S ? 4 : 4 + (e - S) / (v - S) * 8;
          },
          label: {
            show: ((T = s.options) == null ? void 0 : T.showNodeName) !== !1,
            position: "right",
            formatter: (o) => o.name || ""
          },
          data: l
        }
      ]
    };
    this.removeODChart();
    const I = new L(E, {
      stopEvent: !1,
      hideOnMoving: !1,
      hideOnZooming: !1,
      forcedPrecomposeRerender: !0
    });
    I.appendTo(this.map);
    let x = null;
    const F = () => {
      var o;
      x = null, (o = I.$chart) == null || o.setOption(E, { notMerge: !0 });
    }, P = (o) => {
      var c;
      const e = /* @__PURE__ */ new Set(), r = /* @__PURE__ */ new Set(), n = E.series[0].data.map(
        (i, N) => {
          const f = g[N], h = f.fromId === o || f.toId === o;
          return h && (e.add(f.fromId), r.add(f.toId)), {
            ...i,
            lineStyle: {
              ...i.lineStyle,
              color: h ? M(
                "#ff0000",
                "#00a000",
                f.fromCoord,
                f.toCoord
              ) : "#808080",
              opacity: h ? 1 : 0.5,
              width: h ? 3 : 1.2
            }
          };
        }
      ), d = l.map((i) => {
        const N = e.has(i.id), f = r.has(i.id), h = i.id === o;
        return {
          ...i,
          itemStyle: {
            ...i.itemStyle,
            ...h ? {} : {
              color: N ? "#ff0000" : f ? "#00a000" : "#808080"
            },
            opacity: 1,
            borderColor: h ? "#ffd700" : void 0,
            borderWidth: h ? 3 : 0
          }
        };
      });
      (c = I.$chart) == null || c.setOption({
        series: [{ data: n }, { data: d }]
      });
    };
    this.odSelectionListener = this.map.on("moveend", () => {
      const o = x;
      o && requestAnimationFrame(() => {
        x === o && P(o);
      });
    }), (k = I.$chart) == null || k.on("click", (o) => {
      var c, i;
      if (o.seriesName !== "路口" || !o.data)
        return;
      const e = o.data.id;
      x = e, P(e);
      const [r, n, d] = o.value;
      (i = (c = s.options) == null ? void 0 : c.onNodeClick) == null || i.call(c, {
        id: o.data.id,
        name: o.name,
        coord: [r, n],
        count: d
      });
    }), (R = I.$chart) == null || R.getZr().on("click", (o) => {
      o.target || F();
    }), this.odChart = I;
  }
  clearODLines() {
    this.odPairs.clear(), this.removeODChart();
  }
  removeODChart() {
    this.odSelectionListener && (B(this.odSelectionListener), this.odSelectionListener = null), this.odChart && (this.odChart.remove(), this.odChart = null);
  }
  showRandomODLines(s) {
    const a = s.data.sort(() => 0.5 - Math.random()).slice(0, 50), M = [];
    a.forEach((t) => {
      const m = Math.floor(Math.random() * 10) + 1;
      for (let l = 0; l < m; l++) {
        const S = Math.floor(Math.random() * a.length), v = a[S];
        M.push({
          fromId: t.NODE_ID,
          fromName: t.NAME,
          toId: v.NODE_ID,
          toName: v.NAME,
          fromCoord: [t.LON, t.LAT],
          toCoord: [v.LON, v.LAT]
        });
      }
    });
    const u = /* @__PURE__ */ new Map(), p = /* @__PURE__ */ new Map(), g = /* @__PURE__ */ new Map(), w = (t, m, l) => {
      u.set(t, (u.get(t) || 0) + 1), p.has(t) || p.set(t, l), g.has(t) || g.set(t, m);
    };
    M.forEach((t) => {
      w(t.fromId, t.fromName, t.fromCoord), w(t.toId, t.toName, t.toCoord);
    });
    const C = Array.from(u.entries()).map(
      ([t, m]) => {
        const l = p.get(t);
        return {
          name: g.get(t) || t,
          value: [l[0], l[1], m]
        };
      }
    );
    new Set(
      [...C].sort((t, m) => m.value[2] - t.value[2]).slice(0, 15).map((t) => t.name)
    );
    const b = {
      backgroundColor: "transparent",
      visualMap: {
        show: !1,
        min: 1,
        max: Math.max(...C.map((t) => t.value[2]), 1),
        dimension: 2,
        // 映射 value[2]（连线次数）
        seriesIndex: 1,
        // 只作用于 effectScatter（第二个 series）
        inRange: {
          color: ["#ff9999", "#ff4d4d", "#e60000", "#cc0000", "#800000"]
        }
      },
      series: [
        {
          name: "线路",
          type: "lines",
          zlevel: 1,
          large: !1,
          largeThreshold: 100,
          blendMode: "multiply",
          lineStyle: {
            color: "#1f6bff",
            opacity: 0.22,
            width: 1.2,
            curveness: 0.2
          },
          data: M.map((t) => ({
            coords: [t.fromCoord, t.toCoord]
          }))
        },
        {
          name: "关键路口",
          type: "effectScatter",
          zlevel: 3,
          showEffectOn: "render",
          rippleEffect: {
            brushType: "stroke",
            scale: 2.6
          },
          itemStyle: {
            shadowBlur: 8,
            shadowColor: "rgba(77,163,255,0.45)"
          },
          symbolSize: (t) => {
            const m = t[2] || 1;
            return Math.min(24, Math.max(5, Math.sqrt(m) * 2));
          },
          // label: {
          //   show: true,
          //   position: 'right',
          //   color: '#1f3f7a',
          //   fontSize: 10,
          //   formatter: (p: any) => (topSet.has(p.name) ? p.name : '')
          // },
          data: C
        }
      ]
    };
    new L(b, {
      stopEvent: !1,
      hideOnMoving: !1,
      hideOnZooming: !1,
      forcedPrecomposeRerender: !0
    }).appendTo(this.map);
  }
  showTrace(s) {
    const y = s.map((u, p) => ({
      name: `轨迹${p}`,
      coords: u
    })), a = {
      backgroundColor: "transparent",
      series: [
        {
          type: "lines",
          polyline: !0,
          lineStyle: {
            color: "#1f6bff"
            // width: 1,
            // opacity: 0.1
          },
          data: y,
          zlevel: 1
        }
      ]
    };
    new L(a, {
      stopEvent: !1,
      hideOnMoving: !1,
      hideOnZooming: !1,
      forcedPrecomposeRerender: !0,
      forcedRerender: !0
    }).appendTo(this.map);
  }
  destroy() {
    this.clearODLines();
  }
}
export {
  _ as default
};