gisviewer-vue3-arcgis 1.0.121 → 1.0.122

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

@@ -6,7 +6,9 @@ export default class OpenDriveRenderer {
     private laneLayer;
     private roadNameLayer;
     private junctionLayer;
+    private sectionLayer;
     private highlightLayer;
+    private flashLayer;
     private allLaneGraphics;
     private allRefLineGraphics;
     private mouseMoveHandler;
@@ -15,6 +17,7 @@ export default class OpenDriveRenderer {
     constructor(view: __esri.MapView | __esri.SceneView);
     private projectName;
     private openDriveServer;
+    private openDriveClickCallback;
     showOpenDriveFromFile(params: IShowOpenDriveFromFileParams): Promise<IResult>;
     /**
      * 从服务器载入OpenDrive文件解析结果并显示
@@ -48,11 +51,13 @@ export default class OpenDriveRenderer {
      * @returns
      */
     findSumo(params: IFindSumoParams): Promise<IResult>;
+    private findJunction;
     /**
      * 用sumo的id定位车道、基本段、路段
      * @param params
      * @returns
      */
     private findLane;
+    private flashGraphic;
     splitLane(params: ISplitOpenDriveLaneParams): Promise<IResult>;
 }

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

@@ -1,16 +1,16 @@
-import d from "@arcgis/core/Graphic";
-import * as O from "@arcgis/core/core/promiseUtils";
-import { Polygon as C } from "@arcgis/core/geometry";
-import * as L from "@arcgis/core/geometry/geometryEngineAsync";
-import G from "@arcgis/core/layers/FeatureLayer";
-import D from "@arcgis/core/layers/GraphicsLayer";
+import p from "@arcgis/core/Graphic";
+import * as D from "@arcgis/core/core/promiseUtils";
+import { Polygon as N } from "@arcgis/core/geometry";
+import * as k from "@arcgis/core/geometry/geometryEngineAsync";
+import C from "@arcgis/core/layers/FeatureLayer";
+import m from "@arcgis/core/layers/GraphicsLayer";
 import f from "axios";
-import j from "pako";
-import S from "../common-utils.mjs";
+import G from "pako";
+import j from "../common-utils.mjs";
 import F from "./wasm-loader.mjs";
-class N {
-  constructor(e) {
-    this.wasmLoader = F.getInstance(), this.projectName = "", this.openDriveServer = "", this.currentSectionCode = "", this.currentJunctionId = "", this.view = e, this.laneLayer = new G({
+class S {
+  constructor(t) {
+    this.wasmLoader = F.getInstance(), this.projectName = "", this.openDriveServer = "", this.currentSectionCode = "", this.currentJunctionId = "", this.view = t, this.laneLayer = new C({
       id: "OpenDriveLane",
       fields: [
         {
@@ -218,7 +218,7 @@ class N {
           }
         ]
       }
-    }), this.roadNameLayer = new G({
+    }), this.roadNameLayer = new C({
       id: "OpenDriveRoadName",
       fields: [
         {
@@ -268,25 +268,27 @@ class N {
           }
         }
       ]
-    }), this.junctionLayer = new D({ id: "OpenDriveJunction" }), this.highlightLayer = new D({ id: "OpenDriveHighlight" }), this.view.map.addMany([
+    }), this.junctionLayer = new m({ id: "OpenDriveJunction" }), this.sectionLayer = new m({ id: "OpenDriveSection" }), this.highlightLayer = new m({ id: "OpenDriveHighlight" }), this.flashLayer = new m({ id: "OpenDriveFlash" }), this.view.map.addMany([
       this.laneLayer,
       this.junctionLayer,
+      this.sectionLayer,
       this.roadNameLayer,
-      this.highlightLayer
+      this.highlightLayer,
+      this.flashLayer
     ]);
   }
-  static getInstance(e) {
-    return this.instance || (this.instance = new N(e)), this.instance;
+  static getInstance(t) {
+    return this.instance || (this.instance = new S(t)), this.instance;
   }
-  async showOpenDriveFromFile(e) {
-    var u, c;
-    this.projectName = Date.now().toString(), this.openDriveServer = e.server;
+  async showOpenDriveFromFile(t) {
+    var h, d;
+    this.openDriveClickCallback = t.selectedCallback, this.projectName = Date.now().toString(), this.openDriveServer = t.server;
     const o = `http://${this.openDriveServer}/api/openDrive/uploadXodr`, i = await f.post(
       o,
       {},
       {
         params: {
-          url: e.file,
+          url: t.file,
           projectName: this.projectName
         }
       }
@@ -295,23 +297,23 @@ class N {
       throw new Error(`OpenDriveRenderer: ${i.statusText}`);
     console.time("渲染用时");
     const s = i.data.result.geoSetting;
-    S.setGeoData(
+    j.setGeoData(
       s.geoReference,
       s.offsetX,
       s.offsetY
     );
-    let t = i.data.result.json;
-    t.startsWith(window.location.protocol) || (t = `${window.location.protocol}//${e.server}${t}`);
-    const l = await (await fetch(t)).arrayBuffer(), a = j.inflate(l, { to: "string" }), r = JSON.parse(a);
+    let e = i.data.result.json;
+    e.startsWith(window.location.protocol) || (e = `${window.location.protocol}//${t.server}${e}`);
+    const r = await (await fetch(e)).arrayBuffer(), n = G.inflate(r, { to: "string" }), a = JSON.parse(n);
     await this.showAllLanes(
-      r,
-      ((u = e.options) == null ? void 0 : u.showJunctionLane) || !1,
-      ((c = e.options) == null ? void 0 : c.showRoadName) || !0
+      a,
+      ((h = t.options) == null ? void 0 : h.showJunctionLane) || !1,
+      ((d = t.options) == null ? void 0 : d.showRoadName) || !0
     );
-    const n = i.data.result.junctions;
-    if (this.showJunction(n), e.options && e.options.centerMap !== !1) {
-      const m = S.transformPointProjection([0, 0]);
-      await this.view.goTo(m);
+    const l = i.data.result.junctions;
+    if (this.showJunction(l), t.options && t.options.centerMap !== !1) {
+      const g = j.transformPointProjection([0, 0]);
+      await this.view.goTo(g);
     }
     return this.mouseMoveHandler || this.monitorMouseMove(), this.mouseClickHandler || this.monitorMouseClick(), console.timeEnd("渲染用时"), { status: 0, message: "ok" };
   }
@@ -320,8 +322,8 @@ class N {
    * @param server
    * @param projectName
    */
-  async showOpenDriveFromServer(e, o) {
-    const i = `http://${e}/api/openDrive/analyzeXodr`, s = await f.get(i, {
+  async showOpenDriveFromServer(t, o) {
+    const i = `http://${t}/api/openDrive/analyzeXodr`, s = await f.get(i, {
       headers: {
         projectName: o
       },
@@ -332,102 +334,107 @@ class N {
     });
     if (s.status !== 200)
       throw new Error(`OpenDriveRenderer: ${s.statusText}`);
-    let t = s.data.result.json;
-    t.startsWith(window.location.protocol) || (t = `${window.location.protocol}//${e}${t}`);
-    const l = await (await fetch(t)).arrayBuffer(), a = j.inflate(l, { to: "string" }), r = JSON.parse(a);
-    return await this.showAllLanes(r, !1, !1), { status: 0, message: "ok" };
+    let e = s.data.result.json;
+    e.startsWith(window.location.protocol) || (e = `${window.location.protocol}//${t}${e}`);
+    const r = await (await fetch(e)).arrayBuffer(), n = G.inflate(r, { to: "string" }), a = JSON.parse(n);
+    return await this.showAllLanes(a, !1, !1), { status: 0, message: "ok" };
   }
-  async showAllLanes(e, o, i) {
+  async showAllLanes(t, o, i) {
     const s = await this.laneLayer.queryFeatures();
     return s.features.length > 0 && this.laneLayer.applyEdits({
       deleteFeatures: s.features
-    }), this.roadNameLayer.visible = i, new Promise((t) => {
-      let h = 0;
+    }), this.roadNameLayer.visible = i, new Promise((e) => {
+      let c = 0;
       this.allLaneGraphics = [], this.allRefLineGraphics = [];
-      const l = [];
-      for (const r of e) {
-        if (!o && r.junction !== "-1")
+      const r = [];
+      for (const a of t) {
+        if (!o && a.junction !== "-1")
           continue;
-        const { id: n, refLine: u } = r;
-        let c = r.name;
-        c.includes("(") && (c = c.slice(0, c.indexOf("("))), c = c.replace(/(.)/g, "$1 ");
-        const m = new d({
+        const { id: l, refLine: h } = a;
+        let d = a.name;
+        d.includes("(") && (d = d.slice(0, d.indexOf("("))), d = d.replace(/(.)/g, "$1 ");
+        const g = new p({
           geometry: {
             type: "polyline",
-            paths: [u]
+            paths: [h]
           },
           attributes: {
-            ObjectID: h++,
-            roadId: n,
-            roadName: c
+            ObjectID: c++,
+            roadId: l,
+            roadName: d
           }
         });
-        this.allRefLineGraphics.push(m);
-        for (const w of r.laneSections) {
-          const b = Number(w.id);
-          for (const p of w.lanePaths) {
-            const y = Number(p.id);
+        this.allRefLineGraphics.push(g);
+        for (const v of a.laneSections) {
+          const b = Number(v.id);
+          for (const u of v.lanePaths) {
+            const y = Number(u.id);
             if (y === 0)
               continue;
-            const k = p.type, g = p.innerPath.concat(
-              p.outerPath.reverse()
+            const O = u.type, w = u.innerPath.concat(
+              u.outerPath.reverse()
             );
-            if (g.length <= 3) {
+            if (w.length <= 3) {
               console.warn(`lane ${y} has less than 3 points`);
               continue;
             }
-            g.push(p.innerPath[0]);
-            const v = new C({
-              rings: [g]
+            w.push(u.innerPath[0]);
+            const L = new N({
+              rings: [w]
             });
-            if (v) {
-              const I = new d({
-                geometry: v,
+            if (L) {
+              const I = new p({
+                geometry: L,
                 attributes: {
-                  ObjectID: h++,
-                  id: `${n}+${b}+${y}`,
-                  roadId: n,
-                  roadName: r.name,
+                  ObjectID: c++,
+                  id: `${l}+${b}+${y}`,
+                  roadId: l,
+                  roadName: a.name,
                   sectionId: b,
                   laneId: y,
-                  type: k,
+                  type: O,
                   sumoId: ""
                 }
               });
-              this.allLaneGraphics.push(I), l.push(I);
+              this.allLaneGraphics.push(I), r.push(I);
             }
           }
         }
       }
-      const a = setInterval(() => {
-        if (l.length > 0 || this.allRefLineGraphics.length > 0) {
-          if (l.length > 0) {
-            const r = l.splice(0, 100);
+      const n = setInterval(() => {
+        if (r.length > 0 || this.allRefLineGraphics.length > 0) {
+          if (r.length > 0) {
+            const a = r.splice(0, 100);
             this.laneLayer.applyEdits({
-              addFeatures: r
+              addFeatures: a
             });
           }
           if (this.allRefLineGraphics.length > 0) {
-            const r = this.allRefLineGraphics.splice(0, 10);
+            const a = this.allRefLineGraphics.splice(0, 10);
             this.roadNameLayer.applyEdits({
-              addFeatures: r
+              addFeatures: a
             });
           }
         } else
-          clearInterval(a), t();
+          clearInterval(n), e();
       }, 10);
     });
   }
-  showJunction(e) {
+  showJunction(t) {
     const o = [];
-    for (const i of e) {
-      const s = new d({
+    for (const i of t) {
+      i.nodeType = i.type;
+      const s = new p({
         geometry: {
           type: "point",
           x: i.coordinates[0],
           y: i.coordinates[1]
         },
-        attributes: { ...i, selected: !1 },
+        attributes: {
+          ...i,
+          selected: !1,
+          type: "OpenDriveJunction"
+        },
         symbol: {
           type: "picture-marker",
           url: i.crossId ? "/GisViewerAssets/Images/point_green.png" : "/GisViewerAssets/Images/normal-cross.png",
@@ -443,30 +450,32 @@ class N {
    * 监听鼠标移动事件，高亮显示鼠标所在路段和路口
    */
   monitorMouseMove() {
-    const e = O.debounce(async (o) => {
-      var h;
-      const s = (h = (await this.view.hitTest(o, {
+    const t = D.debounce(async (o) => {
+      var c;
+      const s = (c = (await this.view.hitTest(o, {
         include: [this.laneLayer, this.junctionLayer]
-      })).results) == null ? void 0 : h.filter(
-        (l) => l.type === "graphic"
+      })).results) == null ? void 0 : c.filter(
+        (r) => r.type === "graphic"
       );
       if (s.length === 0) {
         this.currentSectionCode !== "" && (this.currentSectionCode = "", this.highlightGraphic = void 0, this.highlightLayer.removeAll()), this.currentJunctionId !== "" && (this.currentJunctionId = "", this.highlightGraphic = void 0, this.highlightLayer.removeAll());
         return;
       }
-      const t = s[0];
-      if (this.hitGraphic = t.graphic, t.layer.id === "OpenDriveLane") {
-        const l = `${this.hitGraphic.attributes.roadId}+${this.hitGraphic.attributes.sectionId}`;
-        if (l === this.currentSectionCode)
+      const e = s[0];
+      if (this.hitGraphic = e.graphic, e.layer.id === "OpenDriveLane") {
+        const r = `${this.hitGraphic.attributes.roadId}+${this.hitGraphic.attributes.sectionId}`;
+        if (r === this.currentSectionCode || this.sectionLayer.graphics.findIndex(
+          (h) => h.getAttribute("id") === r
+        ) >= 0)
           return;
-        this.currentSectionCode = l;
+        this.currentSectionCode = r;
         const a = this.allLaneGraphics.filter(
-          (n) => `${n.attributes.roadId}+${n.attributes.sectionId}` === l
-        ), r = await L.union(
-          a.map((n) => n.geometry)
+          (h) => `${h.attributes.roadId}+${h.attributes.sectionId}` === r
+        ), l = await k.union(
+          a.map((h) => h.geometry)
         );
-        this.highlightGraphic = new d({
-          geometry: r,
+        this.highlightGraphic = new p({
+          geometry: l,
           symbol: {
             type: "simple-fill",
             color: [255, 0, 0, 0.5],
@@ -478,31 +487,16 @@ class N {
           },
           attributes: {
             type: "OpenDriveSection",
-            id: l,
-            detail: ""
+            id: r,
+            selected: !1
           }
         }), this.highlightLayer.removeAll(), this.highlightLayer.add(this.highlightGraphic);
-      } else if (t.layer.id === "OpenDriveJunction") {
-        const l = this.hitGraphic.attributes.id;
-        if (l === this.currentJunctionId)
+      } else if (e.layer.id === "OpenDriveJunction") {
+        const r = this.hitGraphic.attributes.id;
+        if (r === this.currentJunctionId)
           return;
-        this.currentJunctionId = l, this.highlightGraphic = new d({
-          geometry: this.hitGraphic.geometry,
-          symbol: {
-            type: "simple-marker",
-            style: "circle",
-            size: 40,
-            color: [0, 0, 0, 0],
-            outline: {
-              color: [0, 0, 0, 0]
-            }
-          },
-          attributes: {
-            type: "OpenDriveJunction",
-            id: l
-          }
-        });
-        const a = new d({
+        this.currentJunctionId = r;
+        const n = new p({
           geometry: this.hitGraphic.geometry,
           symbol: {
             type: "text",
@@ -516,11 +510,11 @@ ${this.hitGraphic.attributes.id}`,
             yoffset: 40
           }
         });
-        this.highlightLayer.removeAll(), this.highlightLayer.addMany([this.highlightGraphic, a]);
+        this.highlightLayer.removeAll(), this.highlightLayer.add(n);
       }
     });
     this.mouseMoveHandler = this.view.on("pointer-move", async (o) => {
-      e(o).catch(() => {
+      t(o).catch(() => {
       });
     });
   }
@@ -528,42 +522,81 @@ ${this.hitGraphic.attributes.id}`,
    * 监听鼠标点击事件，获取高亮要素的拓扑信息
    */
   monitorMouseClick() {
-    this.mouseClickHandler = this.view.on("immediate-click", async () => {
-      var e, o;
-      if (this.hitGraphic && !this.currentSectionCode) {
-        if (this.currentJunctionId)
-          if (this.hitGraphic.getAttribute("selected") === !1) {
-            const i = `http://${this.openDriveServer}/api/sumo/getSumoJunction`, s = await f.get(i, {
-              params: {
-                id: this.currentJunctionId,
-                projectName: this.projectName
-              }
-            });
-            s.status === 200 && s.data.status === 0 && ((e = this.highlightGraphic) == null || e.setAttribute("detail", s.data.result), this.hitGraphic.setAttribute("selected", !0), this.hitGraphic.symbol.url = "/GisViewerAssets/Images/point_red.png", this.increasePictureMarkerSize(this.hitGraphic, 50));
-          } else
-            (o = this.highlightGraphic) == null || o.setAttribute("detail", void 0), this.hitGraphic.setAttribute("selected", !1), this.hitGraphic.symbol.url = "/GisViewerAssets/Images/point_green.png", this.decreasePictureMarkerSize(this.hitGraphic, 30);
-      }
+    const t = D.debounce(async (o) => {
+      var n;
+      const s = (n = (await this.view.hitTest(o, {
+        include: [this.highlightLayer, this.junctionLayer, this.sectionLayer]
+      })).results) == null ? void 0 : n.filter(
+        (a) => a.type === "graphic"
+      );
+      if (s.length === 0)
+        return;
+      const e = s[0].graphic, c = e.getAttribute("type"), r = e.getAttribute("id");
+      if (c === "OpenDriveJunction")
+        if (e.getAttribute("selected") === !1) {
+          const a = `http://${this.openDriveServer}/api/sumo/getSumoJunction`, l = await f.get(a, {
+            params: {
+              id: r,
+              projectName: this.projectName
+            }
+          });
+          l.status === 200 && l.data.status === 0 && (this.openDriveClickCallback && this.openDriveClickCallback({
+            type: "OpenDriveJunction",
+            id: r,
+            details: l.data.result
+          }), e.setAttribute("selected", !0), e.symbol.url = "/GisViewerAssets/Images/point_red.png", this.increasePictureMarkerSize(e, 50));
+        } else
+          this.openDriveClickCallback && this.openDriveClickCallback({
+            type: "OpenDriveJunction",
+            id: r,
+            details: void 0
+          }), e.setAttribute("selected", !1), e.symbol.url = "/GisViewerAssets/Images/point_green.png", this.decreasePictureMarkerSize(e, 30);
+      else if (c === "OpenDriveSection")
+        if (e.getAttribute("selected"))
+          this.sectionLayer.remove(e), this.openDriveClickCallback && this.openDriveClickCallback({
+            type: "OpenDriveSection",
+            id: r,
+            details: void 0
+          });
+        else {
+          this.highlightLayer.remove(e), this.sectionLayer.add(e), e.setAttribute("selected", !0);
+          const a = `http://${this.openDriveServer}/api/sumo/getSumoEdge`, l = await f.get(a, {
+            params: {
+              id: r,
+              projectName: this.projectName
+            }
+          });
+          l.status === 200 && l.data.status === 0 && this.openDriveClickCallback && this.openDriveClickCallback({
+            type: "OpenDriveSection",
+            id: r,
+            details: l.data.result
+          });
+        }
+    });
+    this.mouseClickHandler = this.view.on("immediate-click", async (o) => {
+      t(o).catch(() => {
+      });
     });
   }
-  increasePictureMarkerSize(e, o) {
+  increasePictureMarkerSize(t, o) {
     const i = setInterval(() => {
-      const s = e.symbol, t = s.width;
-      t < o ? e.symbol = {
+      const s = t.symbol, e = s.width;
+      e < o ? t.symbol = {
         type: "picture-marker",
         url: s.url,
-        width: t + 1,
-        height: t + 1
+        width: e + 1,
+        height: e + 1
       } : clearInterval(i);
     }, 20);
   }
-  decreasePictureMarkerSize(e, o) {
+  decreasePictureMarkerSize(t, o) {
     const i = setInterval(() => {
-      const s = e.symbol, t = s.width;
-      t > o ? e.symbol = {
+      const s = t.symbol, e = s.width;
+      e > o ? t.symbol = {
         type: "picture-marker",
         url: s.url,
-        width: t - 1,
-        height: t - 1
+        width: e - 1,
+        height: e - 1
       } : clearInterval(i);
     }, 20);
   }
@@ -572,11 +605,11 @@ ${this.hitGraphic.attributes.id}`,
    */
   async clearOpenDrive() {
     var o, i;
-    let e = await this.laneLayer.queryFeatures();
-    e.features.length > 0 && await this.laneLayer.applyEdits({
-      deleteFeatures: e.features
-    }), e = await this.roadNameLayer.queryFeatures(), e.features.length > 0 && await this.roadNameLayer.applyEdits({
-      deleteFeatures: e.features
+    let t = await this.laneLayer.queryFeatures();
+    t.features.length > 0 && await this.laneLayer.applyEdits({
+      deleteFeatures: t.features
+    }), t = await this.roadNameLayer.queryFeatures(), t.features.length > 0 && await this.roadNameLayer.applyEdits({
+      deleteFeatures: t.features
     }), this.highlightLayer.removeAll(), this.junctionLayer.removeAll(), this.wasmLoader.clear(), (o = this.mouseMoveHandler) == null || o.remove(), (i = this.mouseClickHandler) == null || i.remove();
   }
   /**
@@ -584,82 +617,112 @@ ${this.hitGraphic.attributes.id}`,
    * @param params
    * @returns
    */
-  async findSumo(e) {
-    const { id: o } = e, i = e.flash === void 0 ? !0 : e.flash, s = o.split("+");
-    if (s.length > 2)
-      return { status: -1, message: "id格式错误" };
-    const t = s.length === 2 ? Number(s[1]) : void 0, h = s[0].split("#");
-    if (h.length > 2)
-      return { status: -1, message: "id格式错误" };
-    let l = h[0];
-    l.startsWith("-") && (l = l.slice(1));
-    const a = h.length === 2 ? Number(h[1]) : void 0;
-    return await this.findLane({ roadsectId: l, segmentId: a, laneId: t, flash: i });
+  async findSumo(t) {
+    const { type: o, id: i } = t, s = t.flash === void 0 ? !0 : t.flash;
+    if (o === "junction")
+      return await this.findJunction(i, s);
+    if (o === "edge") {
+      const e = i.split("+");
+      if (e.length > 2)
+        return { status: -1, message: "id格式错误" };
+      const c = e.length === 2 ? Number(e[1]) : void 0, r = e[0].split("#");
+      if (r.length > 2)
+        return { status: -1, message: "id格式错误" };
+      const n = r[0], a = r.length === 2 ? Number(r[1]) : void 0;
+      return await this.findLane({ roadsectId: n, segmentId: a, laneId: c, flash: s });
+    } else
+      return { status: -1, message: "未知类型" };
+  }
+  async findJunction(t, o) {
+    const i = this.junctionLayer.graphics.find(
+      (s) => s.attributes.id === t
+    );
+    if (!i)
+      return { status: -1, message: "未找到。请检查路口编号" };
+    if (o) {
+      const s = new p({
+        geometry: i.geometry,
+        symbol: {
+          type: "simple-marker",
+          style: "circle",
+          size: 30,
+          color: [255, 0, 0, 0.6],
+          outline: {
+            color: "red",
+            width: 1
+          }
+        }
+      });
+      this.flashGraphic(s);
+    }
+    return await this.view.goTo(i.geometry, { duration: 1e3 }), { status: 0, message: "ok" };
   }
   /**
    * 用sumo的id定位车道、基本段、路段
    * @param params
    * @returns
    */
-  async findLane(e) {
-    let { segmentId: o, laneId: i } = e;
-    const { roadsectId: s } = e;
-    let t = this.allLaneGraphics.filter(
-      (a) => a.attributes.roadId === s
+  async findLane(t) {
+    let { roadsectId: o, segmentId: i, laneId: s } = t;
+    o.startsWith("-") && (o = o.slice(1));
+    let e = this.allLaneGraphics.filter(
+      (n) => n.attributes.roadId === o
     );
-    if (t.length === 0)
+    if (e.length === 0)
       return { status: -1, message: "未找到。请检查路段编号" };
-    if (o !== void 0) {
-      const a = [];
-      if (t.forEach((r) => {
-        const n = Number(r.attributes.sectionId);
-        a.indexOf(n) === -1 && a.push(n);
-      }), a.sort((r, n) => r - n), o > a.length - 1)
+    if (i !== void 0) {
+      const n = [];
+      if (e.forEach((a) => {
+        const l = Number(a.attributes.sectionId);
+        n.indexOf(l) === -1 && n.push(l);
+      }), n.sort((a, l) => a - l), i > n.length - 1)
         return { status: -1, message: "未找到。请检查基本段编号" };
-      o = a[o], t = t.filter(
-        (r) => Number(r.attributes.sectionId) === o
+      i = n[i], e = e.filter(
+        (a) => Number(a.attributes.sectionId) === i
       );
     }
-    if (i !== void 0) {
-      const a = [];
-      if (t.forEach((r) => {
-        const n = Number(r.attributes.laneId);
-        a.indexOf(n) === -1 && a.push(n);
-      }), a.sort((r, n) => r - n), i > a.length - 1)
+    if (s !== void 0) {
+      const n = [];
+      if (e.forEach((a) => {
+        const l = Number(a.attributes.laneId);
+        n.indexOf(l) === -1 && n.push(l);
+      }), n.sort((a, l) => a - l), s > n.length - 1)
         return { status: -1, message: "未找到。请检查车道编号" };
-      i = a[i], t = t.filter(
-        (r) => Number(r.attributes.laneId) === i
+      s = n[s], e = e.filter(
+        (a) => Number(a.attributes.laneId) === s
       );
     }
-    const h = t.map(
-      (a) => a.geometry
-    ), l = await L.union(h);
-    if (e.flash) {
-      this.highlightLayer.removeAll();
-      const a = new d({
-        geometry: l,
+    const c = e.map(
+      (n) => n.geometry
+    ), r = await k.union(c);
+    if (t.flash) {
+      const n = new p({
+        geometry: r,
         symbol: {
           type: "simple-fill",
           color: [255, 0, 0, 0.5],
           style: "solid",
           outline: {
             color: "red",
-            width: 2
+            width: 0
           }
         }
       });
-      this.highlightLayer.add(a);
-      let r = 0, n = !0;
-      const u = setInterval(() => {
-        n ? (this.highlightLayer.opacity -= 0.02, this.highlightLayer.opacity <= 0.1 && (n = !1, r++)) : (this.highlightLayer.opacity += 0.02, this.highlightLayer.opacity >= 1 && (n = !0)), r > 5 && (this.highlightLayer.removeAll(), this.highlightLayer.opacity = 1, clearInterval(u));
-      }, 20);
+      this.flashGraphic(n);
     }
-    return await this.view.goTo(l, { duration: 1e3 }), { status: 0, message: "ok" };
+    return await this.view.goTo(r, { duration: 1e3 }), { status: 0, message: "ok" };
+  }
+  flashGraphic(t) {
+    this.flashLayer.removeAll(), this.flashLayer.add(t);
+    let o = 0, i = !0;
+    const s = setInterval(() => {
+      i ? (this.flashLayer.opacity -= 0.02, this.flashLayer.opacity <= 0.1 && (i = !1, o++)) : (this.flashLayer.opacity += 0.02, this.flashLayer.opacity >= 1 && (i = !0)), o >= 5 && (this.flashLayer.removeAll(), this.flashLayer.opacity = 1, clearInterval(s));
+    }, 10);
   }
-  async splitLane(e) {
-    return { status: 0, message: "ok", result: e };
+  async splitLane(t) {
+    return { status: 0, message: "ok", result: t };
   }
 }
 export {
-  N as default
+  S as default
 };

package/es/src/types/index.d.ts

@@ -216,8 +216,10 @@ export interface IShowOpenDriveFromFileParams {
         showRoadName: boolean;
         centerMap?: boolean;
     };
+    selectedCallback?: (info: any) => void;
 }
 export interface IFindSumoParams {
+    type: string;
     id: string;
     flash?: boolean;
 }
@@ -229,6 +231,7 @@ export interface ISplitOpenDriveLaneParams {
 export interface IJunctionTableData {
     id: string;
     name: string;
+    nodeType: string;
     type: string;
     coordinates: number[];
     district: string;

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

@@ -6,7 +6,9 @@ export default class OpenDriveRenderer {
     private laneLayer;
     private roadNameLayer;
     private junctionLayer;
+    private sectionLayer;
     private highlightLayer;
+    private flashLayer;
     private allLaneGraphics;
     private allRefLineGraphics;
     private mouseMoveHandler;
@@ -15,6 +17,7 @@ export default class OpenDriveRenderer {
     constructor(view: __esri.MapView | __esri.SceneView);
     private projectName;
     private openDriveServer;
+    private openDriveClickCallback;
     showOpenDriveFromFile(params: IShowOpenDriveFromFileParams): Promise<IResult>;
     /**
      * 从服务器载入OpenDrive文件解析结果并显示
@@ -48,11 +51,13 @@ export default class OpenDriveRenderer {
      * @returns
      */
     findSumo(params: IFindSumoParams): Promise<IResult>;
+    private findJunction;
     /**
      * 用sumo的id定位车道、基本段、路段
      * @param params
      * @returns
      */
     private findLane;
+    private flashGraphic;
     splitLane(params: ISplitOpenDriveLaneParams): Promise<IResult>;
 }

package/lib/src/gis-map/utils/open-drive-renderer/index.js

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const u=require("@arcgis/core/Graphic"),C=require("@arcgis/core/core/promiseUtils"),$=require("@arcgis/core/geometry"),A=require("@arcgis/core/geometry/geometryEngineAsync"),D=require("@arcgis/core/layers/FeatureLayer"),j=require("@arcgis/core/layers/GraphicsLayer"),w=require("axios"),S=require("pako"),O=require("../common-utils.js"),M=require("./wasm-loader.js");function k(p){const e=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(p){for(const t in p)if(t!=="default"){const i=Object.getOwnPropertyDescriptor(p,t);Object.defineProperty(e,t,i.get?i:{enumerable:!0,get:()=>p[t]})}}return e.default=p,Object.freeze(e)}const P=k(C),N=k(A);class b{constructor(e){this.wasmLoader=M.default.getInstance(),this.projectName="",this.openDriveServer="",this.currentSectionCode="",this.currentJunctionId="",this.view=e,this.laneLayer=new D({id:"OpenDriveLane",fields:[{name:"ObjectID",alias:"ObjectID",type:"oid"},{name:"id",alias:"编号",type:"string"},{name:"roadId",alias:"道路号",type:"string"},{name:"roadName",alias:"道路名称",type:"string"},{name:"sectionId",alias:"路段号",type:"string"},{name:"laneId",alias:"车道号",type:"string"},{name:"type",alias:"类型",type:"string"},{name:"sumoId",alias:"sumo编号",type:"string"}],objectIdField:"ObjectID",geometryType:"polygon",spatialReference:{wkid:4326},source:[],outFields:["*"],renderer:{type:"unique-value",field:"type",defaultSymbol:{type:"simple-fill",color:[100,100,100],style:"solid",outline:{color:"white",width:1}},uniqueValueInfos:[{value:"shoulder",label:"路肩",symbol:{type:"simple-fill",color:"#008000",style:"solid",outline:{color:"white",width:1}}},{value:"border",label:"路沿",symbol:{type:"simple-fill",color:"#DCDCDC",style:"solid",outline:{color:"white",width:1}}},{value:"driving",label:"机动车道",symbol:{type:"simple-fill",color:[47,79,79,.8],style:"solid",outline:{color:"white",width:1}}},{value:"none",label:"无",symbol:{type:"simple-fill",color:[111,120,135],style:"none",outline:{color:"white",width:1}}},{value:"restricted",label:"禁行区",symbol:{type:"simple-fill",color:"yellow",style:"solid",outline:{color:"yellow",width:2}}},{value:"parking",label:"停车区",symbol:{type:"simple-fill",color:[115,115,115],style:"solid",outline:{color:"white",width:1}}},{value:"median",label:"中央隔离带",symbol:{type:"simple-fill",color:"#008000",style:"solid",outline:{color:"white",width:1}}},{value:"biking",label:"非机动车道",symbol:{type:"simple-fill",color:"#D3D3D3",style:"solid",outline:{color:"white",width:1}}},{value:"sidewalk",label:"人行道",symbol:{type:"simple-fill",color:"#C0C0C0",style:"solid",outline:{color:"white",width:1}}},{value:"junction",label:"路口区域",symbol:{type:"simple-fill",color:"#2F4F4F",style:"solid",outline:{color:"white",width:1}}},{value:"selected",label:"选中车道",symbol:{type:"simple-fill",color:[141,168,211],style:"solid",outline:{color:"white",width:1}}}]}}),this.roadNameLayer=new D({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 j({id:"OpenDriveJunction"}),this.highlightLayer=new j({id:"OpenDriveHighlight"}),this.view.map.addMany([this.laneLayer,this.junctionLayer,this.roadNameLayer,this.highlightLayer])}static getInstance(e){return this.instance||(this.instance=new b(e)),this.instance}async showOpenDriveFromFile(e){var d,c;this.projectName=Date.now().toString(),this.openDriveServer=e.server;const t=`http://${this.openDriveServer}/api/openDrive/uploadXodr`,i=await w.post(t,{},{params:{url:e.file,projectName:this.projectName}});if(i.status!==200)throw new Error(`OpenDriveRenderer: ${i.statusText}`);console.time("渲染用时");const r=i.data.result.geoSetting;O.default.setGeoData(r.geoReference,r.offsetX,r.offsetY);let s=i.data.result.json;s.startsWith(window.location.protocol)||(s=`${window.location.protocol}//${e.server}${s}`);const n=await(await fetch(s)).arrayBuffer(),a=S.inflate(n,{to:"string"}),o=JSON.parse(a);await this.showAllLanes(o,((d=e.options)==null?void 0:d.showJunctionLane)||!1,((c=e.options)==null?void 0:c.showRoadName)||!0);const l=i.data.result.junctions;if(this.showJunction(l),e.options&&e.options.centerMap!==!1){const g=O.default.transformPointProjection([0,0]);await this.view.goTo(g)}return this.mouseMoveHandler||this.monitorMouseMove(),this.mouseClickHandler||this.monitorMouseClick(),console.timeEnd("渲染用时"),{status:0,message:"ok"}}async showOpenDriveFromServer(e,t){const i=`http://${e}/api/openDrive/analyzeXodr`,r=await w.get(i,{headers:{projectName:t},params:{analyze:!1,compressed:!0}});if(r.status!==200)throw new Error(`OpenDriveRenderer: ${r.statusText}`);let s=r.data.result.json;s.startsWith(window.location.protocol)||(s=`${window.location.protocol}//${e}${s}`);const n=await(await fetch(s)).arrayBuffer(),a=S.inflate(n,{to:"string"}),o=JSON.parse(a);return await this.showAllLanes(o,!1,!1),{status:0,message:"ok"}}async showAllLanes(e,t,i){const r=await this.laneLayer.queryFeatures();return r.features.length>0&&this.laneLayer.applyEdits({deleteFeatures:r.features}),this.roadNameLayer.visible=i,new Promise(s=>{let h=0;this.allLaneGraphics=[],this.allRefLineGraphics=[];const n=[];for(const o of e){if(!t&&o.junction!=="-1")continue;const{id:l,refLine:d}=o;let c=o.name;c.includes("(")&&(c=c.slice(0,c.indexOf("("))),c=c.replace(/(.)/g,"$1 ");const g=new u({geometry:{type:"polyline",paths:[d]},attributes:{ObjectID:h++,roadId:l,roadName:c}});this.allRefLineGraphics.push(g);for(const v of o.laneSections){const I=Number(v.id);for(const y of v.lanePaths){const m=Number(y.id);if(m===0)continue;const F=y.type,f=y.innerPath.concat(y.outerPath.reverse());if(f.length<=3){console.warn(`lane ${m} has less than 3 points`);continue}f.push(y.innerPath[0]);const L=new $.Polygon({rings:[f]});if(L){const G=new u({geometry:L,attributes:{ObjectID:h++,id:`${l}+${I}+${m}`,roadId:l,roadName:o.name,sectionId:I,laneId:m,type:F,sumoId:""}});this.allLaneGraphics.push(G),n.push(G)}}}}const a=setInterval(()=>{if(n.length>0||this.allRefLineGraphics.length>0){if(n.length>0){const o=n.splice(0,100);this.laneLayer.applyEdits({addFeatures:o})}if(this.allRefLineGraphics.length>0){const o=this.allRefLineGraphics.splice(0,10);this.roadNameLayer.applyEdits({addFeatures:o})}}else clearInterval(a),s()},10)})}showJunction(e){const t=[];for(const i of e){const r=new u({geometry:{type:"point",x:i.coordinates[0],y:i.coordinates[1]},attributes:{...i,selected:!1},symbol:{type:"picture-marker",url:i.crossId?"/GisViewerAssets/Images/point_green.png":"/GisViewerAssets/Images/normal-cross.png",width:30,height:30}});t.push(r)}this.junctionLayer.addMany(t)}monitorMouseMove(){const e=P.debounce(async t=>{var h;const r=(h=(await this.view.hitTest(t,{include:[this.laneLayer,this.junctionLayer]})).results)==null?void 0:h.filter(n=>n.type==="graphic");if(r.length===0){this.currentSectionCode!==""&&(this.currentSectionCode="",this.highlightGraphic=void 0,this.highlightLayer.removeAll()),this.currentJunctionId!==""&&(this.currentJunctionId="",this.highlightGraphic=void 0,this.highlightLayer.removeAll());return}const s=r[0];if(this.hitGraphic=s.graphic,s.layer.id==="OpenDriveLane"){const n=`${this.hitGraphic.attributes.roadId}+${this.hitGraphic.attributes.sectionId}`;if(n===this.currentSectionCode)return;this.currentSectionCode=n;const a=this.allLaneGraphics.filter(l=>`${l.attributes.roadId}+${l.attributes.sectionId}`===n),o=await N.union(a.map(l=>l.geometry));this.highlightGraphic=new u({geometry:o,symbol:{type:"simple-fill",color:[255,0,0,.5],style:"solid",outline:{color:"red",width:2}},attributes:{type:"OpenDriveSection",id:n,detail:""}}),this.highlightLayer.removeAll(),this.highlightLayer.add(this.highlightGraphic)}else if(s.layer.id==="OpenDriveJunction"){const n=this.hitGraphic.attributes.id;if(n===this.currentJunctionId)return;this.currentJunctionId=n,this.highlightGraphic=new u({geometry:this.hitGraphic.geometry,symbol:{type:"simple-marker",style:"circle",size:40,color:[0,0,0,0],outline:{color:[0,0,0,0]}},attributes:{type:"OpenDriveJunction",id:n}});const a=new u({geometry:this.hitGraphic.geometry,symbol:{type:"text",color:"black",backgroundColor:"gray",text:`${this.hitGraphic.attributes.name}
-${this.hitGraphic.attributes.id}`,font:{size:10},yoffset:40}});this.highlightLayer.removeAll(),this.highlightLayer.addMany([this.highlightGraphic,a])}});this.mouseMoveHandler=this.view.on("pointer-move",async t=>{e(t).catch(()=>{})})}monitorMouseClick(){this.mouseClickHandler=this.view.on("immediate-click",async()=>{var e,t;if(this.hitGraphic&&!this.currentSectionCode){if(this.currentJunctionId)if(this.hitGraphic.getAttribute("selected")===!1){const i=`http://${this.openDriveServer}/api/sumo/getSumoJunction`,r=await w.get(i,{params:{id:this.currentJunctionId,projectName:this.projectName}});r.status===200&&r.data.status===0&&((e=this.highlightGraphic)==null||e.setAttribute("detail",r.data.result),this.hitGraphic.setAttribute("selected",!0),this.hitGraphic.symbol.url="/GisViewerAssets/Images/point_red.png",this.increasePictureMarkerSize(this.hitGraphic,50))}else(t=this.highlightGraphic)==null||t.setAttribute("detail",void 0),this.hitGraphic.setAttribute("selected",!1),this.hitGraphic.symbol.url="/GisViewerAssets/Images/point_green.png",this.decreasePictureMarkerSize(this.hitGraphic,30)}})}increasePictureMarkerSize(e,t){const i=setInterval(()=>{const r=e.symbol,s=r.width;s<t?e.symbol={type:"picture-marker",url:r.url,width:s+1,height:s+1}:clearInterval(i)},20)}decreasePictureMarkerSize(e,t){const i=setInterval(()=>{const r=e.symbol,s=r.width;s>t?e.symbol={type:"picture-marker",url:r.url,width:s-1,height:s-1}:clearInterval(i)},20)}async clearOpenDrive(){var t,i;let e=await this.laneLayer.queryFeatures();e.features.length>0&&await this.laneLayer.applyEdits({deleteFeatures:e.features}),e=await this.roadNameLayer.queryFeatures(),e.features.length>0&&await this.roadNameLayer.applyEdits({deleteFeatures:e.features}),this.highlightLayer.removeAll(),this.junctionLayer.removeAll(),this.wasmLoader.clear(),(t=this.mouseMoveHandler)==null||t.remove(),(i=this.mouseClickHandler)==null||i.remove()}async findSumo(e){const{id:t}=e,i=e.flash===void 0?!0:e.flash,r=t.split("+");if(r.length>2)return{status:-1,message:"id格式错误"};const s=r.length===2?Number(r[1]):void 0,h=r[0].split("#");if(h.length>2)return{status:-1,message:"id格式错误"};let n=h[0];n.startsWith("-")&&(n=n.slice(1));const a=h.length===2?Number(h[1]):void 0;return await this.findLane({roadsectId:n,segmentId:a,laneId:s,flash:i})}async findLane(e){let{segmentId:t,laneId:i}=e;const{roadsectId:r}=e;let s=this.allLaneGraphics.filter(a=>a.attributes.roadId===r);if(s.length===0)return{status:-1,message:"未找到。请检查路段编号"};if(t!==void 0){const a=[];if(s.forEach(o=>{const l=Number(o.attributes.sectionId);a.indexOf(l)===-1&&a.push(l)}),a.sort((o,l)=>o-l),t>a.length-1)return{status:-1,message:"未找到。请检查基本段编号"};t=a[t],s=s.filter(o=>Number(o.attributes.sectionId)===t)}if(i!==void 0){const a=[];if(s.forEach(o=>{const l=Number(o.attributes.laneId);a.indexOf(l)===-1&&a.push(l)}),a.sort((o,l)=>o-l),i>a.length-1)return{status:-1,message:"未找到。请检查车道编号"};i=a[i],s=s.filter(o=>Number(o.attributes.laneId)===i)}const h=s.map(a=>a.geometry),n=await N.union(h);if(e.flash){this.highlightLayer.removeAll();const a=new u({geometry:n,symbol:{type:"simple-fill",color:[255,0,0,.5],style:"solid",outline:{color:"red",width:2}}});this.highlightLayer.add(a);let o=0,l=!0;const d=setInterval(()=>{l?(this.highlightLayer.opacity-=.02,this.highlightLayer.opacity<=.1&&(l=!1,o++)):(this.highlightLayer.opacity+=.02,this.highlightLayer.opacity>=1&&(l=!0)),o>5&&(this.highlightLayer.removeAll(),this.highlightLayer.opacity=1,clearInterval(d))},20)}return await this.view.goTo(n,{duration:1e3}),{status:0,message:"ok"}}async splitLane(e){return{status:0,message:"ok",result:e}}}exports.default=b;
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const d=require("@arcgis/core/Graphic"),F=require("@arcgis/core/core/promiseUtils"),$=require("@arcgis/core/geometry"),J=require("@arcgis/core/geometry/geometryEngineAsync"),j=require("@arcgis/core/layers/FeatureLayer"),m=require("@arcgis/core/layers/GraphicsLayer"),g=require("axios"),G=require("pako"),C=require("../common-utils.js"),M=require("./wasm-loader.js");function N(p){const e=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(p){for(const s in p)if(s!=="default"){const i=Object.getOwnPropertyDescriptor(p,s);Object.defineProperty(e,s,i.get?i:{enumerable:!0,get:()=>p[s]})}}return e.default=p,Object.freeze(e)}const O=N(F),S=N(J);class v{constructor(e){this.wasmLoader=M.default.getInstance(),this.projectName="",this.openDriveServer="",this.currentSectionCode="",this.currentJunctionId="",this.view=e,this.laneLayer=new j({id:"OpenDriveLane",fields:[{name:"ObjectID",alias:"ObjectID",type:"oid"},{name:"id",alias:"编号",type:"string"},{name:"roadId",alias:"道路号",type:"string"},{name:"roadName",alias:"道路名称",type:"string"},{name:"sectionId",alias:"路段号",type:"string"},{name:"laneId",alias:"车道号",type:"string"},{name:"type",alias:"类型",type:"string"},{name:"sumoId",alias:"sumo编号",type:"string"}],objectIdField:"ObjectID",geometryType:"polygon",spatialReference:{wkid:4326},source:[],outFields:["*"],renderer:{type:"unique-value",field:"type",defaultSymbol:{type:"simple-fill",color:[100,100,100],style:"solid",outline:{color:"white",width:1}},uniqueValueInfos:[{value:"shoulder",label:"路肩",symbol:{type:"simple-fill",color:"#008000",style:"solid",outline:{color:"white",width:1}}},{value:"border",label:"路沿",symbol:{type:"simple-fill",color:"#DCDCDC",style:"solid",outline:{color:"white",width:1}}},{value:"driving",label:"机动车道",symbol:{type:"simple-fill",color:[47,79,79,.8],style:"solid",outline:{color:"white",width:1}}},{value:"none",label:"无",symbol:{type:"simple-fill",color:[111,120,135],style:"none",outline:{color:"white",width:1}}},{value:"restricted",label:"禁行区",symbol:{type:"simple-fill",color:"yellow",style:"solid",outline:{color:"yellow",width:2}}},{value:"parking",label:"停车区",symbol:{type:"simple-fill",color:[115,115,115],style:"solid",outline:{color:"white",width:1}}},{value:"median",label:"中央隔离带",symbol:{type:"simple-fill",color:"#008000",style:"solid",outline:{color:"white",width:1}}},{value:"biking",label:"非机动车道",symbol:{type:"simple-fill",color:"#D3D3D3",style:"solid",outline:{color:"white",width:1}}},{value:"sidewalk",label:"人行道",symbol:{type:"simple-fill",color:"#C0C0C0",style:"solid",outline:{color:"white",width:1}}},{value:"junction",label:"路口区域",symbol:{type:"simple-fill",color:"#2F4F4F",style:"solid",outline:{color:"white",width:1}}},{value:"selected",label:"选中车道",symbol:{type:"simple-fill",color:[141,168,211],style:"solid",outline:{color:"white",width:1}}}]}}),this.roadNameLayer=new j({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 m({id:"OpenDriveJunction"}),this.sectionLayer=new m({id:"OpenDriveSection"}),this.highlightLayer=new m({id:"OpenDriveHighlight"}),this.flashLayer=new m({id:"OpenDriveFlash"}),this.view.map.addMany([this.laneLayer,this.junctionLayer,this.sectionLayer,this.roadNameLayer,this.highlightLayer,this.flashLayer])}static getInstance(e){return this.instance||(this.instance=new v(e)),this.instance}async showOpenDriveFromFile(e){var h,u;this.openDriveClickCallback=e.selectedCallback,this.projectName=Date.now().toString(),this.openDriveServer=e.server;const s=`http://${this.openDriveServer}/api/openDrive/uploadXodr`,i=await g.post(s,{},{params:{url:e.file,projectName:this.projectName}});if(i.status!==200)throw new Error(`OpenDriveRenderer: ${i.statusText}`);console.time("渲染用时");const r=i.data.result.geoSetting;C.default.setGeoData(r.geoReference,r.offsetX,r.offsetY);let t=i.data.result.json;t.startsWith(window.location.protocol)||(t=`${window.location.protocol}//${e.server}${t}`);const o=await(await fetch(t)).arrayBuffer(),n=G.inflate(o,{to:"string"}),a=JSON.parse(n);await this.showAllLanes(a,((h=e.options)==null?void 0:h.showJunctionLane)||!1,((u=e.options)==null?void 0:u.showRoadName)||!0);const l=i.data.result.junctions;if(this.showJunction(l),e.options&&e.options.centerMap!==!1){const w=C.default.transformPointProjection([0,0]);await this.view.goTo(w)}return this.mouseMoveHandler||this.monitorMouseMove(),this.mouseClickHandler||this.monitorMouseClick(),console.timeEnd("渲染用时"),{status:0,message:"ok"}}async showOpenDriveFromServer(e,s){const i=`http://${e}/api/openDrive/analyzeXodr`,r=await g.get(i,{headers:{projectName:s},params:{analyze:!1,compressed:!0}});if(r.status!==200)throw new Error(`OpenDriveRenderer: ${r.statusText}`);let t=r.data.result.json;t.startsWith(window.location.protocol)||(t=`${window.location.protocol}//${e}${t}`);const o=await(await fetch(t)).arrayBuffer(),n=G.inflate(o,{to:"string"}),a=JSON.parse(n);return await this.showAllLanes(a,!1,!1),{status:0,message:"ok"}}async showAllLanes(e,s,i){const r=await this.laneLayer.queryFeatures();return r.features.length>0&&this.laneLayer.applyEdits({deleteFeatures:r.features}),this.roadNameLayer.visible=i,new Promise(t=>{let c=0;this.allLaneGraphics=[],this.allRefLineGraphics=[];const o=[];for(const a of e){if(!s&&a.junction!=="-1")continue;const{id:l,refLine:h}=a;let u=a.name;u.includes("(")&&(u=u.slice(0,u.indexOf("("))),u=u.replace(/(.)/g,"$1 ");const w=new d({geometry:{type:"polyline",paths:[h]},attributes:{ObjectID:c++,roadId:l,roadName:u}});this.allRefLineGraphics.push(w);for(const L of a.laneSections){const I=Number(L.id);for(const y of L.lanePaths){const f=Number(y.id);if(f===0)continue;const A=y.type,b=y.innerPath.concat(y.outerPath.reverse());if(b.length<=3){console.warn(`lane ${f} has less than 3 points`);continue}b.push(y.innerPath[0]);const D=new $.Polygon({rings:[b]});if(D){const k=new d({geometry:D,attributes:{ObjectID:c++,id:`${l}+${I}+${f}`,roadId:l,roadName:a.name,sectionId:I,laneId:f,type:A,sumoId:""}});this.allLaneGraphics.push(k),o.push(k)}}}}const n=setInterval(()=>{if(o.length>0||this.allRefLineGraphics.length>0){if(o.length>0){const a=o.splice(0,100);this.laneLayer.applyEdits({addFeatures:a})}if(this.allRefLineGraphics.length>0){const a=this.allRefLineGraphics.splice(0,10);this.roadNameLayer.applyEdits({addFeatures:a})}}else clearInterval(n),t()},10)})}showJunction(e){const s=[];for(const i of e){i.nodeType=i.type;const r=new d({geometry:{type:"point",x:i.coordinates[0],y:i.coordinates[1]},attributes:{...i,selected:!1,type:"OpenDriveJunction"},symbol:{type:"picture-marker",url:i.crossId?"/GisViewerAssets/Images/point_green.png":"/GisViewerAssets/Images/normal-cross.png",width:30,height:30}});s.push(r)}this.junctionLayer.addMany(s)}monitorMouseMove(){const e=O.debounce(async s=>{var c;const r=(c=(await this.view.hitTest(s,{include:[this.laneLayer,this.junctionLayer]})).results)==null?void 0:c.filter(o=>o.type==="graphic");if(r.length===0){this.currentSectionCode!==""&&(this.currentSectionCode="",this.highlightGraphic=void 0,this.highlightLayer.removeAll()),this.currentJunctionId!==""&&(this.currentJunctionId="",this.highlightGraphic=void 0,this.highlightLayer.removeAll());return}const t=r[0];if(this.hitGraphic=t.graphic,t.layer.id==="OpenDriveLane"){const o=`${this.hitGraphic.attributes.roadId}+${this.hitGraphic.attributes.sectionId}`;if(o===this.currentSectionCode||this.sectionLayer.graphics.findIndex(h=>h.getAttribute("id")===o)>=0)return;this.currentSectionCode=o;const a=this.allLaneGraphics.filter(h=>`${h.attributes.roadId}+${h.attributes.sectionId}`===o),l=await S.union(a.map(h=>h.geometry));this.highlightGraphic=new d({geometry:l,symbol:{type:"simple-fill",color:[255,0,0,.5],style:"solid",outline:{color:"red",width:2}},attributes:{type:"OpenDriveSection",id:o,selected:!1}}),this.highlightLayer.removeAll(),this.highlightLayer.add(this.highlightGraphic)}else if(t.layer.id==="OpenDriveJunction"){const o=this.hitGraphic.attributes.id;if(o===this.currentJunctionId)return;this.currentJunctionId=o;const n=new d({geometry:this.hitGraphic.geometry,symbol:{type:"text",color:"black",backgroundColor:"gray",text:`${this.hitGraphic.attributes.name}
+${this.hitGraphic.attributes.id}`,font:{size:10},yoffset:40}});this.highlightLayer.removeAll(),this.highlightLayer.add(n)}});this.mouseMoveHandler=this.view.on("pointer-move",async s=>{e(s).catch(()=>{})})}monitorMouseClick(){const e=O.debounce(async s=>{var n;const r=(n=(await this.view.hitTest(s,{include:[this.highlightLayer,this.junctionLayer,this.sectionLayer]})).results)==null?void 0:n.filter(a=>a.type==="graphic");if(r.length===0)return;const t=r[0].graphic,c=t.getAttribute("type"),o=t.getAttribute("id");if(c==="OpenDriveJunction")if(t.getAttribute("selected")===!1){const a=`http://${this.openDriveServer}/api/sumo/getSumoJunction`,l=await g.get(a,{params:{id:o,projectName:this.projectName}});l.status===200&&l.data.status===0&&(this.openDriveClickCallback&&this.openDriveClickCallback({type:"OpenDriveJunction",id:o,details:l.data.result}),t.setAttribute("selected",!0),t.symbol.url="/GisViewerAssets/Images/point_red.png",this.increasePictureMarkerSize(t,50))}else this.openDriveClickCallback&&this.openDriveClickCallback({type:"OpenDriveJunction",id:o,details:void 0}),t.setAttribute("selected",!1),t.symbol.url="/GisViewerAssets/Images/point_green.png",this.decreasePictureMarkerSize(t,30);else if(c==="OpenDriveSection")if(t.getAttribute("selected"))this.sectionLayer.remove(t),this.openDriveClickCallback&&this.openDriveClickCallback({type:"OpenDriveSection",id:o,details:void 0});else{this.highlightLayer.remove(t),this.sectionLayer.add(t),t.setAttribute("selected",!0);const a=`http://${this.openDriveServer}/api/sumo/getSumoEdge`,l=await g.get(a,{params:{id:o,projectName:this.projectName}});l.status===200&&l.data.status===0&&this.openDriveClickCallback&&this.openDriveClickCallback({type:"OpenDriveSection",id:o,details:l.data.result})}});this.mouseClickHandler=this.view.on("immediate-click",async s=>{e(s).catch(()=>{})})}increasePictureMarkerSize(e,s){const i=setInterval(()=>{const r=e.symbol,t=r.width;t<s?e.symbol={type:"picture-marker",url:r.url,width:t+1,height:t+1}:clearInterval(i)},20)}decreasePictureMarkerSize(e,s){const i=setInterval(()=>{const r=e.symbol,t=r.width;t>s?e.symbol={type:"picture-marker",url:r.url,width:t-1,height:t-1}:clearInterval(i)},20)}async clearOpenDrive(){var s,i;let e=await this.laneLayer.queryFeatures();e.features.length>0&&await this.laneLayer.applyEdits({deleteFeatures:e.features}),e=await this.roadNameLayer.queryFeatures(),e.features.length>0&&await this.roadNameLayer.applyEdits({deleteFeatures:e.features}),this.highlightLayer.removeAll(),this.junctionLayer.removeAll(),this.wasmLoader.clear(),(s=this.mouseMoveHandler)==null||s.remove(),(i=this.mouseClickHandler)==null||i.remove()}async findSumo(e){const{type:s,id:i}=e,r=e.flash===void 0?!0:e.flash;if(s==="junction")return await this.findJunction(i,r);if(s==="edge"){const t=i.split("+");if(t.length>2)return{status:-1,message:"id格式错误"};const c=t.length===2?Number(t[1]):void 0,o=t[0].split("#");if(o.length>2)return{status:-1,message:"id格式错误"};const n=o[0],a=o.length===2?Number(o[1]):void 0;return await this.findLane({roadsectId:n,segmentId:a,laneId:c,flash:r})}else return{status:-1,message:"未知类型"}}async findJunction(e,s){const i=this.junctionLayer.graphics.find(r=>r.attributes.id===e);if(!i)return{status:-1,message:"未找到。请检查路口编号"};if(s){const r=new d({geometry:i.geometry,symbol:{type:"simple-marker",style:"circle",size:30,color:[255,0,0,.6],outline:{color:"red",width:1}}});this.flashGraphic(r)}return await this.view.goTo(i.geometry,{duration:1e3}),{status:0,message:"ok"}}async findLane(e){let{roadsectId:s,segmentId:i,laneId:r}=e;s.startsWith("-")&&(s=s.slice(1));let t=this.allLaneGraphics.filter(n=>n.attributes.roadId===s);if(t.length===0)return{status:-1,message:"未找到。请检查路段编号"};if(i!==void 0){const n=[];if(t.forEach(a=>{const l=Number(a.attributes.sectionId);n.indexOf(l)===-1&&n.push(l)}),n.sort((a,l)=>a-l),i>n.length-1)return{status:-1,message:"未找到。请检查基本段编号"};i=n[i],t=t.filter(a=>Number(a.attributes.sectionId)===i)}if(r!==void 0){const n=[];if(t.forEach(a=>{const l=Number(a.attributes.laneId);n.indexOf(l)===-1&&n.push(l)}),n.sort((a,l)=>a-l),r>n.length-1)return{status:-1,message:"未找到。请检查车道编号"};r=n[r],t=t.filter(a=>Number(a.attributes.laneId)===r)}const c=t.map(n=>n.geometry),o=await S.union(c);if(e.flash){const n=new d({geometry:o,symbol:{type:"simple-fill",color:[255,0,0,.5],style:"solid",outline:{color:"red",width:0}}});this.flashGraphic(n)}return await this.view.goTo(o,{duration:1e3}),{status:0,message:"ok"}}flashGraphic(e){this.flashLayer.removeAll(),this.flashLayer.add(e);let s=0,i=!0;const r=setInterval(()=>{i?(this.flashLayer.opacity-=.02,this.flashLayer.opacity<=.1&&(i=!1,s++)):(this.flashLayer.opacity+=.02,this.flashLayer.opacity>=1&&(i=!0)),s>=5&&(this.flashLayer.removeAll(),this.flashLayer.opacity=1,clearInterval(r))},10)}async splitLane(e){return{status:0,message:"ok",result:e}}}exports.default=v;

package/lib/src/types/index.d.ts

@@ -216,8 +216,10 @@ export interface IShowOpenDriveFromFileParams {
         showRoadName: boolean;
         centerMap?: boolean;
     };
+    selectedCallback?: (info: any) => void;
 }
 export interface IFindSumoParams {
+    type: string;
     id: string;
     flash?: boolean;
 }
@@ -229,6 +231,7 @@ export interface ISplitOpenDriveLaneParams {
 export interface IJunctionTableData {
     id: string;
     name: string;
+    nodeType: string;
     type: string;
     coordinates: number[];
     district: string;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "gisviewer-vue3-arcgis",
-  "version": "1.0.121",
+  "version": "1.0.122",
   "main": "lib/index.js",
   "module": "es/index.mjs",
   "files": [