gisviewer-vue3-arcgis 1.0.165 → 1.0.166

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

@@ -0,0 +1,85 @@
+declare const _sfc_main: import("vue").DefineComponent<{
+    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" | "yellow" | "lime" | "white";
+}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
+    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-93496d9c"]]);
+export {
+  n as default
+};

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

@@ -0,0 +1,120 @@
+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 _ = {
+  key: 0,
+  class: "signal-countdown-container"
+}, b = ["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: {
+    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 "yellow";
+        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", _, [
+        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, b)
+        ])
+      ])) : 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,22 @@
 import SignalHoloFlow from './signal-holo-flow';
 export default class LSRSignalHoloFlow extends SignalHoloFlow {
     private stopLineLayer;
+    private store;
     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,108 @@
-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 m from "@arcgis/core/core/reactiveUtils";
+import { Point as h } from "@arcgis/core/geometry";
+import f from "@arcgis/core/layers/GraphicsLayer";
+import P from "@turf/bearing";
+import g from "@turf/destination";
+import * as c from "@turf/helpers";
+import d from "../../stores/index.mjs";
+import y from "../common-utils.mjs";
+import w from "./signal-holo-flow.mjs";
+class F extends w {
+  constructor(o) {
+    super(o), this.stopLineLayer = new f(), this.store = d.useAppDataStore, this.stopLineMap = /* @__PURE__ */ new Map(), this.view.map.add(this.stopLineLayer);
   }
   async initializeLayer() {
-    var t, n;
+    var i, r;
     console.time("初始化停止线图层");
-    let e = (n = (t = this.mapConfig.holoFlow) == null ? void 0 : t.signal) == null ? void 0 : n.stopLineLayer;
-    if (!e)
+    let o = (r = (i = this.mapConfig.holoFlow) == null ? void 0 : i.signal) == null ? void 0 : r.stopLineLayer;
+    if (!o)
       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]]));
-    }), 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
+    o = this.mapConfig.assetsRoot + "/" + o, (await (await fetch(o)).json()).features.forEach((t) => {
+      const { roadId: n, nodeId: e } = t.properties, { coordinates: s } = t.geometry, l = this.stopLineMap.get(e);
+      l ? l.set(n, s) : this.stopLineMap.set(e, /* @__PURE__ */ new Map([[n, s]]));
+    }), console.timeEnd("初始化停止线图层"), m.watch(
+      () => this.view.extent,
+      () => {
+        for (const t of this.store.countdownPanels) {
+          const { mapPoint: n, stopLine: e } = t, s = this.view.toScreen({
+            type: "point",
+            x: n[0],
+            y: n[1]
+          });
+          t.position.left = s.x, t.position.top = s.y;
+          const l = this.getPanelRotation(e);
+          t.rotation = l;
         }
+      }
+    );
+  }
+  async handleSignalData(o) {
+    const { crossId: a, roadId: p, lampStatus: i } = o, r = this.stopLineMap.get(a);
+    if (!r)
+      return;
+    const t = r.get(p);
+    if (!t)
+      return;
+    const n = this.store.countdownPanels.find(
+      (e) => e.crossId === a && e.roadId === p
+    );
+    if (n)
+      n.lampStatus = i;
+    else {
+      const e = this.getPanelPoint(t), s = this.view.toScreen({
+        type: "point",
+        x: e[0],
+        y: e[1]
+      }), l = this.getPanelRotation(t);
+      this.store.countdownPanels.push({
+        crossId: a,
+        roadId: p,
+        mapPoint: e,
+        // 定位点地理坐标
+        stopLine: t,
+        // 关联的停止线坐标
+        position: { left: s.x, top: s.y },
+        // 定位点屏幕坐标
+        rotation: l,
+        // 面板旋转角度
+        lampStatus: i
+        // 灯组状态
       });
-      this.stopLineLayer.add(s);
-    });
+    }
   }
   clearSignal() {
     this.stopLineLayer.removeAll();
   }
+  /**
+   * 从停止线坐标计算面板位置
+   * @param coordinates
+   * @returns
+   */
+  getPanelPoint(o) {
+    const a = y.getCenterPointInLine(o), p = o[0], i = o[o.length - 1];
+    let t = P(c.point(p), c.point(i)) - 90;
+    return t < -180 && (t += 360), g(c.point(a), 1, t, {
+      units: "meters"
+    }).geometry.coordinates;
+  }
+  /**
+   * 从停止线坐标计算面板旋转角度
+   * @param coordinates
+   * @returns
+   */
+  getPanelRotation(o) {
+    const a = o[0], p = new h({
+      x: a[0],
+      y: a[1],
+      spatialReference: this.view.spatialReference
+    }), i = this.view.toScreen(p), r = o[o.length - 1], t = new h({
+      x: r[0],
+      y: r[1],
+      spatialReference: this.view.spatialReference
+    }), n = this.view.toScreen(t), e = n.x - i.x, s = n.y - i.y;
+    return Math.atan2(s, e) * (180 / Math.PI);
+  }
 }
 export {
-  M as default
+  F as default
 };