gisviewer-vue3-arcgis 1.0.114 → 1.0.116

package/es/src/gis-map/utils/holo-flow/trace-renderer-layer.d.ts

@@ -4,7 +4,10 @@ export default class TraceRendererLayer implements ITraceRendererInterface {
     private readonly vehicleLayer;
     private mapConfig;
     private rafSignal;
+    private appDataStore;
+    private logTable;
     constructor(view: __esri.MapView);
+    getLog(): (string | number)[][];
     init(): Promise<void>;
     private needInterpolate;
     private isPaused;

package/es/src/gis-map/utils/holo-flow/trace-renderer-layer.mjs

@@ -3,14 +3,40 @@ import p from "@arcgis/core/layers/GraphicsLayer";
 import m from "../../stores/index.mjs";
 class f {
   constructor(i) {
-    this.needInterpolate = !0, this.isPaused = !1, this.showVehiclePlate = !1, this.showGroundVehicle = !0, this.showElevatedVehicle = !0, this.historyPositionMap = /* @__PURE__ */ new Map(), this.vehicleObjectMap = /* @__PURE__ */ new Map(), this.view = i;
-    const e = m.useAppDataStore;
-    this.mapConfig = JSON.parse(JSON.stringify(e.mapConfig)), this.vehicleLayer = new p({
+    this.appDataStore = m.useAppDataStore, this.logTable = [
+      [
+        "uuid",
+        "ptcId",
+        "plateno",
+        "timestamp",
+        "localTimestamp",
+        "timestamp_str",
+        "speed",
+        "laneNo",
+        "objHeight",
+        "objLength",
+        "latitude",
+        "longitude",
+        "ptcType",
+        "vehicleType",
+        "vehicleColor",
+        "plateColor",
+        "sbdm",
+        "heading",
+        "fixAngle",
+        "roadLayer",
+        "status",
+        "step",
+        "receiveTimestamp"
+      ]
+    ], this.needInterpolate = !0, this.isPaused = !1, this.showVehiclePlate = !1, this.showGroundVehicle = !0, this.showElevatedVehicle = !0, this.historyPositionMap = /* @__PURE__ */ new Map(), this.vehicleObjectMap = /* @__PURE__ */ new Map(), this.view = i, this.mapConfig = JSON.parse(JSON.stringify(this.appDataStore.mapConfig)), this.vehicleLayer = new p({
       id: "vehicleLayer"
     }), this.view.map.add(this.vehicleLayer), this.rafSignal = requestAnimationFrame(() => this.render());
   }
+  getLog() {
+    return this.logTable;
+  }
   async init() {
-    console.log("init");
   }
   addVehicles(i) {
     return new Promise((e) => {
@@ -19,27 +45,27 @@ class f {
         return;
       }
       const t = i.map((s) => {
-        const { vehicleId: o, heading: a, localTimestamp: h } = s, r = Number(s.x), n = Number(s.y);
+        const { vehicleId: o, heading: a, localTimestamp: h } = s, r = Number(s.x), l = Number(s.y);
         this.historyPositionMap.set(o, [
-          { pos: [r, n, 0], heading: a, time: h }
+          { pos: [r, l, 0], heading: a, time: h }
         ]);
-        const l = new c({
+        const n = new c({
           geometry: {
             type: "point",
             x: r,
-            y: n
+            y: l
           },
           attributes: {
             ...s
           },
           symbol: this.createCIMSymbol(s)
         });
-        return l.visible = !1, this.vehicleObjectMap.set(o, {
-          graphic: l,
+        return n.visible = !1, this.vehicleObjectMap.set(o, {
+          graphic: n,
           data: s,
           waitForDelete: !1,
           isMoving: !1
-        }), l;
+        }), n;
       });
       this.vehicleLayer.addMany(t), e();
     });
@@ -52,11 +78,11 @@ class f {
       }
       const t = [];
       i.forEach((s) => {
-        const { vehicleId: o, heading: a, localTimestamp: h } = s, r = Number(s.x), n = Number(s.y), l = this.vehicleObjectMap.get(o);
-        l ? (l.data = s, this.historyPositionMap.get(
+        const { vehicleId: o, heading: a, localTimestamp: h } = s, r = Number(s.x), l = Number(s.y), n = this.vehicleObjectMap.get(o);
+        n ? (n.data = s, this.historyPositionMap.get(
           o
         ).push({
-          pos: [r, n, 0],
+          pos: [r, l, 0],
           heading: a,
           time: h
         })) : t.push(s);
@@ -123,12 +149,12 @@ class f {
           y: e[0].pos[1]
         };
     else {
-      const h = e[0].pos[0] + (e[1].pos[0] - e[0].pos[0]) * a, r = e[0].pos[1] + (e[1].pos[1] - e[0].pos[1]) * a, n = e[0].heading + (e[1].heading - e[0].heading) * a;
+      const h = e[0].pos[0] + (e[1].pos[0] - e[0].pos[0]) * a, r = e[0].pos[1] + (e[1].pos[1] - e[0].pos[1]) * a, l = e[0].heading + (e[1].heading - e[0].heading) * a;
       t.graphic.geometry = {
         type: "point",
         x: h,
         y: r
-      }, t.data.heading = n, t.graphic.symbol = this.createCIMSymbol(t.data);
+      }, t.data.heading = l, t.graphic.symbol = this.createCIMSymbol(t.data);
     }
   }
   /**

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

@@ -0,0 +1,17 @@
+export default class DrawBezier {
+    private static sampleCount;
+    static drawBezierBetweenLane(incoming: number[][], outgoing: number[][]): number[][];
+    /**
+     * 生成控制点
+     * 进口道的延长线和出口道的反向延长线的交点
+     */
+    private static getControlPoint;
+    /**
+     * @desc 二阶贝塞尔
+     * @param {number} t 当前百分比
+     * @param {Array} p1 起点坐标
+     * @param {Array} p2 终点坐标
+     * @param {Array} cp 控制点
+     */
+    private static twoBezier;
+}

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

@@ -0,0 +1,49 @@
+import * as m from "@turf/helpers";
+import f from "@turf/line-intersect";
+import p from "../common-utils.mjs";
+class P {
+  static drawBezierBetweenLane(t, i) {
+    const n = this.getControlPoint(t, i);
+    if (n.length === 3) {
+      const s = n[0], r = n[1], c = n[2], o = [];
+      for (let e = 0; e <= this.sampleCount; e++)
+        o.push(this.twoBezier(e / this.sampleCount, s, r, c));
+      return o;
+    } else
+      return n;
+  }
+  /**
+   * 生成控制点
+   * 进口道的延长线和出口道的反向延长线的交点
+   */
+  static getControlPoint(t, i) {
+    const n = t[0], s = t[1], r = p.getExtensionLine(
+      n,
+      s,
+      100
+    ), c = m.lineString([n, r]), o = i[0], e = i[1], l = p.getExtensionLine(
+      e,
+      o,
+      100
+    ), u = m.lineString([l, e]), g = f(c, u);
+    if (g.features.length === 0)
+      return [s, o];
+    const a = g.features[0].geometry.coordinates;
+    return [s, o, a];
+  }
+  /**
+   * @desc 二阶贝塞尔
+   * @param {number} t 当前百分比
+   * @param {Array} p1 起点坐标
+   * @param {Array} p2 终点坐标
+   * @param {Array} cp 控制点
+   */
+  static twoBezier(t, i, n, s) {
+    const [r, c] = i, [o, e] = s, [l, u] = n, g = (1 - t) * (1 - t) * r + 2 * t * (1 - t) * o + t * t * l, a = (1 - t) * (1 - t) * c + 2 * t * (1 - t) * e + t * t * u;
+    return [g, a];
+  }
+}
+P.sampleCount = 50;
+export {
+  P as default
+};

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 {};