gisviewer-vue3-arcgis 1.0.174 → 1.0.175

package/es/src/gis-map/utils/signal-control-area-controller/index.mjs

@@ -1,26 +1,31 @@
 import * as g from "@arcgis/core/core/reactiveUtils.js";
-import y from "@arcgis/core/Graphic";
-import h from "@arcgis/core/layers/GraphicsLayer";
+import c from "@arcgis/core/Graphic";
+import y from "@arcgis/core/layers/GraphicsLayer";
 import u from "@turf/buffer";
-import b from "@turf/convex";
-import * as l from "@turf/helpers";
-import d from "concaveman";
-import f from "./district-controller.mjs";
-class x {
+import d from "@turf/convex";
+import * as n from "@turf/helpers";
+import b from "axios";
+import f from "concaveman";
+import C from "../../stores/index.mjs";
+import v from "./district-controller.mjs";
+class N {
   constructor(e) {
-    this.crossScale = 5e3, this.view = e, this.districtControllerLayer = new h({
+    var s;
+    this.crossScale = 5e3, this.view = e;
+    const r = C.useAppDataStore.mapConfig;
+    this.openDriveServer = (s = r.openDriveServer) == null ? void 0 : s.url, this.districtControllerLayer = new y({
       id: "districtControllerLayer"
-    }), this.subDistrictControllerLayer = new h({
+    }), this.subDistrictControllerLayer = new y({
       id: "subDistrictControllerLayer",
       visible: !1
       // maxScale: 0,
       // minScale: 144447
-    }), this.crossLayer = new h({
+    }), this.crossLayer = new y({
       id: "crossLayer",
       visible: !1
       // maxScale: 0,
       // minScale: 36112
-    }), this.highlightLayer = new h({
+    }), this.highlightLayer = new y({
       id: "highlightLayer"
     }), this.view.map.addMany([
       this.districtControllerLayer,
@@ -32,13 +37,13 @@ class x {
   showSignalControlArea(e) {
     this.districtControllerLayer.removeAll(), this.subDistrictControllerLayer.removeAll(), this.crossLayer.removeAll(), this.highlightLayer.removeAll(), this.subDistrictControllerLayer.visible = !1, this.crossLayer.visible = !1, this.districtControllerLayer.visible = !0;
     for (const t of e) {
-      const i = new f(t);
-      this.drawArea(i, !0);
+      const r = new v(t);
+      this.drawArea(r, !0);
     }
-    return this.watchHandle = g.watch(
+    return this.scaleWatcher = g.watch(
       () => this.view.scale,
-      (t, i) => {
-        t > this.crossScale && i <= this.crossScale ? (this.crossLayer.graphics.forEach((s) => {
+      (t, r) => {
+        t > this.crossScale && r <= this.crossScale ? (this.crossLayer.graphics.forEach((s) => {
           s.symbol = this.getCrossGraphicSymbol(
             s.attributes,
             "marker"
@@ -48,7 +53,7 @@ class x {
             s.attributes,
             "marker"
           ));
-        })) : t <= this.crossScale && i > this.crossScale && (this.crossLayer.graphics.forEach((s) => {
+        })) : t <= this.crossScale && r > this.crossScale && (this.crossLayer.graphics.forEach((s) => {
           s.symbol = this.getCrossGraphicSymbol(
             s.attributes,
             "picture"
@@ -63,8 +68,8 @@ class x {
     ), { status: 0, message: "ok" };
   }
   clearSignalControlArea() {
-    var e;
-    return this.districtControllerLayer.removeAll(), this.subDistrictControllerLayer.removeAll(), this.crossLayer.removeAll(), this.highlightLayer.removeAll(), (e = this.watchHandle) == null || e.remove(), this.view.closePopup(), { status: 0, message: "ok" };
+    var e, t;
+    return this.districtControllerLayer.removeAll(), this.subDistrictControllerLayer.removeAll(), this.crossLayer.removeAll(), this.highlightLayer.removeAll(), (e = this.scaleWatcher) == null || e.remove(), this.scaleWatcher = void 0, (t = this.clickWatcher) == null || t.remove(), this.clickWatcher = void 0, this.view.closePopup(), { status: 0, message: "ok" };
   }
   async locateSignalControlArea(e) {
     const t = this.findAreaGraphic(e.id);
@@ -77,22 +82,22 @@ class x {
     if (!e.id || e.id === "")
       return { status: 1, message: "请输入id" };
     this.highlightLayer.removeAll(), this.districtControllerLayer.visible = !1;
-    const t = this.districtControllerLayer.graphics.filter((r) => r.getAttribute("id") === e.id).toArray().map((r) => {
-      const a = r.clone();
+    const t = this.districtControllerLayer.graphics.filter((i) => i.getAttribute("id") === e.id).toArray().map((i) => {
+      const a = i.clone();
       return a.symbol.style = "none", a;
-    }), i = this.subDistrictControllerLayer.graphics.filter(
-      (r) => r.getAttribute("id") === e.id || r.getAttribute("parentId") === e.id
-    ).toArray().map((r) => r.clone()), s = this.crossLayer.graphics.filter(
-      (r) => r.getAttribute("id") === e.id || r.getAttribute("districtId") === e.id || r.getAttribute("subDistrictId") === e.id
-    ).toArray().map((r) => r.clone());
-    if (t.length > 0 && this.highlightLayer.addMany(t), i.length > 0 && this.highlightLayer.addMany(i), s.length > 0 && this.highlightLayer.addMany(s), this.highlightLayer.graphics.length === 0)
+    }), r = this.subDistrictControllerLayer.graphics.filter(
+      (i) => i.getAttribute("id") === e.id || i.getAttribute("parentId") === e.id
+    ).toArray().map((i) => i.clone()), s = this.crossLayer.graphics.filter(
+      (i) => i.getAttribute("id") === e.id || i.getAttribute("districtId") === e.id || i.getAttribute("subDistrictId") === e.id
+    ).toArray().map((i) => i.clone());
+    if (t.length > 0 && this.highlightLayer.addMany(t), r.length > 0 && this.highlightLayer.addMany(r), s.length > 0 && this.highlightLayer.addMany(s), this.highlightLayer.graphics.length === 0)
       return { status: 1, message: "未找到" };
     if (t.length > 0)
       await this.view.goTo(t);
-    else if (i.length > 0) {
-      const r = i[0].geometry.centroid;
+    else if (r.length > 0) {
+      const i = r[0].geometry.centroid;
       await this.view.goTo({
-        target: r,
+        target: i,
         scale: this.crossScale - 500
       });
     } else
@@ -107,23 +112,87 @@ class x {
   }
   showSubSignalControlArea(e) {
     this.crossLayer.removeAll(), this.crossLayer.visible = !0;
-    const i = e.children.map((s) => new y({
-      geometry: {
-        type: "point",
-        x: s.longitude,
-        y: s.latitude
-      },
-      symbol: this.getCrossGraphicInSubDistrict(),
-      attributes: {
-        id: s.id,
-        name: s.name,
-        signalId: s.signalId
-      }
-    }));
-    return this.crossLayer.addMany(i), this.view.goTo(i), { status: 0, message: "ok" };
+    const r = e.children.map((s) => {
+      const i = { ...s, selected: !0 };
+      return new c({
+        geometry: {
+          type: "point",
+          x: s.longitude,
+          y: s.latitude
+        },
+        symbol: this.getCrossSymbolInSubDistrict(i),
+        attributes: i
+      });
+    });
+    return this.crossLayer.addMany(r), this.view.goTo(r), { status: 0, message: "ok" };
   }
-  editSubSignalArea() {
-    return { status: 0, message: "ok" };
+  /**
+   * 点击路口时
+   * @param event
+   * @returns
+   */
+  async handleViewClick(e) {
+    var i;
+    const r = (i = (await this.view.hitTest(e, {
+      include: [this.crossLayer]
+    })).results) == null ? void 0 : i.filter(
+      (a) => a.type === "graphic"
+    );
+    if (r.length === 0)
+      return;
+    const s = r[0].graphic;
+    s.getAttribute("selected") || await this.showNearbyCrosses(s.getAttribute("id"));
+  }
+  async showNearbyCrosses(e) {
+    const t = await b.get(
+      `http://${this.openDriveServer}/api/computable/getRelatedJunctionsForJunction`,
+      { params: { junctionIds: e } }
+    );
+    if (t.status === 200)
+      if (t.data.status === 0) {
+        const r = t.data.result, s = [];
+        return r.forEach(
+          (i) => {
+            const { junctionId: a } = i;
+            if (!this.crossLayer.graphics.some(
+              (l) => l.getAttribute("id") === a
+            )) {
+              const l = new c({
+                geometry: {
+                  type: "point",
+                  x: i.lon,
+                  y: i.lat
+                },
+                symbol: this.getCrossSymbolInSubDistrict(i),
+                attributes: {
+                  id: i.junctionId,
+                  name: i.name,
+                  signalId: i.signalId,
+                  selected: !1
+                }
+              });
+              s.push(l);
+            }
+          }
+        ), this.crossLayer.addMany(s), { status: 0, message: "ok" };
+      } else
+        return { status: -1, message: t.data.message };
+    else
+      return { status: -1, message: "请求失败" };
+  }
+  /**
+   * 编辑子区的路口
+   * @returns
+   */
+  async editSubSignalArea() {
+    if (this.openDriveServer) {
+      this.clickWatcher || (this.clickWatcher = this.view.on("click", async (t) => {
+        await this.handleViewClick(t);
+      }));
+      const e = this.crossLayer.graphics.toArray().map((t) => t.getAttribute("id")).join(",");
+      return await this.showNearbyCrosses(e);
+    } else
+      return { status: 1, message: "未配置OpenDriveServer" };
   }
   /**
    * 在区控\子区\路口图层中查找对应的graphic
@@ -132,11 +201,11 @@ class x {
    */
   findAreaGraphic(e) {
     let t = this.districtControllerLayer.graphics.find(
-      (i) => i.attributes.id === e
+      (r) => r.attributes.id === e
     );
     return t || (t = this.subDistrictControllerLayer.graphics.find(
-      (i) => i.attributes.id === e
-    )), t || (t = this.crossLayer.graphics.find((i) => i.attributes.id === e)), t;
+      (r) => r.attributes.id === e
+    )), t || (t = this.crossLayer.graphics.find((r) => r.attributes.id === e)), t;
   }
   /**
    * 绘制区控与子区
@@ -145,25 +214,25 @@ class x {
    * @returns
    */
   drawArea(e, t) {
-    const i = e.getAllCrossCoordinates();
-    if (i.length >= 2) {
-      let r = null;
-      if (i.length === 2)
-        r = l.lineString(i);
+    const r = e.getAllCrossCoordinates();
+    if (r.length >= 2) {
+      let i = null;
+      if (r.length === 2)
+        i = n.lineString(r);
       else {
         if (t) {
-          const n = l.featureCollection(
-            i.map((p) => l.point(p))
+          const h = n.featureCollection(
+            r.map((p) => n.point(p))
           );
-          r = b(n);
+          i = d(h);
         } else {
-          const n = d(i, 0.5);
-          n.length >= 4 && (r = l.polygon([n]));
+          const h = f(r, 0.5);
+          h.length >= 4 && (i = n.polygon([h]));
         }
-        r || (r = l.lineString(i));
+        i || (i = n.lineString(r));
       }
       const a = u(
-        r.geometry,
+        i.geometry,
         // 区控面积更大，需要更大的缓冲半径
         t ? 200 : 30,
         {
@@ -194,7 +263,7 @@ class x {
           label: "路口数量"
         }
       ];
-      const m = {
+      const l = {
         type: "signalControlArea",
         id: e.id,
         name: e.name,
@@ -202,7 +271,7 @@ class x {
         parentName: e.parentName,
         crossCount: e.crossCount,
         subDistrictCount: e.subDistrictCount
-      }, c = new y({
+      }, m = new c({
         geometry: {
           type: "polygon",
           rings: a.geometry.coordinates
@@ -216,7 +285,7 @@ class x {
             style: t ? "solid" : "long-dash"
           }
         },
-        attributes: m,
+        attributes: l,
         popupTemplate: {
           title: `${t ? "区控" : "子区"}  ${e.name}`,
           content: [
@@ -227,33 +296,33 @@ class x {
           ]
         }
       });
-      t ? this.districtControllerLayer.add(c) : this.subDistrictControllerLayer.add(c);
+      t ? this.districtControllerLayer.add(m) : this.subDistrictControllerLayer.add(m);
     }
-    for (const r of e.subDistricts)
-      this.drawArea(r, !1);
+    for (const i of e.subDistricts)
+      this.drawArea(i, !1);
     const s = [];
-    e.crosses.forEach((r) => {
+    e.crosses.forEach((i) => {
       const a = {
         type: "cross",
-        id: r.id,
-        name: r.name,
+        id: i.id,
+        name: i.name,
         color: e.areaColor,
-        signalId: r.signalId,
+        signalId: i.signalId,
         districtId: t ? e.id : e.parentId,
         districtName: t ? e.name : e.parentName,
         subDistrictId: t ? "" : e.id,
         subDistrictName: t ? "" : e.name,
-        isKey: r.isKey
-      }, o = new y({
+        isKey: i.isKey
+      }, o = new c({
         geometry: {
           type: "point",
-          x: r.longitude,
-          y: r.latitude
+          x: i.longitude,
+          y: i.latitude
         },
         symbol: this.getCrossGraphicSymbol(a, "marker"),
         attributes: a,
         popupTemplate: {
-          title: r.name,
+          title: i.name,
           content: [
             {
               type: "fields",
@@ -282,14 +351,18 @@ class x {
       s.push(o);
     }), this.crossLayer.addMany(s);
   }
-  getCrossGraphicInSubDistrict() {
-    return {
+  /**
+   * 显示子区时路口的样式
+   * @param attributes
+   * @returns
+   */
+  getCrossSymbolInSubDistrict(e) {
+    return e.signalId && e.signalId !== "" ? {
       type: "cim",
       data: {
         type: "CIMSymbolReference",
         primitiveOverrides: [
           {
-            // 将textGraphic的TextString替换为graphic.attributes.name
             type: "CIMPrimitiveOverride",
             primitiveName: "textGraphic",
             propertyName: "TextString",
@@ -360,14 +433,19 @@ class x {
                 y: 0
               },
               anchorPointUnits: "Relative",
-              size: 20,
+              size: 30,
               rotateClockwise: !0,
               textureFilter: "Picture",
-              url: "/GisViewerAssets/Images/gis_lkcz_xz.png"
+              url: `/GisViewerAssets/Images/cross/${e.selected ? "gis_xhj_blue" : "gis_xhj_gray"}.png`
             }
           ]
         }
       }
+    } : {
+      type: "picture-marker",
+      url: "/GisViewerAssets/Images/cross/gis_lkcz.png",
+      width: "20px",
+      height: "20px"
     };
   }
   /**
@@ -377,9 +455,9 @@ class x {
    * @returns
    */
   getCrossGraphicSymbol(e, t) {
-    const { isKey: i, color: s } = e;
+    const { isKey: r, color: s } = e;
     if (t === "marker")
-      return i ? {
+      return r ? {
         type: "picture-marker",
         url: "/GisViewerAssets/Images/icon_star.png",
         width: "30px",
@@ -433,7 +511,7 @@ class x {
                       height: 12,
                       horizontalAlignment: "Center",
                       offsetX: 0,
-                      offsetY: i ? 50 : 40,
+                      offsetY: r ? 30 : 15,
                       haloSize: 1,
                       haloSymbol: {
                         type: "CIMPolygonSymbol",
@@ -472,11 +550,10 @@ class x {
                   y: 0
                 },
                 anchorPointUnits: "Relative",
-                size: i ? 45 : 30,
+                size: r ? 40 : 20,
                 rotateClockwise: !0,
                 textureFilter: "Picture",
-                url: `/GisViewerAssets/Images/xhj_${i ? 4 : 1}.png`,
-                offsetY: i ? 22 : 15
+                url: `/GisViewerAssets/Images/cross/${r ? "gis_gjxk_blue" : "gis_xhj_blue"}.png`
               }
             ]
           }
@@ -485,5 +562,5 @@ class x {
   }
 }
 export {
-  x as default
+  N as default
 };

package/lib/src/gis-map/gis-map.vue.d.ts

@@ -60,8 +60,10 @@ declare const _sfc_main: import("vue").DefineComponent<{
         };
     }[];
     mapViewer: import("vue").ComputedRef<MapView | SceneView>;
-    startSaveTrackLog: () => void;
-    downloadTrackLog: () => void;
+    handleStartSaveTrackLog: () => void;
+    handleDownloadTrackLog: () => void;
+    handleShowVehicleId: () => void;
+    handleShowPlateNumber: () => void;
     setMapCenter: (params: ISetMapCenterParams) => Promise<import("../types").IResult>;
     setMapCamera: (params: ISetMapCameraParams) => Promise<import("../types").IResult>;
     lookAt: (params: ILookAtParams) => Promise<void>;
@@ -123,7 +125,10 @@ declare const _sfc_main: import("vue").DefineComponent<{
     }) => Promise<import("../types").IResult>;
     resetHighlightSignalControlArea: () => import("../types").IResult;
     showSubSignalControlArea: (params: any) => import("../types").IResult;
-    editSubSignalControlArea: () => import("../types").IResult;
+    editSubSignalControlArea: () => Promise<import("../types").IResult> | {
+        status: number;
+        message: string;
+    };
     props: any;
     emit: (event: "mapLoaded" | "markerClick" | "mapClick", ...args: any[]) => void;
     SignalCountdownPanel: import("vue").DefineComponent<{
@@ -172,21 +177,13 @@ declare const _sfc_main: import("vue").DefineComponent<{
             transform: string;
         }>;
         uImage: import("vue").ComputedRef<string>;
-        uNumberStyle: import("vue").ComputedRef<{
-            color: string;
-        }>;
+        uNumberStyle: import("vue").ComputedRef<any>;
         lImage: import("vue").ComputedRef<string>;
-        lNumberStyle: import("vue").ComputedRef<{
-            color: string;
-        }>;
+        lNumberStyle: import("vue").ComputedRef<any>;
         sImage: import("vue").ComputedRef<string>;
-        sNumberStyle: import("vue").ComputedRef<{
-            color: string;
-        }>;
+        sNumberStyle: import("vue").ComputedRef<any>;
         rImage: import("vue").ComputedRef<string>;
-        rNumberStyle: import("vue").ComputedRef<{
-            color: string;
-        }>;
+        rNumberStyle: import("vue").ComputedRef<any>;
         getColorString: (color: string | undefined) => "red" | "rgb(255, 192, 2)" | "lime" | "white";
     }, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
         displayMode: {

package/lib/src/gis-map/gis-map.vue.js

@@ -1 +1 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const n=require("vue"),S=require("./stores/index.js");require("./style/index.css");const _e=require("./utils/holo-flow/index.js"),qe=require("./utils/holo-flow/signal-countdown-panel.vue.js"),Ie=require("./utils/map-initializer.js"),O=require("./utils/open-drive-renderer/index.js"),k=require("./utils/overlay.js"),Me=require("./utils/queue-length.js"),A=require("./utils/road-config-tool/index.js"),L=require("./utils/signal-control-area-controller/index.js"),xe=require("./utils/traffic-flow.js"),Be={class:"gis-viewer"},He={style:{position:"absolute",bottom:"10px",left:"10px"}},Ve=n.defineComponent({__name:"gis-map",props:{config:{},assetsRoot:{}},emits:["mapLoaded","markerClick","mapClick"],setup(T,{expose:b,emit:D}){const p=n.ref(null);let i,u,l,o,a,r,g,t,s;const f=n.ref(!1);S.registerStore();const _=S.default.useAppDataStore,h=n.reactive([]);n.onMounted(async()=>{if(!p.value)return;document.addEventListener("keydown",d=>{d.ctrlKey&&d.key==="i"&&(f.value=!f.value)});const e=n.getCurrentInstance(),{$gisviewerAssetsRoot:m}=e.appContext.config.globalProperties,c=await(await fetch(C.config)).json();c.assetsRoot=C.assetsRoot||m,_.mapConfig=c,u=new Ie.default,i=await u.initialize({container:p.value,mapConfig:c,markerClickCallback:(d,v,w,De)=>{y("markerClick",d,v,w,De)},mapClickCallback:(d,v,w)=>{y("mapClick",d,v,w)}}),a=new _e.default(i,h),await a.init(),y("mapLoaded")}),n.onUnmounted(()=>{s==null||s.clearSignalControlArea(),t==null||t.clearOpenDrive(),a.clearHoloTrace(),a.clearHoloSignal(),o==null||o.disconnectTrafficFlow()});const q=n.computed(()=>i),I=()=>{const e=S.default.useAppDataStore;e.saveTrackLog=!0},M=()=>{a.downloadTrackLog()},x=async e=>await u.setMapCenter(e),B=async e=>await u.setMapCamera(e),H=async e=>await u.lookAt(e),V=e=>u.setLayerVisibility(e),P=(e,m)=>u.requestCoordinateTransform(e,m),N=e=>{u.cancelCoordinateTransform(e)},E=e=>{u.setMapZoomRange(e)},j=e=>(l||(l=new A.default(i)),l.showLaneNumber(e)),z=()=>{l==null||l.clearLaneNumber()},Q=async e=>(l||(l=new A.default(i)),await l.initializeSearch(e)),Z=async()=>l==null?void 0:l.calCrossIndicatorArea(),K=async()=>{},U=async(e,m)=>{o||(o=new xe.default(i)),o.connectTrafficFlow(e,m)},G=()=>{o==null||o.disconnectTrafficFlow()},J=async e=>{a.handleVehicleTraceData(e)},W=()=>{a.clearHoloTrace()},X=e=>{a.setInterpolate(e)},Y=async e=>{await a.handleSignalData(e)},F=()=>{a.clearHoloSignal()},R=e=>{o==null||o.toggleTrafficInfo(e),a==null||a.toggleTrafficInfo(e)},$=e=>{a==null||a.togglePause(e)},ee=e=>{o==null||o.toggleTrafficObject(e),a==null||a.toggleTrafficObject(e)},te=e=>{a==null||a.updatePanelContent(e)},ae=async e=>(r||(r=new k.default(i)),r.addOverlays(e)),ne=e=>(r||(r=new k.default(i)),r.addMask(e)),re=()=>{r==null||r.removeMask()},se=e=>r==null?void 0:r.removeOverlaysByType(e),oe=e=>r==null?void 0:r.removeOverlaysById(e),ie=()=>r==null?void 0:r.removeAllOverlays(),ce=()=>{r==null||r.showAllOverlays()},le=e=>{g||(g=new Me.default(i)),g.updateQueueLength(e)},ue=()=>{g==null||g.removeQueueLength()},me=async(e,m)=>(t||(t=new O.default(i)),await t.showOpenDriveFromServer(e,m)),de=async e=>(t||(t=new O.default(i)),await t.clearOpenDrive(),await t.showOpenDriveFromFile(e)),ge=async()=>await(t==null?void 0:t.clearOpenDrive()),pe=async e=>t?await(t==null?void 0:t.findSumo(e)):{status:-1,message:"未加载OpenDrive地图"},fe=async e=>t?t.selectSumo(e):{status:-1,message:"未加载OpenDrive地图"},ye=async e=>t?t.unselectSumo(e):{status:-1,message:"未加载OpenDrive地图"},ve=async e=>t?await t.geometrySearch(e):{status:-1,message:"未加载OpenDrive地图"},we=async e=>t?await t.getSumoInfo(e):{status:-1,message:"未加载OpenDrive地图"},Se=async e=>t?await(t==null?void 0:t.splitLane(e)):{status:-1,message:"未加载OpenDrive地图"},he=async()=>t?t==null?void 0:t.clearSplitLane():{status:-1,message:"未加载OpenDrive地图"},Ce=e=>(s||(s=new L.default(i)),s.showSignalControlArea(e)),Oe=()=>{s==null||s.clearSignalControlArea()},ke=async e=>s?await s.locateSignalControlArea(e):{status:-1,message:"未加载信号控制区"},Ae=async e=>s?await s.highlightSignalControlArea(e):{status:-1,message:"未加载信号控制区"},Le=()=>s?s.resetHighlight():{status:-1,message:"未加载信号控制区"},Te=e=>(s||(s=new L.default(i)),s.showSubSignalControlArea(e)),be=()=>s?s.editSubSignalArea():{status:-1,message:"未加载信号控制区"},C=T,y=D;return b({mapViewer:q,setLayerVisibility:V,setMapCenter:x,lookAt:H,setMapCamera:B,setMapZoomRange:E,requestCoordinateTransform:P,cancelCoordinateTransform:N,addOverlays:ae,addMask:ne,removeMask:re,showAllOverlays:ce,removeOverlaysByType:se,removeOverlaysById:oe,removeAllOverlays:ie,showLaneNumber:j,clearLaneNumber:z,initializeAreaTool:Q,calCrossIndicatorArea:Z,calRoadIndicatorArea:K,connectCarFlow:U,disconnectCarFlow:G,handleHoloVehicleTraceData:J,clearHoloTrace:W,handleHoloSignalData:Y,clearHoloSignal:F,setInterpolate:X,toggleTrafficInfo:R,toggleTrafficObject:ee,toggleVehicleInfo:te,togglePause:$,updateQueueLength:le,removeQueueLength:ue,showOpenDriveFromServer:me,showOpenDriveFromFile:de,clearOpenDrive:ge,geometrySearchInOpenDrive:ve,findSumoInOpenDrive:pe,selectSumoInOpenDrive:fe,unselectSumoInOpenDrive:ye,getSumoInfo:we,splitOpenDriveLane:Se,clearSplitOpenDriveLane:he,showSignalControlArea:Ce,clearSignalControlArea:Oe,locateSignalControlArea:ke,highlightSignalControlArea:Ae,resetHighlightSignalControlArea:Le,showSubSignalControlArea:Te,editSubSignalControlArea:be}),(e,m)=>(n.openBlock(),n.createElementBlock("div",Be,[n.createElementVNode("div",{class:"gis-viewer-main",ref_key:"mapContainer",ref:p},[n.withDirectives(n.createElementVNode("div",He,[n.createElementVNode("button",{style:{"margin-right":"10px"},onClick:I}," 开始记录 "),n.createElementVNode("button",{onClick:M},"下载日志")],512),[[n.vShow,f.value]])],512),(n.openBlock(!0),n.createElementBlock(n.Fragment,null,n.renderList(h,(c,d)=>(n.openBlock(),n.createBlock(qe.default,{key:d,"display-mode":c.displayMode,"road-id":c.crossId,"cross-id":c.roadId,"map-point":c.mapPoint,"stop-line":c.stopLine,position:c.position,rotation:c.rotation,scale:c.scale,"lamp-status":c.lampStatus},null,8,["display-mode","road-id","cross-id","map-point","stop-line","position","rotation","scale","lamp-status"]))),128))]))}});exports.default=Ve;
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const a=require("vue"),h=require("./stores/index.js");require("./style/index.css");const qe=require("./utils/holo-flow/index.js"),xe=require("./utils/holo-flow/signal-countdown-panel.vue.js"),Me=require("./utils/map-initializer.js"),O=require("./utils/open-drive-renderer/index.js"),b=require("./utils/overlay.js"),Ve=require("./utils/queue-length.js"),A=require("./utils/road-config-tool/index.js"),L=require("./utils/signal-control-area-controller/index.js"),Ne=require("./utils/traffic-flow.js"),Be={class:"gis-viewer"},He={style:{position:"absolute",bottom:"10px",left:"10px"}},Pe=a.defineComponent({__name:"gis-map",props:{config:{},assetsRoot:{}},emits:["mapLoaded","markerClick","mapClick"],setup(D,{expose:T,emit:_}){const p=a.ref(null);let i,u,l,o,n,r,g,t,s;const f=a.ref(!1);h.registerStore();const I=h.default.useAppDataStore,C=a.reactive([]);a.onMounted(async()=>{if(!p.value)return;document.addEventListener("keydown",m=>{m.ctrlKey&&m.key==="i"&&(f.value=!f.value)});const e=a.getCurrentInstance(),{$gisviewerAssetsRoot:d}=e.appContext.config.globalProperties,c=await(await fetch(k.config)).json();c.assetsRoot=k.assetsRoot||d,I.mapConfig=c,u=new Me.default,i=await u.initialize({container:p.value,mapConfig:c,markerClickCallback:(m,v,w,Ie)=>{S("markerClick",m,v,w,Ie)},mapClickCallback:(m,v,w)=>{S("mapClick",m,v,w)}}),n=new qe.default(i,C),await n.init(),S("mapLoaded")}),a.onUnmounted(()=>{s==null||s.clearSignalControlArea(),t==null||t.clearOpenDrive(),n.clearHoloTrace(),n.clearHoloSignal(),o==null||o.disconnectTrafficFlow()});const q=a.computed(()=>i),x=()=>{const e=h.default.useAppDataStore;e.saveTrackLog=!0},M=()=>{n.downloadTrackLog()},V=()=>{y("vehicleId")},N=()=>{y("plateNumber")},B=async e=>await u.setMapCenter(e),H=async e=>await u.setMapCamera(e),P=async e=>await u.lookAt(e),E=e=>u.setLayerVisibility(e),j=(e,d)=>u.requestCoordinateTransform(e,d),z=e=>{u.cancelCoordinateTransform(e)},Q=e=>{u.setMapZoomRange(e)},Z=e=>(l||(l=new A.default(i)),l.showLaneNumber(e)),K=()=>{l==null||l.clearLaneNumber()},U=async e=>(l||(l=new A.default(i)),await l.initializeSearch(e)),G=async()=>l==null?void 0:l.calCrossIndicatorArea(),J=async()=>{},W=async(e,d)=>{o||(o=new Ne.default(i)),o.connectTrafficFlow(e,d)},X=()=>{o==null||o.disconnectTrafficFlow()},Y=async e=>{n.handleVehicleTraceData(e)},F=()=>{n.clearHoloTrace()},R=e=>{n.setInterpolate(e)},$=async e=>{await n.handleSignalData(e)},ee=()=>{n.clearHoloSignal()},te=e=>{o==null||o.toggleTrafficInfo(e),n==null||n.toggleTrafficInfo(e)},ae=e=>{n==null||n.togglePause(e)},ne=e=>{o==null||o.toggleTrafficObject(e),n==null||n.toggleTrafficObject(e)},y=e=>{n==null||n.updatePanelContent(e)},re=async e=>(r||(r=new b.default(i)),r.addOverlays(e)),se=e=>(r||(r=new b.default(i)),r.addMask(e)),oe=()=>{r==null||r.removeMask()},ie=e=>r==null?void 0:r.removeOverlaysByType(e),ce=e=>r==null?void 0:r.removeOverlaysById(e),le=()=>r==null?void 0:r.removeAllOverlays(),ue=()=>{r==null||r.showAllOverlays()},de=e=>{g||(g=new Ve.default(i)),g.updateQueueLength(e)},me=()=>{g==null||g.removeQueueLength()},ge=async(e,d)=>(t||(t=new O.default(i)),await t.showOpenDriveFromServer(e,d)),pe=async e=>(t||(t=new O.default(i)),await t.clearOpenDrive(),await t.showOpenDriveFromFile(e)),fe=async()=>await(t==null?void 0:t.clearOpenDrive()),ye=async e=>t?await(t==null?void 0:t.findSumo(e)):{status:-1,message:"未加载OpenDrive地图"},Se=async e=>t?t.selectSumo(e):{status:-1,message:"未加载OpenDrive地图"},ve=async e=>t?t.unselectSumo(e):{status:-1,message:"未加载OpenDrive地图"},we=async e=>t?await t.geometrySearch(e):{status:-1,message:"未加载OpenDrive地图"},he=async e=>t?await t.getSumoInfo(e):{status:-1,message:"未加载OpenDrive地图"},Ce=async e=>t?await(t==null?void 0:t.splitLane(e)):{status:-1,message:"未加载OpenDrive地图"},ke=async()=>t?t==null?void 0:t.clearSplitLane():{status:-1,message:"未加载OpenDrive地图"},Oe=e=>(s||(s=new L.default(i)),s.showSignalControlArea(e)),be=()=>{s==null||s.clearSignalControlArea()},Ae=async e=>s?await s.locateSignalControlArea(e):{status:-1,message:"未加载信号控制区"},Le=async e=>s?await s.highlightSignalControlArea(e):{status:-1,message:"未加载信号控制区"},De=()=>s?s.resetHighlight():{status:-1,message:"未加载信号控制区"},Te=e=>(s||(s=new L.default(i)),s.showSubSignalControlArea(e)),_e=()=>s?s.editSubSignalArea():{status:-1,message:"未加载信号控制区"},k=D,S=_;return T({mapViewer:q,setLayerVisibility:E,setMapCenter:B,lookAt:P,setMapCamera:H,setMapZoomRange:Q,requestCoordinateTransform:j,cancelCoordinateTransform:z,addOverlays:re,addMask:se,removeMask:oe,showAllOverlays:ue,removeOverlaysByType:ie,removeOverlaysById:ce,removeAllOverlays:le,showLaneNumber:Z,clearLaneNumber:K,initializeAreaTool:U,calCrossIndicatorArea:G,calRoadIndicatorArea:J,connectCarFlow:W,disconnectCarFlow:X,handleHoloVehicleTraceData:Y,clearHoloTrace:F,handleHoloSignalData:$,clearHoloSignal:ee,setInterpolate:R,toggleTrafficInfo:te,toggleTrafficObject:ne,toggleVehicleInfo:y,togglePause:ae,updateQueueLength:de,removeQueueLength:me,showOpenDriveFromServer:ge,showOpenDriveFromFile:pe,clearOpenDrive:fe,geometrySearchInOpenDrive:we,findSumoInOpenDrive:ye,selectSumoInOpenDrive:Se,unselectSumoInOpenDrive:ve,getSumoInfo:he,splitOpenDriveLane:Ce,clearSplitOpenDriveLane:ke,showSignalControlArea:Oe,clearSignalControlArea:be,locateSignalControlArea:Ae,highlightSignalControlArea:Le,resetHighlightSignalControlArea:De,showSubSignalControlArea:Te,editSubSignalControlArea:_e}),(e,d)=>(a.openBlock(),a.createElementBlock("div",Be,[a.createElementVNode("div",{class:"gis-viewer-main",ref_key:"mapContainer",ref:p},[a.withDirectives(a.createElementVNode("div",He,[a.createElementVNode("button",{style:{"margin-right":"10px"},onClick:x}," 开始记录 "),a.createElementVNode("button",{style:{"margin-right":"10px"},onClick:M}," 下载日志 "),a.createElementVNode("button",{style:{"margin-right":"10px"},onClick:V}," 显示车辆id "),a.createElementVNode("button",{onClick:N},"显示车辆号牌")],512),[[a.vShow,f.value]])],512),(a.openBlock(!0),a.createElementBlock(a.Fragment,null,a.renderList(C,(c,m)=>(a.openBlock(),a.createBlock(xe.default,{key:m,"display-mode":c.displayMode,"road-id":c.crossId,"cross-id":c.roadId,"map-point":c.mapPoint,"stop-line":c.stopLine,position:c.position,rotation:c.rotation,scale:c.scale,"lamp-status":c.lampStatus},null,8,["display-mode","road-id","cross-id","map-point","stop-line","position","rotation","scale","lamp-status"]))),128))]))}});exports.default=Pe;

package/lib/src/gis-map/index.d.ts

@@ -49,8 +49,10 @@ export declare const GisMap: import("@easyest/utils/dist/lib/withinstall").SFCWi
         };
     }[];
     mapViewer: import("vue").ComputedRef<__esri.MapView | __esri.SceneView>;
-    startSaveTrackLog: () => void;
-    downloadTrackLog: () => void;
+    handleStartSaveTrackLog: () => void;
+    handleDownloadTrackLog: () => void;
+    handleShowVehicleId: () => void;
+    handleShowPlateNumber: () => void;
     setMapCenter: (params: import("../types").ISetMapCenterParams) => Promise<import("../types").IResult>;
     setMapCamera: (params: import("../types").ISetMapCameraParams) => Promise<import("../types").IResult>;
     lookAt: (params: import("../types").ILookAtParams) => Promise<void>;
@@ -112,7 +114,10 @@ export declare const GisMap: import("@easyest/utils/dist/lib/withinstall").SFCWi
     }) => Promise<import("../types").IResult>;
     resetHighlightSignalControlArea: () => import("../types").IResult;
     showSubSignalControlArea: (params: any) => import("../types").IResult;
-    editSubSignalControlArea: () => import("../types").IResult;
+    editSubSignalControlArea: () => Promise<import("../types").IResult> | {
+        status: number;
+        message: string;
+    };
     props: any;
     emit: (event: "mapLoaded" | "markerClick" | "mapClick", ...args: any[]) => void;
     SignalCountdownPanel: import("vue").DefineComponent<{
@@ -161,21 +166,13 @@ export declare const GisMap: import("@easyest/utils/dist/lib/withinstall").SFCWi
             transform: string;
         }>;
         uImage: import("vue").ComputedRef<string>;
-        uNumberStyle: import("vue").ComputedRef<{
-            color: string;
-        }>;
+        uNumberStyle: import("vue").ComputedRef<any>;
         lImage: import("vue").ComputedRef<string>;
-        lNumberStyle: import("vue").ComputedRef<{
-            color: string;
-        }>;
+        lNumberStyle: import("vue").ComputedRef<any>;
         sImage: import("vue").ComputedRef<string>;
-        sNumberStyle: import("vue").ComputedRef<{
-            color: string;
-        }>;
+        sNumberStyle: import("vue").ComputedRef<any>;
         rImage: import("vue").ComputedRef<string>;
-        rNumberStyle: import("vue").ComputedRef<{
-            color: string;
-        }>;
+        rNumberStyle: import("vue").ComputedRef<any>;
         getColorString: (color: string | undefined) => "red" | "rgb(255, 192, 2)" | "lime" | "white";
     }, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
         displayMode: {

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

@@ -28,12 +28,12 @@
   border-radius: 5px;
   color: white;
   width: 40px;
-  height: 70px;
+  height: 60px;
   justify-content: center;
   align-items: center;
   display: flex;
   flex-direction: column;
 }
 .signal-countdown-number {
-  font: 30px bold;
+  font: 28px Digital;
 }

package/lib/src/gis-map/utils/holo-flow/signal-countdown-panel.vue.d.ts

@@ -44,21 +44,13 @@ declare const _sfc_main: import("vue").DefineComponent<{
         transform: string;
     }>;
     uImage: import("vue").ComputedRef<string>;
-    uNumberStyle: import("vue").ComputedRef<{
-        color: string;
-    }>;
+    uNumberStyle: import("vue").ComputedRef<any>;
     lImage: import("vue").ComputedRef<string>;
-    lNumberStyle: import("vue").ComputedRef<{
-        color: string;
-    }>;
+    lNumberStyle: import("vue").ComputedRef<any>;
     sImage: import("vue").ComputedRef<string>;
-    sNumberStyle: import("vue").ComputedRef<{
-        color: string;
-    }>;
+    sNumberStyle: import("vue").ComputedRef<any>;
     rImage: import("vue").ComputedRef<string>;
-    rNumberStyle: import("vue").ComputedRef<{
-        color: string;
-    }>;
+    rNumberStyle: import("vue").ComputedRef<any>;
     getColorString: (color: string | undefined) => "red" | "rgb(255, 192, 2)" | "lime" | "white";
 }, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
     displayMode: {

package/lib/src/gis-map/utils/holo-flow/signal-countdown-panel.vue.js

@@ -1 +1 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e=require("vue"),g={key:0,class:"signal-countdown-container"},S=["src"],v={key:1,class:"signal-countdown-container"},y=["src"],N={key:2,class:"signal-countdown-container"},h=["src"],w={key:3,class:"signal-countdown-container"},V=["src"],C=e.defineComponent({__name:"signal-countdown-panel",props:{displayMode:{},crossId:{},roadId:{},mapPoint:{},stopLine:{},scale:{},position:{},rotation:{},lampStatus:{}},setup(n){const t=n,s=e.computed(()=>({top:`${t.position.top}px`,left:`${t.position.left}px`,"transform-origin":"bottom center",transform:`translateX(-50%) translateY(-100%) rotate(${t.rotation}deg) scale(${t.scale})`})),a=e.computed(()=>`/GisViewerAssets/Images/SignalLamp/u-${t.lampStatus.uColor}.png`),r=e.computed(()=>({color:l(t.lampStatus.uColor)})),c=e.computed(()=>`/GisViewerAssets/Images/SignalLamp/l-${t.lampStatus.lColor}.png`),i=e.computed(()=>({color:l(t.lampStatus.lColor)})),m=e.computed(()=>`/GisViewerAssets/Images/SignalLamp/s-${t.lampStatus.sColor}.png`),u=e.computed(()=>({color:l(t.lampStatus.sColor)})),d=e.computed(()=>`/GisViewerAssets/Images/SignalLamp/r-${t.lampStatus.rColor}.png`),p=e.computed(()=>({color:l(t.lampStatus.rColor)})),l=o=>{switch(o){case"red":return"red";case"yellow":return"rgb(255, 192, 2)";case"green":return"lime";default:return"white"}};return(o,E)=>(e.openBlock(),e.createElementBlock("div",{class:"signal-countdown-panel",style:e.normalizeStyle(s.value)},[o.lampStatus.uColor?(e.openBlock(),e.createElementBlock("div",g,[e.createElementVNode("div",{class:"signal-countdown-number",style:e.normalizeStyle(r.value)},e.toDisplayString(o.lampStatus.uNumber),5),e.createElementVNode("div",null,[e.createElementVNode("img",{src:a.value,width:"20px",height:"20px"},null,8,S)])])):e.createCommentVNode("",!0),o.lampStatus.lColor?(e.openBlock(),e.createElementBlock("div",v,[e.createElementVNode("div",{class:"signal-countdown-number",style:e.normalizeStyle(i.value)},e.toDisplayString(o.lampStatus.lNumber),5),e.createElementVNode("div",null,[e.createElementVNode("img",{src:c.value,width:"20px",height:"20px"},null,8,y)])])):e.createCommentVNode("",!0),o.lampStatus.sColor?(e.openBlock(),e.createElementBlock("div",N,[e.createElementVNode("div",{class:"signal-countdown-number",style:e.normalizeStyle(u.value)},e.toDisplayString(o.lampStatus.sNumber),5),e.createElementVNode("div",null,[e.createElementVNode("img",{src:m.value,width:"20px",height:"20px"},null,8,h)])])):e.createCommentVNode("",!0),o.lampStatus.rColor!==void 0?(e.openBlock(),e.createElementBlock("div",w,[e.createElementVNode("div",{class:"signal-countdown-number",style:e.normalizeStyle(p.value)},e.toDisplayString(o.lampStatus.rNumber),5),e.createElementVNode("div",null,[e.createElementVNode("img",{src:d.value,width:"20px",height:"20px"},null,8,V)])])):e.createCommentVNode("",!0)],4))}});exports.default=C;
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e=require("vue"),S={key:0,class:"signal-countdown-container"},y=["src"],v={key:1,class:"signal-countdown-container"},N=["src"],h={key:2,class:"signal-countdown-container"},w=["src"],V={key:3,class:"signal-countdown-container"},C=["src"],f=e.defineComponent({__name:"signal-countdown-panel",props:{displayMode:{},crossId:{},roadId:{},mapPoint:{},stopLine:{},scale:{},position:{},rotation:{},lampStatus:{}},setup(l){const t=l,r=e.computed(()=>({top:`${t.position.top}px`,left:`${t.position.left}px`,"transform-origin":"bottom center",transform:`translateX(-50%) translateY(-100%) rotate(${t.rotation}deg) scale(${t.scale})`})),s=e.computed(()=>`/GisViewerAssets/Images/SignalLamp/u-${t.lampStatus.uColor}.png`),i=e.computed(()=>{const o={color:a(t.lampStatus.uColor)},n=t.rotation<0?t.rotation+360:t.rotation;return n>135&&n<315&&(o.transform="rotate(180deg)"),o}),c=e.computed(()=>`/GisViewerAssets/Images/SignalLamp/l-${t.lampStatus.lColor}.png`),m=e.computed(()=>{const o={color:a(t.lampStatus.lColor)},n=t.rotation<0?t.rotation+360:t.rotation;return n>135&&n<315&&(o.transform="rotate(180deg)"),o}),u=e.computed(()=>`/GisViewerAssets/Images/SignalLamp/s-${t.lampStatus.sColor}.png`),d=e.computed(()=>{const o={color:a(t.lampStatus.sColor)},n=t.rotation<0?t.rotation+360:t.rotation;return n>135&&n<315&&(o.transform="rotate(180deg)"),o}),p=e.computed(()=>`/GisViewerAssets/Images/SignalLamp/r-${t.lampStatus.rColor}.png`),g=e.computed(()=>{const o={color:a(t.lampStatus.rColor)},n=t.rotation<0?t.rotation+360:t.rotation;return n>135&&n<315&&(o.transform="rotate(180deg)"),o}),a=o=>{switch(o){case"red":return"red";case"yellow":return"rgb(255, 192, 2)";case"green":return"lime";default:return"white"}};return(o,n)=>(e.openBlock(),e.createElementBlock("div",{class:"signal-countdown-panel",style:e.normalizeStyle(r.value)},[o.lampStatus.uColor?(e.openBlock(),e.createElementBlock("div",S,[e.createElementVNode("div",{class:"signal-countdown-number",style:e.normalizeStyle(i.value)},e.toDisplayString(o.lampStatus.uNumber),5),e.createElementVNode("div",null,[e.createElementVNode("img",{src:s.value,width:"20px",height:"20px"},null,8,y)])])):e.createCommentVNode("",!0),o.lampStatus.lColor?(e.openBlock(),e.createElementBlock("div",v,[e.createElementVNode("div",{class:"signal-countdown-number",style:e.normalizeStyle(m.value)},e.toDisplayString(o.lampStatus.lNumber),5),e.createElementVNode("div",null,[e.createElementVNode("img",{src:c.value,width:"20px",height:"20px"},null,8,N)])])):e.createCommentVNode("",!0),o.lampStatus.sColor?(e.openBlock(),e.createElementBlock("div",h,[e.createElementVNode("div",{class:"signal-countdown-number",style:e.normalizeStyle(d.value)},e.toDisplayString(o.lampStatus.sNumber),5),e.createElementVNode("div",null,[e.createElementVNode("img",{src:u.value,width:"20px",height:"20px"},null,8,w)])])):e.createCommentVNode("",!0),o.lampStatus.rColor!==void 0?(e.openBlock(),e.createElementBlock("div",V,[e.createElementVNode("div",{class:"signal-countdown-number",style:e.normalizeStyle(g.value)},e.toDisplayString(o.lampStatus.rNumber),5),e.createElementVNode("div",null,[e.createElementVNode("img",{src:p.value,width:"20px",height:"20px"},null,8,C)])])):e.createCommentVNode("",!0)],4))}});exports.default=f;