gisviewer-vue3-arcgis 1.0.115 → 1.0.117

package/es/src/gis-map/utils/open-drive-renderer/index.d.ts

@@ -1,9 +1,38 @@
 import View from '@arcgis/core/views/View';
+import { IFindSumoParams, IResult, IShowOpenDriveFromFileParams, ISplitOpenDriveLaneParams } from '../../../types';
 export default class OpenDriveRenderer {
+    private static instance;
+    static getInstance(view: View): OpenDriveRenderer;
     private readonly view;
     private laneLayer;
+    private roadNameLayer;
+    private junctionLayer;
+    private highlightLayer;
+    private allLaneGraphics;
+    private allRefLineGraphics;
+    private wasmLoader;
     constructor(view: View);
-    showOpenDrive(server: string, projectName: string): Promise<void>;
-    private showRoad;
-    hideOpenDrive(): Promise<void>;
+    showOpenDriveFromFile(params: IShowOpenDriveFromFileParams): Promise<IResult>;
+    /**
+     * 从服务器载入OpenDrive文件解析结果并显示
+     * @param server
+     * @param projectName
+     */
+    showOpenDriveFromServer(server: string, projectName: string): Promise<IResult>;
+    private showAllLanes;
+    private showJunction;
+    clearOpenDrive(): Promise<void>;
+    /**
+     * 用sumo的id定位车道、基本段、路段
+     * @param params
+     * @returns
+     */
+    findSumo(params: IFindSumoParams): Promise<IResult>;
+    /**
+     * 用sumo的id定位车道、基本段、路段
+     * @param params
+     * @returns
+     */
+    private findLane;
+    splitLane(params: ISplitOpenDriveLaneParams): Promise<IResult>;
 }

package/es/src/gis-map/utils/open-drive-renderer/index.mjs

@@ -1,10 +1,14 @@
-import h from "@arcgis/core/Graphic";
-import m from "@arcgis/core/layers/FeatureLayer";
-import w from "axios";
-import f from "pako";
+import m from "@arcgis/core/Graphic";
+import { Polygon as b } from "@arcgis/core/geometry";
+import * as O from "@arcgis/core/geometry/geometryEngineAsync.js";
+import L from "@arcgis/core/layers/FeatureLayer";
+import v from "@arcgis/core/layers/GraphicsLayer";
+import j from "axios";
+import N from "pako";
+import G from "./wasm-loader.mjs";
 class I {
   constructor(e) {
-    this.view = e, this.laneLayer = new m({
+    this.wasmLoader = G.getInstance(), this.view = e, this.laneLayer = new L({
       id: "OpenDriveLane",
       fields: [
         {
@@ -41,6 +45,11 @@ class I {
           name: "type",
           alias: "类型",
           type: "string"
+        },
+        {
+          name: "sumoId",
+          alias: "sumo编号",
+          type: "string"
         }
       ],
       objectIdField: "ObjectID",
@@ -93,7 +102,7 @@ class I {
             symbol: {
               type: "simple-fill",
               // color: '#2F4F4F',
-              color: [47, 79, 79, 0.5],
+              color: [47, 79, 79, 0.8],
               style: "solid",
               outline: {
                 color: "white",
@@ -207,10 +216,86 @@ class I {
           }
         ]
       }
-    }), this.view.map.add(this.laneLayer);
+    }), this.roadNameLayer = new L({
+      id: "OpenDriveRoadName",
+      fields: [
+        {
+          name: "ObjectID",
+          alias: "ObjectID",
+          type: "oid"
+        },
+        {
+          name: "roadId",
+          alias: "道路号",
+          type: "string"
+        },
+        {
+          name: "roadName",
+          alias: "道路名称",
+          type: "string"
+        }
+      ],
+      objectIdField: "ObjectID",
+      geometryType: "polyline",
+      spatialReference: { wkid: 4326 },
+      source: [],
+      renderer: {
+        type: "simple",
+        symbol: {
+          type: "simple-line",
+          style: "solid",
+          color: [0, 0, 0, 0],
+          width: 1
+        }
+      },
+      labelingInfo: [
+        {
+          symbol: {
+            type: "text",
+            color: "black",
+            haloColor: "white",
+            haloSize: 1,
+            font: {
+              size: 12,
+              family: "sans-serif"
+            }
+          },
+          labelPlacement: this.view.type === "2d" ? "center-along" : void 0,
+          labelExpressionInfo: {
+            expression: "$feature.roadName"
+          }
+        }
+      ]
+    }), this.junctionLayer = new v({ id: "OpenDriveJunction" }), this.highlightLayer = new v({ id: "OpenDriveHighlight" }), this.view.map.addMany([
+      this.laneLayer,
+      this.junctionLayer,
+      this.highlightLayer,
+      this.roadNameLayer
+    ]);
   }
-  async showOpenDrive(e, i) {
-    const t = `http://${e}/api/openDrive/analyzeXodr`, o = await w.get(t, {
+  static getInstance(e) {
+    return this.instance || (this.instance = new I(e)), this.instance;
+  }
+  async showOpenDriveFromFile(e) {
+    var o, c, s;
+    const i = await this.wasmLoader.load(e.file);
+    if (i.status !== 0)
+      return i;
+    console.time("渲染用时");
+    const { roads: n, junctions: a } = i.result;
+    return await this.showAllLanes(
+      n,
+      ((o = e.options) == null ? void 0 : o.showJunctionLane) || !1,
+      ((c = e.options) == null ? void 0 : c.showRoadName) || !0
+    ), (s = e.options) != null && s.showJunctionPolygon && this.showJunction(a), console.timeEnd("渲染用时"), { status: 0, message: "ok" };
+  }
+  /**
+   * 从服务器载入OpenDrive文件解析结果并显示
+   * @param server
+   * @param projectName
+   */
+  async showOpenDriveFromServer(e, i) {
+    const n = `http://${e}/api/openDrive/analyzeXodr`, a = await j.get(n, {
       headers: {
         projectName: i
       },
@@ -219,52 +304,201 @@ class I {
         compressed: !0
       }
     });
-    if (o.status !== 200)
-      throw new Error(`OpenDriveRenderer: ${o.statusText}`);
-    let l = o.data.result.json;
-    l.startsWith(window.location.protocol) || (l = `${window.location.protocol}//${e}${l}`);
-    const r = await (await fetch(l)).arrayBuffer(), n = f.inflate(r, { to: "string" }), a = JSON.parse(n);
-    this.showRoad(a);
+    if (a.status !== 200)
+      throw new Error(`OpenDriveRenderer: ${a.statusText}`);
+    let o = a.data.result.json;
+    o.startsWith(window.location.protocol) || (o = `${window.location.protocol}//${e}${o}`);
+    const s = await (await fetch(o)).arrayBuffer(), r = N.inflate(s, { to: "string" }), d = JSON.parse(r);
+    return await this.showAllLanes(d, !1, !1), { status: 0, message: "ok" };
   }
-  async showRoad(e) {
-    const i = await this.laneLayer.queryFeatures();
-    i.features.length > 0 && this.laneLayer.applyEdits({
-      deleteFeatures: i.features
-    });
-    for (const t of e) {
-      const o = t.id, l = [];
-      for (const s of t.laneSections) {
-        const r = s.id;
-        for (const n of s.lanePaths) {
-          const { id: a, type: y, innerPath: d, outerPath: c } = n, p = d.concat(c.reverse());
-          p.push(d[0]);
-          const u = new h({
-            geometry: {
-              type: "polygon",
-              rings: [p]
-            },
-            attributes: {
-              id: a,
-              roadId: o,
-              roadName: t.name,
-              sectionId: r,
-              laneId: a,
-              type: y
+  async showAllLanes(e, i, n) {
+    const a = await this.laneLayer.queryFeatures();
+    return a.features.length > 0 && this.laneLayer.applyEdits({
+      deleteFeatures: a.features
+    }), this.roadNameLayer.visible = n, new Promise((o) => {
+      let c = 0;
+      this.allLaneGraphics = [], this.allRefLineGraphics = [];
+      for (const r of e) {
+        if (!i && r.junction !== "-1")
+          continue;
+        const { id: d, refLine: l } = r;
+        let t = r.name;
+        t.includes("(") && (t = t.slice(0, t.indexOf("("))), t = t.replace(/(.)/g, "$1 ");
+        const h = new m({
+          geometry: {
+            type: "polyline",
+            paths: [l]
+          },
+          attributes: {
+            ObjectID: c++,
+            roadId: d,
+            roadName: t
+          }
+        });
+        this.allRefLineGraphics.push(h);
+        for (const y of r.laneSections) {
+          const g = Number(y.id);
+          for (const u of y.lanePaths) {
+            const p = Number(u.id);
+            if (p === 0)
+              continue;
+            const D = u.type, f = u.innerPath.concat(
+              u.outerPath.reverse()
+            );
+            if (f.length <= 3) {
+              console.warn(`lane ${p} has less than 3 points`);
+              continue;
+            }
+            f.push(u.innerPath[0]);
+            const w = new b({
+              rings: [f]
+            });
+            if (w) {
+              const F = new m({
+                geometry: w,
+                attributes: {
+                  ObjectID: c++,
+                  id: `${d}+${g}+${p}`,
+                  roadId: d,
+                  roadName: r.name,
+                  sectionId: g,
+                  laneId: p,
+                  type: D,
+                  sumoId: ""
+                }
+              });
+              this.allLaneGraphics.push(F);
             }
-          });
-          l.push(u);
+          }
         }
       }
-      await this.laneLayer.applyEdits({
-        addFeatures: l
+      const s = setInterval(() => {
+        if (this.allLaneGraphics.length > 0 || this.allRefLineGraphics.length > 0) {
+          if (this.allLaneGraphics.length > 0) {
+            const r = this.allLaneGraphics.splice(0, 100);
+            this.laneLayer.applyEdits({
+              addFeatures: r
+            });
+          }
+          if (this.allRefLineGraphics.length > 0) {
+            const r = this.allRefLineGraphics.splice(0, 10);
+            this.roadNameLayer.applyEdits({
+              addFeatures: r
+            });
+          }
+        } else
+          clearInterval(s), o();
+      }, 10);
+    });
+  }
+  async showJunction(e) {
+    for (const i of e) {
+      const n = new b({
+        rings: [i.outline]
+      }), a = new m({
+        geometry: n,
+        attributes: {
+          id: i.id,
+          name: i.name
+        },
+        symbol: {
+          type: "simple-fill",
+          color: [47, 79, 79, 0.8],
+          style: "solid",
+          outline: {
+            color: "white",
+            width: 1
+          }
+        }
       });
+      this.junctionLayer.add(a);
     }
   }
-  async hideOpenDrive() {
+  async clearOpenDrive() {
     const e = await this.laneLayer.queryFeatures();
     e.features.length > 0 && this.laneLayer.applyEdits({
       deleteFeatures: e.features
-    });
+    }), this.wasmLoader.clear();
+  }
+  /**
+   * 用sumo的id定位车道、基本段、路段
+   * @param params
+   * @returns
+   */
+  async findSumo(e) {
+    const { id: i } = e, n = e.flash === void 0 ? !0 : e.flash, a = i.split("+");
+    if (a.length > 2)
+      return { status: -1, message: "id格式错误" };
+    const o = a.length === 2 ? Number(a[1]) : void 0, c = a[0].split("#");
+    if (c.length > 2)
+      return { status: -1, message: "id格式错误" };
+    let s = c[0];
+    s.startsWith("-") && (s = s.slice(1));
+    const r = c.length === 2 ? Number(c[1]) : void 0;
+    return await this.findLane({ roadsectId: s, segmentId: r, laneId: o, flash: n });
+  }
+  /**
+   * 用sumo的id定位车道、基本段、路段
+   * @param params
+   * @returns
+   */
+  async findLane(e) {
+    let { segmentId: i, laneId: n } = e;
+    const { roadsectId: a } = e, o = this.laneLayer.createQuery();
+    o.returnGeometry = !0, o.outFields = ["*"], o.where = `roadId = '${a}'`;
+    const c = await this.laneLayer.queryFeatures(o);
+    if (c.features.length === 0)
+      return { status: -1, message: "未找到。请检查路段编号" };
+    let s = c.features;
+    if (i !== void 0) {
+      const l = [];
+      if (s.forEach((t) => {
+        const h = Number(t.attributes.sectionId);
+        l.indexOf(h) === -1 && l.push(h);
+      }), l.sort((t, h) => t - h), i > l.length - 1)
+        return { status: -1, message: "未找到。请检查基本段编号" };
+      i = l[i], s = s.filter(
+        (t) => Number(t.attributes.sectionId) === i
+      );
+    }
+    if (n !== void 0) {
+      const l = [];
+      if (s.forEach((t) => {
+        const h = Number(t.attributes.laneId);
+        l.indexOf(h) === -1 && l.push(h);
+      }), l.sort((t, h) => t - h), n > l.length - 1)
+        return { status: -1, message: "未找到。请检查车道编号" };
+      n = l[n], s = s.filter(
+        (t) => Number(t.attributes.laneId) === n
+      );
+    }
+    const r = s.map(
+      (l) => l.geometry
+    ), d = await O.union(r);
+    if (e.flash) {
+      this.highlightLayer.removeAll();
+      const l = new m({
+        geometry: d,
+        symbol: {
+          type: "simple-fill",
+          color: [255, 0, 0, 0.5],
+          style: "solid",
+          outline: {
+            color: "red",
+            width: 2
+          }
+        }
+      });
+      this.highlightLayer.add(l);
+      let t = 0, h = !0;
+      const y = setInterval(() => {
+        h ? (this.highlightLayer.opacity -= 0.02, this.highlightLayer.opacity <= 0.1 && (h = !1, t++)) : (this.highlightLayer.opacity += 0.02, this.highlightLayer.opacity >= 1 && (h = !0)), t > 5 && (this.highlightLayer.removeAll(), this.highlightLayer.opacity = 1, clearInterval(y));
+      }, 20);
+    }
+    return this.view.type === "2d" ? await this.view.goTo(d, { duration: 1e3 }) : await this.view.goTo(d, { duration: 1e3 }), { status: 0, message: "ok" };
+  }
+  async splitLane(e) {
+    return { status: 0, message: "ok", result: e };
   }
 }
 export {

package/es/src/gis-map/utils/open-drive-renderer/junction.d.ts

@@ -0,0 +1,50 @@
+import { ILaneInfo } from '../../../types';
+interface ILink {
+    incoming: ILaneInfo;
+    connecting: ILaneInfo;
+    outgoing: ILaneInfo;
+}
+export default class Junction {
+    id: string;
+    name: string;
+    /** 路口内的行车通道，包含进口道->转接道->出口道三个车道 */
+    laneLinks: Array<ILink>;
+    /** 进口车道按roadId归类, */
+    private incomingLanes;
+    private outline;
+    private wasmLoader;
+    private roadList;
+    constructor(odrJunction: any);
+    /**
+     * 在路口中，找到进口道的后继转接车道
+     * @param {string} roadId 进口道道路id
+     * @param {number} laneId 进口道车道id
+     * @returns {ILaneInfo[]}
+     */
+    getSuccessorForIncoming(roadId: string, laneId: number): ILaneInfo[];
+    /**
+     * 在路口中，找到出口道的前驱转接车道
+     * @param {string} roadId 出口道道路id
+     * @param {number} laneId 出口道车道id
+     * @returns {ILaneInfo[]}
+     */
+    getPredecessorForOutgoing(roadId: string, laneId: number): ILaneInfo[];
+    /**
+     * 获取路口轮廓线
+     * 要等所有路口对象生成之后才能调用，所以不放在初始化中
+     * @returns
+     */
+    getJunctionOutline(): number[][];
+    /**
+     * 获取此路口各个进口道的停止线
+     */
+    getRoadStopLine(): {
+        roadId: string;
+        line: number[][];
+    }[];
+    /**
+     * 获取此路口的所有进口车道
+     */
+    getAllIncomingLanes(): ILaneInfo[];
+}
+export {};

package/es/src/gis-map/utils/open-drive-renderer/junction.mjs

@@ -0,0 +1,151 @@
+import f from "../common-utils.mjs";
+import E from "./draw-bezier.mjs";
+import p from "./wasm-loader.mjs";
+class R {
+  constructor(t) {
+    this.laneLinks = [], this.incomingLanes = /* @__PURE__ */ new Map(), this.wasmLoader = p.getInstance(), this.id = t.id, this.name = t.name, this.roadList = p.getInstance().roadList;
+    const i = f.getStdVecEntries(
+      t.odr_connections
+    );
+    for (const o of i) {
+      const n = o.connecting_road, e = this.roadList.get(n);
+      if (!e) {
+        console.log(`转接道路不存在: ${n}`), console.log(`junction: ${this.id}, connection: ${o.id}`);
+        continue;
+      }
+      if (!e.predecessor.elementId) {
+        console.log(`转接道路不存在predecessor: ${n}`), console.log(`junction: ${this.id}, connection: ${o.id}`);
+        continue;
+      }
+      if (!e.successor.elementId) {
+        console.log(`转接道路不存在successor: ${n}`), console.log(`junction: ${this.id}, connection: ${o.id}`);
+        continue;
+      }
+      const { elementId: s, contactPoint: c } = e.predecessor, g = this.roadList.get(s);
+      if (!g) {
+        console.log(`进口道路不存在: ${s}`), console.log(`junction: ${this.id}, connection: ${o.id}`);
+        continue;
+      }
+      const { elementId: a, contactPoint: h } = e.successor, r = this.roadList.get(a);
+      if (!r) {
+        console.log(`出口道路不存在: ${a}`), console.log(`junction: ${this.id}, connection: ${o.id}`);
+        continue;
+      }
+      const L = f.getStdVecEntries(o.odr_lane_links);
+      for (const l of L) {
+        const I = c === "start" ? 0 : g.getLastLaneSection().s0, m = l.from;
+        if (m === 0) {
+          console.log("进口车道id为0"), console.log(`junction: ${this.id}, connection: ${o.id}`);
+          continue;
+        }
+        const $ = 0, u = l.to;
+        if (u === 0) {
+          console.log("转接车道id为0"), console.log(`junction: ${this.id}, connection: ${o.id}`);
+          continue;
+        }
+        const d = e.getFirstLaneSection().getLane(u);
+        if (!d || (d == null ? void 0 : d.successor) === 0) {
+          console.log(
+            `转接车道不存在successor: ${n}_0_${u}`
+          ), console.log(`junction: ${this.id}, connection: ${o.id}`);
+          continue;
+        }
+        const S = h === "start" ? 0 : r.getLastLaneSection().s0, v = d.successor;
+        this.laneLinks.push({
+          incoming: {
+            roadId: s,
+            sectionId: I,
+            laneId: m
+          },
+          connecting: {
+            roadId: n,
+            sectionId: $,
+            laneId: u
+          },
+          outgoing: {
+            roadId: a,
+            sectionId: S,
+            laneId: v
+          }
+        });
+      }
+    }
+    this.laneLinks.forEach((o) => {
+      const n = o.incoming, { roadId: e, laneId: s } = n, c = this.incomingLanes.get(e);
+      c ? c.find((g) => g.laneId === s) || c.push(n) : this.incomingLanes.set(e, [n]);
+    });
+    for (const o of this.incomingLanes.values())
+      o.sort(
+        (n, e) => +(Math.abs(n.laneId) > Math.abs(e.laneId)) || +(n.laneId === e.laneId) - 1
+      );
+  }
+  /**
+   * 在路口中，找到进口道的后继转接车道
+   * @param {string} roadId 进口道道路id
+   * @param {number} laneId 进口道车道id
+   * @returns {ILaneInfo[]}
+   */
+  getSuccessorForIncoming(t, i) {
+    const o = [];
+    return this.laneLinks.forEach((n) => {
+      n.incoming.roadId === t && n.incoming.laneId === i && o.push(n.connecting);
+    }), o;
+  }
+  /**
+   * 在路口中，找到出口道的前驱转接车道
+   * @param {string} roadId 出口道道路id
+   * @param {number} laneId 出口道车道id
+   * @returns {ILaneInfo[]}
+   */
+  getPredecessorForOutgoing(t, i) {
+    const o = [];
+    return this.laneLinks.forEach((n) => {
+      n.outgoing.roadId === t && n.outgoing.laneId === i && o.push(n.connecting);
+    }), o;
+  }
+  /**
+   * 获取路口轮廓线
+   * 要等所有路口对象生成之后才能调用，所以不放在初始化中
+   * @returns
+   */
+  getJunctionOutline() {
+    if (this.outline)
+      return this.outline;
+    const t = [], i = [];
+    this.incomingLanes.forEach((o) => {
+      const n = this.wasmLoader.getLane(o[0]);
+      n && i.push(n);
+    }), i.sort((o, n) => {
+      const e = o.drivingAngle < 0 ? o.drivingAngle + 360 : o.drivingAngle, s = n.drivingAngle < 0 ? n.drivingAngle + 360 : n.drivingAngle;
+      return e - s;
+    }), i.push(i[0]);
+    for (let o = 0; o < i.length - 1; o++) {
+      const n = i[o], e = i[o + 1], s = n.laneSection.allLaneIds, c = n.id > 0 ? s[0] : s[s.length - 1], g = n.laneSection.getLane(c), a = e.laneSection.allLaneIds, h = e.id > 0 ? a[a.length - 1] : a[0], r = e.laneSection.getLane(h), L = g.getLaneEndPoints("outer").reverse(), l = r.getLaneEndPoints("outer").reverse(), I = E.drawBezierBetweenLane(L, l);
+      t.push(...I);
+    }
+    return t.push(t[0]), this.outline = t, t;
+  }
+  /**
+   * 获取此路口各个进口道的停止线
+   */
+  getRoadStopLine() {
+    const t = [];
+    for (const i of this.incomingLanes) {
+      const o = i[0], n = i[1], e = this.wasmLoader.getLane(n[0]);
+      if (!e || e.isDirEqual === void 0)
+        continue;
+      const s = e.isDirEqual ? e.laneSection.borders.top : e.laneSection.borders.bottom;
+      t.push({ roadId: o, line: s });
+    }
+    return t;
+  }
+  /**
+   * 获取此路口的所有进口车道
+   */
+  getAllIncomingLanes() {
+    return [...this.incomingLanes.values()].flat();
+  }
+}
+export {
+  R as default
+};

package/es/src/gis-map/utils/open-drive-renderer/lane-section.d.ts

@@ -0,0 +1,48 @@
+import { ISampledLaneSection } from '../../../types';
+import Lane from './lane';
+import Road from './road';
+export default class LaneSection {
+    /** 路段id：
+     * 在道路参考线上，路段起始点与道路起始点的距离
+     */
+    s0: number;
+    road: Road;
+    /** 路段上下左右的边框 */
+    borders: {
+        left: number[][];
+        right: number[][];
+        top: number[][];
+        bottom: number[][];
+    };
+    /** 上下左右边框围成的多边形 */
+    polygon: number[][];
+    /** 路段内的车道 */
+    private idToLane;
+    constructor(odrLanesection: any, road: Road);
+    /**
+     * 获取一个车道
+     * @param id
+     * @returns
+     */
+    getLane(id: number): Lane | undefined;
+    /**
+     * 获取所有车道
+     * @returns
+     */
+    get allLanes(): Lane[];
+    get laneNumber(): number;
+    /**
+     * 获取所有车道id，id升序排列
+     * @returns
+     */
+    get allLaneIds(): number[];
+    /**
+     * 路段采样后的数据
+     */
+    get sampledLaneSection(): ISampledLaneSection;
+    /**
+     * 计算路段上下左右边框
+     * @returns
+     */
+    private getBorderLine;
+}