gisviewer-vue3-arcgis 1.0.94 → 1.0.96

package/es/src/gis-map/gis-map.vue2.mjs

@@ -1,4 +1,4 @@
-import f from "./gis-map.vue.mjs";
+const e = "";
 export {
-  f as default
+  e as default
 };

package/es/src/gis-map/gis-map.vue3.mjs

@@ -0,0 +1,5 @@
+import o from "./gis-map.vue.mjs";
+import "./gis-map.vue2.mjs";
+export {
+  o as default
+};

package/es/src/gis-map/index.mjs

@@ -1,7 +1,8 @@
 import { withInstall as t } from "@easyest/utils";
 import o from "./gis-map.vue.mjs";
-const m = t(o);
+import "./gis-map.vue2.mjs";
+const a = t(o);
 export {
-  m as GisMap,
-  m as default
+  a as GisMap,
+  a as default
 };

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

@@ -27,7 +27,7 @@ export default class SignalHoloFlow {
     private updateCountdown;
     /**
      * 在倒计时面板上写入倒计时时间
-     * @param countdownCanvas 倒计时面板canvas
+     * @param canvas 倒计时面板canvas
      * @param rtStage 相位数据
      * @param rtStage.stageID 相位名
      * @param rtStage.stageRemainingTime 剩余时间
@@ -35,6 +35,8 @@ export default class SignalHoloFlow {
      * @param rtStage.stageYellowTime 黄灯时间
      */
     private drawCountdownText;
+    private drawCircle;
+    private ctxDraw;
     private updatePhaseLine;
     /**
      * 车道是否在通道中

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

@@ -1,12 +1,12 @@
-import * as c from "@arcgis/core/core/reactiveUtils";
-import { Point as d } from "@arcgis/core/geometry";
+import * as d from "@arcgis/core/core/reactiveUtils";
+import { Point as c } from "@arcgis/core/geometry";
 import p from "@arcgis/core/layers/FeatureLayer";
 import u from "../../stores/index.mjs";
 class f {
-  constructor(a) {
-    this.currentPhaseMap = /* @__PURE__ */ new Map(), this.countdownCanvasMap = /* @__PURE__ */ new Map(), this.lastDataTime = 0, this.isDeletingCanvas = !1, this.canvasWidth = 120, this.canvasHeight = 50, this.view = (a.type === "2d", a);
-    const e = u.useAppDataStore;
-    this.mapConfig = JSON.parse(JSON.stringify(e.mapConfig));
+  constructor(e) {
+    this.currentPhaseMap = /* @__PURE__ */ new Map(), this.countdownCanvasMap = /* @__PURE__ */ new Map(), this.lastDataTime = 0, this.isDeletingCanvas = !1, this.canvasWidth = 80, this.canvasHeight = 40, this.view = (e.type === "2d", e);
+    const a = u.useAppDataStore;
+    this.mapConfig = JSON.parse(JSON.stringify(a.mapConfig));
   }
   /**
    * 初始化相位线图层
@@ -16,19 +16,19 @@ class f {
       if (this.phaseLineLayer)
         this.phaseLineLayer.visible || (this.phaseLineLayer.visible = !0);
       else {
-        const a = `${this.mapConfig.assetsRoot}/${this.mapConfig.phaseLineLayer}`, o = (await (await fetch(a)).json()).features.map((t, s) => ({
+        const e = `${this.mapConfig.assetsRoot}/${this.mapConfig.phaseLineLayer}`, n = (await (await fetch(e)).json()).features.map((s, t) => ({
           geometry: {
             type: "polyline",
-            paths: [t.geometry.coordinates]
+            paths: [s.geometry.coordinates]
           },
           attributes: {
-            ObjectID: s + 1,
-            id: t.properties.id,
+            ObjectID: t + 1,
+            id: s.properties.id,
             color: "hide"
           }
         }));
         this.phaseLineLayer = new p({
-          source: o,
+          source: n,
           geometryType: "polyline",
           objectIdField: "ObjectID",
           outFields: ["*"],
@@ -105,83 +105,97 @@ class f {
         }), this.view.map.add(this.phaseLineLayer);
       }
   }
-  async handleSignalData(a) {
-    const { crossId: e, lat: i, lon: o, rtStage: t, channelsConfig: s } = a;
-    await this.updateCountdown(e, i, o, t), !(!this.phaseLineLayer || !s) && ((!this.currentPhaseMap.has(e) || this.currentPhaseMap.get(e) !== t.stagePhase) && await this.updatePhaseLine(
-      e,
-      t.channelsConfig,
-      s
-    ), this.currentPhaseMap.set(e, t.stagePhase));
+  async handleSignalData(e) {
+    const { crossId: a, lat: i, lon: n, rtStage: s, channelsConfig: t } = e;
+    await this.updateCountdown(a, i, n, s), !(!this.phaseLineLayer || !t) && ((!this.currentPhaseMap.has(a) || this.currentPhaseMap.get(a) !== s.stagePhase) && await this.updatePhaseLine(
+      a,
+      s.channelsConfig,
+      t
+    ), this.currentPhaseMap.set(a, s.stagePhase));
   }
   /**
    * 清除实时信号相关图层
    * */
   clearSignal() {
-    this.phaseLineLayer && (this.phaseLineLayer.visible = !1), this.countdownWatchHandel && (this.countdownWatchHandel.remove(), this.countdownWatchHandel = void 0), this.countdownCanvasMap.forEach((a) => {
-      this.view.container.removeChild(a.backgroundCanvas), this.view.container.removeChild(a.countdownCanvas);
+    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();
   }
   /**
    * 获取显示倒计时的canvas
    * */
-  async updateCountdown(a, e, i, o) {
+  async updateCountdown(e, a, i, n) {
     if (this.isDeletingCanvas)
       return;
-    const t = this.countdownCanvasMap.get(a);
-    if (t)
-      this.drawCountdownText(t.countdownCanvas, o);
-    else {
-      const s = new d({
-        longitude: i,
-        latitude: e,
-        z: 10
-      }), n = this.view.toScreen(s);
-      if (n.x > this.view.width || n.y > this.view.height || n.x <= 0 || n.y <= 0)
-        return;
-      this.createCountdownCanvas((l) => {
-        const h = l[0], r = l[1];
-        h.style.left = n.x + "px", h.style.top = n.y + "px", r.style.left = n.x + "px", r.style.top = n.y + "px", this.countdownCanvasMap.set(a, {
+    const s = this.countdownCanvasMap.get(e);
+    if (s)
+      this.drawCountdownText(s.countdownCanvas, n);
+    else
+      try {
+        const t = new c({
+          longitude: i,
+          latitude: a,
+          z: 10
+        }), o = this.view.toScreen(t), l = await this.createCountdownCanvas(), h = l[0], r = l[1];
+        h.style.left = o.x + "px", h.style.top = o.y + "px", r.style.left = o.x + "px", r.style.top = o.y + "px", this.countdownCanvasMap.set(e, {
           backgroundCanvas: h,
           countdownCanvas: r,
-          mapPoint: s
-        }), this.drawCountdownText(r, o);
-      });
-    }
-    this.countdownWatchHandel || (this.countdownWatchHandel = c.watch(
+          mapPoint: t
+        }), this.drawCountdownText(r, n);
+      } catch (t) {
+        console.log("倒计时canvas创建失败", e, t);
+      }
+    this.countdownWatchHandel || (this.countdownWatchHandel = d.watch(
       () => this.view.extent,
       () => {
-        this.countdownCanvasMap.forEach((s) => {
-          const n = this.view.toScreen(s.mapPoint);
-          s.backgroundCanvas.style.left = n.x + "px", s.backgroundCanvas.style.top = n.y + "px", s.countdownCanvas.style.left = n.x + "px", s.countdownCanvas.style.top = n.y + "px";
+        this.countdownCanvasMap.forEach((t) => {
+          const o = this.view.toScreen(t.mapPoint);
+          t.backgroundCanvas.style.left = o.x + "px", t.backgroundCanvas.style.top = o.y + "px", t.countdownCanvas.style.left = o.x + "px", t.countdownCanvas.style.top = o.y + "px";
         });
       }
     ));
   }
   /**
    * 在倒计时面板上写入倒计时时间
-   * @param countdownCanvas 倒计时面板canvas
+   * @param canvas 倒计时面板canvas
    * @param rtStage 相位数据
    * @param rtStage.stageID 相位名
    * @param rtStage.stageRemainingTime 剩余时间
    * @param rtStage.stageAllRedTime 全红时间
    * @param rtStage.stageYellowTime 黄灯时间
    */
-  drawCountdownText(a, e) {
-    const i = a.getContext("2d");
-    i.clearRect(0, 0, a.width, a.height), i.font = "32px Digital", i.textBaseline = "middle", i.textAlign = "center", i.fillStyle = e.stageRemainingTime <= e.stageAllRedTime ? "red" : e.stageRemainingTime <= e.stageAllRedTime + e.stageYellowTime ? "yellow" : "lime", i.fillText(
-      `${e.stageID} ${e.stageRemainingTime.toFixed(0)}`,
-      a.width / 2,
-      a.height / 2
+  drawCountdownText(e, a) {
+    const i = e.getContext("2d");
+    i.clearRect(0, 0, e.width, e.height), i.font = "24px Digital", i.textBaseline = "middle", i.textAlign = "center", i.fillStyle = a.stageRemainingTime <= a.stageAllRedTime ? "red" : a.stageRemainingTime <= a.stageAllRedTime + a.stageYellowTime ? "yellow" : "lime", i.fillText(
+      `${a.stageID} ${a.stageRemainingTime.toFixed(0)}`,
+      e.width / 2,
+      e.height / 2
+    );
+  }
+  drawCircle(e, a) {
+    console.log(a);
+    const i = e.getContext("2d");
+    i.clearRect(0, 0, e.width, e.height), this.ctxDraw(
+      i,
+      "lime",
+      e.width / 2,
+      e.height / 2,
+      20,
+      -Math.PI / 2,
+      -Math.PI / 2 + 2 * 0.6 * Math.PI
     );
   }
-  async updatePhaseLine(a, e, i) {
-    const o = this.phaseLineLayer.source.filter(
-      (t) => t.getAttribute("id").includes(a)
+  ctxDraw(e, a, i, n, s, t, o) {
+    e.save, e.beginPath(), e.lineWidth = 4, e.strokeStyle = a, e.arc(i, n, s, t, o), e.stroke(), e.closePath(), e.font = "26px Digital", e.textBaseline = "middle", e.textAlign = "center", e.fillText("A", i, n), e.restore();
+  }
+  async updatePhaseLine(e, a, i) {
+    const n = this.phaseLineLayer.source.filter(
+      (s) => s.getAttribute("id").includes(e)
     );
-    o.forEach((t) => {
-      const s = t.getAttribute("id");
-      this.isLaneInChannels(s, e) ? t.setAttribute("color", "green") : this.isLaneInChannels(s, i) ? t.setAttribute("color", "red") : t.setAttribute("color", "green");
-    }), await this.phaseLineLayer.applyEdits({ updateFeatures: o });
+    n.forEach((s) => {
+      const t = s.getAttribute("id");
+      this.isLaneInChannels(t, a) ? s.setAttribute("color", "green") : this.isLaneInChannels(t, i) ? s.setAttribute("color", "red") : s.setAttribute("color", "green");
+    }), await this.phaseLineLayer.applyEdits({ updateFeatures: n });
   }
   /**
    * 车道是否在通道中
@@ -189,26 +203,30 @@ class f {
    * @param channels 通道列表
    * @returns
    */
-  isLaneInChannels(a, e) {
-    const i = a.split("+"), o = i[1], t = i[2];
-    for (let s = 0; s < e.length; s++)
-      for (let n = 0; n < e[s].laneSnList.length; n++) {
-        const l = e[s].laneSnList[n].toFixed(0);
-        if (o === l[0] && t === l[1])
+  isLaneInChannels(e, a) {
+    const i = e.split("+"), n = i[1], s = i[2];
+    for (let t = 0; t < a.length; t++)
+      for (let o = 0; o < a[t].laneSnList.length; o++) {
+        const l = a[t].laneSnList[o].toFixed(0);
+        if (n === l[0] && s === l[1])
           return !0;
       }
     return !1;
   }
-  createCountdownCanvas(a) {
-    const e = new Image();
-    e.src = `${this.mapConfig.assetsRoot}/Images/timeboard/CountdownBG.png`, e.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(e, 0, 0, this.canvasWidth, this.canvasHeight), this.view.container.appendChild(i);
-      const t = document.createElement("canvas");
-      t.width = this.canvasWidth - 10, t.height = this.canvasHeight - 10, t.style.position = "absolute", t.style.transform = "translate(-50%, -50%)", this.view.container.appendChild(t), a([i, t]);
-    }, e.onerror = () => {
-      console.error("倒计时背景图加载失败");
-    };
+  createCountdownCanvas() {
+    return new Promise((e, a) => {
+      const i = new Image();
+      i.src = `${this.mapConfig.assetsRoot}/Images/timeboard/CountdownBG1.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"
+        ).drawImage(i, 0, 0, this.canvasWidth, this.canvasHeight), this.view.container.appendChild(n);
+        const t = document.createElement("canvas");
+        t.width = this.canvasWidth - 10, t.height = this.canvasHeight - 10, t.style.position = "absolute", t.style.transform = "translate(-50%, -50%)", this.view.container.appendChild(t), e([n, t]);
+      }, i.onerror = (n) => {
+        a(n);
+      };
+    });
   }
 }
 export {

package/es/style.css

@@ -0,0 +1 @@
+.gis-viewer{overflow:auto;scrollbar-width:none;-ms-overflow-style:none;&::-webkit-scrollbar{display:none}}

package/lib/src/gis-map/gis-map.vue2.js

@@ -1 +1 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e=require("./gis-map.vue.js");exports.default=e.default;
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e="";exports.default=e;

package/lib/src/gis-map/gis-map.vue3.js

@@ -0,0 +1 @@
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e=require("./gis-map.vue.js");require("./gis-map.vue2.js");exports.default=e.default;

package/lib/src/gis-map/index.js

@@ -1 +1 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const t=require("@easyest/utils"),u=require("./gis-map.vue.js"),e=t.withInstall(u.default);exports.GisMap=e;exports.default=e;
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const t=require("@easyest/utils"),u=require("./gis-map.vue.js");require("./gis-map.vue2.js");const e=t.withInstall(u.default);exports.GisMap=e;exports.default=e;

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

@@ -27,7 +27,7 @@ export default class SignalHoloFlow {
     private updateCountdown;
     /**
      * 在倒计时面板上写入倒计时时间
-     * @param countdownCanvas 倒计时面板canvas
+     * @param canvas 倒计时面板canvas
      * @param rtStage 相位数据
      * @param rtStage.stageID 相位名
      * @param rtStage.stageRemainingTime 剩余时间
@@ -35,6 +35,8 @@ export default class SignalHoloFlow {
      * @param rtStage.stageYellowTime 黄灯时间
      */
     private drawCountdownText;
+    private drawCircle;
+    private ctxDraw;
     private updatePhaseLine;
     /**
      * 车道是否在通道中

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"),y=require("../../stores/index.js");function g(l){const t=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(l){for(const e in l)if(e!=="default"){const a=Object.getOwnPropertyDescriptor(l,e);Object.defineProperty(t,e,a.get?a:{enumerable:!0,get:()=>l[e]})}}return t.default=l,Object.freeze(t)}const w=g(d);class f{constructor(t){this.currentPhaseMap=new Map,this.countdownCanvasMap=new Map,this.lastDataTime=0,this.isDeletingCanvas=!1,this.canvasWidth=120,this.canvasHeight=50,this.view=(t.type==="2d",t);const e=y.default.useAppDataStore;this.mapConfig=JSON.parse(JSON.stringify(e.mapConfig))}async initializeLayer(){if(this.mapConfig.phaseLineLayer)if(this.phaseLineLayer)this.phaseLineLayer.visible||(this.phaseLineLayer.visible=!0);else{const t=`${this.mapConfig.assetsRoot}/${this.mapConfig.phaseLineLayer}`,o=(await(await fetch(t)).json()).features.map((i,n)=>({geometry:{type:"polyline",paths:[i.geometry.coordinates]},attributes:{ObjectID:n+1,id:i.properties.id,color:"hide"}}));this.phaseLineLayer=new p({source:o,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(t){const{crossId:e,lat:a,lon:o,rtStage:i,channelsConfig:n}=t;await this.updateCountdown(e,a,o,i),!(!this.phaseLineLayer||!n)&&((!this.currentPhaseMap.has(e)||this.currentPhaseMap.get(e)!==i.stagePhase)&&await this.updatePhaseLine(e,i.channelsConfig,n),this.currentPhaseMap.set(e,i.stagePhase))}clearSignal(){this.phaseLineLayer&&(this.phaseLineLayer.visible=!1),this.countdownWatchHandel&&(this.countdownWatchHandel.remove(),this.countdownWatchHandel=void 0),this.countdownCanvasMap.forEach(t=>{this.view.container.removeChild(t.backgroundCanvas),this.view.container.removeChild(t.countdownCanvas)}),this.countdownCanvasMap.clear()}async updateCountdown(t,e,a,o){if(this.isDeletingCanvas)return;const i=this.countdownCanvasMap.get(t);if(i)this.drawCountdownText(i.countdownCanvas,o);else{const n=new u.Point({longitude:a,latitude:e,z:10}),s=this.view.toScreen(n);if(s.x>this.view.width||s.y>this.view.height||s.x<=0||s.y<=0)return;this.createCountdownCanvas(r=>{const c=r[0],h=r[1];c.style.left=s.x+"px",c.style.top=s.y+"px",h.style.left=s.x+"px",h.style.top=s.y+"px",this.countdownCanvasMap.set(t,{backgroundCanvas:c,countdownCanvas:h,mapPoint:n}),this.drawCountdownText(h,o)})}this.countdownWatchHandel||(this.countdownWatchHandel=w.watch(()=>this.view.extent,()=>{this.countdownCanvasMap.forEach(n=>{const s=this.view.toScreen(n.mapPoint);n.backgroundCanvas.style.left=s.x+"px",n.backgroundCanvas.style.top=s.y+"px",n.countdownCanvas.style.left=s.x+"px",n.countdownCanvas.style.top=s.y+"px"})}))}drawCountdownText(t,e){const a=t.getContext("2d");a.clearRect(0,0,t.width,t.height),a.font="32px Digital",a.textBaseline="middle",a.textAlign="center",a.fillStyle=e.stageRemainingTime<=e.stageAllRedTime?"red":e.stageRemainingTime<=e.stageAllRedTime+e.stageYellowTime?"yellow":"lime",a.fillText(`${e.stageID} ${e.stageRemainingTime.toFixed(0)}`,t.width/2,t.height/2)}async updatePhaseLine(t,e,a){const o=this.phaseLineLayer.source.filter(i=>i.getAttribute("id").includes(t));o.forEach(i=>{const n=i.getAttribute("id");this.isLaneInChannels(n,e)?i.setAttribute("color","green"):this.isLaneInChannels(n,a)?i.setAttribute("color","red"):i.setAttribute("color","green")}),await this.phaseLineLayer.applyEdits({updateFeatures:o})}isLaneInChannels(t,e){const a=t.split("+"),o=a[1],i=a[2];for(let n=0;n<e.length;n++)for(let s=0;s<e[n].laneSnList.length;s++){const r=e[n].laneSnList[s].toFixed(0);if(o===r[0]&&i===r[1])return!0}return!1}createCountdownCanvas(t){const e=new Image;e.src=`${this.mapConfig.assetsRoot}/Images/timeboard/CountdownBG.png`,e.onload=()=>{const a=document.createElement("canvas");a.width=this.canvasWidth,a.height=this.canvasHeight,a.style.position="absolute",a.style.transform="translate(-50%, -50%)",a.getContext("2d").drawImage(e,0,0,this.canvasWidth,this.canvasHeight),this.view.container.appendChild(a);const i=document.createElement("canvas");i.width=this.canvasWidth-10,i.height=this.canvasHeight-10,i.style.position="absolute",i.style.transform="translate(-50%, -50%)",this.view.container.appendChild(i),t([a,i])},e.onerror=()=>{console.error("倒计时背景图加载失败")}}}exports.default=f;
+"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/CountdownBG1.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/package.json

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