gisviewer-vue3-arcgis 1.0.121 → 1.0.123

package/es/src/gis-map/style/index.css

@@ -1,4 +1,4 @@
-@import url('@arcgis/core/assets/esri/themes/dark/main.css');
+@import url('@arcgis/core/assets/esri/themes/light/main.css');
 .gis-viewer {
   position: relative;
   width: 100%;

package/es/src/gis-map/utils/custom-layer/custom-wmts-layer.d.ts

@@ -0,0 +1,6 @@
+import BaseTileLayer from '@arcgis/core/layers/BaseTileLayer.js';
+export default class CustomWMTS extends BaseTileLayer {
+    private urlTemplate;
+    constructor(params: any);
+    getTileUrl(level: number, row: number, col: number): string;
+}

package/es/src/gis-map/utils/custom-layer/custom-wmts-layer.mjs

@@ -0,0 +1,21 @@
+import { subclass as a } from "@arcgis/core/core/accessorSupport/decorators";
+import c from "@arcgis/core/layers/BaseTileLayer.js";
+var i = Object.defineProperty, m = Object.getOwnPropertyDescriptor, f = (e, l, t, s) => {
+  for (var r = s > 1 ? void 0 : s ? m(l, t) : l, p = e.length - 1, o; p >= 0; p--)
+    (o = e[p]) && (r = (s ? o(l, t, r) : o(r)) || r);
+  return s && r && i(l, t, r), r;
+};
+let u = class extends c {
+  constructor(e) {
+    super(e), this.urlTemplate = "", this.urlTemplate = e.urlTemplate;
+  }
+  getTileUrl(e, l, t) {
+    return this.urlTemplate.replace("{level}", String(e)).replace("{col}", String(t)).replace("{row}", String(l));
+  }
+};
+u = f([
+  a("CustomWMTS")
+], u);
+export {
+  u as default
+};

package/es/src/gis-map/utils/map-initializer.mjs

@@ -1,21 +1,22 @@
 import b from "@arcgis/core/Basemap";
-import u from "@arcgis/core/config";
+import g from "@arcgis/core/config";
 import * as M from "@arcgis/core/core/reactiveUtils";
-import { Polygon as T, Polyline as z, Point as P } from "@arcgis/core/geometry";
+import { Polygon as P, Polyline as W, Point as T } from "@arcgis/core/geometry";
 import * as f from "@arcgis/core/geometry/support/webMercatorUtils";
-import W from "@arcgis/core/layers/GeoJSONLayer";
+import z from "@arcgis/core/layers/GeoJSONLayer";
 import x from "@arcgis/core/layers/TileLayer";
 import L from "@arcgis/core/layers/WebTileLayer";
 import S from "@arcgis/core/Map";
 import R from "@arcgis/core/views/MapView";
-import H from "@arcgis/core/views/SceneView";
-import I from "@turf/destination";
-import * as O from "@turf/helpers";
-import C from "../stores/index.mjs";
-function k(h, e) {
-  return h && (h.startsWith("http://") || h.startsWith("https://") ? h : e + h);
+import C from "@arcgis/core/views/SceneView";
+import H from "@turf/destination";
+import * as I from "@turf/helpers";
+import O from "../stores/index.mjs";
+import G from "./custom-layer/custom-wmts-layer.mjs";
+function k(l, e) {
+  return l && (l.startsWith("http://") || l.startsWith("https://") ? l : e + l);
 }
-class Q {
+class F {
   constructor() {
     this.mapConfig = {}, this.watchHandleMap = /* @__PURE__ */ new Map(), this.handleIndex = 0, this.zoomWatchHandle = null;
   }
@@ -25,16 +26,16 @@ class Q {
    * @returns view
    */
   async initialize(e) {
-    const i = C.useAppDataStore, t = JSON.parse(JSON.stringify(i.mapConfig));
+    const i = O.useAppDataStore, t = JSON.parse(JSON.stringify(i.mapConfig));
     this.mapConfig = t;
     const { container: a, markerClickCallback: r, mapClickCallback: d } = e;
-    u.assetsPath = `${t.assetsRoot}/ArcgisAssets`, u.fontsUrl = `${t.assetsRoot}/fonts`, u.apiKey = "AAPKf5a3e1044d7a4faeb3b1ec7060f5c68equIrP2KbRyL-t_b40Kk4GTWUQ1BFCyttvyQPQnWpFmBd7kp9gkrVihjfmcKBwxjW";
+    g.assetsPath = `${t.assetsRoot}/ArcgisAssets`, g.fontsUrl = `${t.assetsRoot}/fonts`, g.apiKey = "AAPKf5a3e1044d7a4faeb3b1ec7060f5c68equIrP2KbRyL-t_b40Kk4GTWUQ1BFCyttvyQPQnWpFmBd7kp9gkrVihjfmcKBwxjW";
     const n = new S();
     if ((t == null ? void 0 : t.mapOptions.mode.toLowerCase()) === "2d" ? this.view = new R({
       map: n,
       container: a,
       ...t.mapOptions
-    }) : this.view = new H({
+    }) : this.view = new C({
       map: n,
       container: a,
       environment: {
@@ -93,11 +94,11 @@ class Q {
         );
       });
     }), t != null && t.baseLayers ? t.baseLayers.forEach((s) => {
-      const l = k(s.url, t.assetsRoot);
+      const h = k(s.url, t.assetsRoot);
       switch (s.type.toLowerCase()) {
         case "webTile".toLowerCase(): {
           const c = new L({
-            urlTemplate: l,
+            urlTemplate: h,
             ...s.options
           });
           n.add(c);
@@ -105,7 +106,15 @@ class Q {
         }
         case "tile": {
           const c = new x({
-            url: l,
+            url: h,
+            ...s.options
+          });
+          n.add(c);
+          break;
+        }
+        case "customWMTS".toLowerCase(): {
+          const c = new G({
+            urlTemplate: h,
             ...s.options
           });
           n.add(c);
@@ -124,12 +133,12 @@ class Q {
       }
     }), t != null && t.hdLayers) {
       const s = t.hdLayers.map(
-        (l) => (
+        (h) => (
           // 图层文件为GeoJson格式, renderer和symbol使用autocast配置
-          new W({
-            url: k(l.url, t.assetsRoot),
-            ...l.options,
-            title: l.options.id
+          new z({
+            url: k(h.url, t.assetsRoot),
+            ...h.options,
+            title: h.options.id
           })
         )
       );
@@ -137,23 +146,23 @@ class Q {
     }
     this.view.ui.remove("attribution"), this.view.ui.add("compass", "top-left"), await this.view.when();
     const p = this.mapConfig.camera;
-    let g;
+    let u;
     if (this.view.type === "2d") {
       let s = this.view.center;
       this.view.spatialReference.isWebMercator && (s = f.webMercatorToGeographic(
         s
-      )), g = { center: [s.x, s.y], zoom: this.view.zoom };
+      )), u = { center: [s.x, s.y], zoom: this.view.zoom };
     } else {
       let s = this.view.camera.position;
       this.view.spatialReference.isWebMercator && (s = f.webMercatorToGeographic(
         s
-      )), g = {
+      )), u = {
         position: s,
         heading: this.view.camera.heading,
         tilt: this.view.camera.tilt
       };
     }
-    return p ? p.home = g : this.mapConfig.camera = { home: g }, this.view;
+    return p ? p.home = u : this.mapConfig.camera = { home: u }, this.view;
   }
   setLayerVisibility(e) {
     const { id: i, visible: t } = e, a = this.view.map.findLayerById(i);
@@ -171,13 +180,13 @@ class Q {
     if (e.center || e.target) {
       switch ((i = e.target) == null ? void 0 : i.type) {
         case "point":
-          e.target = new P(e.target);
+          e.target = new T(e.target);
           break;
         case "polyline":
-          e.target = new z(e.target);
+          e.target = new W(e.target);
           break;
         case "polygon":
-          e.target = new T(e.target);
+          e.target = new P(e.target);
           break;
       }
       await this.view.goTo(e, { duration: (e.duration || 0) * 1e3 });
@@ -205,8 +214,8 @@ class Q {
         { duration: (e.duration || 2) * 1e3 }
       );
     else {
-      const a = Math.tan(i * Math.PI / 180) * e.height, r = I(
-        O.point(e.center),
+      const a = Math.tan(i * Math.PI / 180) * e.height, r = H(
+        I.point(e.center),
         a,
         t + 180,
         {
@@ -252,7 +261,7 @@ class Q {
   }
   transformPoints(e) {
     return e.map((i) => {
-      const t = new P({
+      const t = new T({
         x: i[0],
         y: i[1]
       }), a = this.view.toScreen(t);
@@ -280,5 +289,5 @@ class Q {
   }
 }
 export {
-  Q as default
+  F as default
 };

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,8 @@ export default class OpenDriveRenderer {
     constructor(view: __esri.MapView | __esri.SceneView);
     private projectName;
     private openDriveServer;
+    private openDriveClickCallback;
+    private makeMd5FromFile;
     showOpenDriveFromFile(params: IShowOpenDriveFromFileParams): Promise<IResult>;
     /**
      * 从服务器载入OpenDrive文件解析结果并显示
@@ -48,11 +52,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,21 @@
-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 f from "axios";
-import j from "pako";
-import S 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({
+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 f from "@arcgis/core/layers/GraphicsLayer";
+import g from "axios";
+import F from "md5";
+import G from "pako";
+import j from "../common-utils.mjs";
+import A from "./wasm-loader.mjs";
+class S {
+  constructor(t) {
+    this.wasmLoader = A.getInstance(), this.projectName = "", this.openDriveServer = "", this.currentSectionCode = "", this.currentJunctionId = "", this.view = t, this.view.popup.visibleElements = {
+      closeButton: !1,
+      collapseButton: !1,
+      actionBar: !1
+    }, this.laneLayer = new C({
       id: "OpenDriveLane",
       fields: [
         {
@@ -218,7 +223,7 @@ class N {
           }
         ]
       }
-    }), this.roadNameLayer = new G({
+    }), this.roadNameLayer = new C({
       id: "OpenDriveRoadName",
       fields: [
         {
@@ -268,50 +273,62 @@ class N {
           }
         }
       ]
-    }), this.junctionLayer = new D({ id: "OpenDriveJunction" }), this.highlightLayer = new D({ id: "OpenDriveHighlight" }), this.view.map.addMany([
+    }), this.junctionLayer = new f({ id: "OpenDriveJunction" }), this.sectionLayer = new f({ id: "OpenDriveSection" }), this.highlightLayer = new f({ id: "OpenDriveHighlight" }), this.flashLayer = new f({ 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;
-    const o = `http://${this.openDriveServer}/api/openDrive/uploadXodr`, i = await f.post(
-      o,
-      {},
-      {
-        params: {
-          url: e.file,
-          projectName: this.projectName
+  async makeMd5FromFile(t) {
+    const i = await (await fetch(t)).text();
+    return F(i);
+  }
+  async showOpenDriveFromFile(t) {
+    var h, d;
+    this.openDriveClickCallback = t.selectedCallback, this.projectName = await this.makeMd5FromFile(t.file), this.openDriveServer = t.server, await this.makeMd5FromFile(t.file);
+    const a = `http://${this.openDriveServer}/api/openDrive/uploadXodr`;
+    let i;
+    try {
+      i = await g.post(
+        a,
+        {},
+        {
+          params: {
+            url: t.file,
+            projectName: this.projectName
+          }
         }
-      }
-    );
+      );
+    } catch (u) {
+      return { status: -1, message: u.message };
+    }
     if (i.status !== 200)
-      throw new Error(`OpenDriveRenderer: ${i.statusText}`);
+      return { status: -1, message: 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" }), o = 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
+      o,
+      ((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 u = j.transformPointProjection([0, 0]);
+      await this.view.goTo(u);
     }
     return this.mouseMoveHandler || this.monitorMouseMove(), this.mouseClickHandler || this.monitorMouseClick(), console.timeEnd("渲染用时"), { status: 0, message: "ok" };
   }
@@ -320,10 +337,10 @@ 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, a) {
+    const i = `http://${t}/api/openDrive/analyzeXodr`, s = await g.get(i, {
       headers: {
-        projectName: o
+        projectName: a
       },
       params: {
         analyze: !1,
@@ -332,141 +349,148 @@ 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" }), o = JSON.parse(n);
+    return await this.showAllLanes(o, !1, !1), { status: 0, message: "ok" };
   }
-  async showAllLanes(e, o, i) {
+  async showAllLanes(t, a, 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 o of t) {
+        if (!a && o.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 } = o;
+        let d = o.name;
+        d.includes("(") && (d = d.slice(0, d.indexOf("("))), d = d.replace(/(.)/g, "$1 ");
+        const u = 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);
-            if (y === 0)
+        this.allRefLineGraphics.push(u);
+        for (const v of o.laneSections) {
+          const b = Number(v.id);
+          for (const y of v.lanePaths) {
+            const m = Number(y.id);
+            if (m === 0)
               continue;
-            const k = p.type, g = p.innerPath.concat(
-              p.outerPath.reverse()
+            const O = y.type, w = y.innerPath.concat(
+              y.outerPath.reverse()
             );
-            if (g.length <= 3) {
-              console.warn(`lane ${y} has less than 3 points`);
+            if (w.length <= 3) {
+              console.warn(`lane ${m} has less than 3 points`);
               continue;
             }
-            g.push(p.innerPath[0]);
-            const v = new C({
-              rings: [g]
+            w.push(y.innerPath[0]);
+            const I = new N({
+              rings: [w]
             });
-            if (v) {
-              const I = new d({
-                geometry: v,
+            if (I) {
+              const L = new p({
+                geometry: I,
                 attributes: {
-                  ObjectID: h++,
-                  id: `${n}+${b}+${y}`,
-                  roadId: n,
-                  roadName: r.name,
+                  ObjectID: c++,
+                  id: `${l}+${b}+${m}`,
+                  roadId: l,
+                  roadName: o.name,
                   sectionId: b,
-                  laneId: y,
-                  type: k,
+                  laneId: m,
+                  type: O,
                   sumoId: ""
                 }
               });
-              this.allLaneGraphics.push(I), l.push(I);
+              this.allLaneGraphics.push(L), r.push(L);
             }
           }
         }
       }
-      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 o = r.splice(0, 100);
             this.laneLayer.applyEdits({
-              addFeatures: r
+              addFeatures: o
             });
           }
           if (this.allRefLineGraphics.length > 0) {
-            const r = this.allRefLineGraphics.splice(0, 10);
+            const o = this.allRefLineGraphics.splice(0, 10);
             this.roadNameLayer.applyEdits({
-              addFeatures: r
+              addFeatures: o
             });
           }
         } else
-          clearInterval(a), t();
+          clearInterval(n), e();
       }, 10);
     });
   }
-  showJunction(e) {
-    const o = [];
-    for (const i of e) {
-      const s = new d({
+  showJunction(t) {
+    const a = [];
+    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",
+          url: i.crossId ? "/GisViewerAssets/Images/point_green.png" : "/GisViewerAssets/Images/point_yellow.png",
           width: 30,
           height: 30
         }
       });
-      o.push(s);
+      a.push(s);
     }
-    this.junctionLayer.addMany(o);
+    this.junctionLayer.addMany(a);
   }
   /**
    * 监听鼠标移动事件，高亮显示鼠标所在路段和路口
    */
   monitorMouseMove() {
-    const e = O.debounce(async (o) => {
-      var h;
-      const s = (h = (await this.view.hitTest(o, {
+    const t = D.debounce(async (a) => {
+      var c;
+      const s = (c = (await this.view.hitTest(a, {
         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());
+        this.currentSectionCode !== "" && (this.currentSectionCode = "", this.highlightGraphic = void 0, this.highlightLayer.removeAll()), this.currentJunctionId !== "" && (this.currentJunctionId = "", this.view.popup.close());
         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;
-        const a = this.allLaneGraphics.filter(
-          (n) => `${n.attributes.roadId}+${n.attributes.sectionId}` === l
-        ), r = await L.union(
-          a.map((n) => n.geometry)
+        this.currentSectionCode = r;
+        const o = this.allLaneGraphics.filter(
+          (h) => `${h.attributes.roadId}+${h.attributes.sectionId}` === r
+        ), l = await k.union(
+          o.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,49 +502,28 @@ 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.getAttribute("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
-          }
+        this.currentJunctionId = r;
+        const n = this.hitGraphic.getAttribute("name"), o = this.hitGraphic.getAttribute("crossId");
+        this.view.popup.open({
+          title: n,
+          content: `<table>
+          <tr><td>路口编号</td><td>${r}</td></tr>
+          <tr><td>信号机编号</td><td>${o || "无信控"}</td></tr>
+          </table>`,
+          location: this.hitGraphic.geometry
         });
-        const a = 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.addMany([this.highlightGraphic, a]);
       }
     });
-    this.mouseMoveHandler = this.view.on("pointer-move", async (o) => {
-      e(o).catch(() => {
+    this.mouseMoveHandler = this.view.on("pointer-move", async (a) => {
+      t(a).catch(() => {
       });
     });
   }
@@ -528,42 +531,84 @@ ${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 (a) => {
+      var n;
+      const s = (n = (await this.view.hitTest(a, {
+        include: [this.highlightLayer, this.junctionLayer, this.sectionLayer]
+      })).results) == null ? void 0 : n.filter(
+        (o) => o.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 o = `http://${this.openDriveServer}/api/sumo/getSumoJunction`, l = await g.get(o, {
+            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);
+          const o = e.getAttribute("crossId");
+          e.symbol.url = o ? "/GisViewerAssets/Images/point_green.png" : "/GisViewerAssets/Images/point_yellow.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 o = `http://${this.openDriveServer}/api/sumo/getSumoEdge`, l = await g.get(o, {
+            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 (a) => {
+      t(a).catch(() => {
+      });
     });
   }
-  increasePictureMarkerSize(e, o) {
+  increasePictureMarkerSize(t, a) {
     const i = setInterval(() => {
-      const s = e.symbol, t = s.width;
-      t < o ? e.symbol = {
+      const s = t.symbol, e = s.width;
+      e < a ? 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, a) {
     const i = setInterval(() => {
-      const s = e.symbol, t = s.width;
-      t > o ? e.symbol = {
+      const s = t.symbol, e = s.width;
+      e > a ? t.symbol = {
         type: "picture-marker",
         url: s.url,
-        width: t - 1,
-        height: t - 1
+        width: e - 1,
+        height: e - 1
       } : clearInterval(i);
     }, 20);
   }
@@ -571,95 +616,125 @@ ${this.hitGraphic.attributes.id}`,
    * 清除OpenDrive内容
    */
   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
-    }), this.highlightLayer.removeAll(), this.junctionLayer.removeAll(), this.wasmLoader.clear(), (o = this.mouseMoveHandler) == null || o.remove(), (i = this.mouseClickHandler) == null || i.remove();
+    var a, i;
+    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(), (a = this.mouseMoveHandler) == null || a.remove(), (i = this.mouseClickHandler) == null || i.remove();
   }
   /**
    * 用sumo的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: a, id: i } = t, s = t.flash === void 0 ? !0 : t.flash;
+    if (a === "junction")
+      return await this.findJunction(i, s);
+    if (a === "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], o = r.length === 2 ? Number(r[1]) : void 0;
+      return await this.findLane({ roadsectId: n, segmentId: o, laneId: c, flash: s });
+    } else
+      return { status: -1, message: "未知类型" };
+  }
+  async findJunction(t, a) {
+    const i = this.junctionLayer.graphics.find(
+      (s) => s.attributes.id === t
+    );
+    if (!i)
+      return { status: -1, message: "未找到。请检查路口编号" };
+    if (a) {
+      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: a, segmentId: i, laneId: s } = t;
+    a.startsWith("-") && (a = a.slice(1));
+    let e = this.allLaneGraphics.filter(
+      (n) => n.attributes.roadId === a
     );
-    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((o) => {
+        const l = Number(o.attributes.sectionId);
+        n.indexOf(l) === -1 && n.push(l);
+      }), n.sort((o, l) => o - 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(
+        (o) => Number(o.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((o) => {
+        const l = Number(o.attributes.laneId);
+        n.indexOf(l) === -1 && n.push(l);
+      }), n.sort((o, l) => o - 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(
+        (o) => Number(o.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 a = 0, i = !0;
+    const s = setInterval(() => {
+      i ? (this.flashLayer.opacity -= 0.02, this.flashLayer.opacity <= 0.1 && (i = !1, a++)) : (this.flashLayer.opacity += 0.02, this.flashLayer.opacity >= 1 && (i = !0)), a >= 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/style/index.css

@@ -1,4 +1,4 @@
-@import url('@arcgis/core/assets/esri/themes/dark/main.css');
+@import url('@arcgis/core/assets/esri/themes/light/main.css');
 .gis-viewer {
   position: relative;
   width: 100%;

package/lib/src/gis-map/utils/custom-layer/custom-wmts-layer.d.ts

@@ -0,0 +1,6 @@
+import BaseTileLayer from '@arcgis/core/layers/BaseTileLayer.js';
+export default class CustomWMTS extends BaseTileLayer {
+    private urlTemplate;
+    constructor(params: any);
+    getTileUrl(level: number, row: number, col: number): string;
+}

package/lib/src/gis-map/utils/custom-layer/custom-wmts-layer.js

@@ -0,0 +1 @@
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const o=require("@arcgis/core/core/accessorSupport/decorators"),c=require("@arcgis/core/layers/BaseTileLayer.js");var i=Object.defineProperty,p=Object.getOwnPropertyDescriptor,n=(s,e,l,t)=>{for(var r=t>1?void 0:t?p(e,l):e,u=s.length-1,a;u>=0;u--)(a=s[u])&&(r=(t?a(e,l,r):a(r))||r);return t&&r&&i(e,l,r),r};exports.default=class extends c{constructor(e){super(e),this.urlTemplate="",this.urlTemplate=e.urlTemplate}getTileUrl(e,l,t){return this.urlTemplate.replace("{level}",String(e)).replace("{col}",String(t)).replace("{row}",String(l))}};exports.default=n([o.subclass("CustomWMTS")],exports.default);

package/lib/src/gis-map/utils/map-initializer.js

@@ -1 +1 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const P=require("@arcgis/core/Basemap"),y=require("@arcgis/core/config"),z=require("@arcgis/core/core/reactiveUtils"),g=require("@arcgis/core/geometry"),q=require("@arcgis/core/geometry/support/webMercatorUtils"),O=require("@arcgis/core/layers/GeoJSONLayer"),S=require("@arcgis/core/layers/TileLayer"),W=require("@arcgis/core/layers/WebTileLayer"),x=require("@arcgis/core/Map"),L=require("@arcgis/core/views/MapView"),R=require("@arcgis/core/views/SceneView"),H=require("@turf/destination"),I=require("@turf/helpers"),_=require("../stores/index.js");function b(r){const e=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(r){for(const i in r)if(i!=="default"){const t=Object.getOwnPropertyDescriptor(r,i);Object.defineProperty(e,i,t.get?t:{enumerable:!0,get:()=>r[i]})}}return e.default=r,Object.freeze(e)}const k=b(z),p=b(q),C=b(I);function T(r,e){return r&&(r.startsWith("http://")||r.startsWith("https://")?r:e+r)}class G{constructor(){this.mapConfig={},this.watchHandleMap=new Map,this.handleIndex=0,this.zoomWatchHandle=null}async initialize(e){const i=_.default.useAppDataStore,t=JSON.parse(JSON.stringify(i.mapConfig));this.mapConfig=t;const{container:o,markerClickCallback:n,mapClickCallback:f}=e;y.assetsPath=`${t.assetsRoot}/ArcgisAssets`,y.fontsUrl=`${t.assetsRoot}/fonts`,y.apiKey="AAPKf5a3e1044d7a4faeb3b1ec7060f5c68equIrP2KbRyL-t_b40Kk4GTWUQ1BFCyttvyQPQnWpFmBd7kp9gkrVihjfmcKBwxjW";const c=new x;if((t==null?void 0:t.mapOptions.mode.toLowerCase())==="2d"?this.view=new L({map:c,container:o,...t.mapOptions}):this.view=new R({map:c,container:o,environment:{atmosphereEnabled:!0,lighting:{type:"virtual"}},...t==null?void 0:t.mapOptions}),this.view.on("click",async s=>{var v,M;if(f){let a=s.mapPoint;a.spatialReference.isWebMercator&&(a=p.webMercatorToGeographic(a)),f([a.x,a.y],[s.screenPoint.x,s.screenPoint.y],s)}if(this.view.type==="3d"){const a=this.view.camera;if(this.view.spatialReference.isWebMercator){const u=p.webMercatorToGeographic(a.position),d={heading:a.heading,tilt:a.tilt,position:u.toJSON()};console.log(d),(v=navigator.clipboard)==null||v.writeText(JSON.stringify(d))}else console.log(a.toJSON());console.log(this.view.zoom,this.view.scale)}else{let a=this.view.center;this.view.spatialReference.isWebMercator&&(a=p.webMercatorToGeographic(a)),console.log({center:a.toJSON(),zoom:this.view.zoom})}const l=(M=(await this.view.hitTest(s)).results)==null?void 0:M.filter(a=>a.type==="graphic");l.length>0&&l.forEach(a=>{var d;const u=a.graphic;(d=u.attributes)!=null&&d.type&&n&&n(u.attributes.type,u.attributes.id,u.attributes,s)})}),t!=null&&t.baseLayers?t.baseLayers.forEach(s=>{const h=T(s.url,t.assetsRoot);switch(s.type.toLowerCase()){case"webTile".toLowerCase():{const l=new W({urlTemplate:h,...s.options});c.add(l);break}case"tile":{const l=new S({url:h,...s.options});c.add(l);break}case"arcgis":{const l=new P(s.options);c.basemap=l;break}}}):c.basemap=new P({style:{id:"arcgis/dark-gray",language:"zh-CN"}}),t!=null&&t.hdLayers){const s=t.hdLayers.map(h=>new O({url:T(h.url,t.assetsRoot),...h.options,title:h.options.id}));c.addMany(s)}this.view.ui.remove("attribution"),this.view.ui.add("compass","top-left"),await this.view.when();const w=this.mapConfig.camera;let m;if(this.view.type==="2d"){let s=this.view.center;this.view.spatialReference.isWebMercator&&(s=p.webMercatorToGeographic(s)),m={center:[s.x,s.y],zoom:this.view.zoom}}else{let s=this.view.camera.position;this.view.spatialReference.isWebMercator&&(s=p.webMercatorToGeographic(s)),m={position:s,heading:this.view.camera.heading,tilt:this.view.camera.tilt}}return w?w.home=m:this.mapConfig.camera={home:m},this.view}setLayerVisibility(e){const{id:i,visible:t}=e,o=this.view.map.findLayerById(i);return o?(o.visible=t,{status:0,message:"ok"}):{status:-1,message:"未找到图层"}}async setMapCenter(e){var i;if(!this.view)return{status:-1,message:"未初始化"};if(e.center||e.target){switch((i=e.target)==null?void 0:i.type){case"point":e.target=new g.Point(e.target);break;case"polyline":e.target=new g.Polyline(e.target);break;case"polygon":e.target=new g.Polygon(e.target);break}await this.view.goTo(e,{duration:(e.duration||0)*1e3})}return{status:0,message:"成功"}}async lookAt(e){if(this.view.type==="2d")return;const i=e.tilt||0,t=e.heading||0;if(i===0)await this.view.goTo({position:{x:e.center[0],y:e.center[1],z:e.height},heading:t,tilt:0},{duration:(e.duration||2)*1e3});else{const o=Math.tan(i*Math.PI/180)*e.height,n=H(C.point(e.center),o,t+180,{units:"meters"});await this.view.goTo({position:{x:n.geometry.coordinates[0],y:n.geometry.coordinates[1],z:e.height},heading:t,tilt:i},{duration:(e.duration||2)*1e3})}}async setMapCamera(e){if(!this.view)return{status:-1,message:"未初始化"};const{name:i,duration:t=0}=e,{camera:o}=this.mapConfig;if(!o)return{status:-1,message:"未配置camera"};const n=o[i];return n?(await this.view.goTo(n,{duration:t*1e3}),{status:0,message:"成功"}):{status:-1,message:"未配置camera"}}requestCoordinateTransform(e,i){let t=0;const n=1e3/30,f=k.watch(()=>this.view.center,()=>{const c=this.transformPoints(e),w=Date.now();w-t>n&&(i(c),t=w)});return this.handleIndex++,this.watchHandleMap.set(this.handleIndex,f),{handle:this.handleIndex,points:this.transformPoints(e)}}transformPoints(e){return e.map(i=>{const t=new g.Point({x:i[0],y:i[1]}),o=this.view.toScreen(t);return[o.x,o.y]})}cancelCoordinateTransform(e){const i=this.watchHandleMap.get(e);i&&(i.remove(),this.watchHandleMap.delete(e))}setMapZoomRange(e){const{min:i,max:t}=e;!i&&!t||(this.zoomWatchHandle&&this.zoomWatchHandle.remove(),this.zoomWatchHandle=k.watch(()=>this.view.zoom,o=>{i&&o<=i&&(this.view.zoom=i),t&&o>=t&&(this.view.zoom=t)}))}}exports.default=G;
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const P=require("@arcgis/core/Basemap"),y=require("@arcgis/core/config"),q=require("@arcgis/core/core/reactiveUtils"),g=require("@arcgis/core/geometry"),z=require("@arcgis/core/geometry/support/webMercatorUtils"),W=require("@arcgis/core/layers/GeoJSONLayer"),O=require("@arcgis/core/layers/TileLayer"),S=require("@arcgis/core/layers/WebTileLayer"),L=require("@arcgis/core/Map"),x=require("@arcgis/core/views/MapView"),R=require("@arcgis/core/views/SceneView"),H=require("@turf/destination"),I=require("@turf/helpers"),_=require("../stores/index.js"),C=require("./custom-layer/custom-wmts-layer.js");function b(r){const e=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(r){for(const i in r)if(i!=="default"){const t=Object.getOwnPropertyDescriptor(r,i);Object.defineProperty(e,i,t.get?t:{enumerable:!0,get:()=>r[i]})}}return e.default=r,Object.freeze(e)}const T=b(q),p=b(z),G=b(I);function k(r,e){return r&&(r.startsWith("http://")||r.startsWith("https://")?r:e+r)}class N{constructor(){this.mapConfig={},this.watchHandleMap=new Map,this.handleIndex=0,this.zoomWatchHandle=null}async initialize(e){const i=_.default.useAppDataStore,t=JSON.parse(JSON.stringify(i.mapConfig));this.mapConfig=t;const{container:o,markerClickCallback:n,mapClickCallback:f}=e;y.assetsPath=`${t.assetsRoot}/ArcgisAssets`,y.fontsUrl=`${t.assetsRoot}/fonts`,y.apiKey="AAPKf5a3e1044d7a4faeb3b1ec7060f5c68equIrP2KbRyL-t_b40Kk4GTWUQ1BFCyttvyQPQnWpFmBd7kp9gkrVihjfmcKBwxjW";const c=new L;if((t==null?void 0:t.mapOptions.mode.toLowerCase())==="2d"?this.view=new x({map:c,container:o,...t.mapOptions}):this.view=new R({map:c,container:o,environment:{atmosphereEnabled:!0,lighting:{type:"virtual"}},...t==null?void 0:t.mapOptions}),this.view.on("click",async s=>{var v,M;if(f){let a=s.mapPoint;a.spatialReference.isWebMercator&&(a=p.webMercatorToGeographic(a)),f([a.x,a.y],[s.screenPoint.x,s.screenPoint.y],s)}if(this.view.type==="3d"){const a=this.view.camera;if(this.view.spatialReference.isWebMercator){const u=p.webMercatorToGeographic(a.position),d={heading:a.heading,tilt:a.tilt,position:u.toJSON()};console.log(d),(v=navigator.clipboard)==null||v.writeText(JSON.stringify(d))}else console.log(a.toJSON());console.log(this.view.zoom,this.view.scale)}else{let a=this.view.center;this.view.spatialReference.isWebMercator&&(a=p.webMercatorToGeographic(a)),console.log({center:a.toJSON(),zoom:this.view.zoom})}const l=(M=(await this.view.hitTest(s)).results)==null?void 0:M.filter(a=>a.type==="graphic");l.length>0&&l.forEach(a=>{var d;const u=a.graphic;(d=u.attributes)!=null&&d.type&&n&&n(u.attributes.type,u.attributes.id,u.attributes,s)})}),t!=null&&t.baseLayers?t.baseLayers.forEach(s=>{const h=k(s.url,t.assetsRoot);switch(s.type.toLowerCase()){case"webTile".toLowerCase():{const l=new S({urlTemplate:h,...s.options});c.add(l);break}case"tile":{const l=new O({url:h,...s.options});c.add(l);break}case"customWMTS".toLowerCase():{const l=new C.default({urlTemplate:h,...s.options});c.add(l);break}case"arcgis":{const l=new P(s.options);c.basemap=l;break}}}):c.basemap=new P({style:{id:"arcgis/dark-gray",language:"zh-CN"}}),t!=null&&t.hdLayers){const s=t.hdLayers.map(h=>new W({url:k(h.url,t.assetsRoot),...h.options,title:h.options.id}));c.addMany(s)}this.view.ui.remove("attribution"),this.view.ui.add("compass","top-left"),await this.view.when();const w=this.mapConfig.camera;let m;if(this.view.type==="2d"){let s=this.view.center;this.view.spatialReference.isWebMercator&&(s=p.webMercatorToGeographic(s)),m={center:[s.x,s.y],zoom:this.view.zoom}}else{let s=this.view.camera.position;this.view.spatialReference.isWebMercator&&(s=p.webMercatorToGeographic(s)),m={position:s,heading:this.view.camera.heading,tilt:this.view.camera.tilt}}return w?w.home=m:this.mapConfig.camera={home:m},this.view}setLayerVisibility(e){const{id:i,visible:t}=e,o=this.view.map.findLayerById(i);return o?(o.visible=t,{status:0,message:"ok"}):{status:-1,message:"未找到图层"}}async setMapCenter(e){var i;if(!this.view)return{status:-1,message:"未初始化"};if(e.center||e.target){switch((i=e.target)==null?void 0:i.type){case"point":e.target=new g.Point(e.target);break;case"polyline":e.target=new g.Polyline(e.target);break;case"polygon":e.target=new g.Polygon(e.target);break}await this.view.goTo(e,{duration:(e.duration||0)*1e3})}return{status:0,message:"成功"}}async lookAt(e){if(this.view.type==="2d")return;const i=e.tilt||0,t=e.heading||0;if(i===0)await this.view.goTo({position:{x:e.center[0],y:e.center[1],z:e.height},heading:t,tilt:0},{duration:(e.duration||2)*1e3});else{const o=Math.tan(i*Math.PI/180)*e.height,n=H(G.point(e.center),o,t+180,{units:"meters"});await this.view.goTo({position:{x:n.geometry.coordinates[0],y:n.geometry.coordinates[1],z:e.height},heading:t,tilt:i},{duration:(e.duration||2)*1e3})}}async setMapCamera(e){if(!this.view)return{status:-1,message:"未初始化"};const{name:i,duration:t=0}=e,{camera:o}=this.mapConfig;if(!o)return{status:-1,message:"未配置camera"};const n=o[i];return n?(await this.view.goTo(n,{duration:t*1e3}),{status:0,message:"成功"}):{status:-1,message:"未配置camera"}}requestCoordinateTransform(e,i){let t=0;const n=1e3/30,f=T.watch(()=>this.view.center,()=>{const c=this.transformPoints(e),w=Date.now();w-t>n&&(i(c),t=w)});return this.handleIndex++,this.watchHandleMap.set(this.handleIndex,f),{handle:this.handleIndex,points:this.transformPoints(e)}}transformPoints(e){return e.map(i=>{const t=new g.Point({x:i[0],y:i[1]}),o=this.view.toScreen(t);return[o.x,o.y]})}cancelCoordinateTransform(e){const i=this.watchHandleMap.get(e);i&&(i.remove(),this.watchHandleMap.delete(e))}setMapZoomRange(e){const{min:i,max:t}=e;!i&&!t||(this.zoomWatchHandle&&this.zoomWatchHandle.remove(),this.zoomWatchHandle=T.watch(()=>this.view.zoom,o=>{i&&o<=i&&(this.view.zoom=i),t&&o>=t&&(this.view.zoom=t)}))}}exports.default=N;

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,8 @@ export default class OpenDriveRenderer {
     constructor(view: __esri.MapView | __esri.SceneView);
     private projectName;
     private openDriveServer;
+    private openDriveClickCallback;
+    private makeMd5FromFile;
     showOpenDriveFromFile(params: IShowOpenDriveFromFileParams): Promise<IResult>;
     /**
      * 从服务器载入OpenDrive文件解析结果并显示
@@ -48,11 +52,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,4 @@
-"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"),A=require("@arcgis/core/core/promiseUtils"),$=require("@arcgis/core/geometry"),M=require("@arcgis/core/geometry/geometryEngineAsync"),j=require("@arcgis/core/layers/FeatureLayer"),g=require("@arcgis/core/layers/GraphicsLayer"),w=require("axios"),J=require("md5"),G=require("pako"),C=require("../common-utils.js"),P=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(A),S=N(M);class v{constructor(e){this.wasmLoader=P.default.getInstance(),this.projectName="",this.openDriveServer="",this.currentSectionCode="",this.currentJunctionId="",this.view=e,this.view.popup.visibleElements={closeButton:!1,collapseButton:!1,actionBar:!1},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 g({id:"OpenDriveJunction"}),this.sectionLayer=new g({id:"OpenDriveSection"}),this.highlightLayer=new g({id:"OpenDriveHighlight"}),this.flashLayer=new g({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 makeMd5FromFile(e){const i=await(await fetch(e)).text();return J(i)}async showOpenDriveFromFile(e){var h,u;this.openDriveClickCallback=e.selectedCallback,this.projectName=await this.makeMd5FromFile(e.file),this.openDriveServer=e.server,await this.makeMd5FromFile(e.file);const s=`http://${this.openDriveServer}/api/openDrive/uploadXodr`;let i;try{i=await w.post(s,{},{params:{url:e.file,projectName:this.projectName}})}catch(y){return{status:-1,message:y.message}}if(i.status!==200)return{status:-1,message:i.statusText};console.time("渲染用时");const a=i.data.result.geoSetting;C.default.setGeoData(a.geoReference,a.offsetX,a.offsetY);let t=i.data.result.json;t.startsWith(window.location.protocol)||(t=`${window.location.protocol}//${e.server}${t}`);const r=await(await fetch(t)).arrayBuffer(),n=G.inflate(r,{to:"string"}),o=JSON.parse(n);await this.showAllLanes(o,((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 y=C.default.transformPointProjection([0,0]);await this.view.goTo(y)}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`,a=await w.get(i,{headers:{projectName:s},params:{analyze:!1,compressed:!0}});if(a.status!==200)throw new Error(`OpenDriveRenderer: ${a.statusText}`);let t=a.data.result.json;t.startsWith(window.location.protocol)||(t=`${window.location.protocol}//${e}${t}`);const r=await(await fetch(t)).arrayBuffer(),n=G.inflate(r,{to:"string"}),o=JSON.parse(n);return await this.showAllLanes(o,!1,!1),{status:0,message:"ok"}}async showAllLanes(e,s,i){const a=await this.laneLayer.queryFeatures();return a.features.length>0&&this.laneLayer.applyEdits({deleteFeatures:a.features}),this.roadNameLayer.visible=i,new Promise(t=>{let c=0;this.allLaneGraphics=[],this.allRefLineGraphics=[];const r=[];for(const o of e){if(!s&&o.junction!=="-1")continue;const{id:l,refLine:h}=o;let u=o.name;u.includes("(")&&(u=u.slice(0,u.indexOf("("))),u=u.replace(/(.)/g,"$1 ");const y=new d({geometry:{type:"polyline",paths:[h]},attributes:{ObjectID:c++,roadId:l,roadName:u}});this.allRefLineGraphics.push(y);for(const I of o.laneSections){const L=Number(I.id);for(const f of I.lanePaths){const m=Number(f.id);if(m===0)continue;const F=f.type,b=f.innerPath.concat(f.outerPath.reverse());if(b.length<=3){console.warn(`lane ${m} has less than 3 points`);continue}b.push(f.innerPath[0]);const D=new $.Polygon({rings:[b]});if(D){const k=new d({geometry:D,attributes:{ObjectID:c++,id:`${l}+${L}+${m}`,roadId:l,roadName:o.name,sectionId:L,laneId:m,type:F,sumoId:""}});this.allLaneGraphics.push(k),r.push(k)}}}}const n=setInterval(()=>{if(r.length>0||this.allRefLineGraphics.length>0){if(r.length>0){const o=r.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(n),t()},10)})}showJunction(e){const s=[];for(const i of e){i.nodeType=i.type;const a=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/point_yellow.png",width:30,height:30}});s.push(a)}this.junctionLayer.addMany(s)}monitorMouseMove(){const e=O.debounce(async s=>{var c;const a=(c=(await this.view.hitTest(s,{include:[this.laneLayer,this.junctionLayer]})).results)==null?void 0:c.filter(r=>r.type==="graphic");if(a.length===0){this.currentSectionCode!==""&&(this.currentSectionCode="",this.highlightGraphic=void 0,this.highlightLayer.removeAll()),this.currentJunctionId!==""&&(this.currentJunctionId="",this.view.popup.close());return}const t=a[0];if(this.hitGraphic=t.graphic,t.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=r;const o=this.allLaneGraphics.filter(h=>`${h.attributes.roadId}+${h.attributes.sectionId}`===r),l=await S.union(o.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:r,selected:!1}}),this.highlightLayer.removeAll(),this.highlightLayer.add(this.highlightGraphic)}else if(t.layer.id==="OpenDriveJunction"){const r=this.hitGraphic.getAttribute("id");if(r===this.currentJunctionId)return;this.currentJunctionId=r;const n=this.hitGraphic.getAttribute("name"),o=this.hitGraphic.getAttribute("crossId");this.view.popup.open({title:n,content:`<table>
+          <tr><td>路口编号</td><td>${r}</td></tr>
+          <tr><td>信号机编号</td><td>${o||"无信控"}</td></tr>
+          </table>`,location:this.hitGraphic.geometry})}});this.mouseMoveHandler=this.view.on("pointer-move",async s=>{e(s).catch(()=>{})})}monitorMouseClick(){const e=O.debounce(async s=>{var n;const a=(n=(await this.view.hitTest(s,{include:[this.highlightLayer,this.junctionLayer,this.sectionLayer]})).results)==null?void 0:n.filter(o=>o.type==="graphic");if(a.length===0)return;const t=a[0].graphic,c=t.getAttribute("type"),r=t.getAttribute("id");if(c==="OpenDriveJunction")if(t.getAttribute("selected")===!1){const o=`http://${this.openDriveServer}/api/sumo/getSumoJunction`,l=await w.get(o,{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}),t.setAttribute("selected",!0),t.symbol.url="/GisViewerAssets/Images/point_red.png",this.increasePictureMarkerSize(t,50))}else{this.openDriveClickCallback&&this.openDriveClickCallback({type:"OpenDriveJunction",id:r,details:void 0}),t.setAttribute("selected",!1);const o=t.getAttribute("crossId");t.symbol.url=o?"/GisViewerAssets/Images/point_green.png":"/GisViewerAssets/Images/point_yellow.png",this.decreasePictureMarkerSize(t,30)}else if(c==="OpenDriveSection")if(t.getAttribute("selected"))this.sectionLayer.remove(t),this.openDriveClickCallback&&this.openDriveClickCallback({type:"OpenDriveSection",id:r,details:void 0});else{this.highlightLayer.remove(t),this.sectionLayer.add(t),t.setAttribute("selected",!0);const o=`http://${this.openDriveServer}/api/sumo/getSumoEdge`,l=await w.get(o,{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 s=>{e(s).catch(()=>{})})}increasePictureMarkerSize(e,s){const i=setInterval(()=>{const a=e.symbol,t=a.width;t<s?e.symbol={type:"picture-marker",url:a.url,width:t+1,height:t+1}:clearInterval(i)},20)}decreasePictureMarkerSize(e,s){const i=setInterval(()=>{const a=e.symbol,t=a.width;t>s?e.symbol={type:"picture-marker",url:a.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,a=e.flash===void 0?!0:e.flash;if(s==="junction")return await this.findJunction(i,a);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,r=t[0].split("#");if(r.length>2)return{status:-1,message:"id格式错误"};const n=r[0],o=r.length===2?Number(r[1]):void 0;return await this.findLane({roadsectId:n,segmentId:o,laneId:c,flash:a})}else return{status:-1,message:"未知类型"}}async findJunction(e,s){const i=this.junctionLayer.graphics.find(a=>a.attributes.id===e);if(!i)return{status:-1,message:"未找到。请检查路口编号"};if(s){const a=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(a)}return await this.view.goTo(i.geometry,{duration:1e3}),{status:0,message:"ok"}}async findLane(e){let{roadsectId:s,segmentId:i,laneId:a}=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(o=>{const l=Number(o.attributes.sectionId);n.indexOf(l)===-1&&n.push(l)}),n.sort((o,l)=>o-l),i>n.length-1)return{status:-1,message:"未找到。请检查基本段编号"};i=n[i],t=t.filter(o=>Number(o.attributes.sectionId)===i)}if(a!==void 0){const n=[];if(t.forEach(o=>{const l=Number(o.attributes.laneId);n.indexOf(l)===-1&&n.push(l)}),n.sort((o,l)=>o-l),a>n.length-1)return{status:-1,message:"未找到。请检查车道编号"};a=n[a],t=t.filter(o=>Number(o.attributes.laneId)===a)}const c=t.map(n=>n.geometry),r=await S.union(c);if(e.flash){const n=new d({geometry:r,symbol:{type:"simple-fill",color:[255,0,0,.5],style:"solid",outline:{color:"red",width:0}}});this.flashGraphic(n)}return await this.view.goTo(r,{duration:1e3}),{status:0,message:"ok"}}flashGraphic(e){this.flashLayer.removeAll(),this.flashLayer.add(e);let s=0,i=!0;const a=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(a))},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.123",
   "main": "lib/index.js",
   "module": "es/index.mjs",
   "files": [
@@ -33,6 +33,7 @@
     "@vitest/coverage-c8": "^0.29.2",
     "axios": "^1.4.0",
     "fast-xml-parser": "^4.4.0",
+    "md5": "^2.3.0",
     "pako": "^2.1.0",
     "pinia": "^2.0.33",
     "proj4": "^2.11.0",