gisviewer-vue3-arcgis 1.0.108 → 1.0.110

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

@@ -1,13 +1,14 @@
-import * as y from "@arcgis/core/core/reactiveUtils.js";
-import w from "@arcgis/core/geometry/SpatialReference";
-import * as g from "@arcgis/core/views/3d/externalRenderers";
-import * as h from "three";
-import { GLTFLoader as R } from "three/examples/jsm/loaders/GLTFLoader.js";
+import * as P from "@arcgis/core/core/promiseUtils.js";
+import * as b from "@arcgis/core/core/reactiveUtils.js";
+import v from "@arcgis/core/geometry/SpatialReference";
+import * as u from "@arcgis/core/views/3d/externalRenderers";
+import * as l from "three";
+import { GLTFLoader as y } from "three/examples/jsm/loaders/GLTFLoader.js";
 import { EVehiclePlateState as d } from "../../../types/index.mjs";
-import P from "../../stores/index.mjs";
-class k {
+import G from "../../stores/index.mjs";
+class I {
   constructor(i) {
-    this.cameraHeightThreshold = 1e3, this.roughness = 0.2, this.metalness = 0.8, this.defaultMaterial = new h.MeshPhongMaterial({
+    this.cameraHeightThreshold = 1e3, this.roughness = 0.2, this.metalness = 0.8, this.defaultMaterial = new l.MeshPhongMaterial({
       color: 16777215
     }), this.materialMap = /* @__PURE__ */ new Map([
       [1, this.createCarMaterial(16777215)],
@@ -21,48 +22,95 @@ class k {
       [9, this.createCarMaterial(2105376)],
       [10, this.createCarMaterial(9662683)],
       [99, this.createCarMaterial(6908265)]
-    ]), this.carModelReady = !1, this.vanModelReady = !1, this.truckModelReady = !1, this.busModelReady = !1, this.bicycleModelReady = !1, this.showGroundVehicle = !0, this.showElevatedVehicle = !0, this.isPaused = !1, this.currentSpriteContent = d.None, this.historyPositionMap = /* @__PURE__ */ new Map(), this.vehicleObjectMap = /* @__PURE__ */ new Map(), this.needInterpolate = !0, this.updateModel = !1;
-    const e = P.useAppDataStore;
+    ]), this.isInitialized = !1, this.showGroundVehicle = !0, this.showElevatedVehicle = !0, this.isPaused = !1, this.currentSpriteContent = d.None, this.historyPositionMap = /* @__PURE__ */ new Map(), this.vehicleObjectMap = /* @__PURE__ */ new Map(), this.needInterpolate = !0, this.updateModel = !1;
+    const e = G.useAppDataStore;
     this.assetsRoot = JSON.parse(
       JSON.stringify(e.mapConfig)
-    ).assetsRoot, this.view = i;
-    const t = new R();
-    t.load(`${this.assetsRoot}/3DModels/car.glb`, (s) => {
-      this.carModel = s.scene, this.carModel.rotation.x = h.MathUtils.degToRad(90), this.carModelReady = !0;
-    }), t.load(`${this.assetsRoot}/3DModels/van.glb`, (s) => {
-      this.vanModel = s.scene, this.vanModel.rotation.x = h.MathUtils.degToRad(90), this.vanModelReady = !0;
-    }), t.load(`${this.assetsRoot}/3DModels/truck.glb`, (s) => {
-      this.truckModel = s.scene, this.truckModel.scale.set(1.2, 1, 1.5), this.truckModel.rotation.x = h.MathUtils.degToRad(90), this.truckModelReady = !0;
-    }), t.load(`${this.assetsRoot}/3DModels/bus.glb`, (s) => {
-      this.busModel = s.scene, this.busModel.rotation.x = h.MathUtils.degToRad(90), this.busModelReady = !0;
-    }), t.load(`${this.assetsRoot}/3DModels/bicycle.glb`, (s) => {
-      this.bicycleModel = s.scene, this.bicycleModel.rotation.x = h.MathUtils.degToRad(90), this.bicycleModel.rotation.y = h.MathUtils.degToRad(180), this.bicycleModelReady = !0;
-    }), document.addEventListener(
-      "visibilitychange",
-      () => {
-        this.clearVehicles(), this.needInterpolate = !document.hidden;
-      },
-      !1
-    ), y.watch(
+    ).assetsRoot, this.view = i, b.watch(
       () => this.view.camera.position.z,
-      (s, a) => {
-        (a <= this.cameraHeightThreshold && s > this.cameraHeightThreshold || a > this.cameraHeightThreshold && s <= this.cameraHeightThreshold) && (this.updateModel = !0);
+      (t, s) => {
+        (s <= this.cameraHeightThreshold && t > this.cameraHeightThreshold || s > this.cameraHeightThreshold && t <= this.cameraHeightThreshold) && (this.updateModel = !0);
       }
     );
   }
   createCarMaterial(i) {
-    return new h.MeshPhongMaterial({
+    return new l.MeshPhongMaterial({
       color: i
       // // emissive: 0xc3c3c3,
       // roughness: this.roughness,
       // metalness: this.metalness
     });
   }
+  async init() {
+    const i = new y();
+    await P.eachAlways([
+      new Promise((e) => {
+        i.load(`${this.assetsRoot}/3DModels/car.glb`, (t) => {
+          this.carModel = t.scene, this.carModel.rotation.x = l.MathUtils.degToRad(90), e();
+        });
+      }),
+      new Promise((e) => {
+        i.load(`${this.assetsRoot}/3DModels/van.glb`, (t) => {
+          this.vanModel = t.scene, this.vanModel.rotation.x = l.MathUtils.degToRad(90), e();
+        });
+      }),
+      new Promise((e) => {
+        i.load(`${this.assetsRoot}/3DModels/truck.glb`, (t) => {
+          this.truckModel = t.scene, this.truckModel.scale.set(1.2, 1, 1.5), this.truckModel.rotation.x = l.MathUtils.degToRad(90), e();
+        });
+      }),
+      new Promise((e) => {
+        i.load(`${this.assetsRoot}/3DModels/bus.glb`, (t) => {
+          this.busModel = t.scene, this.busModel.rotation.x = l.MathUtils.degToRad(90), e();
+        });
+      }),
+      new Promise((e) => {
+        i.load(`${this.assetsRoot}/3DModels/bicycle.glb`, (t) => {
+          this.bicycleModel = t.scene, this.bicycleModel.rotation.x = l.MathUtils.degToRad(90), this.bicycleModel.rotation.y = l.MathUtils.degToRad(180), e();
+        });
+      }),
+      new Promise((e) => {
+        this.bluePlateBG = new Image(), this.bluePlateBG.src = `${this.assetsRoot}/Images/PlateBG/blue.png`, this.bluePlateBG.onload = () => {
+          e();
+        };
+      }),
+      new Promise((e) => {
+        this.yellowPlateBG = new Image(), this.yellowPlateBG.src = `${this.assetsRoot}/Images/PlateBG/yellow.png`, this.yellowPlateBG.onload = () => {
+          e();
+        };
+      }),
+      new Promise((e) => {
+        this.whitePlateBG = new Image(), this.whitePlateBG.src = `${this.assetsRoot}/Images/PlateBG/white.png`, this.whitePlateBG.onload = () => {
+          e();
+        };
+      }),
+      new Promise((e) => {
+        this.blackPlateBG = new Image(), this.blackPlateBG.src = `${this.assetsRoot}/Images/PlateBG/black.png`, this.blackPlateBG.onload = () => {
+          e();
+        };
+      }),
+      new Promise((e) => {
+        this.neoYellowPlateBG = new Image(), this.neoYellowPlateBG.src = `${this.assetsRoot}/Images/PlateBG/neo_yellow.png`, this.neoYellowPlateBG.onload = () => {
+          e();
+        };
+      }),
+      new Promise((e) => {
+        this.neoGreenPlateBG = new Image(), this.neoGreenPlateBG.src = `${this.assetsRoot}/Images/PlateBG/neo_green.png`, this.neoGreenPlateBG.onload = () => {
+          e();
+        };
+      }),
+      new Promise((e) => {
+        this.greyPlateBG = new Image(), this.greyPlateBG.src = `${this.assetsRoot}/Images/PlateBG/grey.png`, this.greyPlateBG.onload = () => {
+          e();
+        };
+      })
+    ]), this.isInitialized = !0;
+  }
   setInterpolate(i) {
     this.clearVehicles(), this.needInterpolate = i;
   }
   async setup(i) {
-    this.context = i, this.renderer = new h.WebGLRenderer({
+    this.context = i, this.renderer = new l.WebGLRenderer({
       context: i.gl,
       premultipliedAlpha: !0,
       logarithmicDepthBuffer: !0,
@@ -74,62 +122,62 @@ class k {
     );
     this.renderer.setRenderTarget = (s) => {
       e(s), s == null && i.bindRenderTarget();
-    }, this.scene = new h.Scene();
+    }, this.scene = new l.Scene();
     const { camera: t } = i;
-    this.camera = new h.PerspectiveCamera(
+    this.camera = new l.PerspectiveCamera(
       t.fovY,
       t.aspect,
       0.1,
       1e5
-    ), this.ambient = new h.AmbientLight(16777215, 2), this.scene.add(this.ambient), this.sun = new h.DirectionalLight(16777215, 2), this.scene.add(this.sun), i.resetWebGLState();
+    ), this.ambient = new l.AmbientLight(16777215, 2), this.scene.add(this.ambient), this.sun = new l.DirectionalLight(16777215, 2), this.scene.add(this.sun), i.resetWebGLState();
   }
   async render(i) {
     var s;
     const e = i.camera;
     if (this.camera.position.set(e.eye[0], e.eye[1], e.eye[2]), this.camera.up.set(e.up[0], e.up[1], e.up[2]), this.camera.lookAt(
-      new h.Vector3(e.center[0], e.center[1], e.center[2])
+      new l.Vector3(e.center[0], e.center[1], e.center[2])
     ), this.camera.projectionMatrix.fromArray(e.projectionMatrix), !this.isPaused && this.needInterpolate)
       for (const a of this.vehicleObjectMap.keys()) {
-        const o = (s = this.vehicleObjectMap.get(a)) == null ? void 0 : s.model;
-        if (!o)
+        const n = (s = this.vehicleObjectMap.get(a)) == null ? void 0 : s.model;
+        if (!n)
           continue;
-        const r = this.computeVehiclePosition(a);
-        if (r) {
-          const l = this.toRenderCoordinates(r);
-          o.position.set(l[0], l[1], l[2]), o.rotation.y = h.MathUtils.degToRad(-r[3]);
+        const o = this.computeVehiclePosition(a);
+        if (o) {
+          const h = this.toRenderCoordinates(o);
+          n.position.set(h[0], h[1], h[2]), n.rotation.y = l.MathUtils.degToRad(-o[3]);
         }
       }
     const t = i.sunLight;
-    this.sun.position.set(t.direction[0], t.direction[1], t.direction[2]), this.sun.intensity = t.diffuse.intensity, this.sun.color = new h.Color(
+    this.sun.position.set(t.direction[0], t.direction[1], t.direction[2]), this.sun.intensity = t.diffuse.intensity, this.sun.color = new l.Color(
       t.diffuse.color[0],
       t.diffuse.color[1],
       t.diffuse.color[2]
-    ), this.ambient.intensity = t.ambient.intensity, this.ambient.color = new h.Color(
+    ), this.ambient.intensity = t.ambient.intensity, this.ambient.color = new l.Color(
       t.ambient.color[0],
       t.ambient.color[1],
       t.ambient.color[2]
-    ), this.renderer.resetState(), i.bindRenderTarget(), this.renderer.render(this.scene, this.camera), g.requestRender(this.view), i.resetWebGLState();
+    ), this.renderer.resetState(), i.bindRenderTarget(), this.renderer.render(this.scene, this.camera), u.requestRender(this.view), i.resetWebGLState();
   }
   /**
    * 新增车辆
    * */
   async addVehicles(i) {
-    if (!(this.isPaused || !this.carModelReady || !this.vanModelReady || !this.truckModelReady || !this.busModelReady || !this.bicycleModelReady))
+    if (!(this.isPaused || !this.isInitialized))
       for (const e of i) {
-        const { vehicleId: t, localTimestamp: s } = e, a = Number(e.x), o = Number(e.y), r = Number(e.heading);
+        const { vehicleId: t, localTimestamp: s } = e, a = Number(e.x), n = Number(e.y), o = Number(e.heading);
         this.historyPositionMap.set(t, [
-          { pos: [a, o, 0], heading: r, time: s }
+          { pos: [a, n, 0], heading: o, time: s }
         ]);
-        const l = this.getVehicleModel(e);
-        l.name = t, l.visible = !this.needInterpolate;
+        const h = this.getVehicleModel(e);
+        h.name = t, h.visible = !this.needInterpolate;
         try {
-          const n = await this.createPlateSprite(e);
-          n && (l.add(n), n.position.set(0, 5, -4));
-        } catch (n) {
-          console.log("createPlateSprite error:", n);
+          const r = await this.createPlateSprite(e);
+          r && (h.add(r), r.position.set(0, 5, -4));
+        } catch (r) {
+          console.log("createPlateSprite error:", r);
         }
-        this.scene.add(l), this.vehicleObjectMap.set(t, {
-          model: l,
+        this.scene.add(h), this.vehicleObjectMap.set(t, {
+          model: h,
           data: e,
           waitForDelete: !1,
           isMoving: !1
@@ -140,42 +188,42 @@ class k {
    * 更新车辆
    * */
   async updateVehicles(i) {
-    if (this.isPaused || !this.carModelReady || !this.vanModelReady || !this.truckModelReady || !this.busModelReady || !this.bicycleModelReady)
+    if (this.isPaused || !this.isInitialized)
       return;
     const e = [];
     for (const t of i) {
-      const { vehicleId: s, localTimestamp: a } = t, o = Number(t.x), r = Number(t.y);
-      let l = Number(t.heading);
-      const n = this.vehicleObjectMap.get(s), m = this.historyPositionMap.get(
+      const { vehicleId: s, timestamp: a } = t, n = Number(t.x), o = Number(t.y);
+      let h = Number(t.heading);
+      const r = this.vehicleObjectMap.get(s), m = this.historyPositionMap.get(
         s
       );
-      if (!n || !m)
+      if (!r || !m)
         e.push(t);
       else {
-        if (this.updateModel || n.data.vehicleColor !== t.vehicleColor || n.data.vehicleType !== t.vehicleType) {
-          this.scene.remove(n.model), this.disposeModel(n.model), n.model = this.getVehicleModel(t);
+        if (m.length >= 5 && console.log(s, m.length), this.updateModel || r.data.vehicleColor !== t.vehicleColor || r.data.vehicleType !== t.vehicleType) {
+          this.scene.remove(r.model), this.disposeModel(r.model), r.model = this.getVehicleModel(t);
           const c = await this.createPlateSprite(t);
-          c && (n.model.add(c), c.position.set(0, 5, -4)), this.scene.add(n.model);
+          c && (r.model.add(c), c.position.set(0, 5, -4)), this.scene.add(r.model);
         }
-        if (n.data.showName !== t.showName || n.data.plateColor !== t.plateColor) {
-          const c = n.model.getObjectByName("VehiclePlate");
-          c && (n.model.remove(c), this.disposeModel(c));
+        if (r.data.showName !== t.showName || r.data.plateColor !== t.plateColor) {
+          const c = r.model.getObjectByName("VehiclePlate");
+          c && (r.model.remove(c), this.disposeModel(c));
           const p = await this.createPlateSprite(t);
-          p && (n.model.add(p), p.position.set(0, 5, -4));
+          p && (r.model.add(p), p.position.set(0, 5, -4));
         }
-        if (n.data = t, this.needInterpolate) {
+        if (r.data = t, this.needInterpolate) {
           const c = m[m.length - 1];
-          Math.abs(l - c.heading) >= 180 && (l > c.heading ? c.heading += 360 : l += 360), m.push({
-            pos: [o, r, 0],
-            heading: l,
+          Math.abs(h - c.heading) >= 180 && (h > c.heading ? c.heading += 360 : h += 360), m.push({
+            pos: [n, o, 0],
+            heading: h,
             time: a
           });
         } else {
           this.historyPositionMap.set(s, [
-            { pos: [o, r, 0], heading: l, time: a }
+            { pos: [n, o, 0], heading: h, time: a }
           ]);
-          const c = this.toRenderCoordinates([o, r, 0]);
-          n.model.position.set(c[0], c[1], c[2]), n.model.rotation.y = h.MathUtils.degToRad(-l);
+          const c = this.toRenderCoordinates([n, o, 0]);
+          r.model.position.set(c[0], c[1], c[2]), r.model.rotation.y = l.MathUtils.degToRad(-h);
         }
       }
     }
@@ -183,12 +231,12 @@ class k {
   }
   toRenderCoordinates(i) {
     const e = [0, 0, 0];
-    return g.toRenderCoordinates(
+    return u.toRenderCoordinates(
       // @ts-ignore
       this.view,
       i,
       0,
-      w.WGS84,
+      v.WGS84,
       e,
       0,
       1
@@ -257,7 +305,7 @@ class k {
    * */
   disposeModel(i) {
     i.traverse((e) => {
-      e instanceof h.Mesh && (e.geometry.dispose(), e.material.dispose());
+      e instanceof l.Mesh && (e.geometry.dispose(), e.material.dispose());
     });
   }
   /**
@@ -269,33 +317,34 @@ class k {
       return;
     const s = Date.now();
     t.isMoving = !0, t.data.roadLayer === "1" ? t.model.visible = this.showGroundVehicle : t.model.visible = this.showElevatedVehicle, t.segmentStartTime || (t.segmentStartTime = s, t.segmentTotalTime = e[1].time - e[0].time);
-    const a = s - t.segmentStartTime, o = Math.min(
+    const a = s - t.segmentStartTime, n = Math.min(
       a / t.segmentTotalTime,
       1
     );
-    if (o === 1)
+    if (n === 1)
       if (e.shift(), e.length === 1) {
         t.waitForDelete === !0 ? this.deleteVehicle(t) : (t.segmentStartTime = void 0, t.segmentTotalTime = void 0, t.model.visible = !1, t.isMoving = !1, console.log("hide vehicle", i));
         return;
       } else
         return t.segmentStartTime = Date.now(), t.segmentTotalTime = e[1].time - e[0].time, (e[1].heading >= 270 && e[0].heading <= 90 || e[1].heading <= 90 && e[0].heading >= 270) && (e[1].heading > e[0].heading ? e[0].heading += 360 : e[1].heading += 360), e[0].pos.concat(e[0].heading);
-    else {
-      const r = e[0].pos[0] + (e[1].pos[0] - e[0].pos[0]) * o, l = e[0].pos[1] + (e[1].pos[1] - e[0].pos[1]) * o, n = e[0].heading + (e[1].heading - e[0].heading) * o;
-      return [r, l, 0, n];
-    }
+    else if (e.length >= 2) {
+      const o = e[0].pos[0] + (e[1].pos[0] - e[0].pos[0]) * n, h = e[0].pos[1] + (e[1].pos[1] - e[0].pos[1]) * n, r = e[0].heading + (e[1].heading - e[0].heading) * n;
+      return [o, h, 0, r];
+    } else
+      return;
   }
   /**
    * 根据车辆类型、车身颜色获取模型
    * */
   getVehicleModel(i) {
     if (this.view.camera.position.z >= this.cameraHeightThreshold) {
-      const e = new h.SphereGeometry(5, 32, 32), t = new h.MeshPhysicalMaterial({
+      const e = new l.SphereGeometry(5, 32, 32), t = new l.MeshPhysicalMaterial({
         color: 325253,
         emissive: 0,
         roughness: this.roughness,
         metalness: this.metalness
       });
-      return new h.Mesh(e, t);
+      return new l.Mesh(e, t);
     } else {
       let e;
       if (i.ptcType === 2)
@@ -321,7 +370,7 @@ class k {
         const t = this.materialMap.get(i.vehicleColor) || this.defaultMaterial;
         let s = !1;
         e.traverse((a) => {
-          !s && a instanceof h.Mesh && (a.material = t, s = !0);
+          !s && a instanceof l.Mesh && (a.material = t, s = !0);
         });
       }
       return e;
@@ -331,72 +380,70 @@ class k {
    * 创建号牌canvas
    * */
   createCanvas(i, e, t) {
-    const s = document.createElement("canvas"), a = i.width, o = i.height;
-    s.width = a, s.height = o;
-    const r = s.getContext("2d");
-    if (!r) {
+    const s = document.createElement("canvas"), a = i.width, n = i.height;
+    s.width = a, s.height = n;
+    const o = s.getContext("2d");
+    if (!o) {
       console.log("canvas创建失败");
       return;
     }
-    return r.fillStyle = "rgba(0,0,0,0.0)", r.fillRect(0, 0, a, o), r.drawImage(i, 0, 0, a, o), r.beginPath(), r.translate(a / 2, o / 2), r.fillStyle = t, r.font = "bold 32px 宋体", r.textBaseline = "middle", r.textAlign = "center", r.fillText(e, 0, 0), s;
+    return o.fillStyle = "rgba(0,0,0,0.0)", o.fillRect(0, 0, a, n), o.drawImage(i, 0, 0, a, n), o.beginPath(), o.translate(a / 2, n / 2), o.fillStyle = t, o.font = "bold 32px 宋体", o.textBaseline = "middle", o.textAlign = "center", o.fillText(e, 0, 0), s;
   }
   createPlateSprite(i) {
     return new Promise((e, t) => {
-      var n, m;
+      var r, m;
       const s = !i.plateNo || i.plateNo === "0" || i.plateNo === "000000";
       if (this.currentSpriteContent === d.None || this.currentSpriteContent === d.PlateNumber && s) {
         e(void 0);
         return;
       }
-      const a = new Image();
-      let o = "", r = "", l = "";
+      let a = new Image(), n = "", o = "";
       if (this.currentSpriteContent === d.PlateNumber || this.currentSpriteContent === d.Mix)
         if (s)
-          o = "grey", r = i.ptcId, l = "#ffffff";
+          a = this.greyPlateBG, n = i.ptcId, o = "#ffffff";
         else
-          switch (r = ((n = i.showName) == null ? void 0 : n.substring(0, 2)) + "•" + ((m = i.showName) == null ? void 0 : m.substring(2)), i.plateColor) {
+          switch (n = ((r = i.showName) == null ? void 0 : r.substring(0, 2)) + "•" + ((m = i.showName) == null ? void 0 : m.substring(2)), i.plateColor) {
             case 1:
-              o = "blue", l = "#ffffff";
+              a = this.bluePlateBG, o = "#ffffff";
               break;
             case 2:
-              o = "yellow", l = "#000000";
+              a = this.yellowPlateBG, o = "#000000";
               break;
             case 3:
-              o = "white", l = "#000000";
+              a = this.whitePlateBG, o = "#000000";
               break;
             case 4:
-              o = "black";
+              a = this.blackPlateBG, o = "#ffffff";
               break;
             case 5:
-              o = "neo_yellow", l = "#000000";
+              a = this.neoYellowPlateBG, o = "#000000";
               break;
             case 6:
-              o = "neo_green", l = "#000000";
+              a = this.neoGreenPlateBG, o = "#000000";
               break;
             default:
-              o = "grey", r = i.plateNo, l = "#ffffff";
+              a = this.greyPlateBG, n = i.plateNo, o = "#ffffff";
               break;
           }
       else
-        this.currentSpriteContent === d.Id && (o = "grey", r = i.ptcId, l = "#ffffff");
-      a.src = `${this.assetsRoot}/Images/PlateBG/${o}.png`, a.onload = () => {
-        const c = this.createCanvas(a, r, l);
-        if (!c)
-          t("canvas创建失败");
-        else {
-          const p = new h.CanvasTexture(c), M = new h.SpriteMaterial({
-            map: p,
-            transparent: !1
-          }), f = new h.Sprite(M), u = 0.05, b = c.width * u, v = c.height * u;
-          f.scale.set(b, v, 1), f.name = "VehiclePlate", e(f);
-        }
-        a.onerror = (p) => {
-          console.log(`号牌背景加载失败: ${a.src}`, p), t(p);
-        };
+        this.currentSpriteContent === d.Id && (a = this.greyPlateBG, n = i.ptcId, o = "#ffffff");
+      const h = this.createCanvas(a, n, o);
+      if (h) {
+        const c = new l.CanvasTexture(h), p = new l.SpriteMaterial({
+          map: c,
+          transparent: !1
+        }), g = new l.Sprite(p), f = 0.05, M = h.width * f, w = h.height * f;
+        g.scale.set(M, w, 1), g.name = "VehiclePlate", e(g);
+      } else {
+        t("canvas创建失败");
+        return;
+      }
+      a.onerror = (c) => {
+        console.log(`号牌背景加载失败: ${a.src}`, c), t(c);
       };
     });
   }
 }
 export {
-  k as default
+  I as default
 };

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

@@ -5,6 +5,7 @@ export default class TraceRendererLayer implements ITraceRendererInterface {
     private mapConfig;
     private rafSignal;
     constructor(view: __esri.MapView);
+    init(): Promise<void>;
     private needInterpolate;
     private isPaused;
     private showVehiclePlate;

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

@@ -9,6 +9,9 @@ class f {
       id: "vehicleLayer"
     }), this.view.map.add(this.vehicleLayer), this.rafSignal = requestAnimationFrame(() => this.render());
   }
+  async init() {
+    console.log("init");
+  }
   addVehicles(i) {
     return new Promise((e) => {
       if (this.isPaused) {

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

@@ -140,6 +140,7 @@ export interface IToggleTrafficInfoParams {
     visible: boolean;
 }
 export interface ITraceRendererInterface {
+    init(): Promise<void>;
     addVehicles(objects: IVehicleTrack[]): Promise<void>;
     updateVehicles(objects: IVehicleTrack[]): Promise<void>;
     deleteVehicles(idList: string[]): void;

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

@@ -27,7 +27,10 @@ declare const _sfc_main: import("vue").DefineComponent<{
     overlay: Overlay;
     queueLength: QueueLength;
     openDriveRenderer: OpenDriveRenderer;
+    showLogDiv: import("vue").Ref<boolean>;
     mapViewer: import("vue").ComputedRef<MapView | SceneView>;
+    startSaveTrackLog: () => void;
+    downloadTrackLog: () => void;
     setMapCenter: (params: ISetMapCenterParams) => Promise<import("../types").IResult>;
     setMapCamera: (params: ISetMapCameraParams) => Promise<import("../types").IResult>;
     lookAt: (params: ILookAtParams) => Promise<void>;

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

@@ -1 +1 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const o=require("vue"),w=require("./stores/index.js");require("./style/index.css");const y=require("./utils/holo-flow/index.js"),se=require("./utils/map-initializer.js"),ce=require("./utils/open-drive-renderer/index.js"),ie=require("./utils/overlay.js"),oe=require("./utils/queue-length.js"),O=require("./utils/road-config-tool/index.js"),le=require("./utils/traffic-flow.js"),ue={class:"gis-viewer"},de=o.defineComponent({__name:"gis-map",props:{config:{},assetsRoot:{}},emits:["mapLoaded","markerClick","mapClick"],setup(T,{expose:k,emit:b}){const d=o.ref(null);let s,c,a,r,t,n,l,u;w.registerStore(),o.onMounted(async()=>{if(!d.value)return;const e=o.getCurrentInstance(),{$gisviewerAssetsRoot:i}=e.appContext.config.globalProperties,C=await(await fetch(v.config)).json();C.assetsRoot=v.assetsRoot||i;const ae=w.default.useAppDataStore;ae.mapConfig=C,c=new se.default,s=await c.initialize({container:d.value,markerClickCallback:(m,p,g,re)=>{f("markerClick",m,p,g,re)},mapClickCallback:(m,p,g)=>{f("mapClick",m,p,g)}}),t=new y.default(s),f("mapLoaded")});const I=o.computed(()=>s),q=async e=>await c.setMapCenter(e),A=async e=>await c.setMapCamera(e),L=async e=>await c.lookAt(e),_=e=>c.setLayerVisibility(e),h=(e,i)=>c.requestCoordinateTransform(e,i),S=e=>{c.cancelCoordinateTransform(e)},D=e=>{c.setMapZoomRange(e)},M=e=>(a||(a=new O.default(s)),a.showLaneNumber(e)),x=()=>{a==null||a.clearLaneNumber()},V=async e=>(a||(a=new O.default(s)),await a.initializeSearch(e)),B=async()=>a==null?void 0:a.calCrossIndicatorArea(),H=async()=>{},R=async(e,i)=>{r||(r=new le.default(s)),r.connectTrafficFlow(e,i)},j=()=>{r==null||r.disconnectTrafficFlow()},z=e=>{t||(t=new y.default(s)),t.handleVehicleTraceData(e)},N=()=>{t==null||t.clearHoloTrace()},P=e=>{t==null||t.setInterpolate(e)},Q=async e=>{t||(t=new y.default(s)),await t.handleSignalData(e)},E=()=>{t==null||t.clearHoloSignal()},Z=e=>{r==null||r.toggleTrafficInfo(e),t==null||t.toggleTrafficInfo(e)},G=e=>{t==null||t.togglePause(e)},J=e=>{t==null||t.toggleTrafficObject(e),r==null||r.toggleTrafficObject(e)},K=e=>{t==null||t.updatePanelContent(e)},U=async e=>(n||(n=new ie.default(s)),n.addOverlays(e)),W=e=>n==null?void 0:n.removeOverlaysByType(e),X=e=>n==null?void 0:n.removeOverlaysById(e),Y=()=>n==null?void 0:n.removeAllOverlays(),$=()=>{n==null||n.showAllOverlays()},F=e=>{l||(l=new oe.default(s)),l.updateQueueLength(e)},ee=()=>{l==null||l.removeQueueLength()},te=async(e,i)=>{u||(u=new ce.default(s)),await u.showOpenDrive(e,i)},ne=async()=>{await(u==null?void 0:u.hideOpenDrive())},v=T,f=b;return k({mapViewer:I,setLayerVisibility:_,setMapCenter:q,lookAt:L,setMapCamera:A,setMapZoomRange:D,requestCoordinateTransform:h,cancelCoordinateTransform:S,addOverlays:U,showAllOverlays:$,removeOverlaysByType:W,removeOverlaysById:X,removeAllOverlays:Y,showLaneNumber:M,clearLaneNumber:x,initializeAreaTool:V,calCrossIndicatorArea:B,calRoadIndicatorArea:H,connectCarFlow:R,disconnectCarFlow:j,handleHoloVehicleTraceData:z,clearHoloTrace:N,handleHoloSignalData:Q,clearHoloSignal:E,setInterpolate:P,toggleTrafficInfo:Z,toggleTrafficObject:J,toggleVehicleInfo:K,togglePause:G,updateQueueLength:F,removeQueueLength:ee,showOpenDrive:te,hideOpenDrive:ne}),(e,i)=>(o.openBlock(),o.createElementBlock("div",ue,[o.createElementVNode("div",{class:"gis-viewer-main",ref_key:"mapContainer",ref:d},null,512)]))}});exports.default=de;
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const a=require("vue"),v=require("./stores/index.js");require("./style/index.css");const ce=require("./utils/holo-flow/index.js"),ie=require("./utils/map-initializer.js"),le=require("./utils/open-drive-renderer/index.js"),ue=require("./utils/overlay.js"),de=require("./utils/queue-length.js"),C=require("./utils/road-config-tool/index.js"),pe=require("./utils/traffic-flow.js"),me={class:"gis-viewer"},fe={style:{position:"absolute",bottom:"10px",left:"10px"}},ge=a.defineComponent({__name:"gis-map",props:{config:{},assetsRoot:{}},emits:["mapLoaded","markerClick","mapClick"],setup(k,{expose:T,emit:b}){const p=a.ref(null);let s,c,n,o,r,t,l,u;const m=a.ref(!1);v.registerStore(),a.onMounted(async()=>{if(!p.value)return;document.addEventListener("keydown",d=>{d.ctrlKey&&d.key==="i"&&(m.value=!m.value)});const e=a.getCurrentInstance(),{$gisviewerAssetsRoot:i}=e.appContext.config.globalProperties,h=await(await fetch(y.config)).json();h.assetsRoot=y.assetsRoot||i;const re=v.default.useAppDataStore;re.mapConfig=h,c=new ie.default,s=await c.initialize({container:p.value,markerClickCallback:(d,g,w,se)=>{f("markerClick",d,g,w,se)},mapClickCallback:(d,g,w)=>{f("mapClick",d,g,w)}}),r=new ce.default(s),await r.init(),f("mapLoaded")});const L=a.computed(()=>s),O=()=>{const e=v.default.useAppDataStore;e.saveTrackLog=!0},I=()=>{r.downloadTrackLog()},S=async e=>await c.setMapCenter(e),A=async e=>await c.setMapCamera(e),D=async e=>await c.lookAt(e),_=e=>c.setLayerVisibility(e),q=(e,i)=>c.requestCoordinateTransform(e,i),x=e=>{c.cancelCoordinateTransform(e)},V=e=>{c.setMapZoomRange(e)},M=e=>(n||(n=new C.default(s)),n.showLaneNumber(e)),N=()=>{n==null||n.clearLaneNumber()},B=async e=>(n||(n=new C.default(s)),await n.initializeSearch(e)),E=async()=>n==null?void 0:n.calCrossIndicatorArea(),H=async()=>{},R=async(e,i)=>{o||(o=new pe.default(s)),o.connectTrafficFlow(e,i)},j=()=>{o==null||o.disconnectTrafficFlow()},z=e=>{r.handleVehicleTraceData(e)},P=()=>{r.clearHoloTrace()},Q=e=>{r.setInterpolate(e)},Z=async e=>{await r.handleSignalData(e)},F=()=>{r.clearHoloSignal()},K=e=>{o==null||o.toggleTrafficInfo(e),r.toggleTrafficInfo(e)},G=e=>{r.togglePause(e)},J=e=>{o==null||o.toggleTrafficObject(e),r.toggleTrafficObject(e)},U=e=>{r.updatePanelContent(e)},W=async e=>(t||(t=new ue.default(s)),t.addOverlays(e)),X=e=>t==null?void 0:t.removeOverlaysByType(e),Y=e=>t==null?void 0:t.removeOverlaysById(e),$=()=>t==null?void 0:t.removeAllOverlays(),ee=()=>{t==null||t.showAllOverlays()},te=e=>{l||(l=new de.default(s)),l.updateQueueLength(e)},ae=()=>{l==null||l.removeQueueLength()},ne=async(e,i)=>{u||(u=new le.default(s)),await u.showOpenDrive(e,i)},oe=async()=>{await(u==null?void 0:u.hideOpenDrive())},y=k,f=b;return T({mapViewer:L,setLayerVisibility:_,setMapCenter:S,lookAt:D,setMapCamera:A,setMapZoomRange:V,requestCoordinateTransform:q,cancelCoordinateTransform:x,addOverlays:W,showAllOverlays:ee,removeOverlaysByType:X,removeOverlaysById:Y,removeAllOverlays:$,showLaneNumber:M,clearLaneNumber:N,initializeAreaTool:B,calCrossIndicatorArea:E,calRoadIndicatorArea:H,connectCarFlow:R,disconnectCarFlow:j,handleHoloVehicleTraceData:z,clearHoloTrace:P,handleHoloSignalData:Z,clearHoloSignal:F,setInterpolate:Q,toggleTrafficInfo:K,toggleTrafficObject:J,toggleVehicleInfo:U,togglePause:G,updateQueueLength:te,removeQueueLength:ae,showOpenDrive:ne,hideOpenDrive:oe}),(e,i)=>(a.openBlock(),a.createElementBlock("div",me,[a.createElementVNode("div",{class:"gis-viewer-main",ref_key:"mapContainer",ref:p},[a.withDirectives(a.createElementVNode("div",fe,[a.createElementVNode("button",{style:{"margin-right":"10px"},onClick:O}," 开始记录 "),a.createElementVNode("button",{onClick:I},"下载日志")],512),[[a.vShow,m.value]])],512)]))}});exports.default=ge;

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

@@ -17,7 +17,10 @@ export declare const GisMap: import("@easyest/utils/dist/lib/withinstall").SFCWi
     overlay: import("./utils/overlay").default;
     queueLength: import("./utils/queue-length").default;
     openDriveRenderer: import("./utils/open-drive-renderer").default;
+    showLogDiv: import("vue").Ref<boolean>;
     mapViewer: import("vue").ComputedRef<__esri.MapView | __esri.SceneView>;
+    startSaveTrackLog: () => void;
+    downloadTrackLog: () => 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>;

package/lib/src/gis-map/stores/appData.d.ts

@@ -1,3 +1,4 @@
 export declare const useAppDataStore: import("pinia").StoreDefinition<"appData", {
     mapConfig: {};
+    saveTrackLog: boolean;
 }, {}, {}>;

package/lib/src/gis-map/stores/appData.js

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("pinia"),t=e.defineStore("appData",{state:()=>({mapConfig:{}})});exports.useAppDataStore=t;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("pinia"),t=e.defineStore("appData",{state:()=>({mapConfig:{},saveTrackLog:!1})});exports.useAppDataStore=t;

package/lib/src/gis-map/utils/holo-flow/index.d.ts

@@ -5,6 +5,7 @@ export default class Index {
     private traceHoloFlow;
     private signalHoloFlow;
     constructor(view: View);
+    init(): Promise<void>;
     /**
      * 处理全息流轨迹数据
      * */
@@ -17,4 +18,5 @@ export default class Index {
     handleSignalData(data: any): Promise<void>;
     clearHoloSignal(): void;
     setInterpolate(enable: boolean): void;
+    downloadTrackLog(): void;
 }

package/lib/src/gis-map/utils/holo-flow/index.js

@@ -1 +1 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const a=require("../../../types/index.js"),o=require("./signal-holo-flow.js"),i=require("./trace-holo-flow.js");class c{constructor(e){this.view=e}handleVehicleTraceData(e){this.traceHoloFlow||(this.traceHoloFlow=new i.default(this.view)),this.traceHoloFlow.handleVehicleTraceData(e)}toggleTrafficObject(e){var l,t;switch(e.name.toLowerCase()){case"groundVehicle".toLowerCase():(l=this.traceHoloFlow)==null||l.toggleGroundVehicle(e.visible);break;case"elevatedVehicle".toLowerCase():(t=this.traceHoloFlow)==null||t.toggleElevatedVehicle(e.visible);break}}clearHoloTrace(){var e;(e=this.traceHoloFlow)==null||e.clearTrace()}toggleTrafficInfo(e){var l;(l=this.traceHoloFlow)==null||l.toggleTrafficInfo(e)}togglePause(e){var l;(l=this.traceHoloFlow)==null||l.togglePause(e)}updatePanelContent(e){var t;let l=a.EVehiclePlateState.None;switch(e){case"none":l=a.EVehiclePlateState.None;break;case"plateNumber":l=a.EVehiclePlateState.PlateNumber;break;case"vehicleId":l=a.EVehiclePlateState.Id;break;case"mix":l=a.EVehiclePlateState.Mix;break}(t=this.traceHoloFlow)==null||t.updatePanelContent(l)}async handleSignalData(e){this.signalHoloFlow||(this.signalHoloFlow=new o.default(this.view)),await this.signalHoloFlow.initializeLayer(),await this.signalHoloFlow.handleSignalData(e)}clearHoloSignal(){var e;(e=this.signalHoloFlow)==null||e.clearSignal()}setInterpolate(e){var l;(l=this.traceHoloFlow)==null||l.setInterpolate(e)}}exports.default=c;
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const t=require("../../../types/index.js"),a=require("./signal-holo-flow.js"),o=require("./trace-holo-flow.js");class i{constructor(e){this.view=e}async init(){this.traceHoloFlow=new o.default(this.view),await this.traceHoloFlow.init()}handleVehicleTraceData(e){this.traceHoloFlow.handleVehicleTraceData(e)}toggleTrafficObject(e){switch(e.name.toLowerCase()){case"groundVehicle".toLowerCase():this.traceHoloFlow.toggleGroundVehicle(e.visible);break;case"elevatedVehicle".toLowerCase():this.traceHoloFlow.toggleElevatedVehicle(e.visible);break}}clearHoloTrace(){this.traceHoloFlow.clearTrace()}toggleTrafficInfo(e){this.traceHoloFlow.toggleTrafficInfo(e)}togglePause(e){this.traceHoloFlow.togglePause(e)}updatePanelContent(e){let l=t.EVehiclePlateState.None;switch(e){case"none":l=t.EVehiclePlateState.None;break;case"plateNumber":l=t.EVehiclePlateState.PlateNumber;break;case"vehicleId":l=t.EVehiclePlateState.Id;break;case"mix":l=t.EVehiclePlateState.Mix;break}this.traceHoloFlow.updatePanelContent(l)}async handleSignalData(e){this.signalHoloFlow||(this.signalHoloFlow=new a.default(this.view)),await this.signalHoloFlow.initializeLayer(),await this.signalHoloFlow.handleSignalData(e)}clearHoloSignal(){this.signalHoloFlow.clearSignal()}setInterpolate(e){this.traceHoloFlow.setInterpolate(e)}downloadTrackLog(){this.traceHoloFlow.downloadLog()}}exports.default=i;

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

@@ -9,12 +9,14 @@ export default class SignalHoloFlow {
     /** 每个路口倒计时canvas */
     private countdownCanvasMap;
     private countdownWatchHandel;
+    private plateBackground;
     private lastDataTime;
     constructor(view: View);
     /**
      * 初始化相位线图层
      * */
     initializeLayer(): Promise<void>;
+    private initializePlateBackground;
     handleSignalData(data: any): Promise<void>;
     /**
      * 清除实时信号相关图层