gisviewer-vue3-arcgis 1.0.247 → 1.0.248

package/es/src/gis-map/utils/edpass-device-controller.mjs

@@ -1,24 +1,28 @@
-import * as h from "@arcgis/core/core/reactiveUtils.js";
-import d from "@arcgis/core/Graphic";
-import o from "@arcgis/core/layers/GraphicsLayer";
-import { toRaw as u } from "vue";
-import v from "../stores/index.mjs";
-class x {
+import * as d from "@arcgis/core/core/reactiveUtils.js";
+import v from "@arcgis/core/Graphic";
+import l from "@arcgis/core/layers/GraphicsLayer";
+import { toRaw as b } from "vue";
+import p from "../stores/index.mjs";
+class S {
   constructor(e) {
     this.watchHandle = null, this.view = e;
-    const t = v.useAppDataStore;
-    this.mapInitializer = u(t.mapInitializer), this.cameraNormalLayer = new o({
-      id: "cameraNormalLayer"
-    }), this.kkNormalLayer = new o({
-      id: "kkNormalLayer"
-    }), this.cameraAbnormalLayer = new o({
-      id: "cameraAbnormalLayer"
-    }), this.kkAbnormalLayer = new o({
-      id: "kkAbnormalLayer"
+    const t = p.useAppDataStore;
+    this.mapInitializer = b(t.mapInitializer), this.cameraNormalLayer = new l({
+      id: "cameraNormalLayer",
+      visible: !1
+    }), this.cameraAbnormalLayer = new l({
+      id: "cameraAbnormalLayer",
+      visible: !1
+    }), this.kkNormalLayer = new l({
+      id: "kkNormalLayer",
+      visible: !1
+    }), this.kkAbnormalLayer = new l({
+      id: "kkAbnormalLayer",
+      visible: !1
     }), this.view.map.addMany([
       this.cameraNormalLayer,
-      this.kkNormalLayer,
       this.cameraAbnormalLayer,
+      this.kkNormalLayer,
       this.kkAbnormalLayer
     ]);
   }
@@ -34,10 +38,10 @@ class x {
         });
       case "cluster": {
         const { deviceLayer: i } = this.getLayerConfig(e);
-        i.visible = e.visible, e.visible ? (await this.showClusterInExtent(e, this.view.extent), this.watchHandle || (this.watchHandle = h.when(
+        i.visible = e.visible, console.log(i.id, i.visible), e.visible ? (await this.showClusterInExtent(e, this.view.extent), this.watchHandle || (this.watchHandle = d.when(
           () => this.view.stationary,
           async () => {
-            this.cameraNormalLayer.visible && await this.showClusterInExtent(
+            this.cameraNormalLayer.visible && (console.log("刷新 camera normal"), await this.showClusterInExtent(
               {
                 deviceType: "camera",
                 deviceState: "normal",
@@ -45,7 +49,7 @@ class x {
                 visible: !0
               },
               this.view.extent
-            ), this.cameraAbnormalLayer.visible && await this.showClusterInExtent(
+            )), this.cameraAbnormalLayer.visible && (console.log("刷新 camera abnormal"), await this.showClusterInExtent(
               {
                 deviceType: "camera",
                 deviceState: "abnormal",
@@ -53,7 +57,7 @@ class x {
                 visible: !0
               },
               this.view.extent
-            ), this.kkNormalLayer.visible && await this.showClusterInExtent(
+            )), this.kkNormalLayer.visible && (console.log("刷新 kk normal"), await this.showClusterInExtent(
               {
                 deviceType: "kk",
                 deviceState: "normal",
@@ -61,7 +65,7 @@ class x {
                 visible: !0
               },
               this.view.extent
-            ), this.kkAbnormalLayer.visible && await this.showClusterInExtent(
+            )), this.kkAbnormalLayer.visible && (console.log("刷新 kk abnormal"), await this.showClusterInExtent(
               {
                 deviceType: "kk",
                 deviceState: "abnormal",
@@ -69,7 +73,7 @@ class x {
                 visible: !0
               },
               this.view.extent
-            );
+            ));
           }
         ))) : (i.removeAll(), !this.cameraNormalLayer.visible && !this.cameraAbnormalLayer.visible && !this.kkNormalLayer.visible && !this.kkAbnormalLayer.visible && ((t = this.watchHandle) == null || t.remove(), this.watchHandle = null));
         break;
@@ -89,7 +93,6 @@ class x {
     };
   }
   async showClusterInExtent(e, t) {
-    console.time("request");
     const i = await fetch("/es/queryGeoAggregation", {
       method: "POST",
       headers: {
@@ -113,125 +116,153 @@ class x {
     const r = await i.json();
     if (r.code !== 200)
       return;
-    console.timeEnd("request"), console.time("render");
-    const { icon: l, color: n, deviceLayer: c } = this.getLayerConfig(e);
-    c.removeAll();
-    const m = r.data.map((a, y) => {
-      const s = (a.count.toString().length * 6 + 6) / 2;
-      return new d({
+    const { icon: n, color: c, deviceLayer: m } = this.getLayerConfig(e);
+    m.removeAll();
+    const h = r.data.map((a) => {
+      var y;
+      const o = (a.count.toString().length * 6 + 6) / 2, s = new v({
         geometry: {
           type: "point",
           x: a.lon,
           y: a.lat
         },
         attributes: {
-          gid: y,
-          count: a.count
-        },
-        symbol: a.count > 1 ? {
-          type: "cim",
-          data: {
-            type: "CIMSymbolReference",
-            symbol: {
-              type: "CIMPointSymbol",
-              symbolLayers: [
-                // 聚合数量
-                {
-                  type: "CIMVectorMarker",
-                  size: 32,
-                  colorLocked: !0,
-                  anchorPointUnits: "Relative",
-                  frame: { xmin: -16, ymin: -16, xmax: 16, ymax: 16 },
-                  markerGraphics: [
-                    // 数量文本框
-                    {
-                      type: "CIMMarkerGraphic",
-                      geometry: {
-                        rings: [
-                          [
-                            [-s, 30],
-                            [s, 30],
-                            [s, 15],
-                            [-s, 15],
-                            [-s, 30]
-                          ]
+          id: ((y = a.devInfo) == null ? void 0 : y.deviceId) || a.key,
+          type: e.deviceType,
+          count: a.count,
+          typeName: e.deviceType === "camera" ? "视频" : "卡口",
+          stateName: e.deviceState === "normal" ? "正常" : "异常",
+          ...a.devInfo
+        }
+      });
+      return a.count > 1 ? s.symbol = {
+        type: "cim",
+        data: {
+          type: "CIMSymbolReference",
+          symbol: {
+            type: "CIMPointSymbol",
+            symbolLayers: [
+              // 聚合数量
+              {
+                type: "CIMVectorMarker",
+                size: 32,
+                colorLocked: !0,
+                anchorPointUnits: "Relative",
+                frame: { xmin: -16, ymin: -16, xmax: 16, ymax: 16 },
+                markerGraphics: [
+                  // 数量文本框
+                  {
+                    type: "CIMMarkerGraphic",
+                    geometry: {
+                      rings: [
+                        [
+                          [-o, 30],
+                          [o, 30],
+                          [o, 15],
+                          [-o, 15],
+                          [-o, 30]
                         ]
-                      },
+                      ]
+                    },
+                    symbol: {
+                      type: "CIMPolygonSymbol",
+                      symbolLayers: [
+                        {
+                          type: "CIMSolidFill",
+                          enable: !0,
+                          color: c.concat([255])
+                        },
+                        {
+                          type: "CIMSolidStroke",
+                          enable: !0,
+                          width: 3,
+                          color: c.concat([128])
+                        }
+                      ]
+                    }
+                  },
+                  // 数量文字
+                  {
+                    type: "CIMMarkerGraphic",
+                    primitiveName: "textGraphic",
+                    geometry: { x: 0, y: 0 },
+                    symbol: {
+                      type: "CIMTextSymbol",
+                      fontFamilyName: "msyh",
+                      height: 12,
+                      horizontalAlignment: "Center",
+                      offsetX: 0,
+                      offsetY: 22,
                       symbol: {
                         type: "CIMPolygonSymbol",
                         symbolLayers: [
                           {
                             type: "CIMSolidFill",
                             enable: !0,
-                            color: n.concat([255])
-                          },
-                          {
-                            type: "CIMSolidStroke",
-                            enable: !0,
-                            width: 3,
-                            color: n.concat([128])
+                            color: [255, 255, 255, 255]
                           }
                         ]
-                      }
-                    },
-                    // 数量文字
-                    {
-                      type: "CIMMarkerGraphic",
-                      primitiveName: "textGraphic",
-                      geometry: { x: 0, y: 0 },
-                      symbol: {
-                        type: "CIMTextSymbol",
-                        fontFamilyName: "msyh",
-                        height: 12,
-                        horizontalAlignment: "Center",
-                        offsetX: 0,
-                        offsetY: 22,
-                        symbol: {
-                          type: "CIMPolygonSymbol",
-                          symbolLayers: [
-                            {
-                              type: "CIMSolidFill",
-                              enable: !0,
-                              color: [255, 255, 255, 255]
-                            }
-                          ]
-                        },
-                        verticalAlignment: "Center"
                       },
-                      textString: a.count.toString()
-                    }
-                  ],
-                  scaleSymbolsProportionally: !0,
-                  respectFrame: !0
+                      verticalAlignment: "Center"
+                    },
+                    textString: a.count.toString()
+                  }
+                ],
+                scaleSymbolsProportionally: !0,
+                respectFrame: !0
+              },
+              // 聚合图标
+              {
+                type: "CIMPictureMarker",
+                enable: !0,
+                anchorPoint: {
+                  x: 0,
+                  y: 0
                 },
-                // 聚合图标
-                {
-                  type: "CIMPictureMarker",
-                  enable: !0,
-                  anchorPoint: {
-                    x: 0,
-                    y: 0
-                  },
-                  anchorPointUnits: "Relative",
-                  size: 24,
-                  rotateClockwise: !0,
-                  textureFilter: "Picture",
-                  url: l
-                }
-              ]
-            }
+                anchorPointUnits: "Relative",
+                size: 24,
+                rotateClockwise: !0,
+                textureFilter: "Picture",
+                url: n
+              }
+            ]
           }
-        } : {
-          type: "picture-marker",
-          url: l,
-          width: 24,
-          height: 24
         }
-      });
+      } : (s.symbol = {
+        type: "picture-marker",
+        url: n,
+        width: 18,
+        height: 18
+      }, s.popupTemplate = {
+        title: "视频信息",
+        content: [
+          {
+            type: "fields",
+            fieldInfos: [
+              {
+                fieldName: "deviceId",
+                label: "设备编号"
+              },
+              {
+                fieldName: "deviceName",
+                label: "设备名称"
+              },
+              {
+                fieldName: "typeName",
+                label: "设备类型"
+              },
+              {
+                fieldName: "stateName",
+                label: "设备状态"
+              }
+            ]
+          }
+        ]
+      }), s;
     });
-    c.addMany(m), console.timeEnd("render");
+    m.addMany(h);
   }
 }
 export {
-  x as default
+  S as default
 };

package/lib/src/gis-map/utils/edpass-device-controller.js

@@ -1 +1 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const u=require("@arcgis/core/core/reactiveUtils.js"),d=require("@arcgis/core/Graphic"),n=require("@arcgis/core/layers/GraphicsLayer"),b=require("vue"),v=require("../stores/index.js");function g(a){const e=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(a){for(const t in a)if(t!=="default"){const i=Object.getOwnPropertyDescriptor(a,t);Object.defineProperty(e,t,i.get?i:{enumerable:!0,get:()=>a[t]})}}return e.default=a,Object.freeze(e)}const p=g(u);class k{constructor(e){this.watchHandle=null,this.view=e;const t=v.default.useAppDataStore;this.mapInitializer=b.toRaw(t.mapInitializer),this.cameraNormalLayer=new n({id:"cameraNormalLayer"}),this.kkNormalLayer=new n({id:"kkNormalLayer"}),this.cameraAbnormalLayer=new n({id:"cameraAbnormalLayer"}),this.kkAbnormalLayer=new n({id:"kkAbnormalLayer"}),this.view.map.addMany([this.cameraNormalLayer,this.kkNormalLayer,this.cameraAbnormalLayer,this.kkAbnormalLayer])}async setEdpassLayerVisibility(e){var t;if(e.deviceType!=="camera"&&e.deviceType!=="kk")return{status:-1,message:"不支持的设备类型"};switch(e.mode){case"scatter":return this.mapInitializer.setLayerVisibility({id:`${e.deviceType}-${e.deviceState}`,visible:e.visible});case"cluster":{const{deviceLayer:i}=this.getLayerConfig(e);i.visible=e.visible,e.visible?(await this.showClusterInExtent(e,this.view.extent),this.watchHandle||(this.watchHandle=p.when(()=>this.view.stationary,async()=>{this.cameraNormalLayer.visible&&await this.showClusterInExtent({deviceType:"camera",deviceState:"normal",mode:"cluster",visible:!0},this.view.extent),this.cameraAbnormalLayer.visible&&await this.showClusterInExtent({deviceType:"camera",deviceState:"abnormal",mode:"cluster",visible:!0},this.view.extent),this.kkNormalLayer.visible&&await this.showClusterInExtent({deviceType:"kk",deviceState:"normal",mode:"cluster",visible:!0},this.view.extent),this.kkAbnormalLayer.visible&&await this.showClusterInExtent({deviceType:"kk",deviceState:"abnormal",mode:"cluster",visible:!0},this.view.extent)}))):(i.removeAll(),!this.cameraNormalLayer.visible&&!this.cameraAbnormalLayer.visible&&!this.kkNormalLayer.visible&&!this.kkAbnormalLayer.visible&&((t=this.watchHandle)==null||t.remove(),this.watchHandle=null));break}}return{status:0,message:"Success"}}getLayerConfig(e){let t,i,r;return e.deviceType==="camera"?e.deviceState==="normal"?(t="/GisViewerAssets/Images/gis/gis_sxj_map.png",i=[45,108,196],r=this.cameraNormalLayer):(t="/GisViewerAssets/Images/gis/gis_sxj_yc.png",i=[189,49,50],r=this.cameraAbnormalLayer):e.deviceState==="normal"?(t="/GisViewerAssets/Images/gis/gis_kk_map.png",i=[45,108,196],r=this.kkNormalLayer):(t="/GisViewerAssets/Images/gis/gis_kk_yc.png",i=[189,49,50],r=this.kkAbnormalLayer),{icon:t,color:i,deviceLayer:r}}async showClusterInExtent(e,t){console.time("request");const i=await fetch("/es/queryGeoAggregation",{method:"POST",headers:{"Content-Type":"application/json"},body:JSON.stringify({deviceType:e.deviceType,topLeftLat:t.ymax,topLeftLon:t.xmin,bottomRightLat:t.ymin,bottomRightLon:t.xmax,devStateSet:[e.deviceState==="normal"?"1":"2"],mapLevel:this.view.zoom+9})});if(i.status!==200){console.error(i.statusText);return}const r=await i.json();if(r.code!==200)return;console.timeEnd("request"),console.time("render");const{icon:l,color:c,deviceLayer:y}=this.getLayerConfig(e);y.removeAll();const m=r.data.map((s,h)=>{const o=(s.count.toString().length*6+6)/2;return new d({geometry:{type:"point",x:s.lon,y:s.lat},attributes:{gid:h,count:s.count},symbol:s.count>1?{type:"cim",data:{type:"CIMSymbolReference",symbol:{type:"CIMPointSymbol",symbolLayers:[{type:"CIMVectorMarker",size:32,colorLocked:!0,anchorPointUnits:"Relative",frame:{xmin:-16,ymin:-16,xmax:16,ymax:16},markerGraphics:[{type:"CIMMarkerGraphic",geometry:{rings:[[[-o,30],[o,30],[o,15],[-o,15],[-o,30]]]},symbol:{type:"CIMPolygonSymbol",symbolLayers:[{type:"CIMSolidFill",enable:!0,color:c.concat([255])},{type:"CIMSolidStroke",enable:!0,width:3,color:c.concat([128])}]}},{type:"CIMMarkerGraphic",primitiveName:"textGraphic",geometry:{x:0,y:0},symbol:{type:"CIMTextSymbol",fontFamilyName:"msyh",height:12,horizontalAlignment:"Center",offsetX:0,offsetY:22,symbol:{type:"CIMPolygonSymbol",symbolLayers:[{type:"CIMSolidFill",enable:!0,color:[255,255,255,255]}]},verticalAlignment:"Center"},textString:s.count.toString()}],scaleSymbolsProportionally:!0,respectFrame:!0},{type:"CIMPictureMarker",enable:!0,anchorPoint:{x:0,y:0},anchorPointUnits:"Relative",size:24,rotateClockwise:!0,textureFilter:"Picture",url:l}]}}}:{type:"picture-marker",url:l,width:24,height:24}})});y.addMany(m),console.timeEnd("render")}}exports.default=k;
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const u=require("@arcgis/core/core/reactiveUtils.js"),b=require("@arcgis/core/Graphic"),n=require("@arcgis/core/layers/GraphicsLayer"),v=require("vue"),p=require("../stores/index.js");function g(s){const e=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(s){for(const t in s)if(t!=="default"){const i=Object.getOwnPropertyDescriptor(s,t);Object.defineProperty(e,t,i.get?i:{enumerable:!0,get:()=>s[t]})}}return e.default=s,Object.freeze(e)}const f=g(u);class k{constructor(e){this.watchHandle=null,this.view=e;const t=p.default.useAppDataStore;this.mapInitializer=v.toRaw(t.mapInitializer),this.cameraNormalLayer=new n({id:"cameraNormalLayer",visible:!1}),this.cameraAbnormalLayer=new n({id:"cameraAbnormalLayer",visible:!1}),this.kkNormalLayer=new n({id:"kkNormalLayer",visible:!1}),this.kkAbnormalLayer=new n({id:"kkAbnormalLayer",visible:!1}),this.view.map.addMany([this.cameraNormalLayer,this.cameraAbnormalLayer,this.kkNormalLayer,this.kkAbnormalLayer])}async setEdpassLayerVisibility(e){var t;if(e.deviceType!=="camera"&&e.deviceType!=="kk")return{status:-1,message:"不支持的设备类型"};switch(e.mode){case"scatter":return this.mapInitializer.setLayerVisibility({id:`${e.deviceType}-${e.deviceState}`,visible:e.visible});case"cluster":{const{deviceLayer:i}=this.getLayerConfig(e);i.visible=e.visible,console.log(i.id,i.visible),e.visible?(await this.showClusterInExtent(e,this.view.extent),this.watchHandle||(this.watchHandle=f.when(()=>this.view.stationary,async()=>{this.cameraNormalLayer.visible&&(console.log("刷新 camera normal"),await this.showClusterInExtent({deviceType:"camera",deviceState:"normal",mode:"cluster",visible:!0},this.view.extent)),this.cameraAbnormalLayer.visible&&(console.log("刷新 camera abnormal"),await this.showClusterInExtent({deviceType:"camera",deviceState:"abnormal",mode:"cluster",visible:!0},this.view.extent)),this.kkNormalLayer.visible&&(console.log("刷新 kk normal"),await this.showClusterInExtent({deviceType:"kk",deviceState:"normal",mode:"cluster",visible:!0},this.view.extent)),this.kkAbnormalLayer.visible&&(console.log("刷新 kk abnormal"),await this.showClusterInExtent({deviceType:"kk",deviceState:"abnormal",mode:"cluster",visible:!0},this.view.extent))}))):(i.removeAll(),!this.cameraNormalLayer.visible&&!this.cameraAbnormalLayer.visible&&!this.kkNormalLayer.visible&&!this.kkAbnormalLayer.visible&&((t=this.watchHandle)==null||t.remove(),this.watchHandle=null));break}}return{status:0,message:"Success"}}getLayerConfig(e){let t,i,r;return e.deviceType==="camera"?e.deviceState==="normal"?(t="/GisViewerAssets/Images/gis/gis_sxj_map.png",i=[45,108,196],r=this.cameraNormalLayer):(t="/GisViewerAssets/Images/gis/gis_sxj_yc.png",i=[189,49,50],r=this.cameraAbnormalLayer):e.deviceState==="normal"?(t="/GisViewerAssets/Images/gis/gis_kk_map.png",i=[45,108,196],r=this.kkNormalLayer):(t="/GisViewerAssets/Images/gis/gis_kk_yc.png",i=[189,49,50],r=this.kkAbnormalLayer),{icon:t,color:i,deviceLayer:r}}async showClusterInExtent(e,t){const i=await fetch("/es/queryGeoAggregation",{method:"POST",headers:{"Content-Type":"application/json"},body:JSON.stringify({deviceType:e.deviceType,topLeftLat:t.ymax,topLeftLon:t.xmin,bottomRightLat:t.ymin,bottomRightLon:t.xmax,devStateSet:[e.deviceState==="normal"?"1":"2"],mapLevel:this.view.zoom+9})});if(i.status!==200){console.error(i.statusText);return}const r=await i.json();if(r.code!==200)return;const{icon:c,color:y,deviceLayer:m}=this.getLayerConfig(e);m.removeAll();const h=r.data.map(a=>{var d;const o=(a.count.toString().length*6+6)/2,l=new b({geometry:{type:"point",x:a.lon,y:a.lat},attributes:{id:((d=a.devInfo)==null?void 0:d.deviceId)||a.key,type:e.deviceType,count:a.count,typeName:e.deviceType==="camera"?"视频":"卡口",stateName:e.deviceState==="normal"?"正常":"异常",...a.devInfo}});return a.count>1?l.symbol={type:"cim",data:{type:"CIMSymbolReference",symbol:{type:"CIMPointSymbol",symbolLayers:[{type:"CIMVectorMarker",size:32,colorLocked:!0,anchorPointUnits:"Relative",frame:{xmin:-16,ymin:-16,xmax:16,ymax:16},markerGraphics:[{type:"CIMMarkerGraphic",geometry:{rings:[[[-o,30],[o,30],[o,15],[-o,15],[-o,30]]]},symbol:{type:"CIMPolygonSymbol",symbolLayers:[{type:"CIMSolidFill",enable:!0,color:y.concat([255])},{type:"CIMSolidStroke",enable:!0,width:3,color:y.concat([128])}]}},{type:"CIMMarkerGraphic",primitiveName:"textGraphic",geometry:{x:0,y:0},symbol:{type:"CIMTextSymbol",fontFamilyName:"msyh",height:12,horizontalAlignment:"Center",offsetX:0,offsetY:22,symbol:{type:"CIMPolygonSymbol",symbolLayers:[{type:"CIMSolidFill",enable:!0,color:[255,255,255,255]}]},verticalAlignment:"Center"},textString:a.count.toString()}],scaleSymbolsProportionally:!0,respectFrame:!0},{type:"CIMPictureMarker",enable:!0,anchorPoint:{x:0,y:0},anchorPointUnits:"Relative",size:24,rotateClockwise:!0,textureFilter:"Picture",url:c}]}}}:(l.symbol={type:"picture-marker",url:c,width:18,height:18},l.popupTemplate={title:"视频信息",content:[{type:"fields",fieldInfos:[{fieldName:"deviceId",label:"设备编号"},{fieldName:"deviceName",label:"设备名称"},{fieldName:"typeName",label:"设备类型"},{fieldName:"stateName",label:"设备状态"}]}]}),l});m.addMany(h)}}exports.default=k;

package/package.json

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