gisviewer-vue3-arcgis 1.0.165 → 1.0.167

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

@@ -0,0 +1,93 @@
+declare const _sfc_main: import("vue").DefineComponent<{
+    displayMode: {
+        type: StringConstructor;
+        required: true;
+    };
+    crossId: {
+        type: StringConstructor;
+        required: true;
+    };
+    roadId: {
+        type: StringConstructor;
+        required: true;
+    };
+    mapPoint: {
+        type: ArrayConstructor;
+        required: true;
+    };
+    stopLine: {
+        type: ArrayConstructor;
+        required: true;
+    };
+    position: {
+        type: ObjectConstructor;
+        required: true;
+    };
+    rotation: {
+        type: NumberConstructor;
+        required: true;
+    };
+    lampStatus: {
+        type: ObjectConstructor;
+        required: true;
+    };
+}, {
+    props: any;
+    panelStyle: import("vue").ComputedRef<{
+        top: string;
+        left: string;
+        'transform-origin': string;
+        transform: string;
+    }>;
+    uImage: import("vue").ComputedRef<string>;
+    uNumberStyle: import("vue").ComputedRef<{
+        color: string;
+    }>;
+    lImage: import("vue").ComputedRef<string>;
+    lNumberStyle: import("vue").ComputedRef<{
+        color: string;
+    }>;
+    sImage: import("vue").ComputedRef<string>;
+    sNumberStyle: import("vue").ComputedRef<{
+        color: string;
+    }>;
+    rImage: import("vue").ComputedRef<string>;
+    rNumberStyle: import("vue").ComputedRef<{
+        color: string;
+    }>;
+    getColorString: (color: string | undefined) => "red" | "rgb(255, 192, 2)" | "lime" | "white";
+}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
+    displayMode: {
+        type: StringConstructor;
+        required: true;
+    };
+    crossId: {
+        type: StringConstructor;
+        required: true;
+    };
+    roadId: {
+        type: StringConstructor;
+        required: true;
+    };
+    mapPoint: {
+        type: ArrayConstructor;
+        required: true;
+    };
+    stopLine: {
+        type: ArrayConstructor;
+        required: true;
+    };
+    position: {
+        type: ObjectConstructor;
+        required: true;
+    };
+    rotation: {
+        type: NumberConstructor;
+        required: true;
+    };
+    lampStatus: {
+        type: ObjectConstructor;
+        required: true;
+    };
+}>>, {}, {}>;
+export default _sfc_main;

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

@@ -0,0 +1,7 @@
+import o from "./signal-countdown-panel.vue2.mjs";
+import "./signal-countdown-panel.vue3.mjs";
+import t from "../../../../_virtual/_plugin-vue_export-helper.mjs";
+const n = /* @__PURE__ */ t(o, [["__scopeId", "data-v-d749c855"]]);
+export {
+  n as default
+};

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

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

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

@@ -0,0 +1,4 @@
+const e = "";
+export {
+  e as default
+};

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

@@ -1,9 +1,23 @@
 import SignalHoloFlow from './signal-holo-flow';
 export default class LSRSignalHoloFlow extends SignalHoloFlow {
     private stopLineLayer;
+    private store;
+    private watchHandle;
     constructor(view: __esri.MapView | __esri.SceneView);
     private stopLineMap;
     initializeLayer(): Promise<void>;
     handleSignalData(data: any): Promise<void>;
     clearSignal(): void;
+    /**
+     * 从停止线坐标计算面板位置
+     * @param coordinates
+     * @returns
+     */
+    private getPanelPoint;
+    /**
+     * 从停止线坐标计算面板旋转角度
+     * @param coordinates
+     * @returns
+     */
+    private getPanelRotation;
 }

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

@@ -1,48 +1,138 @@
-import c from "@arcgis/core/Graphic";
-import m from "@arcgis/core/layers/GraphicsLayer";
-import h from "../common-utils.mjs";
-import y from "./signal-holo-flow.mjs";
-class M extends y {
-  constructor(e) {
-    super(e), this.stopLineLayer = new m(), this.stopLineMap = /* @__PURE__ */ new Map(), this.view.map.add(this.stopLineLayer);
+import * as u from "@arcgis/core/core/reactiveUtils";
+import { Point as d } from "@arcgis/core/geometry";
+import P from "@arcgis/core/layers/GraphicsLayer";
+import y from "@turf/bearing";
+import L from "@turf/destination";
+import * as w from "@turf/helpers";
+import S from "../../stores/index.mjs";
+import R from "../common-utils.mjs";
+import v from "./signal-holo-flow.mjs";
+class b extends v {
+  constructor(t) {
+    super(t), this.stopLineLayer = new P(), this.store = S.useAppDataStore, this.watchHandle = null, this.stopLineMap = /* @__PURE__ */ new Map(), this.view.map.add(this.stopLineLayer);
   }
   async initializeLayer() {
-    var t, n;
+    var p, h;
     console.time("初始化停止线图层");
-    let e = (n = (t = this.mapConfig.holoFlow) == null ? void 0 : t.signal) == null ? void 0 : n.stopLineLayer;
-    if (!e)
+    let t = (h = (p = this.mapConfig.holoFlow) == null ? void 0 : p.signal) == null ? void 0 : h.stopLineLayer;
+    if (!t)
       return;
-    e = this.mapConfig.assetsRoot + "/" + e, (await (await fetch(e)).json()).features.forEach((o) => {
-      const { roadId: s, nodeId: r } = o.properties, { coordinates: p } = o.geometry, l = this.stopLineMap.get(r);
-      l ? l.set(s, p) : this.stopLineMap.set(r, /* @__PURE__ */ new Map([[s, p]]));
+    t = this.mapConfig.assetsRoot + "/" + t, (await (await fetch(t)).json()).features.forEach((a) => {
+      const { roadId: o, nodeId: n } = a.properties, { coordinates: r } = a.geometry, e = this.stopLineMap.get(n);
+      e ? e.set(o, r) : this.stopLineMap.set(n, /* @__PURE__ */ new Map([[o, r]]));
     }), console.timeEnd("初始化停止线图层");
   }
-  async handleSignalData(e) {
-    const { crossId: a } = e, i = this.stopLineMap.get(a);
-    i && i.forEach((t, n) => {
-      const o = h.getCenterPointInLine(t);
-      console.log("centerPoint", o);
-      const s = new c({
-        geometry: {
-          type: "point",
-          x: o[0],
-          y: o[1],
-          spatialReference: this.view.spatialReference
-        },
-        symbol: {
-          type: "simple-marker",
-          style: "circle",
-          color: [0, 0, 255],
-          size: 5
+  async handleSignalData(t) {
+    this.watchHandle || (this.watchHandle = u.watch(
+      () => this.view.extent,
+      () => {
+        for (const o of this.store.countdownPanels) {
+          const { mapPoint: n } = o, r = this.view.toScreen({
+            type: "point",
+            x: n[0],
+            y: n[1]
+          });
+          o.position.left = r.x, o.position.top = r.y;
         }
+      }
+    ));
+    const s = t.crossId, i = t.rtStage, p = t.nonCurStageRemainingTime, h = t.allStageFlows;
+    console.log(s, i, p, h);
+    const a = /* @__PURE__ */ new Map();
+    h.forEach((o) => {
+      const { stageId: n, stageFlows: r } = o;
+      let e = "green", m = i.stageRemainingTime;
+      if (n === i.stageId)
+        m <= i.stageAllRedTime ? e = "red" : i.stageYellowTime !== 0 && m <= i.stageYellowTime + i.stageAllRedTime && (e = "yellow");
+      else {
+        e = "red";
+        const l = p.find(
+          (g) => g.stageId === n
+        );
+        m = l ? l.stageNextRunRemainingTime : 0;
+      }
+      r.forEach((l) => {
+        let { fromRoadId: g } = l;
+        g.startsWith("-") && (g = g.slice(1));
+        const f = l.direction.toLowerCase();
+        let c = a.get(g);
+        c || (c = {}, a.set(g, c)), f === "u" ? (c.uNumber = m, c.uColor = e) : f === "l" ? (c.lNumber = m, c.lColor = e) : f === "s" ? (c.sNumber = m, c.sColor = e) : f === "r" && (c.rNumber = m, c.rColor = e === "yellow" ? "red" : e);
       });
-      this.stopLineLayer.add(s);
+    }), a.forEach((o, n) => {
+      console.log(n, o);
+      const r = this.stopLineMap.get(s);
+      if (!r) {
+        console.error(`路口${s}没有找到对应的停止线`);
+        return;
+      }
+      const e = r.get(n);
+      if (!e) {
+        console.error(`路口${s}的进口道${n}没有找到对应的停止线`);
+        return;
+      }
+      const m = this.store.countdownPanels.find(
+        (l) => l.crossId === s && l.roadId === n
+      );
+      if (m)
+        m.lampStatus = o;
+      else {
+        const l = this.getPanelPoint(e), g = this.view.toScreen({
+          type: "point",
+          x: l[0],
+          y: l[1]
+        }), f = this.getPanelRotation(e);
+        this.store.countdownPanels.push({
+          displayMode: "complete",
+          crossId: s,
+          roadId: n,
+          mapPoint: l,
+          // 定位点地理坐标
+          stopLine: e,
+          // 关联的停止线坐标
+          position: { left: g.x, top: g.y },
+          // 定位点屏幕坐标
+          rotation: f,
+          // 面板旋转角度
+          lampStatus: o
+          // 灯组状态
+        });
+      }
     });
   }
   clearSignal() {
-    this.stopLineLayer.removeAll();
+    var t;
+    this.stopLineLayer.removeAll(), this.store.countdownPanels = [], (t = this.watchHandle) == null || t.remove(), this.watchHandle = null;
+  }
+  /**
+   * 从停止线坐标计算面板位置
+   * @param coordinates
+   * @returns
+   */
+  getPanelPoint(t) {
+    const s = R.getCenterPointInLine(t), i = t[0], p = t[t.length - 1];
+    let a = y(w.point(i), w.point(p)) - 90;
+    return a < -180 && (a += 360), L(w.point(s), 1, a, {
+      units: "meters"
+    }).geometry.coordinates;
+  }
+  /**
+   * 从停止线坐标计算面板旋转角度
+   * @param coordinates
+   * @returns
+   */
+  getPanelRotation(t) {
+    const s = t[0], i = new d({
+      x: s[0],
+      y: s[1],
+      spatialReference: this.view.spatialReference
+    }), p = this.view.toScreen(i), h = t[t.length - 1], a = new d({
+      x: h[0],
+      y: h[1],
+      spatialReference: this.view.spatialReference
+    }), o = this.view.toScreen(a), n = o.x - p.x, r = o.y - p.y;
+    return Math.atan2(r, n) * (180 / Math.PI);
   }
 }
 export {
-  M as default
+  b as default
 };