gisviewer-vue3-arcgis 1.0.101 → 1.0.103

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

@@ -0,0 +1,381 @@
+import w from "@arcgis/core/geometry/SpatialReference";
+import * as g from "@arcgis/core/views/3d/externalRenderers";
+import * as o from "three";
+import { GLTFLoader as u } from "three/examples/jsm/loaders/GLTFLoader.js";
+import { EVehiclePlateState as p } from "../../../types/index.mjs";
+import R from "../../stores/index.mjs";
+class k {
+  constructor(i) {
+    this.defaultMaterial = new o.MeshBasicMaterial({
+      color: 6908265
+    }), this.materialMap = /* @__PURE__ */ new Map([
+      [1, new o.MeshBasicMaterial({ color: 16777215 })],
+      [2, new o.MeshBasicMaterial({ color: 7833753 })],
+      [3, new o.MeshBasicMaterial({ color: 16766720 })],
+      [4, new o.MeshBasicMaterial({ color: 16758465 })],
+      [5, new o.MeshBasicMaterial({ color: 14423100 })],
+      [6, new o.MeshBasicMaterial({ color: 3329330 })],
+      [7, new o.MeshBasicMaterial({ color: 2003183 })],
+      [8, new o.MeshBasicMaterial({ color: 16032864 })],
+      [9, new o.MeshBasicMaterial({ color: 2105376 })],
+      [10, new o.MeshBasicMaterial({ color: 9662683 })],
+      [99, new o.MeshBasicMaterial({ color: 6908265 })]
+    ]), this.carModelReady = !1, this.vanModelReady = !1, this.truckModelReady = !1, this.busModelReady = !1, this.bicycleModelReady = !1, this.currentSpriteContent = p.None, this.historyPositionMap = /* @__PURE__ */ new Map(), this.vehicleObjectMap = /* @__PURE__ */ new Map(), this.needInterpolate = !0;
+    const e = R.useAppDataStore;
+    this.assetsRoot = JSON.parse(
+      JSON.stringify(e.mapConfig)
+    ).assetsRoot, this.view = i;
+    const t = new u();
+    t.load(`${this.assetsRoot}/3DModels/car.glb`, (s) => {
+      this.carModel = s.scene, this.carModel.rotation.x = o.MathUtils.degToRad(90), this.carModelReady = !0;
+    }), t.load(`${this.assetsRoot}/3DModels/van.glb`, (s) => {
+      this.vanModel = s.scene, this.vanModel.rotation.x = o.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 = o.MathUtils.degToRad(90), this.truckModelReady = !0;
+    }), t.load(`${this.assetsRoot}/3DModels/bus.glb`, (s) => {
+      this.busModel = s.scene, this.busModel.rotation.x = o.MathUtils.degToRad(90), this.busModelReady = !0;
+    }), t.load(`${this.assetsRoot}/3DModels/bicycle.glb`, (s) => {
+      this.bicycleModel = s.scene, this.bicycleModel.rotation.x = o.MathUtils.degToRad(90), this.bicycleModel.rotation.y = o.MathUtils.degToRad(180), this.bicycleModelReady = !0;
+    }), document.addEventListener(
+      "visibilitychange",
+      () => {
+        this.clearVehicles(), this.needInterpolate = !document.hidden;
+      },
+      !1
+    );
+  }
+  setInterpolate(i) {
+    this.clearVehicles(), this.needInterpolate = i;
+  }
+  async setup(i) {
+    this.context = i, this.renderer = new o.WebGLRenderer({
+      context: i.gl,
+      premultipliedAlpha: !0,
+      logarithmicDepthBuffer: !0,
+      antialias: !0,
+      powerPreference: "high-performance"
+    }), this.renderer.setPixelRatio(window.devicePixelRatio), this.renderer.setViewport(0, 0, this.view.width, this.view.height), this.renderer.autoClearDepth = !1, this.renderer.autoClearStencil = !1, this.renderer.autoClearColor = !1;
+    const e = this.renderer.setRenderTarget.bind(
+      this.renderer
+    );
+    this.renderer.setRenderTarget = (t) => {
+      e(t), t == null && i.bindRenderTarget();
+    }, this.scene = new o.Scene(), this.camera = new o.PerspectiveCamera(), this.ambient = new o.AmbientLight(16777215, 0.5), this.scene.add(this.ambient), this.sun = new o.DirectionalLight(16777215, 0.5), this.scene.add(this.sun), i.resetWebGLState();
+  }
+  geometryTest() {
+    new u().load(`${this.assetsRoot}/3DModels/car.glb`, (e) => {
+      this.mesh = e.scene, this.mesh.rotation.x = o.MathUtils.degToRad(90);
+      const t = [121.46892831020403, 31.239681632841354, 0], s = this.toRenderCoordinates(t);
+      this.mesh.position.set(s[0], s[1], s[2]), this.scene.add(this.mesh), new o.TextureLoader().load(
+        `${this.assetsRoot}/Images/PlateBG/grey.png`,
+        (r) => {
+          const n = new o.SpriteMaterial({
+            map: r,
+            transparent: !1
+          }), a = new o.Sprite(n);
+          a.scale.set(5, 2.5, 1), a.position.set(0, 5, -4), this.mesh.add(a), console.log(this.mesh.visible, a.visible);
+        }
+      );
+    });
+  }
+  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 o.Vector3(e.center[0], e.center[1], e.center[2])
+    ), this.camera.projectionMatrix.fromArray(e.projectionMatrix), this.needInterpolate)
+      for (const l of this.vehicleObjectMap.keys()) {
+        const r = (s = this.vehicleObjectMap.get(l)) == null ? void 0 : s.model;
+        if (!r)
+          continue;
+        const n = this.computeVehiclePosition(l);
+        if (n) {
+          const a = this.toRenderCoordinates(n);
+          r.position.set(a[0], a[1], a[2]), r.rotation.y = o.MathUtils.degToRad(-n[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 o.Color(
+      t.diffuse.color[0],
+      t.diffuse.color[1],
+      t.diffuse.color[2]
+    ), this.ambient.intensity = t.ambient.intensity, this.ambient.color = new o.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();
+  }
+  /**
+   * 新增车辆
+   * */
+  async addVehicles(i) {
+    if (!(!this.carModelReady || !this.vanModelReady || !this.truckModelReady || !this.busModelReady || !this.bicycleModelReady))
+      for (const e of i) {
+        const { vehicleId: t, localTimestamp: s } = e, l = Number(e.x), r = Number(e.y), n = Number(e.heading);
+        this.historyPositionMap.set(t, [
+          { pos: [l, r, 0], heading: n, time: s }
+        ]);
+        const a = this.getVehicleModel(e);
+        a.name = t, a.visible = !this.needInterpolate;
+        try {
+          const c = await this.createPlateSprite(e);
+          c && (a.add(c), c.position.set(0, 5, -4)), this.scene.add(a), this.vehicleObjectMap.set(t, {
+            model: a,
+            data: e,
+            waitForDelete: !1,
+            isMoving: !1
+          });
+        } catch (c) {
+          console.log("createPlateSprite error:", c);
+        }
+      }
+  }
+  /**
+   * 更新车辆
+   * */
+  async updateVehicles(i) {
+    if (!this.carModelReady || !this.vanModelReady || !this.truckModelReady || !this.busModelReady || !this.bicycleModelReady)
+      return;
+    const e = [];
+    for (const t of i) {
+      const { vehicleId: s, localTimestamp: l } = t, r = Number(t.x), n = Number(t.y);
+      let a = Number(t.heading);
+      const c = this.vehicleObjectMap.get(s);
+      if (!c)
+        e.push(t);
+      else {
+        if (c.data.vehicleColor !== t.vehicleColor || c.data.vehicleType !== t.vehicleType) {
+          this.scene.remove(c.model), this.disposeModel(c.model), c.model = this.getVehicleModel(t);
+          const h = await this.createPlateSprite(t);
+          h && (c.model.add(h), h.position.set(0, 5, -4)), this.scene.add(c.model);
+        }
+        if (c.data.showName !== t.showName || c.data.plateColor !== t.plateColor) {
+          const h = c.model.getObjectByName("VehiclePlate");
+          h && (c.model.remove(h), this.disposeModel(h));
+          const d = await this.createPlateSprite(t);
+          d && (c.model.add(d), d.position.set(0, 5, -4));
+        }
+        if (c.data = t, this.needInterpolate) {
+          const h = this.historyPositionMap.get(
+            s
+          ), d = h[h.length - 1];
+          Math.abs(a - d.heading) >= 180 && (a > d.heading ? d.heading += 360 : a += 360), h.push({
+            pos: [r, n, 0],
+            heading: a,
+            time: l
+          });
+        } else {
+          this.historyPositionMap.set(s, [
+            { pos: [r, n, 0], heading: a, time: l }
+          ]);
+          const h = this.toRenderCoordinates([r, n, 0]);
+          c.model.position.set(h[0], h[1], h[2]), c.model.rotation.y = o.MathUtils.degToRad(-a);
+        }
+      }
+    }
+    this.addVehicles(e), this.needInterpolate || this.render(this.context);
+  }
+  toRenderCoordinates(i) {
+    const e = [0, 0, 0];
+    return g.toRenderCoordinates(
+      // @ts-ignore
+      this.view,
+      i,
+      0,
+      w.WGS84,
+      e,
+      0,
+      1
+    ), e;
+  }
+  /**
+   * 删除车辆
+   * */
+  deleteVehicles(i) {
+    i.forEach((e) => {
+      const t = this.vehicleObjectMap.get(e);
+      t && (this.needInterpolate ? t.isMoving ? t.waitForDelete = !0 : this.deleteVehicle(t) : this.deleteVehicle(t));
+    });
+  }
+  deleteVehicle(i) {
+    this.scene.remove(i.model), this.disposeModel(i.model);
+    const e = i.data.vehicleId;
+    this.vehicleObjectMap.delete(e), this.historyPositionMap.delete(e);
+  }
+  async toggleTrafficInfo(i) {
+    i.name === "vehiclePlate" && (i.visible === !0 && this.currentSpriteContent === p.None ? await this.updatePanelContent(p.Id) : await this.updatePanelContent(
+      i.visible ? this.currentSpriteContent : p.None
+    ));
+  }
+  /**
+   * 清除全部车辆
+   * */
+  clearVehicles() {
+    for (const i of this.vehicleObjectMap.keys()) {
+      const e = this.vehicleObjectMap.get(i);
+      e && (this.disposeModel(e.model), this.scene.remove(e.model));
+    }
+    this.vehicleObjectMap.clear(), this.historyPositionMap.clear();
+  }
+  /**
+   * 设置号牌显示状态
+   * @param contentType
+   * @returns
+   */
+  async updatePanelContent(i) {
+    if (i !== this.currentSpriteContent) {
+      this.currentSpriteContent = i;
+      for (const e of this.vehicleObjectMap.keys()) {
+        const t = this.vehicleObjectMap.get(e);
+        if (t) {
+          const s = t.model.getObjectByName("VehiclePlate");
+          if (s && (t.model.remove(s), this.disposeModel(s)), i !== p.None) {
+            const l = await this.createPlateSprite(t.data);
+            l && (t.model.add(l), l.position.set(0, 5, -4));
+          }
+        }
+      }
+    }
+  }
+  toggleGroundVehicle(i) {
+  }
+  toggleElevatedVehicle(i) {
+  }
+  /**
+   * 释放模型资源
+   * */
+  disposeModel(i) {
+    i.traverse((e) => {
+      e instanceof o.Mesh && (e.geometry.dispose(), e.material.dispose());
+    });
+  }
+  /**
+   * 计算车辆位置
+   * */
+  computeVehiclePosition(i) {
+    const e = this.historyPositionMap.get(i), t = this.vehicleObjectMap.get(i);
+    if (!t || !e || !t.isMoving && e.length <= 2)
+      return;
+    const s = Date.now();
+    t.model.visible = !0, t.isMoving = !0, t.segmentStartTime || (t.segmentStartTime = s, t.segmentTotalTime = e[1].time - e[0].time);
+    const l = s - t.segmentStartTime, r = Math.min(
+      l / t.segmentTotalTime,
+      1
+    );
+    if (r === 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("pause 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 n = e[0].pos[0] + (e[1].pos[0] - e[0].pos[0]) * r, a = e[0].pos[1] + (e[1].pos[1] - e[0].pos[1]) * r, c = e[0].heading + (e[1].heading - e[0].heading) * r;
+      return [n, a, 0, c];
+    }
+  }
+  /**
+   * 根据车辆类型、车身颜色获取模型
+   * */
+  getVehicleModel(i) {
+    let e;
+    if (i.ptcType === 2)
+      e = this.bicycleModel.clone();
+    else {
+      switch (i.vehicleType) {
+        case 10:
+          e = this.carModel.clone();
+          break;
+        case 20:
+          e = this.vanModel.clone();
+          break;
+        case 25:
+          e = this.truckModel.clone();
+          break;
+        case 50:
+          e = this.busModel.clone();
+          break;
+        default:
+          e = this.carModel.clone();
+          break;
+      }
+      const t = this.materialMap.get(i.vehicleColor) || this.defaultMaterial;
+      let s = !1;
+      e.traverse((l) => {
+        !s && l instanceof o.Mesh && (l.material = t, s = !0);
+      });
+    }
+    return e;
+  }
+  /**
+   * 创建号牌canvas
+   * */
+  createCanvas(i, e, t) {
+    const s = document.createElement("canvas"), l = i.width, r = i.height;
+    s.width = l, s.height = r;
+    const n = s.getContext("2d");
+    if (!n) {
+      console.log("canvas创建失败");
+      return;
+    }
+    return n.fillStyle = "rgba(0,0,0,0.0)", n.fillRect(0, 0, l, r), n.drawImage(i, 0, 0, l, r), n.beginPath(), n.translate(l / 2, r / 2), n.fillStyle = t, n.font = "bold 32px 宋体", n.textBaseline = "middle", n.textAlign = "center", n.fillText(e, 0, 0), s;
+  }
+  createPlateSprite(i) {
+    return new Promise((e, t) => {
+      var c, h;
+      const s = !i.plateNo || i.plateNo === "0" || i.plateNo === "000000";
+      if (this.currentSpriteContent === p.None || this.currentSpriteContent === p.PlateNumber && s) {
+        e(void 0);
+        return;
+      }
+      const l = new Image();
+      let r = "", n = "", a = "";
+      if (this.currentSpriteContent === p.PlateNumber || this.currentSpriteContent === p.Mix)
+        if (s)
+          r = "grey", n = i.ptcId, a = "#ffffff";
+        else
+          switch (n = ((c = i.showName) == null ? void 0 : c.substring(0, 2)) + "•" + ((h = i.showName) == null ? void 0 : h.substring(2)), i.plateColor) {
+            case 1:
+              r = "blue", a = "#ffffff";
+              break;
+            case 2:
+              r = "yellow", a = "#000000";
+              break;
+            case 3:
+              r = "white", a = "#000000";
+              break;
+            case 4:
+              r = "black";
+              break;
+            case 5:
+              r = "neo_yellow", a = "#000000";
+              break;
+            case 6:
+              r = "neo_green", a = "#000000";
+              break;
+            default:
+              r = "grey", n = i.plateNo, a = "#ffffff";
+              break;
+          }
+      else
+        this.currentSpriteContent === p.Id && (r = "grey", n = i.ptcId, a = "#ffffff");
+      l.src = `${this.assetsRoot}/Images/PlateBG/${r}.png`, l.onload = () => {
+        const d = this.createCanvas(l, n, a);
+        if (!d)
+          t("canvas创建失败");
+        else {
+          const f = new o.CanvasTexture(d), b = new o.SpriteMaterial({
+            map: f,
+            transparent: !1
+          }), m = new o.Sprite(b), M = 0.05, y = d.width * M, v = d.height * M;
+          m.scale.set(y, v, 1), m.name = "VehiclePlate", e(m);
+        }
+        l.onerror = (f) => {
+          console.log(`号牌背景加载失败: ${l.src}`, f), t(f);
+        };
+      };
+    });
+  }
+}
+export {
+  k as default
+};

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

@@ -1,9 +1,10 @@
 import { EVehiclePlateState, ITraceRendererInterface, IVehicleTrack } from '../../../types';
-export default class TraceLayerRenderer implements ITraceRendererInterface {
+export default class TraceRendererLayer implements ITraceRendererInterface {
     private view;
     private readonly vehicleLayer;
     private mapConfig;
     constructor(view: __esri.MapView);
+    private needInterpolate;
     private showVehiclePlate;
     private showGroundVehicle;
     private showElevatedVehicle;
@@ -13,7 +14,6 @@ export default class TraceLayerRenderer implements ITraceRendererInterface {
     updateVehicles(objects: IVehicleTrack[]): void;
     deleteVehicles(idList: string[]): void;
     clearVehicles(): void;
-    updatePanelContent(contentType: EVehiclePlateState): void;
     /**
      * 设置地面车辆显示隐藏
      * @param visible
@@ -28,6 +28,8 @@ export default class TraceLayerRenderer implements ITraceRendererInterface {
         name: string;
         visible: boolean;
     }): void;
+    updatePanelContent(contentType: EVehiclePlateState): void;
+    setInterpolate(needInterpolate: boolean): void;
     private render;
     private updatePosition;
     /**

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

@@ -1,49 +1,50 @@
 import h from "@arcgis/core/Graphic";
-import p from "@arcgis/core/layers/GraphicsLayer";
-import m from "../../stores/index.mjs";
+import c from "@arcgis/core/layers/GraphicsLayer";
+import p from "../../stores/index.mjs";
 class u {
   constructor(i) {
-    this.showVehiclePlate = !1, this.showGroundVehicle = !0, this.showElevatedVehicle = !0, this.historyPositionMap = /* @__PURE__ */ new Map(), this.vehicleObjectMap = /* @__PURE__ */ new Map(), this.view = i;
-    const e = m.useAppDataStore;
-    this.mapConfig = JSON.parse(JSON.stringify(e.mapConfig)), this.vehicleLayer = new p({
+    this.needInterpolate = !0, this.showVehiclePlate = !1, this.showGroundVehicle = !0, this.showElevatedVehicle = !0, this.historyPositionMap = /* @__PURE__ */ new Map(), this.vehicleObjectMap = /* @__PURE__ */ new Map(), this.view = i;
+    const e = p.useAppDataStore;
+    this.mapConfig = JSON.parse(JSON.stringify(e.mapConfig)), this.vehicleLayer = new c({
       id: "vehicleLayer"
     }), this.view.map.add(this.vehicleLayer), requestAnimationFrame(() => this.render());
   }
   addVehicles(i) {
     const e = i.map((t) => {
-      const { crossId: l, ptcId: n } = t, o = Number(t.x), a = Number(t.y), r = Number(t.heading), s = `${l}-${n}`;
-      this.historyPositionMap.set(s, [
-        { pos: [o, a, 0], heading: r, time: Date.now() }
+      const { vehicleId: o, heading: n, localTimestamp: a } = t, r = Number(t.x), l = Number(t.y);
+      this.historyPositionMap.set(o, [
+        { pos: [r, l, 0], heading: n, time: a }
       ]);
-      const c = new h({
+      const s = new h({
         geometry: {
           type: "point",
-          x: o,
-          y: a
+          x: r,
+          y: l
         },
         attributes: {
           ...t
         },
         symbol: this.createCIMSymbol(t)
       });
-      return c.visible = !1, this.vehicleObjectMap.set(s, {
-        graphic: c,
+      return s.visible = !1, this.vehicleObjectMap.set(o, {
+        graphic: s,
         data: t,
-        waitForDelete: !1
-      }), c;
+        waitForDelete: !1,
+        isMoving: !1
+      }), s;
     });
     this.vehicleLayer.addMany(e);
   }
   updateVehicles(i) {
     const e = [];
     i.forEach((t) => {
-      const { crossId: l, ptcId: n } = t, o = Number(t.x), a = Number(t.y), r = `${l}-${n}`, s = this.vehicleObjectMap.get(r);
+      const { vehicleId: o, heading: n, localTimestamp: a } = t, r = Number(t.x), l = Number(t.y), s = this.vehicleObjectMap.get(o);
       s ? (s.data = t, this.historyPositionMap.get(
-        r
+        o
       ).push({
-        pos: [o, a, 0],
-        heading: t.heading,
-        time: Date.now()
+        pos: [r, l, 0],
+        heading: n,
+        time: a
       })) : e.push(t);
     }), this.addVehicles(e);
   }
@@ -56,9 +57,6 @@ class u {
   clearVehicles() {
     this.vehicleLayer.removeAll(), this.vehicleObjectMap.clear(), this.historyPositionMap.clear();
   }
-  updatePanelContent(i) {
-    console.log(i);
-  }
   /**
    * 设置地面车辆显示隐藏
    * @param visible
@@ -76,6 +74,12 @@ class u {
   toggleTrafficInfo(i) {
     i.name === "vehiclePlate" && (this.showVehiclePlate = i.visible);
   }
+  updatePanelContent(i) {
+    console.log(i);
+  }
+  setInterpolate(i) {
+    this.needInterpolate = i;
+  }
   render() {
     this.vehicleObjectMap.forEach((i, e) => {
       this.updatePosition(e);
@@ -83,16 +87,16 @@ class u {
   }
   updatePosition(i) {
     const e = this.historyPositionMap.get(i), t = this.vehicleObjectMap.get(i);
-    if (!e || !t || e.length <= 1)
+    if (!e || !t || !t.isMoving && e.length <= 2)
       return;
-    (t.graphic.getAttribute("roadLayer") || "1") === "1" ? t.graphic.visible = this.showGroundVehicle : t.graphic.visible = this.showElevatedVehicle, t.segmentStartTime || (t.segmentStartTime = Date.now(), t.segmentTotalTime = e[1].time - e[0].time);
-    const n = Date.now() - t.segmentStartTime, o = Math.min(
+    t.isMoving = !0, (t.graphic.getAttribute("roadLayer") || "1") === "1" ? t.graphic.visible = this.showGroundVehicle : t.graphic.visible = this.showElevatedVehicle, t.segmentStartTime || (t.segmentStartTime = Date.now(), t.segmentTotalTime = e[1].time - e[0].time);
+    const n = Date.now() - t.segmentStartTime, a = Math.min(
       1,
       n / t.segmentTotalTime
     );
-    if (o === 1)
+    if (a === 1)
       if (e.shift(), e.length === 1) {
-        t.waitForDelete ? (this.vehicleLayer.remove(t.graphic), this.vehicleObjectMap.delete(i), this.historyPositionMap.delete(i)) : (t.segmentStartTime = void 0, t.segmentTotalTime = void 0);
+        t.waitForDelete ? (this.vehicleLayer.remove(t.graphic), this.vehicleObjectMap.delete(i), this.historyPositionMap.delete(i)) : (t.segmentStartTime = void 0, t.segmentTotalTime = void 0, t.graphic.visible = !1, t.isMoving = !1);
         return;
       } else
         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), t.graphic.geometry = {
@@ -101,11 +105,11 @@ class u {
           y: e[0].pos[1]
         };
     else {
-      const a = e[0].pos[0] + (e[1].pos[0] - e[0].pos[0]) * o, r = e[0].pos[1] + (e[1].pos[1] - e[0].pos[1]) * o, s = e[0].heading + (e[1].heading - e[0].heading) * o;
+      const r = e[0].pos[0] + (e[1].pos[0] - e[0].pos[0]) * a, l = e[0].pos[1] + (e[1].pos[1] - e[0].pos[1]) * a, s = e[0].heading + (e[1].heading - e[0].heading) * a;
       t.graphic.geometry = {
         type: "point",
-        x: a,
-        y: r
+        x: r,
+        y: l
       }, t.data.heading = s, t.graphic.symbol = this.createCIMSymbol(t.data);
     }
   }

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

@@ -22,6 +22,7 @@ export interface IVehicleTrack {
     localTimestamp: number;
     crossId?: string;
     ptcId: string;
+    vehicleId: string;
     x: number;
     y: number;
     ptcType: number;
@@ -147,6 +148,7 @@ export interface ITraceRendererInterface {
     toggleGroundVehicle(visible: boolean): void;
     toggleElevatedVehicle(visible: boolean): void;
     toggleTrafficInfo(params: IToggleTrafficInfoParams): void;
+    setInterpolate(enable: boolean): void;
 }
 export declare enum EVehiclePlateState {
     None = 0,

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

@@ -50,6 +50,7 @@ declare const _sfc_main: import("vue").DefineComponent<{
     disconnectCarFlow: () => void;
     handleHoloVehicleTraceData: (vehicleTrace: any) => void;
     clearHoloTrace: () => void;
+    setInterpolate: (enable: boolean) => void;
     handleHoloSignalData: (signalData: any) => Promise<void>;
     clearHoloSignal: () => void;
     toggleTrafficInfo: (params: IToggleTrafficInfoParams) => 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"),ae=require("./utils/map-initializer.js"),re=require("./utils/open-drive-renderer/index.js"),se=require("./utils/overlay.js"),ce=require("./utils/queue-length.js"),O=require("./utils/road-config-tool/index.js"),ie=require("./utils/traffic-flow.js"),oe={class:"gis-viewer"},le=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 te=w.default.useAppDataStore;te.mapConfig=C,c=new ae.default,s=await c.initialize({container:d.value,markerClickCallback:(m,p,g,ne)=>{f("markerClick",m,p,g,ne)},mapClickCallback:(m,p,g)=>{f("mapClick",m,p,g)}}),t=new y.default(s),f("mapLoaded")});const h=o.computed(()=>s),q=async e=>await c.setMapCenter(e),A=async e=>await c.setMapCamera(e),I=async e=>await c.lookAt(e),L=e=>c.setLayerVisibility(e),_=(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 ie.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()},Q=async e=>{t||(t=new y.default(s)),await t.handleSignalData(e)},P=()=>{t==null||t.clearHoloSignal()},E=e=>{r==null||r.toggleTrafficInfo(e),t==null||t.toggleTrafficInfo(e)},Z=e=>{t==null||t.toggleTrafficObject(e),r==null||r.toggleTrafficObject(e)},G=e=>{t==null||t.updatePanelContent(e)},J=async e=>(n||(n=new se.default(s)),n.addOverlays(e)),K=e=>n==null?void 0:n.removeOverlaysByType(e),U=e=>n==null?void 0:n.removeOverlaysById(e),W=()=>n==null?void 0:n.removeAllOverlays(),X=()=>{n==null||n.showAllOverlays()},Y=e=>{l||(l=new ce.default(s)),l.updateQueueLength(e)},$=()=>{l==null||l.removeQueueLength()},F=async(e,i)=>{u||(u=new re.default(s)),await u.showOpenDrive(e,i)},ee=async()=>{await(u==null?void 0:u.hideOpenDrive())},v=T,f=b;return k({mapViewer:h,setLayerVisibility:L,setMapCenter:q,lookAt:I,setMapCamera:A,setMapZoomRange:D,requestCoordinateTransform:_,cancelCoordinateTransform:S,addOverlays:J,showAllOverlays:X,removeOverlaysByType:K,removeOverlaysById:U,removeAllOverlays:W,showLaneNumber:M,clearLaneNumber:x,initializeAreaTool:V,calCrossIndicatorArea:B,calRoadIndicatorArea:H,connectCarFlow:R,disconnectCarFlow:j,handleHoloVehicleTraceData:z,clearHoloTrace:N,handleHoloSignalData:Q,clearHoloSignal:P,toggleTrafficInfo:E,toggleTrafficObject:Z,toggleVehicleInfo:G,updateQueueLength:Y,removeQueueLength:$,showOpenDrive:F,hideOpenDrive:ee}),(e,i)=>(o.openBlock(),o.createElementBlock("div",oe,[o.createElementVNode("div",{class:"gis-viewer-main",ref_key:"mapContainer",ref:d},null,512)]))}});exports.default=le;
+"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"),re=require("./utils/map-initializer.js"),se=require("./utils/open-drive-renderer/index.js"),ce=require("./utils/overlay.js"),ie=require("./utils/queue-length.js"),O=require("./utils/road-config-tool/index.js"),oe=require("./utils/traffic-flow.js"),le={class:"gis-viewer"},ue=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 ne=w.default.useAppDataStore;ne.mapConfig=C,c=new re.default,s=await c.initialize({container:d.value,markerClickCallback:(m,p,g,ae)=>{f("markerClick",m,p,g,ae)},mapClickCallback:(m,p,g)=>{f("mapClick",m,p,g)}}),t=new y.default(s),f("mapLoaded")});const I=o.computed(()=>s),h=async e=>await c.setMapCenter(e),q=async e=>await c.setMapCamera(e),A=async e=>await c.lookAt(e),L=e=>c.setLayerVisibility(e),_=(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 oe.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()},Q=e=>{t==null||t.setInterpolate(e)},P=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.toggleTrafficObject(e),r==null||r.toggleTrafficObject(e)},J=e=>{t==null||t.updatePanelContent(e)},K=async e=>(n||(n=new ce.default(s)),n.addOverlays(e)),U=e=>n==null?void 0:n.removeOverlaysByType(e),W=e=>n==null?void 0:n.removeOverlaysById(e),X=()=>n==null?void 0:n.removeAllOverlays(),Y=()=>{n==null||n.showAllOverlays()},$=e=>{l||(l=new ie.default(s)),l.updateQueueLength(e)},F=()=>{l==null||l.removeQueueLength()},ee=async(e,i)=>{u||(u=new se.default(s)),await u.showOpenDrive(e,i)},te=async()=>{await(u==null?void 0:u.hideOpenDrive())},v=T,f=b;return k({mapViewer:I,setLayerVisibility:L,setMapCenter:h,lookAt:A,setMapCamera:q,setMapZoomRange:D,requestCoordinateTransform:_,cancelCoordinateTransform:S,addOverlays:K,showAllOverlays:Y,removeOverlaysByType:U,removeOverlaysById:W,removeAllOverlays:X,showLaneNumber:M,clearLaneNumber:x,initializeAreaTool:V,calCrossIndicatorArea:B,calRoadIndicatorArea:H,connectCarFlow:R,disconnectCarFlow:j,handleHoloVehicleTraceData:z,clearHoloTrace:N,handleHoloSignalData:P,clearHoloSignal:E,setInterpolate:Q,toggleTrafficInfo:Z,toggleTrafficObject:G,toggleVehicleInfo:J,updateQueueLength:$,removeQueueLength:F,showOpenDrive:ee,hideOpenDrive:te}),(e,i)=>(o.openBlock(),o.createElementBlock("div",le,[o.createElementVNode("div",{class:"gis-viewer-main",ref_key:"mapContainer",ref:d},null,512)]))}});exports.default=ue;

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

@@ -40,6 +40,7 @@ export declare const GisMap: import("@easyest/utils/dist/lib/withinstall").SFCWi
     disconnectCarFlow: () => void;
     handleHoloVehicleTraceData: (vehicleTrace: any) => void;
     clearHoloTrace: () => void;
+    setInterpolate: (enable: boolean) => void;
     handleHoloSignalData: (signalData: any) => Promise<void>;
     clearHoloSignal: () => void;
     toggleTrafficInfo: (params: import("../types").IToggleTrafficInfoParams) => void;

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

@@ -15,4 +15,5 @@ export default class Index {
     updatePanelContent(contentType: string): void;
     handleSignalData(data: any): Promise<void>;
     clearHoloSignal(): void;
+    setInterpolate(enable: boolean): 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 t=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,a;switch(e.name.toLowerCase()){case"groundVehicle".toLowerCase():(l=this.traceHoloFlow)==null||l.toggleGroundVehicle(e.visible);break;case"elevatedVehicle".toLowerCase():(a=this.traceHoloFlow)==null||a.toggleElevatedVehicle(e.visible);break}}clearHoloTrace(){var e;(e=this.traceHoloFlow)==null||e.clearTrace()}toggleTrafficInfo(e){var l;(l=this.traceHoloFlow)==null||l.toggleTrafficInfo(e)}updatePanelContent(e){var a;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}(a=this.traceHoloFlow)==null||a.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()}}exports.default=c;
+"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)}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;

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

@@ -1 +1 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const d=require("@arcgis/core/core/reactiveUtils"),u=require("@arcgis/core/geometry"),p=require("@arcgis/core/layers/FeatureLayer"),g=require("../../stores/index.js");function y(l){const e=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(l){for(const t in l)if(t!=="default"){const n=Object.getOwnPropertyDescriptor(l,t);Object.defineProperty(e,t,n.get?n:{enumerable:!0,get:()=>l[t]})}}return e.default=l,Object.freeze(e)}const w=y(d);class m{constructor(e){this.currentPhaseMap=new Map,this.countdownCanvasMap=new Map,this.lastDataTime=0,this.isDeletingCanvas=!1,this.canvasWidth=80,this.canvasHeight=40,this.view=(e.type==="2d",e);const t=g.default.useAppDataStore;this.mapConfig=JSON.parse(JSON.stringify(t.mapConfig))}async initializeLayer(){if(this.mapConfig.phaseLineLayer)if(this.phaseLineLayer)this.phaseLineLayer.visible||(this.phaseLineLayer.visible=!0);else{const e=`${this.mapConfig.assetsRoot}/${this.mapConfig.phaseLineLayer}`,i=(await(await fetch(e)).json()).features.map((s,a)=>({geometry:{type:"polyline",paths:[s.geometry.coordinates]},attributes:{ObjectID:a+1,id:s.properties.id,color:"hide"}}));this.phaseLineLayer=new p({source:i,geometryType:"polyline",objectIdField:"ObjectID",outFields:["*"],fields:[{name:"ObjectID",alias:"ObjectID",type:"oid"},{name:"color",alias:"color",type:"string"}],renderer:{type:"unique-value",field:"color",defaultSymbol:{type:"simple-line",color:"lightblue",width:"2px",style:"none"},uniqueValueInfos:[{value:"green",symbol:{type:"line-3d",symbolLayers:[{type:"path",profile:"quad",material:{color:[19,255,69,.8]},width:1,height:.5}]}},{value:"red",symbol:{type:"line-3d",symbolLayers:[{type:"path",profile:"quad",material:{color:[254,5,9,.8]},width:1,height:.5}]}},{value:"yellow",symbol:{type:"line-3d",symbolLayers:[{type:"path",profile:"quad",material:{color:[255,215,0,.8]},width:1,height:.5}]}}]}}),this.view.map.add(this.phaseLineLayer)}}async handleSignalData(e){const{crossId:t,lat:n,lon:i,rtStage:s,channelsConfig:a}=e;await this.updateCountdown(t,n,i,s),!(!this.phaseLineLayer||!a)&&((!this.currentPhaseMap.has(t)||this.currentPhaseMap.get(t)!==s.stagePhase)&&await this.updatePhaseLine(t,s.channelsConfig,a),this.currentPhaseMap.set(t,s.stagePhase))}clearSignal(){this.phaseLineLayer&&(this.phaseLineLayer.visible=!1),this.countdownWatchHandel&&(this.countdownWatchHandel.remove(),this.countdownWatchHandel=void 0),this.countdownCanvasMap.forEach(e=>{this.view.container.removeChild(e.backgroundCanvas),this.view.container.removeChild(e.countdownCanvas)}),this.countdownCanvasMap.clear()}async updateCountdown(e,t,n,i){if(this.isDeletingCanvas)return;const s=this.countdownCanvasMap.get(e);if(s)this.drawCountdownText(s.countdownCanvas,i);else try{const a=new u.Point({longitude:n,latitude:t,z:10}),o=this.view.toScreen(a),r=await this.createCountdownCanvas(),c=r[0],h=r[1];c.style.left=o.x+"px",c.style.top=o.y+"px",h.style.left=o.x+"px",h.style.top=o.y+"px",this.countdownCanvasMap.set(e,{backgroundCanvas:c,countdownCanvas:h,mapPoint:a}),this.drawCountdownText(h,i)}catch(a){console.log("倒计时canvas创建失败",e,a)}this.countdownWatchHandel||(this.countdownWatchHandel=w.watch(()=>this.view.extent,()=>{this.countdownCanvasMap.forEach(a=>{const o=this.view.toScreen(a.mapPoint);a.backgroundCanvas.style.left=o.x+"px",a.backgroundCanvas.style.top=o.y+"px",a.countdownCanvas.style.left=o.x+"px",a.countdownCanvas.style.top=o.y+"px"})}))}drawCountdownText(e,t){const n=e.getContext("2d");n.clearRect(0,0,e.width,e.height),n.font="24px Digital",n.textBaseline="middle",n.textAlign="center",n.fillStyle=t.stageRemainingTime<=t.stageAllRedTime?"red":t.stageRemainingTime<=t.stageAllRedTime+t.stageYellowTime?"yellow":"lime",n.fillText(`${t.stageID} ${t.stageRemainingTime.toFixed(0)}`,e.width/2,e.height/2)}drawCircle(e,t){console.log(t);const n=e.getContext("2d");n.clearRect(0,0,e.width,e.height),this.ctxDraw(n,"lime",e.width/2,e.height/2,20,-Math.PI/2,-Math.PI/2+2*.6*Math.PI)}ctxDraw(e,t,n,i,s,a,o){e.save,e.beginPath(),e.lineWidth=4,e.strokeStyle=t,e.arc(n,i,s,a,o),e.stroke(),e.closePath(),e.font="26px Digital",e.textBaseline="middle",e.textAlign="center",e.fillText("A",n,i),e.restore()}async updatePhaseLine(e,t,n){const i=this.phaseLineLayer.source.filter(s=>s.getAttribute("id").includes(e));i.forEach(s=>{const a=s.getAttribute("id");this.isLaneInChannels(a,t)?s.setAttribute("color","green"):this.isLaneInChannels(a,n)?s.setAttribute("color","red"):s.setAttribute("color","green")}),await this.phaseLineLayer.applyEdits({updateFeatures:i})}isLaneInChannels(e,t){const n=e.split("+"),i=n[1],s=n[2];for(let a=0;a<t.length;a++)for(let o=0;o<t[a].laneSnList.length;o++){const r=t[a].laneSnList[o].toFixed(0);if(i===r[0]&&s===r[1])return!0}return!1}createCountdownCanvas(){return new Promise((e,t)=>{const n=new Image;n.src=`${this.mapConfig.assetsRoot}/Images/timeboard/CountdownBG.png`,console.log(n.src),n.onload=()=>{const i=document.createElement("canvas");i.width=this.canvasWidth,i.height=this.canvasHeight,i.style.position="absolute",i.style.transform="translate(-50%, -50%)",i.getContext("2d").drawImage(n,0,0,this.canvasWidth,this.canvasHeight),this.view.container.appendChild(i);const a=document.createElement("canvas");a.width=this.canvasWidth-10,a.height=this.canvasHeight-10,a.style.position="absolute",a.style.transform="translate(-50%, -50%)",this.view.container.appendChild(a),e([i,a])},n.onerror=i=>{t(i)}})}}exports.default=m;
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const d=require("@arcgis/core/core/reactiveUtils"),u=require("@arcgis/core/geometry"),p=require("@arcgis/core/layers/FeatureLayer"),g=require("../../stores/index.js");function y(l){const e=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(l){for(const t in l)if(t!=="default"){const n=Object.getOwnPropertyDescriptor(l,t);Object.defineProperty(e,t,n.get?n:{enumerable:!0,get:()=>l[t]})}}return e.default=l,Object.freeze(e)}const w=y(d);class m{constructor(e){this.currentPhaseMap=new Map,this.countdownCanvasMap=new Map,this.lastDataTime=0,this.isDeletingCanvas=!1,this.canvasWidth=80,this.canvasHeight=40,this.view=(e.type==="2d",e);const t=g.default.useAppDataStore;this.mapConfig=JSON.parse(JSON.stringify(t.mapConfig))}async initializeLayer(){if(this.mapConfig.phaseLineLayer)if(this.phaseLineLayer)this.phaseLineLayer.visible||(this.phaseLineLayer.visible=!0);else{const e=`${this.mapConfig.assetsRoot}/${this.mapConfig.phaseLineLayer}`,i=(await(await fetch(e)).json()).features.map((s,a)=>({geometry:{type:"polyline",paths:[s.geometry.coordinates]},attributes:{ObjectID:a+1,id:s.properties.id,color:"hide"}}));this.phaseLineLayer=new p({source:i,geometryType:"polyline",objectIdField:"ObjectID",outFields:["*"],fields:[{name:"ObjectID",alias:"ObjectID",type:"oid"},{name:"color",alias:"color",type:"string"}],renderer:{type:"unique-value",field:"color",defaultSymbol:{type:"simple-line",color:"lightblue",width:"2px",style:"none"},uniqueValueInfos:[{value:"green",symbol:{type:"line-3d",symbolLayers:[{type:"path",profile:"quad",material:{color:[19,255,69,.8]},width:1,height:.5}]}},{value:"red",symbol:{type:"line-3d",symbolLayers:[{type:"path",profile:"quad",material:{color:[254,5,9,.8]},width:1,height:.5}]}},{value:"yellow",symbol:{type:"line-3d",symbolLayers:[{type:"path",profile:"quad",material:{color:[255,215,0,.8]},width:1,height:.5}]}}]}}),this.view.map.add(this.phaseLineLayer)}}async handleSignalData(e){const{crossId:t,lat:n,lon:i,rtStage:s,channelsConfig:a}=e;await this.updateCountdown(t,n,i,s),!(!this.phaseLineLayer||!a)&&((!this.currentPhaseMap.has(t)||this.currentPhaseMap.get(t)!==s.stagePhase)&&await this.updatePhaseLine(t,s.channelsConfig,a),this.currentPhaseMap.set(t,s.stagePhase))}clearSignal(){this.phaseLineLayer&&(this.phaseLineLayer.visible=!1),this.countdownWatchHandel&&(this.countdownWatchHandel.remove(),this.countdownWatchHandel=void 0),this.countdownCanvasMap.forEach(e=>{this.view.container.removeChild(e.backgroundCanvas),this.view.container.removeChild(e.countdownCanvas)}),this.countdownCanvasMap.clear()}async updateCountdown(e,t,n,i){if(this.isDeletingCanvas)return;const s=this.countdownCanvasMap.get(e);if(s)this.drawCountdownText(s.countdownCanvas,i);else try{const a=new u.Point({longitude:n,latitude:t,z:10}),o=this.view.toScreen(a),r=await this.createCountdownCanvas(),c=r[0],h=r[1];c.style.left=o.x+"px",c.style.top=o.y+"px",h.style.left=o.x+"px",h.style.top=o.y+"px",this.countdownCanvasMap.set(e,{backgroundCanvas:c,countdownCanvas:h,mapPoint:a}),this.drawCountdownText(h,i)}catch(a){console.log("倒计时canvas创建失败",e,a)}this.countdownWatchHandel||(this.countdownWatchHandel=w.watch(()=>this.view.extent,()=>{this.countdownCanvasMap.forEach(a=>{const o=this.view.toScreen(a.mapPoint);a.backgroundCanvas.style.left=o.x+"px",a.backgroundCanvas.style.top=o.y+"px",a.countdownCanvas.style.left=o.x+"px",a.countdownCanvas.style.top=o.y+"px"})}))}drawCountdownText(e,t){const n=e.getContext("2d");n.clearRect(0,0,e.width,e.height),n.font="24px Digital",n.textBaseline="middle",n.textAlign="center",n.fillStyle=t.stageRemainingTime<=t.stageAllRedTime?"red":t.stageRemainingTime<=t.stageAllRedTime+t.stageYellowTime?"yellow":"lime",n.fillText(`${t.stageID} ${t.stageRemainingTime.toFixed(0)}`,e.width/2,e.height/2)}drawCircle(e,t){console.log(t);const n=e.getContext("2d");n.clearRect(0,0,e.width,e.height),this.ctxDraw(n,"lime",e.width/2,e.height/2,20,-Math.PI/2,-Math.PI/2+2*.6*Math.PI)}ctxDraw(e,t,n,i,s,a,o){e.save,e.beginPath(),e.lineWidth=4,e.strokeStyle=t,e.arc(n,i,s,a,o),e.stroke(),e.closePath(),e.font="26px Digital",e.textBaseline="middle",e.textAlign="center",e.fillText("A",n,i),e.restore()}async updatePhaseLine(e,t,n){const i=this.phaseLineLayer.source.filter(s=>s.getAttribute("id").includes(e));i.forEach(s=>{const a=s.getAttribute("id");this.isLaneInChannels(a,t)?s.setAttribute("color","green"):this.isLaneInChannels(a,n)?s.setAttribute("color","red"):s.setAttribute("color","green")}),await this.phaseLineLayer.applyEdits({updateFeatures:i})}isLaneInChannels(e,t){const n=e.split("+"),i=n[1],s=n[2];for(let a=0;a<t.length;a++)for(let o=0;o<t[a].laneSnList.length;o++){const r=t[a].laneSnList[o].toFixed(0);if(i===r[0]&&s===r[1])return!0}return!1}createCountdownCanvas(){return new Promise((e,t)=>{const n=new Image;n.src=`${this.mapConfig.assetsRoot}/Images/timeboard/CountdownBG.png`,n.onload=()=>{const i=document.createElement("canvas");i.width=this.canvasWidth,i.height=this.canvasHeight,i.style.position="absolute",i.style.transform="translate(-50%, -50%)",i.getContext("2d").drawImage(n,0,0,this.canvasWidth,this.canvasHeight),this.view.container.appendChild(i);const a=document.createElement("canvas");a.width=this.canvasWidth-10,a.height=this.canvasHeight-10,a.style.position="absolute",a.style.transform="translate(-50%, -50%)",this.view.container.appendChild(a),e([i,a])},n.onerror=i=>{t(i)}})}}exports.default=m;

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

@@ -21,5 +21,6 @@ export default class TraceHoloFlow {
     updatePanelContent(contentType: EVehiclePlateState): void;
     toggleGroundVehicle(visible: boolean): void;
     toggleElevatedVehicle(visible: boolean): void;
+    setInterpolate(enable: boolean): void;
     private buildVehicleTrackData;
 }