gisviewer-vue3-arcgis 1.0.115 → 1.0.116

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

@@ -1,9 +1,37 @@
 import View from '@arcgis/core/views/View';
+import { IFindSumoParams, IResult, IShowOpenDriveFromFileParams } 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;
 }

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 p from "@arcgis/core/Graphic";
+import { Polyline as j, Polygon as b } from "@arcgis/core/geometry";
+import * as N from "@arcgis/core/geometry/geometryEngineAsync.js";
+import L from "@arcgis/core/layers/FeatureLayer";
+import v from "@arcgis/core/layers/GraphicsLayer";
+import O from "axios";
+import G from "pako";
+import R from "./wasm-loader.mjs";
 class I {
   constructor(e) {
-    this.view = e, this.laneLayer = new m({
+    this.wasmLoader = R.getInstance(), this.view = e, this.laneLayer = new L({
       id: "OpenDriveLane",
       fields: [
         {
@@ -93,7 +97,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,64 +211,290 @@ 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: "center-along",
+          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
+    ]);
+  }
+  static getInstance(e) {
+    return this.instance || (this.instance = new I(e)), this.instance;
   }
-  async showOpenDrive(e, i) {
-    const t = `http://${e}/api/openDrive/analyzeXodr`, o = await w.get(t, {
+  async showOpenDriveFromFile(e) {
+    var l, d, a;
+    const t = await this.wasmLoader.load(e.file);
+    if (t.status !== 0)
+      return t;
+    console.time("渲染用时");
+    const { roads: i, junctions: s } = t.result;
+    return await this.showAllLanes(
+      i,
+      ((l = e.options) == null ? void 0 : l.showJunctionLane) || !1,
+      ((d = e.options) == null ? void 0 : d.showRoadName) || !0
+    ), (a = e.options) != null && a.showJunctionPolygon && this.showJunction(s), console.timeEnd("渲染用时"), { status: 0, message: "ok" };
+  }
+  /**
+   * 从服务器载入OpenDrive文件解析结果并显示
+   * @param server
+   * @param projectName
+   */
+  async showOpenDriveFromServer(e, t) {
+    const i = `http://${e}/api/openDrive/analyzeXodr`, s = await O.get(i, {
       headers: {
-        projectName: i
+        projectName: t
       },
       params: {
         analyze: !1,
         compressed: !0
       }
     });
-    if (o.status !== 200)
-      throw new Error(`OpenDriveRenderer: ${o.statusText}`);
-    let l = o.data.result.json;
+    if (s.status !== 200)
+      throw new Error(`OpenDriveRenderer: ${s.statusText}`);
+    let l = s.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);
+    const a = await (await fetch(l)).arrayBuffer(), c = G.inflate(a, { to: "string" }), h = JSON.parse(c);
+    return await this.showAllLanes(h, !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, t, i) {
+    const s = await this.laneLayer.queryFeatures();
+    return s.features.length > 0 && this.laneLayer.applyEdits({
+      deleteFeatures: s.features
+    }), this.roadNameLayer.visible = i, new Promise((l) => {
+      let d = 0;
+      this.allLaneGraphics = [], this.allRefLineGraphics = [];
+      for (const c of e) {
+        if (!t && c.junction !== "-1")
+          continue;
+        const { id: h, refLine: y } = c;
+        let u = c.name;
+        u.includes("(") && (u = u.slice(0, u.indexOf("(")));
+        const f = new p({
+          geometry: new j({
+            paths: [y]
+          }),
+          attributes: {
+            ObjectID: d++,
+            roadId: h,
+            roadName: u
+          }
+        });
+        this.allRefLineGraphics.push(f);
+        for (const o of c.laneSections) {
+          const r = Number(o.id);
+          for (const n of o.lanePaths) {
+            const m = Number(n.id);
+            if (m === 0)
+              continue;
+            const D = n.type, w = n.innerPath.concat(n.outerPath.reverse());
+            if (w.length <= 3) {
+              console.warn(`lane ${m} has less than 3 points`);
+              continue;
             }
-          });
-          l.push(u);
+            w.push(n.innerPath[0]);
+            const g = new b({
+              rings: [w]
+            });
+            if (g) {
+              const F = new p({
+                geometry: g,
+                attributes: {
+                  ObjectID: d++,
+                  id: `${h}+${r}+${m}`,
+                  roadId: h,
+                  roadName: c.name,
+                  sectionId: r,
+                  laneId: m,
+                  type: D
+                }
+              });
+              this.allLaneGraphics.push(F);
+            }
+          }
         }
       }
-      await this.laneLayer.applyEdits({
-        addFeatures: l
+      const a = setInterval(() => {
+        if (this.allLaneGraphics.length > 0 || this.allRefLineGraphics.length > 0) {
+          if (this.allLaneGraphics.length > 0) {
+            const c = this.allLaneGraphics.splice(0, 100);
+            this.laneLayer.applyEdits({
+              addFeatures: c
+            });
+          }
+          if (this.allRefLineGraphics.length > 0) {
+            const c = this.allRefLineGraphics.splice(0, 10);
+            this.roadNameLayer.applyEdits({
+              addFeatures: c
+            });
+          }
+        } else
+          clearInterval(a), l();
+      }, 10);
+    });
+  }
+  async showJunction(e) {
+    for (const t of e) {
+      const i = new b({
+        rings: [t.outline]
+      }), s = new p({
+        geometry: i,
+        attributes: {
+          id: t.id,
+          name: t.name
+        },
+        symbol: {
+          type: "simple-fill",
+          color: [47, 79, 79, 0.8],
+          style: "solid",
+          outline: {
+            color: "white",
+            width: 1
+          }
+        }
       });
+      this.junctionLayer.add(s);
     }
   }
-  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: t } = e, i = t.split("+");
+    if (i.length > 2)
+      return { status: -1, message: "id格式错误" };
+    const s = i.length === 2 ? Number(i[1]) : void 0, l = i[0].split("#");
+    if (l.length > 2)
+      return { status: -1, message: "id格式错误" };
+    const d = l[0], a = l.length === 2 ? Number(l[1]) : void 0;
+    return await this.findLane({ roadsectId: d, segmentId: a, laneId: s });
+  }
+  /**
+   * 用sumo的id定位车道、基本段、路段
+   * @param params
+   * @returns
+   */
+  async findLane(e) {
+    let { roadsectId: t, segmentId: i, laneId: s } = e;
+    t.startsWith("-") && (t = t.slice(1)), console.log(t, i, s);
+    const l = this.laneLayer.createQuery();
+    l.returnGeometry = !0, l.outFields = ["*"], l.where = `roadId = '${t}'`;
+    const d = await this.laneLayer.queryFeatures(l);
+    if (d.features.length === 0)
+      return { status: -1, message: "未找到。请检查路段编号" };
+    let a = d.features;
+    if (i !== void 0) {
+      const o = [];
+      if (a.forEach((r) => {
+        const n = Number(r.attributes.sectionId);
+        o.indexOf(n) === -1 && o.push(n);
+      }), o.sort((r, n) => r - n), i > o.length - 1)
+        return { status: -1, message: "未找到。请检查基本段编号" };
+      i = o[i], a = a.filter(
+        (r) => Number(r.attributes.sectionId) === i
+      );
+    }
+    if (s !== void 0) {
+      const o = [];
+      if (a.forEach((r) => {
+        const n = Number(r.attributes.laneId);
+        o.indexOf(n) === -1 && o.push(n);
+      }), o.sort((r, n) => r - n), s > o.length - 1)
+        return { status: -1, message: "未找到。请检查车道编号" };
+      s = o[s], a = a.filter(
+        (r) => Number(r.attributes.laneId) === s
+      );
+    }
+    const c = a.map(
+      (o) => o.geometry
+    ), h = await N.union(c);
+    this.highlightLayer.removeAll(), this.highlightLayer.add(
+      new p({
+        geometry: h,
+        symbol: {
+          type: "simple-fill",
+          style: "none",
+          outline: {
+            color: "red",
+            width: 2
+          }
+        }
+      })
+    );
+    const y = new p({
+      geometry: h,
+      symbol: {
+        type: "simple-fill",
+        color: [255, 0, 0, 0.5],
+        style: "solid",
+        outline: {
+          width: 0
+        }
+      }
     });
+    this.highlightLayer.add(y);
+    let u = 0;
+    const f = setInterval(() => {
+      u % 2 === 0 ? y.visible = !0 : y.visible = !1, u++, u > 10 && (this.highlightLayer.removeAll(), clearInterval(f));
+    }, 500);
+    return this.view.type === "2d" ? await this.view.goTo(h, { duration: 1e3 }) : await this.view.goTo(h, { duration: 1e3 }), { status: 0, message: "ok" };
   }
 }
 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;
+}