gisviewer-vue3-arcgis 1.0.100 → 1.0.102

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

@@ -0,0 +1,343 @@
+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/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;
@@ -146,6 +147,8 @@ export interface ITraceRendererInterface {
     updatePanelContent(contentType: EVehiclePlateState): void;
     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 i=require("vue"),w=require("./stores/index.js");require("./style/index.css");const y=require("./utils/holo-flow/index.js"),ne=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"),oe=require("./utils/traffic-flow.js"),ie={class:"gis-viewer"},le=i.defineComponent({__name:"gis-map",props:{config:{},assetsRoot:{}},emits:["mapLoaded","markerClick","mapClick"],setup(h,{expose:k,emit:T}){const d=i.ref(null);let s,c,n,r,t,a,l,u;w.registerStore(),i.onMounted(async()=>{if(!d.value)return;const e=i.getCurrentInstance(),{$gisviewerAssetsRoot:o}=e.appContext.config.globalProperties,C=await(await fetch(v.config)).json();C.assetsRoot=v.assetsRoot||o;const te=w.default.useAppDataStore;te.mapConfig=C,c=new ne.default,s=await c.initialize({container:d.value,markerClickCallback:(p,f,g,ae)=>{m("markerClick",p,f,g,ae)},mapClickCallback:(p,f,g)=>{m("mapClick",p,f,g)}}),t=new y.default(s),m("mapLoaded")});const b=i.computed(()=>s),q=async e=>await c.setMapCenter(e),A=async e=>await c.setMapCamera(e),L=async e=>await c.lookAt(e),I=e=>c.setLayerVisibility(e),_=(e,o)=>c.requestCoordinateTransform(e,o),S=e=>{c.cancelCoordinateTransform(e)},D=e=>{c.setMapZoomRange(e)},M=e=>(n||(n=new O.default(s)),n.showLaneNumber(e)),x=()=>{n==null||n.clearLaneNumber()},V=async e=>(n||(n=new O.default(s)),await n.initializeSearch(e)),B=async()=>n==null?void 0:n.calCrossIndicatorArea(),H=async()=>{},R=async(e,o)=>{r||(r=new oe.default(s)),r.connectTrafficFlow(e,o)},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)},Z=e=>{t==null||t.toggleTrafficObject(e),r==null||r.toggleTrafficObject(e)},G=e=>{t==null||t.updatePanelContent(e)},J=async e=>(a||(a=new se.default(s)),a.addOverlays(e)),K=e=>a==null?void 0:a.removeOverlaysByType(e),U=e=>a==null?void 0:a.removeOverlaysById(e),W=()=>a==null?void 0:a.removeAllOverlays(),X=()=>{a==null||a.showAllOverlays()},Y=e=>{l||(l=new ce.default(s)),l.updateQueueLength(e)},F=()=>{l==null||l.removeQueueLength()},$=async(e,o)=>{u||(u=new re.default(s)),await u.showOpenDrive(e,o)},ee=async()=>{await(u==null?void 0:u.hideOpenDrive())},v=h,m=T;return k({mapViewer:b,setLayerVisibility:I,setMapCenter:q,lookAt:L,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:F,showOpenDrive:$,hideOpenDrive:ee}),(e,o)=>(i.openBlock(),i.createElementBlock("div",ie,[i.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

@@ -11,7 +11,9 @@ export default class Index {
     handleVehicleTraceData(data: any): void;
     toggleTrafficObject(params: IToggleTrafficInfoParams): void;
     clearHoloTrace(): void;
+    toggleTrafficInfo(params: IToggleTrafficInfoParams): void;
     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()}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/trace-holo-flow.d.ts

@@ -1,4 +1,4 @@
-import { EVehiclePlateState } from '../../../types';
+import { EVehiclePlateState, IToggleTrafficInfoParams } from '../../../types';
 export default class TraceHoloFlow {
     private mapConfig;
     private view;
@@ -9,6 +9,11 @@ export default class TraceHoloFlow {
      * 处理全息流轨迹数据
      * */
     handleVehicleTraceData(data: any): void;
+    /**
+     * 切换交通信息可见性
+     * @param params
+     */
+    toggleTrafficInfo(params: IToggleTrafficInfoParams): void;
     /**
      * 清除轨迹流
      * */
@@ -16,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;
 }

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

package/lib/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
@@ -24,6 +24,12 @@ export default class TraceLayerRenderer implements ITraceRendererInterface {
      * @param visible
      */
     toggleElevatedVehicle(visible: boolean): void;
+    toggleTrafficInfo(params: {
+        name: string;
+        visible: boolean;
+    }): void;
+    updatePanelContent(contentType: EVehiclePlateState): void;
+    setInterpolate(needInterpolate: boolean): void;
     private render;
     private updatePosition;
     /**

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

@@ -0,0 +1 @@
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const c=require("@arcgis/core/Graphic"),h=require("@arcgis/core/layers/GraphicsLayer"),p=require("../../stores/index.js");class m{constructor(i){this.needInterpolate=!0,this.showVehiclePlate=!1,this.showGroundVehicle=!0,this.showElevatedVehicle=!0,this.historyPositionMap=new Map,this.vehicleObjectMap=new Map,this.view=i;const e=p.default.useAppDataStore;this.mapConfig=JSON.parse(JSON.stringify(e.mapConfig)),this.vehicleLayer=new h({id:"vehicleLayer"}),this.view.map.add(this.vehicleLayer),requestAnimationFrame(()=>this.render())}addVehicles(i){const e=i.map(t=>{const{vehicleId:o,heading:n,localTimestamp:s}=t,r=Number(t.x),l=Number(t.y);this.historyPositionMap.set(o,[{pos:[r,l,0],heading:n,time:s}]);const a=new c({geometry:{type:"point",x:r,y:l},attributes:{...t},symbol:this.createCIMSymbol(t)});return a.visible=!1,this.vehicleObjectMap.set(o,{graphic:a,data:t,waitForDelete:!1,isMoving:!1}),a});this.vehicleLayer.addMany(e)}updateVehicles(i){const e=[];i.forEach(t=>{const{vehicleId:o,heading:n,localTimestamp:s}=t,r=Number(t.x),l=Number(t.y),a=this.vehicleObjectMap.get(o);a?(a.data=t,this.historyPositionMap.get(o).push({pos:[r,l,0],heading:n,time:s})):e.push(t)}),this.addVehicles(e)}deleteVehicles(i){i.forEach(e=>{const t=this.vehicleObjectMap.get(e);t&&(t.waitForDelete=!0)})}clearVehicles(){this.vehicleLayer.removeAll(),this.vehicleObjectMap.clear(),this.historyPositionMap.clear()}toggleGroundVehicle(i){this.showGroundVehicle=i}toggleElevatedVehicle(i){this.showElevatedVehicle=i}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)}),requestAnimationFrame(()=>this.render())}updatePosition(i){const e=this.historyPositionMap.get(i),t=this.vehicleObjectMap.get(i);if(!e||!t||!t.isMoving&&e.length<=2)return;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,s=Math.min(1,n/t.segmentTotalTime);if(s===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.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={type:"point",x:e[0].pos[0],y:e[0].pos[1]};else{const r=e[0].pos[0]+(e[1].pos[0]-e[0].pos[0])*s,l=e[0].pos[1]+(e[1].pos[1]-e[0].pos[1])*s,a=e[0].heading+(e[1].heading-e[0].heading)*s;t.graphic.geometry={type:"point",x:r,y:l},t.data.heading=a,t.graphic.symbol=this.createCIMSymbol(t.data)}}createCIMSymbol(i){const e=this.getPlateFontColor(i.plateColor);return{type:"cim",data:{type:"CIMSymbolReference",primitiveOverrides:[{type:"CIMPrimitiveOverride",primitiveName:"textGraphic",propertyName:"TextString",valueExpressionInfo:{type:"CIMExpressionInfo",title:"Custom",expression:"$feature.showName",returnType:"Default"}}],symbol:{type:"CIMPointSymbol",symbolLayers:[{type:"CIMVectorMarker",enable:this.showVehiclePlate,size:32,colorLocked:!0,anchorPointUnits:"Relative",frame:{xmin:-8,ymin:-8,xmax:8,ymax:8},markerGraphics:[{type:"CIMMarkerGraphic",primitiveName:"textGraphic",geometry:{x:0,y:0},symbol:{type:"CIMTextSymbol",height:4,horizontalAlignment:"Center",offsetX:0,offsetY:8,haloSize:1,haloSymbol:{type:"CIMPolygonSymbol",symbolLayers:[{type:"CIMSolidFill",enable:!0,color:e.backgroundColor}]},symbol:{type:"CIMPolygonSymbol",symbolLayers:[{type:"CIMSolidFill",enable:!0,color:e.fillColor}]},verticalAlignment:"Center"},textString:""}],scaleSymbolsProportionally:!0,respectFrame:!0},{type:"CIMPictureMarker",enable:!0,anchorPoint:{x:0,y:0},anchorPointUnits:"Relative",size:30,rotation:i.heading,rotateClockwise:!0,textureFilter:"Picture",url:`${this.mapConfig.assetsRoot}Images/car/${this.getCarPic(i.vehicleColor)}`}]}}}}getCarPic(i){if(this.view.zoom<=15)return"point.png";let e="grey";switch(typeof i=="string"&&(i=i.toLowerCase()),i){case"a":case 1:e="white";break;case"b":case 2:e="grey";break;case"c":case 3:e="yellow";break;case"d":case 4:e="pink";break;case"e":case 5:e="red";break;case"f":case 10:e="purple";break;case"g":case 6:e="green";break;case"h":case 7:e="blue";break;case"i":case 8:e="brown";break;case"j":case 9:e="black";break}return e+".png"}getPlateFontColor(i){let e=[255,255,255,255],t=[169,169,169,255];switch(i){case 0:e=[0,0,0,255],t=[255,255,255,255];break;case 1:e=[0,0,0,255],t=[244,164,96,255];break;case 2:e=[255,255,255,255],t=[65,105,225,255];break;case 3:e=[255,255,255,255],t=[0,0,0,255];break;case 15:e=[244,164,96,255],t=[0,250,154,255];break;case 16:e=[0,0,0,255],t=[0,250,154,255];break}return{fillColor:e,backgroundColor:t}}}exports.default=m;

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

@@ -1,5 +1,5 @@
-import { EVehiclePlateState, ITraceRendererInterface, IVehicleTrack } from '../../../types';
-export default class TraceExternalRenderer implements ITraceRendererInterface {
+import { EVehiclePlateState, IToggleTrafficInfoParams, ITraceRendererInterface, IVehicleTrack } from '../../../types';
+export default class TraceRendererWebgl implements ITraceRendererInterface {
     private renderer;
     private scene;
     private camera;
@@ -24,8 +24,12 @@ export default class TraceExternalRenderer implements ITraceRendererInterface {
     private currentSpriteContent;
     private historyPositionMap;
     private vehicleObjectMap;
+    private needInterpolate;
     constructor(view: __esri.SceneView);
+    setInterpolate(needInterpolate: boolean): void;
+    private context;
     setup(context: any): Promise<void>;
+    private lastRenderTime;
     render(context: any): Promise<void>;
     /**
      * 新增车辆
@@ -35,10 +39,13 @@ export default class TraceExternalRenderer implements ITraceRendererInterface {
      * 更新车辆
      * */
     updateVehicles(objects: IVehicleTrack[]): void;
+    private toRenderCoordinates;
     /**
      * 删除车辆
      * */
     deleteVehicles(idList: string[]): void;
+    private deleteVehicle;
+    toggleTrafficInfo(params: IToggleTrafficInfoParams): void;
     /**
      * 清除全部车辆
      * */

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

@@ -0,0 +1 @@
+"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;

package/lib/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;
@@ -146,6 +147,8 @@ export interface ITraceRendererInterface {
     updatePanelContent(contentType: EVehiclePlateState): void;
     toggleGroundVehicle(visible: boolean): void;
     toggleElevatedVehicle(visible: boolean): void;
+    toggleTrafficInfo(params: IToggleTrafficInfoParams): void;
+    setInterpolate(enable: boolean): void;
 }
 export declare enum EVehiclePlateState {
     None = 0,

package/package.json

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