gisviewer-vue3-arcgis 1.0.102 → 1.0.104

package/es/src/gis-map/utils/holo-flow/signal-holo-flow.mjs

@@ -216,7 +216,7 @@ class f {
   createCountdownCanvas() {
     return new Promise((e, a) => {
       const i = new Image();
-      i.src = `${this.mapConfig.assetsRoot}/Images/timeboard/CountdownBG.png`, console.log(i.src), i.onload = () => {
+      i.src = `${this.mapConfig.assetsRoot}/Images/timeboard/CountdownBG.png`, i.onload = () => {
         const n = document.createElement("canvas");
         n.width = this.canvasWidth, n.height = this.canvasHeight, n.style.position = "absolute", n.style.transform = "translate(-50%, -50%)", n.getContext(
           "2d"

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

@@ -1,31 +1,31 @@
-import * as m from "@arcgis/core/views/3d/externalRenderers";
-import f from "../../stores/index.mjs";
-import g from "./trace-renderer-layer.mjs";
-import u from "./trace-renderer-webgl.mjs";
-class y {
+import * as f from "@arcgis/core/views/3d/externalRenderers";
+import g from "../../stores/index.mjs";
+import u from "./trace-renderer-external.mjs";
+import T from "./trace-renderer-layer.mjs";
+class N {
   constructor(e) {
     this.lastDataTime = 0, this.view = e;
-    const o = f.useAppDataStore;
-    this.mapConfig = JSON.parse(JSON.stringify(o.mapConfig)), e.type === "3d" ? (this.traceRenderer = new u(e), m.add(
+    const o = g.useAppDataStore;
+    this.mapConfig = JSON.parse(JSON.stringify(o.mapConfig)), e.type === "3d" ? (this.traceRenderer = new u(e), f.add(
       e,
       this.traceRenderer
-    )) : this.traceRenderer = new g(e);
+    )) : this.traceRenderer = new T(e);
   }
   /**
    * 处理全息流轨迹数据
    * */
   handleVehicleTraceData(e) {
-    const o = new Date().getTime(), { newVehList: s, updateVehList: a, deleteVehList: c, jgsj: i } = e, n = e.crossId || "", l = [], h = [];
+    const o = new Date().getTime(), { newVehList: s, updateVehList: l, deleteVehList: c, jgsj: i } = e, n = e.crossId || "", a = [], h = [];
     if (s && s.length > 0) {
       for (const t of s) {
         t.localTimestamp || (t.localTimestamp = i || o);
         const r = this.buildVehicleTrackData(t, n);
-        r && l.push(r);
+        r && a.push(r);
       }
-      this.traceRenderer.addVehicles(l);
+      this.traceRenderer.addVehicles(a);
     }
-    if (a && a.length > 0) {
-      for (const t of a) {
+    if (l && l.length > 0) {
+      for (const t of l) {
         const r = this.buildVehicleTrackData(t, n);
         r && h.push(r);
       }
@@ -64,27 +64,27 @@ class y {
     this.traceRenderer.setInterpolate(e);
   }
   buildVehicleTrackData(e, o) {
-    const s = e.longitude, a = e.latitude, c = e.ptcId, i = Number(e.ptcType), n = e.heading, l = Number(e.vehicleType), h = Number(e.vehicleColor), t = e.plateNo || e.plateno, r = Number(e.plateColor), p = e.timestamp, d = String(e.roadLayer) || "1";
+    const s = e.longitude, l = e.latitude, c = e.ptcId, i = Number(e.ptcType), n = e.heading, a = Number(e.vehicleType), h = Number(e.vehicleColor), t = e.plateNo || e.plateno, r = Number(e.plateColor), p = e.timestamp, d = e.localTimestamp, m = e.roadLayer ? String(e.roadLayer) : "1";
     if (!(i < 0 || i > 8))
       return {
         ptcId: c,
         crossId: o,
         vehicleId: o + "-" + c,
         x: s,
-        y: a,
+        y: l,
         ptcType: i,
-        vehicleType: l,
+        vehicleType: a,
         heading: i === 2 ? -n : n,
         vehicleColor: h,
         showName: t && t !== "" && t !== "0" && t !== "000000" ? t : "",
         plateNo: t,
         plateColor: r,
         timestamp: p,
-        localTimestamp: Date.now(),
-        roadLayer: d
+        localTimestamp: d,
+        roadLayer: m
       };
   }
 }
 export {
-  y as default
+  N as default
 };

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

@@ -1,12 +1,17 @@
 import { EVehiclePlateState, IToggleTrafficInfoParams, ITraceRendererInterface, IVehicleTrack } from '../../../types';
-export default class TraceRendererWebgl implements ITraceRendererInterface {
+export default class TraceRendererExternal implements ITraceRendererInterface {
     private renderer;
     private scene;
     private camera;
     private ambient;
     private sun;
+    /** 车辆模型变化的阈值 */
+    private readonly zoomThreshold;
+    private readonly roughness;
+    private readonly metalness;
     /** 默认车身材质 */
     private defaultMaterial;
+    private createCarMaterial;
     /** 车身颜色材质 */
     private materialMap;
     private readonly view;
@@ -21,31 +26,33 @@ export default class TraceRendererWebgl implements ITraceRendererInterface {
     private busModelReady;
     private bicycleModel;
     private bicycleModelReady;
+    private showGroundVehicle;
+    private showElevatedVehicle;
     private currentSpriteContent;
     private historyPositionMap;
     private vehicleObjectMap;
     private needInterpolate;
+    private updateModel;
     constructor(view: __esri.SceneView);
     setInterpolate(needInterpolate: boolean): void;
     private context;
     setup(context: any): Promise<void>;
-    private lastRenderTime;
     render(context: any): Promise<void>;
     /**
      * 新增车辆
      * */
-    addVehicles(objects: IVehicleTrack[]): void;
+    addVehicles(objects: IVehicleTrack[]): Promise<void>;
     /**
      * 更新车辆
      * */
-    updateVehicles(objects: IVehicleTrack[]): void;
+    updateVehicles(objects: IVehicleTrack[]): Promise<void>;
     private toRenderCoordinates;
     /**
      * 删除车辆
      * */
     deleteVehicles(idList: string[]): void;
     private deleteVehicle;
-    toggleTrafficInfo(params: IToggleTrafficInfoParams): void;
+    toggleTrafficInfo(params: IToggleTrafficInfoParams): Promise<void>;
     /**
      * 清除全部车辆
      * */
@@ -55,7 +62,7 @@ export default class TraceRendererWebgl implements ITraceRendererInterface {
      * @param contentType
      * @returns
      */
-    updatePanelContent(contentType: EVehiclePlateState): void;
+    updatePanelContent(contentType: EVehiclePlateState): Promise<void>;
     toggleGroundVehicle(visible: boolean): void;
     toggleElevatedVehicle(visible: boolean): void;
     /**

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

@@ -0,0 +1,407 @@
+import * as y from "@arcgis/core/core/reactiveUtils.js";
+import w from "@arcgis/core/geometry/SpatialReference";
+import * as M from "@arcgis/core/views/3d/externalRenderers";
+import * as h from "three";
+import { GLTFLoader as R } from "three/examples/jsm/loaders/GLTFLoader.js";
+import { EVehiclePlateState as p } from "../../../types/index.mjs";
+import C from "../../stores/index.mjs";
+class N {
+  constructor(i) {
+    this.zoomThreshold = 18.5, this.roughness = 0.4, this.metalness = 0.5, this.defaultMaterial = new h.MeshPhysicalMaterial({
+      color: 16777215,
+      emissive: 0,
+      roughness: this.roughness,
+      metalness: this.metalness
+    }), this.materialMap = /* @__PURE__ */ new Map([
+      [1, this.createCarMaterial(16777215)],
+      [2, this.createCarMaterial(7833753)],
+      [3, this.createCarMaterial(16766720)],
+      [4, this.createCarMaterial(16758465)],
+      [5, this.createCarMaterial(14423100)],
+      [6, this.createCarMaterial(3329330)],
+      [7, this.createCarMaterial(2003183)],
+      [8, this.createCarMaterial(16032864)],
+      [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.currentSpriteContent = p.None, this.historyPositionMap = /* @__PURE__ */ new Map(), this.vehicleObjectMap = /* @__PURE__ */ new Map(), this.needInterpolate = !0, this.updateModel = !1;
+    const e = C.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(
+      () => this.view.zoom,
+      (s, o) => {
+        (o <= this.zoomThreshold && s > this.zoomThreshold || o > this.zoomThreshold && s <= this.zoomThreshold) && (this.updateModel = !0);
+      }
+    );
+  }
+  createCarMaterial(i) {
+    return new h.MeshPhysicalMaterial({
+      color: i,
+      emissive: 0,
+      roughness: this.roughness,
+      metalness: this.metalness
+    });
+  }
+  setInterpolate(i) {
+    this.clearVehicles(), this.needInterpolate = i;
+  }
+  async setup(i) {
+    this.context = i, this.renderer = new h.WebGLRenderer({
+      context: i.gl,
+      premultipliedAlpha: !0,
+      logarithmicDepthBuffer: !0,
+      antialias: !0,
+      powerPreference: "high-performance"
+    }), this.renderer.shadowMap.enabled = !0, 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 = (a) => {
+      e(a), a == null && i.bindRenderTarget();
+    }, this.scene = new h.Scene();
+    const { camera: t } = i;
+    this.camera = new h.PerspectiveCamera(
+      t.fovY,
+      t.aspect,
+      0.1,
+      1e5
+    ), this.ambient = new h.AmbientLight(16777215, 2e4), this.scene.add(this.ambient), this.sun = new h.DirectionalLight(16777215, 2e4);
+    const s = [121.46790813287619, 31.239514870157972, 1e3], o = this.toRenderCoordinates(s);
+    this.sun.position.set(
+      o[0],
+      o[1],
+      o[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])
+    ), this.camera.projectionMatrix.fromArray(e.projectionMatrix), this.needInterpolate)
+      for (const o of this.vehicleObjectMap.keys()) {
+        const a = (s = this.vehicleObjectMap.get(o)) == null ? void 0 : s.model;
+        if (!a)
+          continue;
+        const r = this.computeVehiclePosition(o);
+        if (r) {
+          const n = this.toRenderCoordinates(r);
+          a.position.set(n[0], n[1], n[2]), a.rotation.y = h.MathUtils.degToRad(-r[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(
+      t.diffuse.color[0],
+      t.diffuse.color[1],
+      t.diffuse.color[2]
+    ), this.ambient.intensity = t.ambient.intensity, this.ambient.color = new h.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), M.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, o = Number(e.x), a = Number(e.y), r = Number(e.heading);
+        this.historyPositionMap.set(t, [
+          { pos: [o, a, 0], heading: r, time: s }
+        ]);
+        const n = this.getVehicleModel(e);
+        n.name = t, n.visible = !this.needInterpolate;
+        try {
+          const l = await this.createPlateSprite(e);
+          l && (n.add(l), l.position.set(0, 5, -4)), this.scene.add(n), this.vehicleObjectMap.set(t, {
+            model: n,
+            data: e,
+            waitForDelete: !1,
+            isMoving: !1
+          });
+        } catch (l) {
+          console.log("createPlateSprite error:", l);
+        }
+      }
+  }
+  /**
+   * 更新车辆
+   * */
+  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: o } = t, a = Number(t.x), r = Number(t.y);
+      let n = Number(t.heading);
+      const l = this.vehicleObjectMap.get(s);
+      if (!l)
+        e.push(t);
+      else {
+        if (this.updateModel || l.data.vehicleColor !== t.vehicleColor || l.data.vehicleType !== t.vehicleType) {
+          this.scene.remove(l.model), this.disposeModel(l.model), l.model = this.getVehicleModel(t);
+          const c = await this.createPlateSprite(t);
+          c && (l.model.add(c), c.position.set(0, 5, -4)), this.scene.add(l.model);
+        }
+        if (l.data.showName !== t.showName || l.data.plateColor !== t.plateColor) {
+          const c = l.model.getObjectByName("VehiclePlate");
+          c && (l.model.remove(c), this.disposeModel(c));
+          const d = await this.createPlateSprite(t);
+          d && (l.model.add(d), d.position.set(0, 5, -4));
+        }
+        if (l.data = t, this.needInterpolate) {
+          const c = this.historyPositionMap.get(
+            s
+          ), d = c[c.length - 1];
+          Math.abs(n - d.heading) >= 180 && (n > d.heading ? d.heading += 360 : n += 360), c.push({
+            pos: [a, r, 0],
+            heading: n,
+            time: o
+          });
+        } else {
+          this.historyPositionMap.set(s, [
+            { pos: [a, r, 0], heading: n, time: o }
+          ]);
+          const c = this.toRenderCoordinates([a, r, 0]);
+          l.model.position.set(c[0], c[1], c[2]), l.model.rotation.y = h.MathUtils.degToRad(-n);
+        }
+      }
+    }
+    this.addVehicles(e), this.updateModel = !1, this.needInterpolate || this.render(this.context);
+  }
+  toRenderCoordinates(i) {
+    const e = [0, 0, 0];
+    return M.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 o = await this.createPlateSprite(t.data);
+            o && (t.model.add(o), o.position.set(0, 5, -4));
+          }
+        }
+      }
+    }
+  }
+  toggleGroundVehicle(i) {
+    console.log("toggleGroundVehicle", i), this.showGroundVehicle = i;
+  }
+  toggleElevatedVehicle(i) {
+    this.showElevatedVehicle = i;
+  }
+  /**
+   * 释放模型资源
+   * */
+  disposeModel(i) {
+    i.traverse((e) => {
+      e instanceof h.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.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 o = s - t.segmentStartTime, a = Math.min(
+      o / t.segmentTotalTime,
+      1
+    );
+    if (a === 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 r = e[0].pos[0] + (e[1].pos[0] - e[0].pos[0]) * a, n = e[0].pos[1] + (e[1].pos[1] - e[0].pos[1]) * a, l = e[0].heading + (e[1].heading - e[0].heading) * a;
+      return [r, n, 0, l];
+    }
+  }
+  /**
+   * 根据车辆类型、车身颜色获取模型
+   * */
+  getVehicleModel(i) {
+    if (this.view.zoom <= this.zoomThreshold) {
+      const e = new h.SphereGeometry(5, 32, 32), t = new h.MeshPhysicalMaterial({
+        color: 325253,
+        emissive: 0,
+        roughness: this.roughness,
+        metalness: this.metalness
+      });
+      return new h.Mesh(e, t);
+    } else {
+      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((o) => {
+          !s && o instanceof h.Mesh && (o.material = t, s = !0);
+        });
+      }
+      return e;
+    }
+  }
+  /**
+   * 创建号牌canvas
+   * */
+  createCanvas(i, e, t) {
+    const s = document.createElement("canvas"), o = i.width, a = i.height;
+    s.width = o, s.height = a;
+    const r = s.getContext("2d");
+    if (!r) {
+      console.log("canvas创建失败");
+      return;
+    }
+    return r.fillStyle = "rgba(0,0,0,0.0)", r.fillRect(0, 0, o, a), r.drawImage(i, 0, 0, o, a), r.beginPath(), r.translate(o / 2, a / 2), r.fillStyle = t, r.font = "bold 32px 宋体", r.textBaseline = "middle", r.textAlign = "center", r.fillText(e, 0, 0), s;
+  }
+  createPlateSprite(i) {
+    return new Promise((e, t) => {
+      var l, c;
+      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 o = new Image();
+      let a = "", r = "", n = "";
+      if (this.currentSpriteContent === p.PlateNumber || this.currentSpriteContent === p.Mix)
+        if (s)
+          a = "grey", r = i.ptcId, n = "#ffffff";
+        else
+          switch (r = ((l = i.showName) == null ? void 0 : l.substring(0, 2)) + "•" + ((c = i.showName) == null ? void 0 : c.substring(2)), i.plateColor) {
+            case 1:
+              a = "blue", n = "#ffffff";
+              break;
+            case 2:
+              a = "yellow", n = "#000000";
+              break;
+            case 3:
+              a = "white", n = "#000000";
+              break;
+            case 4:
+              a = "black";
+              break;
+            case 5:
+              a = "neo_yellow", n = "#000000";
+              break;
+            case 6:
+              a = "neo_green", n = "#000000";
+              break;
+            default:
+              a = "grey", r = i.plateNo, n = "#ffffff";
+              break;
+          }
+      else
+        this.currentSpriteContent === p.Id && (a = "grey", r = i.ptcId, n = "#ffffff");
+      o.src = `${this.assetsRoot}/Images/PlateBG/${a}.png`, o.onload = () => {
+        const d = this.createCanvas(o, r, n);
+        if (!d)
+          t("canvas创建失败");
+        else {
+          const m = new h.CanvasTexture(d), g = new h.SpriteMaterial({
+            map: m,
+            transparent: !1
+          }), f = new h.Sprite(g), u = 0.05, b = d.width * u, v = d.height * u;
+          f.scale.set(b, v, 1), f.name = "VehiclePlate", e(f);
+        }
+        o.onerror = (m) => {
+          console.log(`号牌背景加载失败: ${o.src}`, m), t(m);
+        };
+      };
+    });
+  }
+}
+export {
+  N as default
+};

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

@@ -39,7 +39,7 @@ class Q {
       container: a,
       ...e == null ? void 0 : e.mapOptions
     }), this.view.on("click", async (s) => {
-      var b, v;
+      var v, b;
       if (d) {
         let o = s.mapPoint;
         o.spatialReference.isWebMercator && (o = f.webMercatorToGeographic(
@@ -60,9 +60,10 @@ class Q {
             tilt: o.tilt,
             position: l.toJSON()
           };
-          console.log(w), (b = navigator.clipboard) == null || b.writeText(JSON.stringify(w));
+          console.log(w), (v = navigator.clipboard) == null || v.writeText(JSON.stringify(w));
         } else
           console.log(o.toJSON());
+        console.log(this.view.zoom, this.view.scale);
       } else {
         let o = this.view.center;
         this.view.spatialReference.isWebMercator && (o = f.webMercatorToGeographic(
@@ -72,7 +73,7 @@ class Q {
           zoom: this.view.zoom
         });
       }
-      const h = (v = (await this.view.hitTest(s)).results) == null ? void 0 : v.filter(
+      const h = (b = (await this.view.hitTest(s)).results) == null ? void 0 : b.filter(
         (o) => o.type === "graphic"
       );
       h.length > 0 && h.forEach((o) => {

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.js

@@ -1 +1 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const f=require("@arcgis/core/views/3d/externalRenderers"),g=require("../../stores/index.js"),m=require("./trace-renderer-layer.js"),T=require("./trace-renderer-webgl.js");function b(o){const e=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(o){for(const r in o)if(r!=="default"){const n=Object.getOwnPropertyDescriptor(o,r);Object.defineProperty(e,r,n.get?n:{enumerable:!0,get:()=>o[r]})}}return e.default=o,Object.freeze(e)}const R=b(f);class V{constructor(e){this.lastDataTime=0,this.view=e;const r=g.default.useAppDataStore;this.mapConfig=JSON.parse(JSON.stringify(r.mapConfig)),e.type==="3d"?(this.traceRenderer=new T.default(e),R.add(e,this.traceRenderer)):this.traceRenderer=new m.default(e)}handleVehicleTraceData(e){const r=new Date().getTime(),{newVehList:n,updateVehList:a,deleteVehList:i,jgsj:s}=e,l=e.crossId||"",d=[],h=[];if(n&&n.length>0){for(const t of n){t.localTimestamp||(t.localTimestamp=s||r);const c=this.buildVehicleTrackData(t,l);c&&d.push(c)}this.traceRenderer.addVehicles(d)}if(a&&a.length>0){for(const t of a){const c=this.buildVehicleTrackData(t,l);c&&h.push(c)}this.traceRenderer.updateVehicles(h)}if(i&&i.length>0){const t=i.map(c=>l+"-"+(c.ptcId||c.vehno||c.vehNo));this.traceRenderer.deleteVehicles(t)}}toggleTrafficInfo(e){this.traceRenderer.toggleTrafficInfo(e)}clearTrace(){this.traceRenderer.clearVehicles()}updatePanelContent(e){this.traceRenderer.updatePanelContent(e)}toggleGroundVehicle(e){this.traceRenderer.toggleGroundVehicle(e)}toggleElevatedVehicle(e){this.traceRenderer.toggleElevatedVehicle(e)}setInterpolate(e){this.traceRenderer.setInterpolate(e)}buildVehicleTrackData(e,r){const n=e.longitude,a=e.latitude,i=e.ptcId,s=Number(e.ptcType),l=e.heading,d=Number(e.vehicleType),h=Number(e.vehicleColor),t=e.plateNo||e.plateno,c=Number(e.plateColor),u=e.timestamp,p=String(e.roadLayer)||"1";if(!(s<0||s>8))return{ptcId:i,crossId:r,vehicleId:r+"-"+i,x:n,y:a,ptcType:s,vehicleType:d,heading:s===2?-l:l,vehicleColor:h,showName:t&&t!==""&&t!=="0"&&t!=="000000"?t:"",plateNo:t,plateColor:c,timestamp:u,localTimestamp:Date.now(),roadLayer:p}}}exports.default=V;
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const g=require("@arcgis/core/views/3d/externalRenderers"),m=require("../../stores/index.js"),T=require("./trace-renderer-external.js"),b=require("./trace-renderer-layer.js");function R(o){const e=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(o){for(const r in o)if(r!=="default"){const n=Object.getOwnPropertyDescriptor(o,r);Object.defineProperty(e,r,n.get?n:{enumerable:!0,get:()=>o[r]})}}return e.default=o,Object.freeze(e)}const y=R(g);class V{constructor(e){this.lastDataTime=0,this.view=e;const r=m.default.useAppDataStore;this.mapConfig=JSON.parse(JSON.stringify(r.mapConfig)),e.type==="3d"?(this.traceRenderer=new T.default(e),y.add(e,this.traceRenderer)):this.traceRenderer=new b.default(e)}handleVehicleTraceData(e){const r=new Date().getTime(),{newVehList:n,updateVehList:a,deleteVehList:i,jgsj:s}=e,l=e.crossId||"",d=[],h=[];if(n&&n.length>0){for(const t of n){t.localTimestamp||(t.localTimestamp=s||r);const c=this.buildVehicleTrackData(t,l);c&&d.push(c)}this.traceRenderer.addVehicles(d)}if(a&&a.length>0){for(const t of a){const c=this.buildVehicleTrackData(t,l);c&&h.push(c)}this.traceRenderer.updateVehicles(h)}if(i&&i.length>0){const t=i.map(c=>l+"-"+(c.ptcId||c.vehno||c.vehNo));this.traceRenderer.deleteVehicles(t)}}toggleTrafficInfo(e){this.traceRenderer.toggleTrafficInfo(e)}clearTrace(){this.traceRenderer.clearVehicles()}updatePanelContent(e){this.traceRenderer.updatePanelContent(e)}toggleGroundVehicle(e){this.traceRenderer.toggleGroundVehicle(e)}toggleElevatedVehicle(e){this.traceRenderer.toggleElevatedVehicle(e)}setInterpolate(e){this.traceRenderer.setInterpolate(e)}buildVehicleTrackData(e,r){const n=e.longitude,a=e.latitude,i=e.ptcId,s=Number(e.ptcType),l=e.heading,d=Number(e.vehicleType),h=Number(e.vehicleColor),t=e.plateNo||e.plateno,c=Number(e.plateColor),u=e.timestamp,p=e.localTimestamp,f=e.roadLayer?String(e.roadLayer):"1";if(!(s<0||s>8))return{ptcId:i,crossId:r,vehicleId:r+"-"+i,x:n,y:a,ptcType:s,vehicleType:d,heading:s===2?-l:l,vehicleColor:h,showName:t&&t!==""&&t!=="0"&&t!=="000000"?t:"",plateNo:t,plateColor:c,timestamp:u,localTimestamp:p,roadLayer:f}}}exports.default=V;

package/lib/src/gis-map/utils/holo-flow/{trace-renderer-webgl.d.ts → trace-renderer-external.d.ts}

@@ -1,12 +1,17 @@
 import { EVehiclePlateState, IToggleTrafficInfoParams, ITraceRendererInterface, IVehicleTrack } from '../../../types';
-export default class TraceRendererWebgl implements ITraceRendererInterface {
+export default class TraceRendererExternal implements ITraceRendererInterface {
     private renderer;
     private scene;
     private camera;
     private ambient;
     private sun;
+    /** 车辆模型变化的阈值 */
+    private readonly zoomThreshold;
+    private readonly roughness;
+    private readonly metalness;
     /** 默认车身材质 */
     private defaultMaterial;
+    private createCarMaterial;
     /** 车身颜色材质 */
     private materialMap;
     private readonly view;
@@ -21,31 +26,33 @@ export default class TraceRendererWebgl implements ITraceRendererInterface {
     private busModelReady;
     private bicycleModel;
     private bicycleModelReady;
+    private showGroundVehicle;
+    private showElevatedVehicle;
     private currentSpriteContent;
     private historyPositionMap;
     private vehicleObjectMap;
     private needInterpolate;
+    private updateModel;
     constructor(view: __esri.SceneView);
     setInterpolate(needInterpolate: boolean): void;
     private context;
     setup(context: any): Promise<void>;
-    private lastRenderTime;
     render(context: any): Promise<void>;
     /**
      * 新增车辆
      * */
-    addVehicles(objects: IVehicleTrack[]): void;
+    addVehicles(objects: IVehicleTrack[]): Promise<void>;
     /**
      * 更新车辆
      * */
-    updateVehicles(objects: IVehicleTrack[]): void;
+    updateVehicles(objects: IVehicleTrack[]): Promise<void>;
     private toRenderCoordinates;
     /**
      * 删除车辆
      * */
     deleteVehicles(idList: string[]): void;
     private deleteVehicle;
-    toggleTrafficInfo(params: IToggleTrafficInfoParams): void;
+    toggleTrafficInfo(params: IToggleTrafficInfoParams): Promise<void>;
     /**
      * 清除全部车辆
      * */
@@ -55,7 +62,7 @@ export default class TraceRendererWebgl implements ITraceRendererInterface {
      * @param contentType
      * @returns
      */
-    updatePanelContent(contentType: EVehiclePlateState): void;
+    updatePanelContent(contentType: EVehiclePlateState): Promise<void>;
     toggleGroundVehicle(visible: boolean): void;
     toggleElevatedVehicle(visible: boolean): void;
     /**

package/lib/src/gis-map/utils/holo-flow/trace-renderer-external.js

@@ -0,0 +1 @@
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const R=require("@arcgis/core/core/reactiveUtils.js"),P=require("@arcgis/core/geometry/SpatialReference"),S=require("@arcgis/core/views/3d/externalRenderers"),C=require("three"),T=require("three/examples/jsm/loaders/GLTFLoader.js"),p=require("../../../types/index.js"),V=require("../../stores/index.js");function g(u){const i=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(u){for(const e in u)if(e!=="default"){const t=Object.getOwnPropertyDescriptor(u,e);Object.defineProperty(i,e,t.get?t:{enumerable:!0,get:()=>u[e]})}}return i.default=u,Object.freeze(i)}const k=g(R),b=g(S),h=g(C);class x{constructor(i){this.zoomThreshold=18.5,this.roughness=.4,this.metalness=.5,this.defaultMaterial=new h.MeshPhysicalMaterial({color:16777215,emissive:0,roughness:this.roughness,metalness:this.metalness}),this.materialMap=new Map([[1,this.createCarMaterial(16777215)],[2,this.createCarMaterial(7833753)],[3,this.createCarMaterial(16766720)],[4,this.createCarMaterial(16758465)],[5,this.createCarMaterial(14423100)],[6,this.createCarMaterial(3329330)],[7,this.createCarMaterial(2003183)],[8,this.createCarMaterial(16032864)],[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.currentSpriteContent=p.EVehiclePlateState.None,this.historyPositionMap=new Map,this.vehicleObjectMap=new Map,this.needInterpolate=!0,this.updateModel=!1;const e=V.default.useAppDataStore;this.assetsRoot=JSON.parse(JSON.stringify(e.mapConfig)).assetsRoot,this.view=i;const t=new T.GLTFLoader;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),k.watch(()=>this.view.zoom,(s,a)=>{(a<=this.zoomThreshold&&s>this.zoomThreshold||a>this.zoomThreshold&&s<=this.zoomThreshold)&&(this.updateModel=!0)})}createCarMaterial(i){return new h.MeshPhysicalMaterial({color:i,emissive:0,roughness:this.roughness,metalness:this.metalness})}setInterpolate(i){this.clearVehicles(),this.needInterpolate=i}async setup(i){this.context=i,this.renderer=new h.WebGLRenderer({context:i.gl,premultipliedAlpha:!0,logarithmicDepthBuffer:!0,antialias:!0,powerPreference:"high-performance"}),this.renderer.shadowMap.enabled=!0,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=o=>{e(o),o==null&&i.bindRenderTarget()},this.scene=new h.Scene;const{camera:t}=i;this.camera=new h.PerspectiveCamera(t.fovY,t.aspect,.1,1e5),this.ambient=new h.AmbientLight(16777215,2e4),this.scene.add(this.ambient),this.sun=new h.DirectionalLight(16777215,2e4);const s=[121.46790813287619,31.239514870157972,1e3],a=this.toRenderCoordinates(s);this.sun.position.set(a[0],a[1],a[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])),this.camera.projectionMatrix.fromArray(e.projectionMatrix),this.needInterpolate)for(const a of this.vehicleObjectMap.keys()){const o=(s=this.vehicleObjectMap.get(a))==null?void 0:s.model;if(!o)continue;const r=this.computeVehiclePosition(a);if(r){const n=this.toRenderCoordinates(r);o.position.set(n[0],n[1],n[2]),o.rotation.y=h.MathUtils.degToRad(-r[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(t.diffuse.color[0],t.diffuse.color[1],t.diffuse.color[2]),this.ambient.intensity=t.ambient.intensity,this.ambient.color=new h.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),b.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,a=Number(e.x),o=Number(e.y),r=Number(e.heading);this.historyPositionMap.set(t,[{pos:[a,o,0],heading:r,time:s}]);const n=this.getVehicleModel(e);n.name=t,n.visible=!this.needInterpolate;try{const l=await this.createPlateSprite(e);l&&(n.add(l),l.position.set(0,5,-4)),this.scene.add(n),this.vehicleObjectMap.set(t,{model:n,data:e,waitForDelete:!1,isMoving:!1})}catch(l){console.log("createPlateSprite error:",l)}}}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:a}=t,o=Number(t.x),r=Number(t.y);let n=Number(t.heading);const l=this.vehicleObjectMap.get(s);if(!l)e.push(t);else{if(this.updateModel||l.data.vehicleColor!==t.vehicleColor||l.data.vehicleType!==t.vehicleType){this.scene.remove(l.model),this.disposeModel(l.model),l.model=this.getVehicleModel(t);const c=await this.createPlateSprite(t);c&&(l.model.add(c),c.position.set(0,5,-4)),this.scene.add(l.model)}if(l.data.showName!==t.showName||l.data.plateColor!==t.plateColor){const c=l.model.getObjectByName("VehiclePlate");c&&(l.model.remove(c),this.disposeModel(c));const d=await this.createPlateSprite(t);d&&(l.model.add(d),d.position.set(0,5,-4))}if(l.data=t,this.needInterpolate){const c=this.historyPositionMap.get(s),d=c[c.length-1];Math.abs(n-d.heading)>=180&&(n>d.heading?d.heading+=360:n+=360),c.push({pos:[o,r,0],heading:n,time:a})}else{this.historyPositionMap.set(s,[{pos:[o,r,0],heading:n,time:a}]);const c=this.toRenderCoordinates([o,r,0]);l.model.position.set(c[0],c[1],c[2]),l.model.rotation.y=h.MathUtils.degToRad(-n)}}}this.addVehicles(e),this.updateModel=!1,this.needInterpolate||this.render(this.context)}toRenderCoordinates(i){const e=[0,0,0];return b.toRenderCoordinates(this.view,i,0,P.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.EVehiclePlateState.None?await this.updatePanelContent(p.EVehiclePlateState.Id):await this.updatePanelContent(i.visible?this.currentSpriteContent:p.EVehiclePlateState.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()}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.EVehiclePlateState.None){const a=await this.createPlateSprite(t.data);a&&(t.model.add(a),a.position.set(0,5,-4))}}}}}toggleGroundVehicle(i){console.log("toggleGroundVehicle",i),this.showGroundVehicle=i}toggleElevatedVehicle(i){this.showElevatedVehicle=i}disposeModel(i){i.traverse(e=>{e instanceof h.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.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(a/t.segmentTotalTime,1);if(o===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 r=e[0].pos[0]+(e[1].pos[0]-e[0].pos[0])*o,n=e[0].pos[1]+(e[1].pos[1]-e[0].pos[1])*o,l=e[0].heading+(e[1].heading-e[0].heading)*o;return[r,n,0,l]}}getVehicleModel(i){if(this.view.zoom<=this.zoomThreshold){const e=new h.SphereGeometry(5,32,32),t=new h.MeshPhysicalMaterial({color:325253,emissive:0,roughness:this.roughness,metalness:this.metalness});return new h.Mesh(e,t)}else{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(a=>{!s&&a instanceof h.Mesh&&(a.material=t,s=!0)})}return e}}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){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}createPlateSprite(i){return new Promise((e,t)=>{var l,c;const s=!i.plateNo||i.plateNo==="0"||i.plateNo==="000000";if(this.currentSpriteContent===p.EVehiclePlateState.None||this.currentSpriteContent===p.EVehiclePlateState.PlateNumber&&s){e(void 0);return}const a=new Image;let o="",r="",n="";if(this.currentSpriteContent===p.EVehiclePlateState.PlateNumber||this.currentSpriteContent===p.EVehiclePlateState.Mix)if(s)o="grey",r=i.ptcId,n="#ffffff";else switch(r=((l=i.showName)==null?void 0:l.substring(0,2))+"•"+((c=i.showName)==null?void 0:c.substring(2)),i.plateColor){case 1:o="blue",n="#ffffff";break;case 2:o="yellow",n="#000000";break;case 3:o="white",n="#000000";break;case 4:o="black";break;case 5:o="neo_yellow",n="#000000";break;case 6:o="neo_green",n="#000000";break;default:o="grey",r=i.plateNo,n="#ffffff";break}else this.currentSpriteContent===p.EVehiclePlateState.Id&&(o="grey",r=i.ptcId,n="#ffffff");a.src=`${this.assetsRoot}/Images/PlateBG/${o}.png`,a.onload=()=>{const d=this.createCanvas(a,r,n);if(!d)t("canvas创建失败");else{const f=new h.CanvasTexture(d),v=new h.SpriteMaterial({map:f,transparent:!1}),m=new h.Sprite(v),M=.05,y=d.width*M,w=d.height*M;m.scale.set(y,w,1),m.name="VehiclePlate",e(m)}a.onerror=f=>{console.log(`号牌背景加载失败: ${a.src}`,f),t(f)}}})}}exports.default=x;

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

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

package/package.json

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

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

@@ -1,343 +0,0 @@
-import y from "@arcgis/core/geometry/SpatialReference";
-import * as g from "@arcgis/core/views/3d/externalRenderers";
-import * as a from "three";
-import { GLTFLoader as b } from "three/examples/jsm/loaders/GLTFLoader.js";
-import { EVehiclePlateState as d } from "../../../types/index.mjs";
-import w from "../../stores/index.mjs";
-class k {
-  constructor(i) {
-    this.defaultMaterial = new a.MeshBasicMaterial({
-      color: 6908265
-    }), this.materialMap = /* @__PURE__ */ new Map([
-      [1, new a.MeshBasicMaterial({ color: 16777215 })],
-      [2, new a.MeshBasicMaterial({ color: 7833753 })],
-      [3, new a.MeshBasicMaterial({ color: 16766720 })],
-      [4, new a.MeshBasicMaterial({ color: 16758465 })],
-      [5, new a.MeshBasicMaterial({ color: 14423100 })],
-      [6, new a.MeshBasicMaterial({ color: 3329330 })],
-      [7, new a.MeshBasicMaterial({ color: 2003183 })],
-      [8, new a.MeshBasicMaterial({ color: 16032864 })],
-      [9, new a.MeshBasicMaterial({ color: 2105376 })],
-      [10, new a.MeshBasicMaterial({ color: 9662683 })],
-      [99, new a.MeshBasicMaterial({ color: 6908265 })]
-    ]), this.carModelReady = !1, this.vanModelReady = !1, this.truckModelReady = !1, this.busModelReady = !1, this.bicycleModelReady = !1, this.currentSpriteContent = d.None, this.historyPositionMap = /* @__PURE__ */ new Map(), this.vehicleObjectMap = /* @__PURE__ */ new Map(), this.needInterpolate = !0, this.lastRenderTime = Date.now();
-    const e = w.useAppDataStore;
-    this.assetsRoot = JSON.parse(
-      JSON.stringify(e.mapConfig)
-    ).assetsRoot, this.view = i;
-    const t = new b();
-    t.load(`${this.assetsRoot}/3DModels/car.glb`, (s) => {
-      this.carModel = s.scene, this.carModel.rotation.x = a.MathUtils.degToRad(90), this.carModelReady = !0;
-    }), t.load(`${this.assetsRoot}/3DModels/van.glb`, (s) => {
-      this.vanModel = s.scene, this.vanModel.rotation.x = a.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 = a.MathUtils.degToRad(90), this.truckModelReady = !0;
-    }), t.load(`${this.assetsRoot}/3DModels/bus.glb`, (s) => {
-      this.busModel = s.scene, this.busModel.rotation.x = a.MathUtils.degToRad(90), this.busModelReady = !0;
-    }), t.load(`${this.assetsRoot}/3DModels/bicycle.glb`, (s) => {
-      this.bicycleModel = s.scene, this.bicycleModel.rotation.x = a.MathUtils.degToRad(90), this.bicycleModel.rotation.y = a.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 a.WebGLRenderer({
-      context: i.gl,
-      premultipliedAlpha: !1,
-      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 a.Scene(), this.camera = new a.PerspectiveCamera(), this.ambient = new a.AmbientLight(16777215, 0.5), this.scene.add(this.ambient), this.sun = new a.DirectionalLight(16777215, 0.5), this.scene.add(this.sun), i.resetWebGLState();
-  }
-  async render(i) {
-    var n;
-    const e = Date.now();
-    this.lastRenderTime = e;
-    const t = i.camera;
-    if (this.camera.position.set(t.eye[0], t.eye[1], t.eye[2]), this.camera.up.set(t.up[0], t.up[1], t.up[2]), this.camera.lookAt(
-      new a.Vector3(t.center[0], t.center[1], t.center[2])
-    ), this.camera.projectionMatrix.fromArray(t.projectionMatrix), this.needInterpolate)
-      for (const l of this.vehicleObjectMap.keys()) {
-        const o = (n = this.vehicleObjectMap.get(l)) == null ? void 0 : n.model;
-        if (!o)
-          continue;
-        const h = this.computeVehiclePosition(l);
-        if (h) {
-          const r = this.toRenderCoordinates(h);
-          o.position.set(r[0], r[1], r[2]), o.rotation.y = a.MathUtils.degToRad(-h[3]);
-        }
-      }
-    const s = i.sunLight;
-    this.sun.position.set(s.direction[0], s.direction[1], s.direction[2]), this.sun.intensity = s.diffuse.intensity, this.sun.color = new a.Color(
-      s.diffuse.color[0],
-      s.diffuse.color[1],
-      s.diffuse.color[2]
-    ), this.ambient.intensity = s.ambient.intensity, this.ambient.color = new a.Color(
-      s.ambient.color[0],
-      s.ambient.color[1],
-      s.ambient.color[2]
-    ), this.renderer.resetState(), i.bindRenderTarget(), this.renderer.render(this.scene, this.camera), g.requestRender(this.view), i.resetWebGLState();
-  }
-  /**
-   * 新增车辆
-   * */
-  addVehicles(i) {
-    !this.carModelReady || !this.vanModelReady || !this.truckModelReady || !this.busModelReady || !this.bicycleModelReady || i.forEach((e) => {
-      const { vehicleId: t, localTimestamp: s } = e, n = Number(e.x), l = Number(e.y), o = Number(e.heading);
-      this.historyPositionMap.set(t, [
-        { pos: [n, l, 0], heading: o, time: s }
-      ]);
-      const h = this.getVehicleModel(e);
-      h.name = t, h.visible = !this.needInterpolate, this.createPlateSprite(e, (r) => {
-        h.add(r), r.position.set(0, 5, -4);
-      }), this.scene.add(h), this.vehicleObjectMap.set(t, {
-        model: h,
-        data: e,
-        waitForDelete: !1,
-        isMoving: !1
-      });
-    });
-  }
-  /**
-   * 更新车辆
-   * */
-  updateVehicles(i) {
-    if (!this.carModelReady || !this.vanModelReady || !this.truckModelReady || !this.busModelReady || !this.bicycleModelReady)
-      return;
-    const e = [];
-    i.forEach((t) => {
-      const { vehicleId: s, localTimestamp: n } = t, l = Number(t.x), o = Number(t.y);
-      let h = Number(t.heading);
-      const r = this.vehicleObjectMap.get(s);
-      if (!r)
-        e.push(t);
-      else {
-        if ((r.data.vehicleColor !== t.vehicleColor || r.data.vehicleType !== t.vehicleType) && (this.scene.remove(r.model), this.disposeModel(r.model), r.model = this.getVehicleModel(t), this.scene.add(r.model)), r.data.showName !== t.showName || r.data.plateColor !== t.plateColor) {
-          const c = r.model.getObjectByName("VehiclePlate");
-          c && (r.model.remove(c), this.disposeModel(c)), this.createPlateSprite(t, (p) => {
-            r.model.add(p), p.position.set(0, 5, -4);
-          });
-        }
-        if (r.data = t, this.needInterpolate) {
-          const c = this.historyPositionMap.get(
-            s
-          ), p = c[c.length - 1];
-          Math.abs(h - p.heading) >= 180 && (h > p.heading ? p.heading += 360 : h += 360), c.push({
-            pos: [l, o, 0],
-            heading: h,
-            time: n
-          });
-        } else {
-          this.historyPositionMap.set(s, [
-            { pos: [l, o, 0], heading: h, time: n }
-          ]);
-          const c = this.toRenderCoordinates([l, o, 0]);
-          r.model.position.set(c[0], c[1], c[2]), r.model.rotation.y = a.MathUtils.degToRad(-h);
-        }
-      }
-    }), this.addVehicles(e), this.needInterpolate || this.render(this.context);
-  }
-  toRenderCoordinates(i) {
-    const e = [0, 0, 0];
-    return g.toRenderCoordinates(
-      this.view,
-      i,
-      0,
-      y.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);
-  }
-  toggleTrafficInfo(i) {
-    i.name === "vehiclePlate" && (i.visible === !0 && this.currentSpriteContent === d.None ? this.updatePanelContent(d.Id) : this.updatePanelContent(
-      i.visible ? this.currentSpriteContent : d.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
-   */
-  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");
-          s && (t.model.remove(s), this.disposeModel(s)), i !== d.None && this.createPlateSprite(t.data, (n) => {
-            t.model.add(n), n.position.set(0, 5, -4);
-          });
-        }
-      }
-    }
-  }
-  toggleGroundVehicle(i) {
-  }
-  toggleElevatedVehicle(i) {
-  }
-  /**
-   * 释放模型资源
-   * */
-  disposeModel(i) {
-    i.traverse((e) => {
-      e instanceof a.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 n = s - t.segmentStartTime, l = Math.min(
-      n / t.segmentTotalTime,
-      1
-    );
-    if (l === 1)
-      if (e.shift(), e.length === 1) {
-        t.waitForDelete === !0 ? (this.deleteVehicle(t), console.log("delete vehicle", i)) : (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 o = e[0].pos[0] + (e[1].pos[0] - e[0].pos[0]) * l, h = e[0].pos[1] + (e[1].pos[1] - e[0].pos[1]) * l, r = e[0].heading + (e[1].heading - e[0].heading) * l;
-      return [o, h, 0, r];
-    }
-  }
-  /**
-   * 根据车辆类型、车身颜色获取模型
-   * */
-  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((n) => {
-        !s && n instanceof a.Mesh && (n.material = t, s = !0);
-      });
-    }
-    return e;
-  }
-  /**
-   * 创建号牌canvas
-   * */
-  createCanvas(i, e, t) {
-    const s = document.createElement("canvas"), n = i.width, l = i.height;
-    s.width = n, s.height = l;
-    const o = s.getContext("2d");
-    if (!o) {
-      console.log("canvas创建失败");
-      return;
-    }
-    return o.fillStyle = "rgba(0,0,0,0.0)", o.fillRect(0, 0, n, l), o.drawImage(i, 0, 0, n, l), o.beginPath(), o.translate(n / 2, l / 2), o.fillStyle = t, o.font = "bold 32px 宋体", o.textBaseline = "middle", o.textAlign = "center", o.fillText(e, 0, 0), s;
-  }
-  createPlateSprite(i, e) {
-    var h, r;
-    const t = !i.plateNo || i.plateNo === "0" || i.plateNo === "000000";
-    if (this.currentSpriteContent === d.None || this.currentSpriteContent === d.PlateNumber && t)
-      return;
-    const s = new Image();
-    let n = "", l = "", o = "";
-    if (this.currentSpriteContent === d.PlateNumber || this.currentSpriteContent === d.Mix)
-      if (t)
-        n = "grey", l = i.ptcId, o = "#ffffff";
-      else
-        switch (l = ((h = i.showName) == null ? void 0 : h.substring(0, 2)) + "•" + ((r = i.showName) == null ? void 0 : r.substring(2)), i.plateColor) {
-          case 1:
-            n = "blue", o = "#ffffff";
-            break;
-          case 2:
-            n = "yellow", o = "#000000";
-            break;
-          case 3:
-            n = "white", o = "#000000";
-            break;
-          case 4:
-            n = "black";
-            break;
-          case 5:
-            n = "neo_yellow", o = "#000000";
-            break;
-          case 6:
-            n = "neo_green", o = "#000000";
-            break;
-          default:
-            n = "grey", l = i.plateNo, o = "#ffffff";
-            break;
-        }
-    else
-      this.currentSpriteContent === d.Id && (n = "grey", l = i.ptcId, o = "#ffffff");
-    s.src = `${this.assetsRoot}/Images/PlateBG/${n}.png`, s.onload = () => {
-      const c = this.createCanvas(s, l, o);
-      if (!c)
-        return;
-      const p = new a.CanvasTexture(c), m = new a.SpriteMaterial({
-        map: p
-      }), f = new a.Sprite(m), M = 0.05, u = c.width * M, v = c.height * M;
-      f.scale.set(u, v, 1), f.name = "VehiclePlate", e(f);
-    };
-  }
-}
-export {
-  k as default
-};

package/lib/src/gis-map/utils/holo-flow/trace-renderer-webgl.js

@@ -1 +0,0 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const w=require("@arcgis/core/geometry/SpatialReference"),R=require("@arcgis/core/views/3d/externalRenderers"),P=require("three"),S=require("three/examples/jsm/loaders/GLTFLoader.js"),d=require("../../../types/index.js"),T=require("../../stores/index.js");function v(u){const i=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(u){for(const e in u)if(e!=="default"){const t=Object.getOwnPropertyDescriptor(u,e);Object.defineProperty(i,e,t.get?t:{enumerable:!0,get:()=>u[e]})}}return i.default=u,Object.freeze(i)}const g=v(R),o=v(P);class C{constructor(i){this.defaultMaterial=new o.MeshBasicMaterial({color:6908265}),this.materialMap=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=d.EVehiclePlateState.None,this.historyPositionMap=new Map,this.vehicleObjectMap=new Map,this.needInterpolate=!0,this.lastRenderTime=Date.now();const e=T.default.useAppDataStore;this.assetsRoot=JSON.parse(JSON.stringify(e.mapConfig)).assetsRoot,this.view=i;const t=new S.GLTFLoader;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:!1,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,.5),this.scene.add(this.ambient),this.sun=new o.DirectionalLight(16777215,.5),this.scene.add(this.sun),i.resetWebGLState()}async render(i){var n;const e=Date.now();this.lastRenderTime=e;const t=i.camera;if(this.camera.position.set(t.eye[0],t.eye[1],t.eye[2]),this.camera.up.set(t.up[0],t.up[1],t.up[2]),this.camera.lookAt(new o.Vector3(t.center[0],t.center[1],t.center[2])),this.camera.projectionMatrix.fromArray(t.projectionMatrix),this.needInterpolate)for(const r of this.vehicleObjectMap.keys()){const a=(n=this.vehicleObjectMap.get(r))==null?void 0:n.model;if(!a)continue;const c=this.computeVehiclePosition(r);if(c){const l=this.toRenderCoordinates(c);a.position.set(l[0],l[1],l[2]),a.rotation.y=o.MathUtils.degToRad(-c[3])}}const s=i.sunLight;this.sun.position.set(s.direction[0],s.direction[1],s.direction[2]),this.sun.intensity=s.diffuse.intensity,this.sun.color=new o.Color(s.diffuse.color[0],s.diffuse.color[1],s.diffuse.color[2]),this.ambient.intensity=s.ambient.intensity,this.ambient.color=new o.Color(s.ambient.color[0],s.ambient.color[1],s.ambient.color[2]),this.renderer.resetState(),i.bindRenderTarget(),this.renderer.render(this.scene,this.camera),g.requestRender(this.view),i.resetWebGLState()}addVehicles(i){!this.carModelReady||!this.vanModelReady||!this.truckModelReady||!this.busModelReady||!this.bicycleModelReady||i.forEach(e=>{const{vehicleId:t,localTimestamp:s}=e,n=Number(e.x),r=Number(e.y),a=Number(e.heading);this.historyPositionMap.set(t,[{pos:[n,r,0],heading:a,time:s}]);const c=this.getVehicleModel(e);c.name=t,c.visible=!this.needInterpolate,this.createPlateSprite(e,l=>{c.add(l),l.position.set(0,5,-4)}),this.scene.add(c),this.vehicleObjectMap.set(t,{model:c,data:e,waitForDelete:!1,isMoving:!1})})}updateVehicles(i){if(!this.carModelReady||!this.vanModelReady||!this.truckModelReady||!this.busModelReady||!this.bicycleModelReady)return;const e=[];i.forEach(t=>{const{vehicleId:s,localTimestamp:n}=t,r=Number(t.x),a=Number(t.y);let c=Number(t.heading);const l=this.vehicleObjectMap.get(s);if(!l)e.push(t);else{if((l.data.vehicleColor!==t.vehicleColor||l.data.vehicleType!==t.vehicleType)&&(this.scene.remove(l.model),this.disposeModel(l.model),l.model=this.getVehicleModel(t),this.scene.add(l.model)),l.data.showName!==t.showName||l.data.plateColor!==t.plateColor){const h=l.model.getObjectByName("VehiclePlate");h&&(l.model.remove(h),this.disposeModel(h)),this.createPlateSprite(t,p=>{l.model.add(p),p.position.set(0,5,-4)})}if(l.data=t,this.needInterpolate){const h=this.historyPositionMap.get(s),p=h[h.length-1];Math.abs(c-p.heading)>=180&&(c>p.heading?p.heading+=360:c+=360),h.push({pos:[r,a,0],heading:c,time:n})}else{this.historyPositionMap.set(s,[{pos:[r,a,0],heading:c,time:n}]);const h=this.toRenderCoordinates([r,a,0]);l.model.position.set(h[0],h[1],h[2]),l.model.rotation.y=o.MathUtils.degToRad(-c)}}}),this.addVehicles(e),this.needInterpolate||this.render(this.context)}toRenderCoordinates(i){const e=[0,0,0];return g.toRenderCoordinates(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)}toggleTrafficInfo(i){i.name==="vehiclePlate"&&(i.visible===!0&&this.currentSpriteContent===d.EVehiclePlateState.None?this.updatePanelContent(d.EVehiclePlateState.Id):this.updatePanelContent(i.visible?this.currentSpriteContent:d.EVehiclePlateState.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()}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");s&&(t.model.remove(s),this.disposeModel(s)),i!==d.EVehiclePlateState.None&&this.createPlateSprite(t.data,n=>{t.model.add(n),n.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 n=s-t.segmentStartTime,r=Math.min(n/t.segmentTotalTime,1);if(r===1)if(e.shift(),e.length===1){t.waitForDelete===!0?(this.deleteVehicle(t),console.log("delete vehicle",i)):(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 a=e[0].pos[0]+(e[1].pos[0]-e[0].pos[0])*r,c=e[0].pos[1]+(e[1].pos[1]-e[0].pos[1])*r,l=e[0].heading+(e[1].heading-e[0].heading)*r;return[a,c,0,l]}}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(n=>{!s&&n instanceof o.Mesh&&(n.material=t,s=!0)})}return e}createCanvas(i,e,t){const s=document.createElement("canvas"),n=i.width,r=i.height;s.width=n,s.height=r;const a=s.getContext("2d");if(!a){console.log("canvas创建失败");return}return a.fillStyle="rgba(0,0,0,0.0)",a.fillRect(0,0,n,r),a.drawImage(i,0,0,n,r),a.beginPath(),a.translate(n/2,r/2),a.fillStyle=t,a.font="bold 32px 宋体",a.textBaseline="middle",a.textAlign="center",a.fillText(e,0,0),s}createPlateSprite(i,e){var c,l;const t=!i.plateNo||i.plateNo==="0"||i.plateNo==="000000";if(this.currentSpriteContent===d.EVehiclePlateState.None||this.currentSpriteContent===d.EVehiclePlateState.PlateNumber&&t)return;const s=new Image;let n="",r="",a="";if(this.currentSpriteContent===d.EVehiclePlateState.PlateNumber||this.currentSpriteContent===d.EVehiclePlateState.Mix)if(t)n="grey",r=i.ptcId,a="#ffffff";else switch(r=((c=i.showName)==null?void 0:c.substring(0,2))+"•"+((l=i.showName)==null?void 0:l.substring(2)),i.plateColor){case 1:n="blue",a="#ffffff";break;case 2:n="yellow",a="#000000";break;case 3:n="white",a="#000000";break;case 4:n="black";break;case 5:n="neo_yellow",a="#000000";break;case 6:n="neo_green",a="#000000";break;default:n="grey",r=i.plateNo,a="#ffffff";break}else this.currentSpriteContent===d.EVehiclePlateState.Id&&(n="grey",r=i.ptcId,a="#ffffff");s.src=`${this.assetsRoot}/Images/PlateBG/${n}.png`,s.onload=()=>{const h=this.createCanvas(s,r,a);if(!h)return;const p=new o.CanvasTexture(h),M=new o.SpriteMaterial({map:p}),f=new o.Sprite(M),m=.05,b=h.width*m,y=h.height*m;f.scale.set(b,y,1),f.name="VehiclePlate",e(f)}}}exports.default=C;