gisviewer-vue3-arcgis/es/src/gis-map-ol/utils/open-drive/open-drive-renderer.mjs

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

import * as B from "@turf/turf";
import M from "axios";
import L from "ol/Feature";
import O from "ol/format/GeoJSON";
import V from "ol/geom/LineString";
import x from "ol/geom/Polygon";
import R from "ol/layer/Vector";
import F from "ol/source/Vector";
import b from "ol/style/Fill";
import I from "ol/style/Stroke";
import N from "ol/style/Style";
import j from "ol/style/Text";
import E from "pako";
import G from "../../../gis-map/utils/common-utils.mjs";
class H {
  constructor(t) {
    this.hiddenRoadNameStyle = new N({}), this.handleMapMoveEnd = () => {
      this.updateRoadNameVisibility();
    }, this.map = t, this.openDriveSource = new F(), this.openDriveLayer = new R({
      source: this.openDriveSource,
      declutter: !0
    }), this.openDriveLayer.set("id", "open-drive-layer"), this.map.addLayer(this.openDriveLayer), this.mergedLaneSource = new F(), this.mergedLaneLayer = new R({
      source: this.mergedLaneSource
    }), this.mergedLaneLayer.set("id", "open-drive-merged-lane-layer"), this.map.addLayer(this.mergedLaneLayer), this.map.on("moveend", this.handleMapMoveEnd);
  }
  async showOpenDriveFromFile(t) {
    let r = t.file.split("/").pop() || "";
    r = r.split(".").slice(0, -1).join("."), this.openDriveServer = t.server;
    const d = `http://${this.openDriveServer}/api/openDrive/uploadXodr`;
    let a;
    try {
      a = await M.post(
        d,
        {},
        {
          params: {
            url: t.file,
            projectName: r
          }
        }
      );
    } catch (i) {
      return { status: -1, message: i.message };
    }
    if (a.status !== 200)
      return { status: -1, message: a.statusText };
    const n = a.data.result.geoSetting;
    G.setGeoData(
      n.geoReference,
      n.offsetX,
      n.offsetY
    );
    let o = a.data.result.json;
    o.startsWith(window.location.protocol) || (o = `${window.location.protocol}//${t.server}${o}`);
    const e = await fetch(o);
    let l;
    if (o.endsWith("bin")) {
      const i = await e.arrayBuffer(), c = E.inflate(i, { to: "string" });
      l = JSON.parse(c);
    } else
      l = await e.json();
    return this.showAllRoadsects(l), { status: 0, message: "ok" };
  }
  clearOpenDrive() {
    var t, r;
    (t = this.openDriveLayer.getSource()) == null || t.clear(), (r = this.mergedLaneLayer.getSource()) == null || r.clear();
  }
  selectComputable(t) {
    let r = [];
    if (t.type === "roadsectBase")
      r = this.openDriveSource.getFeatures().filter((e) => {
        var l;
        return (l = e.get("roadsectBaseIds")) == null ? void 0 : l.split(",").includes(t.id);
      });
    else if (t.type === "roadsect")
      r = this.openDriveSource.getFeatures().filter((e) => e.get("roadId") === t.id);
    else if (t.type === "lane") {
      const [e, l] = t.id.split("_");
      console.log("roadsectId, laneIndex", e, l), r = this.openDriveSource.getFeatures().filter((i) => {
        var c;
        return (c = i.get("roadsectBaseIds")) == null ? void 0 : c.split(",").includes(e);
      }), r.sort((i, c) => {
        const m = i.get("laneId");
        return c.get("laneId") - m;
      }), r = [r[Number(l)]];
    }
    if (r.length === 0) {
      this.mergedLaneSource.clear();
      return;
    }
    const d = new O(), a = r.map((e) => e.getGeometry()).filter((e) => {
      const l = e == null ? void 0 : e.getType();
      return l === "Polygon" || l === "MultiPolygon";
    }).map((e) => d.writeGeometryObject(e));
    if (a.length === 0) {
      this.mergedLaneSource.clear();
      return;
    }
    let n = a[0];
    for (let e = 1; e < a.length; e++) {
      const l = B.union(n, a[e]);
      l && (n = l.geometry);
    }
    const o = new L({
      geometry: d.readGeometry(n),
      roadsectBaseIds: r[0].get("roadsectBaseIds")
    });
    o.setStyle(
      new N({
        fill: new b({
          color: "rgba(0, 255, 255, 0.35)"
        }),
        stroke: new I({
          color: "rgba(0, 255, 255, 0.9)",
          width: 2
        })
      })
    ), this.mergedLaneSource.clear(), this.mergedLaneSource.addFeature(o), this.map.getView().fit(o.getGeometry().getExtent(), {
      padding: [50, 50, 50, 50],
      maxZoom: 18
    });
  }
  unSelectComputable(t) {
    this.mergedLaneSource.clear();
  }
  destroy() {
    this.map.un("moveend", this.handleMapMoveEnd), this.clearOpenDrive(), this.map.removeLayer(this.openDriveLayer), this.openDriveLayer.dispose(), this.map.removeLayer(this.mergedLaneLayer), this.mergedLaneLayer.dispose();
  }
  showAllRoadsects(t) {
    const r = [];
    for (const d of t) {
      const a = this.buildRoadsectPolygon(d);
      a && r.push(a);
    }
    r.length !== 0 && (this.openDriveSource.addFeatures(r), this.map.getView().fit(this.openDriveSource.getExtent(), {
      padding: [50, 50, 50, 50],
      maxZoom: 18
    }));
  }
  showAllLanes(t, r) {
    var n;
    const d = [], a = new N({
      fill: new b({
        color: "rgba(47, 79, 79, 0.8)"
      }),
      stroke: new I({
        color: "rgba(255, 255, 255, 0.8)",
        width: 1
      })
    });
    for (const o of t) {
      const e = o.id, l = o.junction;
      let i = o.name;
      if (r.showRoadName) {
        const c = o.refLine;
        if (l === "-1" && !i.includes("匝道") && !i.includes("辅路")) {
          i.includes("(") && (i = i.slice(0, i.indexOf("("))), i = i.replace(/(.)/g, "$1 ");
          const m = new V(c), s = new L({
            geometry: m,
            roadId: e,
            roadName: i,
            isRoadNameLabel: !0
          }), u = new N({
            text: new j({
              text: i,
              placement: "line",
              font: "12px sans-serif",
              fill: new b({ color: "#333" }),
              stroke: new I({ color: "#fff", width: 3 }),
              overflow: !0,
              repeat: 500
            })
          });
          s.set("roadNameStyle", u), s.setStyle(u), d.push(s);
        }
      }
      o.laneSections.sort((c, m) => Number(c.id) - Number(m.id));
      for (let c = 0; c < o.laneSections.length; c++) {
        const m = o.laneSections[c], s = Number(m.id);
        for (const u of m.lanePaths) {
          const f = Number(u.id);
          if (f === 0)
            continue;
          const w = u.type, S = [...u.outerPath], g = u.innerPath.concat(
            S.reverse()
          );
          g.push(u.innerPath[0]);
          const v = new L({
            geometry: new x([g]),
            id: `${e}+${s}+${f}`,
            fromNode: o.fromNode,
            toNode: o.toNode,
            roadId: String(e),
            roadName: o.name,
            sectionId: String(s),
            sectionIndex: c,
            laneId: f,
            type: w,
            // 记录左右边线的起始点，用于按长度高亮车道的一部分
            // leftLine: lane.innerPath,
            // rightLine: lane.outerPath,
            // array转为逗号分隔的字符串
            roadsectBaseIds: (n = m.roadsectBaseIds) == null ? void 0 : n.toString()
          });
          v.setStyle(a), d.push(v);
        }
      }
    }
    this.openDriveSource.addFeatures(d), this.map.getView().fit(this.openDriveSource.getExtent(), {
      padding: [50, 50, 50, 50],
      maxZoom: 18
    }), this.updateRoadNameVisibility();
  }
  /**
   * 车道面组合为路段面
   * @param road
   */
  buildRoadsectPolygon(t) {
    var c, m;
    const r = new N({
      fill: new b({
        color: "rgba(255, 165, 0, 0.25)"
      }),
      stroke: new I({
        color: "rgba(255, 140, 0, 0.9)",
        width: 2
      })
    });
    t.laneSections.sort((s, u) => Number(s.id) - Number(u.id));
    const d = [], a = [];
    for (let s = 0; s < t.laneSections.length; s++) {
      const f = (t.laneSections[s].lanePaths || []).filter(
        (h) => Number(h.id) !== 0
      );
      if (f.length === 0)
        continue;
      const w = [...f].sort((h, p) => {
        const y = Math.abs(Number(h.id)), D = Math.abs(Number(p.id));
        return y !== D ? y - D : Number(h.id) - Number(p.id);
      }), S = w[0], g = w[w.length - 1];
      if (!((c = S == null ? void 0 : S.innerPath) != null && c.length) || !((m = g == null ? void 0 : g.outerPath) != null && m.length))
        continue;
      const v = [...S.innerPath], P = [...g.outerPath];
      for (const h of v) {
        const p = d[d.length - 1];
        (!p || p[0] !== h[0] || p[1] !== h[1]) && d.push(h);
      }
      for (let h = P.length - 1; h >= 0; h--) {
        const p = P[h], y = a[a.length - 1];
        (!y || y[0] !== p[0] || y[1] !== p[1]) && a.push(p);
      }
    }
    const n = d.concat(a);
    if (n.length < 3)
      return;
    const o = n[0], e = n[n.length - 1];
    o && e && (o[0] !== e[0] || o[1] !== e[1]) && n.push([...o]);
    const l = t.laneSections.map((s) => s.roadsectBaseIds).filter((s) => s != null).flatMap((s) => s.toString().split(",")).filter((s) => s !== "").join(","), i = new L({
      geometry: new x([n]),
      roadId: String(t.id),
      roadName: t.name,
      roadsectBaseIds: l
    });
    return i.setStyle(r), i;
  }
  /**
   * 更新道路名称的可见性
   * @returns
   */
  updateRoadNameVisibility() {
    const t = this.map.getSize();
    if (!t)
      return;
    const r = this.map.getView().calculateExtent(t), d = this.map.getView().getCenter();
    if (!d)
      return;
    const a = /* @__PURE__ */ new Map();
    for (const n of this.openDriveSource.getFeatures()) {
      if (!n.get("isRoadNameLabel"))
        continue;
      const o = n.getGeometry(), e = n.get("roadName"), l = n.get("roadNameStyle");
      if (!o || !e || !o.intersectsExtent(r)) {
        n.setStyle(this.hiddenRoadNameStyle);
        continue;
      }
      const i = o.getClosestPoint(d), c = i[0] - d[0], m = i[1] - d[1], s = c * c + m * m, u = a.get(e);
      !u || s < u.distanceSq ? (u && u.feature.setStyle(this.hiddenRoadNameStyle), a.set(e, { feature: n, distanceSq: s }), n.setStyle(l)) : n.setStyle(this.hiddenRoadNameStyle);
    }
  }
}
export {
  H as default
};