gisviewer-vue3-arcgis 1.0.267 → 1.0.269

package/es/src/gis-map/utils/police-jurisdiction.d.ts

@@ -5,5 +5,11 @@ export default class PoliceJurisdiction {
     private maskLayer;
     constructor(view: __esri.MapView | __esri.SceneView);
     showJurisdiction(params: IShowJurisdictionParams): Promise<IResult>;
+    /**
+     * 显示支队辖区
+     * @param zdCode
+     */
+    private showZD;
+    private showDD;
     clearJurisdiction(): void;
 }

package/es/src/gis-map/utils/police-jurisdiction.mjs

@@ -1,94 +1,66 @@
-import { Polygon as L } from "@arcgis/core/geometry";
-import * as l from "@arcgis/core/geometry/geometryEngine";
-import i from "@arcgis/core/Graphic";
-import S from "@arcgis/core/layers/GraphicsLayer";
-import _ from "axios";
-import { toRaw as b } from "vue";
-import k from "../stores/index.mjs";
-class M {
-  constructor(e) {
-    this.view = e, this.maskLayer = new S({
+import { Polygon as h } from "@arcgis/core/geometry";
+import * as n from "@arcgis/core/geometry/geometryEngine.js";
+import m from "@arcgis/core/Graphic";
+import k from "@arcgis/core/layers/GraphicsLayer";
+import g from "axios";
+import { toRaw as L } from "vue";
+import E from "../stores/index.mjs";
+import f from "./common-utils.mjs";
+class R {
+  constructor(o) {
+    this.view = o, this.maskLayer = new k({
       id: "police-jurisdiction"
     }), this.view.map.add(this.maskLayer);
-    const a = k.useAppDataStore, n = b(a.mapConfig);
-    this.geoServer = n.geoServer;
+    const t = E.useAppDataStore, r = L(t.mapConfig);
+    this.geoServer = r.geoServer;
   }
-  async showJurisdiction(e) {
-    if (!this.geoServer)
-      return { status: -1, message: "未配置GeoServer" };
-    const a = e.type.toLowerCase() === "zd" ? "VIEW_SH_ZD" : "VW_DWD_GEO_SH_DD", n = e.type.toLowerCase() === "zd" ? "ZD_CODE" : "DD_CODE", y = e.type.toLowerCase() === "zd" ? "ZD_NAME" : "DD_NAME", h = e.ids.join(","), s = await _.get(`${this.geoServer}/zd_edpass/wms`, {
+  async showJurisdiction(o) {
+    return this.geoServer ? o.type.toLowerCase() === "zd" ? await this.showZD(o.id) : o.type.toLowerCase() === "dd" ? await this.showDD(o.id) : { status: 0, message: "ok" } : { status: -1, message: "未配置GeoServer" };
+  }
+  /**
+   * 显示支队辖区
+   * @param zdCode
+   */
+  async showZD(o) {
+    let t = await g.get(`${this.geoServer}/zd_edpass/wms`, {
       params: {
         service: "WFS",
         version: "1.1.0",
         request: "GetFeature",
-        typename: `zd_edpass:${a}`,
+        typename: "zd_edpass:VIEW_SH_ZD",
         outputFormat: "application/json",
-        CQL_FILTER: `${n} IN (${h})`
+        CQL_FILTER: `ZD_CODE = ${o}`
       }
     });
-    if (s.status !== 200)
-      return { status: -1, message: s.status + " " + s.statusText };
-    const { features: c } = s.data;
-    if (!c || c.length === 0)
+    if (t.status !== 200)
+      return { status: -1, message: t.status + " " + t.statusText };
+    const { features: r } = t.data;
+    if (!r || r.length === 0)
       return { status: -1, message: "未查询到数据" };
     this.maskLayer.removeAll();
-    const t = [], p = [], d = [];
-    c.forEach((o) => {
-      const w = o.geometry.coordinates, r = new L({
-        rings: w[0]
-      });
-      t.push(r);
-      const v = new i({
-        geometry: r,
-        symbol: {
-          type: "simple-line",
-          style: "dash",
-          color: [111, 100, 255],
-          width: 4
-        }
-      }), D = new i({
-        geometry: r,
-        symbol: {
-          type: "simple-line",
-          style: "solid",
-          color: [111, 100, 255, 0.6],
-          width: 4
-        }
-      });
-      p.push(v, D);
-      const G = new i({
-        geometry: r.centroid,
-        symbol: {
-          type: "text",
-          color: [0, 0, 0],
-          haloColor: [255, 255, 255],
-          haloSize: "1px",
-          text: o.properties[y],
-          font: {
-            size: "14px",
-            weight: "bold",
-            family: "msyh"
-          }
-        }
+    const l = r[0].geometry.coordinates, s = [];
+    l.forEach((e) => {
+      const i = new h({
+        rings: e
       });
-      d.push(G);
+      s.push(i);
     });
-    const u = t[0].centroid, f = l.geodesicBuffer(
-      u,
+    const p = s[0].centroid, u = n.geodesicBuffer(
+      p,
       100,
       "kilometers"
     );
-    let m = l.difference(
-      f,
-      t[0]
+    let a = n.difference(
+      u,
+      s[0]
     );
-    for (let o = 1; o < t.length; o++)
-      m = l.difference(
-        m,
-        t[o]
+    for (let e = 1; e < s.length; e++)
+      a = n.difference(
+        a,
+        s[e]
       );
-    const g = new i({
-      geometry: m,
+    const y = new m({
+      geometry: a,
       symbol: {
         type: "simple-fill",
         color: [100, 100, 100, 0.8],
@@ -98,12 +70,133 @@ class M {
       },
       attributes: { type: "mask" }
     });
-    return this.maskLayer.add(g), this.maskLayer.addMany(p), this.maskLayer.addMany(d), await this.view.goTo(t), { status: 0, message: "ok" };
+    this.maskLayer.add(y);
+    const d = s.map((e) => new m({
+      geometry: e,
+      symbol: {
+        type: "simple-line",
+        style: "solid",
+        color: [240, 156, 69],
+        width: 2
+      }
+    }));
+    if (this.maskLayer.addMany(d), await f.viewGoto(this.view, d), t = await g.get(`${this.geoServer}/zd_edpass/wms`, {
+      params: {
+        service: "WFS",
+        version: "1.1.0",
+        request: "GetFeature",
+        typename: "zd_edpass:VW_DWD_GEO_SH_DD",
+        outputFormat: "application/json",
+        CQL_FILTER: `ZD_CODE = ${o}`
+      }
+    }), t.status === 200) {
+      const { features: e } = t.data;
+      if (e && e.length > 0) {
+        const i = [];
+        e.forEach((c) => {
+          c.geometry.coordinates.forEach((_) => {
+            const v = new h({
+              rings: _
+            }), G = new m({
+              geometry: v,
+              symbol: {
+                type: "simple-line",
+                style: "dash",
+                color: [240, 156, 69],
+                width: 1
+              }
+            });
+            i.push(G);
+          });
+          const w = c.properties.DD_NAME, D = new m({
+            geometry: {
+              type: "point",
+              longitude: c.properties.CENTER_X,
+              latitude: c.properties.CENTER_Y
+            },
+            symbol: {
+              type: "text",
+              color: [240, 156, 69],
+              haloColor: [255, 255, 255],
+              haloSize: "2px",
+              text: w,
+              font: {
+                size: "14px",
+                weight: "bold",
+                family: "msyh"
+              }
+            }
+          });
+          i.push(D);
+        }), this.maskLayer.addMany(i);
+      }
+    }
+    return { status: 0, message: "ok" };
+  }
+  async showDD(o) {
+    this.maskLayer.removeAll();
+    const t = await g.get(`${this.geoServer}/zd_edpass/wms`, {
+      params: {
+        service: "WFS",
+        version: "1.1.0",
+        request: "GetFeature",
+        typename: "zd_edpass:VW_DWD_GEO_SH_DD",
+        outputFormat: "application/json",
+        CQL_FILTER: `DD_CODE = ${o}`
+      }
+    });
+    if (console.log(t), t.status !== 200)
+      return { status: -1, message: t.status + " " + t.statusText };
+    const { features: r } = t.data;
+    if (!r || r.length === 0)
+      return { status: -1, message: "未查询到数据" };
+    const l = r[0].geometry.coordinates, s = [];
+    l.forEach((e) => {
+      const i = new h({
+        rings: e
+      });
+      s.push(i);
+    });
+    const p = s[0].centroid, u = n.geodesicBuffer(
+      p,
+      100,
+      "kilometers"
+    );
+    let a = n.difference(
+      u,
+      s[0]
+    );
+    for (let e = 1; e < s.length; e++)
+      a = n.difference(
+        a,
+        s[e]
+      );
+    const y = new m({
+      geometry: a,
+      symbol: {
+        type: "simple-fill",
+        color: [100, 100, 100, 0.8],
+        outline: {
+          width: 0
+        }
+      }
+    });
+    this.maskLayer.add(y);
+    const d = s.map((e) => new m({
+      geometry: e,
+      symbol: {
+        type: "simple-line",
+        style: "dash",
+        color: [240, 156, 69],
+        width: 1
+      }
+    }));
+    return this.maskLayer.addMany(d), await f.viewGoto(this.view, d), { status: 0, message: "ok" };
   }
   clearJurisdiction() {
     this.maskLayer.removeAll();
   }
 }
 export {
-  M as default
+  R as default
 };

package/es/src/gis-map/utils/signal-control-area/signal-cross-controller.d.ts

@@ -6,10 +6,20 @@ export default class SignalCrossController {
     private view;
     private crossLayer;
     private readonly symbolScale;
+    private oldScale;
     private scaleWatchHandle;
     private showName;
     private showStyle;
+    private readonly clusterRadius;
+    private readonly minClusterPoints;
+    private readonly maxClusterSymbolSize;
+    private readonly minClusterSymbolSize;
+    /** 需要进行聚合的点位，一般为当前屏幕范围内的点位 */
+    private clusteredLocations;
+    /** 所有路口点位 */
+    private locations;
     constructor(view: __esri.MapView | __esri.SceneView);
+    private locationToScreen;
     /**
      * 显示信控路口
      * @param params
@@ -17,6 +27,36 @@ export default class SignalCrossController {
      */
     showSignalCross(params: IShowSignalCrossParams): IResult;
     clearSignalCross(): void;
+    /**
+     * 按照像素距离聚类
+     * @param locations
+     * @param eps
+     * @param minPoints
+     * @returns
+     */
+    private doPixelCluster;
+    /**
+     * 获取邻居点
+     * @param locations
+     * @param index
+     * @param eps
+     * @returns
+     */
+    private getNeighbors;
+    /**
+     * 两点间的像素距离
+     * @param point1
+     * @param point2
+     * @returns
+     */
+    private getDistance;
+    /**
+     * 从聚类结果中创建聚类对象
+     * @param locations
+     * @returns
+     */
+    private createClusters;
+    private showClusterResult;
     private getBrandLabel;
     private getOnlineLabel;
     private getMalfunctionLabel;

package/es/src/gis-map/utils/signal-control-area/signal-cross-controller.mjs

@@ -1,76 +1,71 @@
-import o from "@arcgis/core/Graphic";
-import n from "@arcgis/core/layers/GraphicsLayer";
-class b {
+import { Point as u } from "@arcgis/core/geometry";
+import y from "@arcgis/core/Graphic";
+import d from "@arcgis/core/layers/GraphicsLayer";
+class C {
   constructor(e) {
-    this.symbolScale = 6e3, this.showName = "signalId", this.showStyle = "scatter", this.view = e, this.crossLayer = new n({
+    this.symbolScale = 6e3, this.oldScale = 0, this.showName = "signalId", this.showStyle = "scatter", this.clusterRadius = 120, this.minClusterPoints = 2, this.maxClusterSymbolSize = 50, this.minClusterSymbolSize = 25, this.clusteredLocations = [], this.locations = [], this.view = e, this.crossLayer = new d({
       id: "signal-control-cross-layer",
       title: "信控路口图层"
     }), this.view.map.add(this.crossLayer);
   }
+  locationToScreen() {
+    this.clusteredLocations = [], this.locations.forEach((e) => {
+      const t = this.view.toScreen(
+        new u({ x: e.x, y: e.y })
+      );
+      t.x > 0 && t.y > 0 && (e.properties.screenX = t.x, e.properties.screenY = t.y, e.visited = !1, e.clusterId = void 0, this.clusteredLocations.push(e));
+    });
+  }
   /**
    * 显示信控路口
    * @param params
    * @returns
    */
   showSignalCross(e) {
-    if (this.crossLayer.removeAll(), this.showName = e.showName || "signalId", this.showStyle = e.style || "scatter", this.scaleWatchHandle || (this.scaleWatchHandle = this.view.watch("scale", (t, i) => {
-      (t <= this.symbolScale && i > this.symbolScale || t > this.symbolScale && i <= this.symbolScale) && this.crossLayer.graphics.forEach((l) => {
-        const s = l.attributes;
-        l.symbol = this.getCrossSymbol(s);
-      });
+    if (this.crossLayer.removeAll(), this.showName = e.showName || "signalId", this.showStyle = e.style || "scatter", this.scaleWatchHandle || (this.scaleWatchHandle = this.view.watch("stationary", () => {
+      if (this.showStyle === "scatter")
+        (this.oldScale < this.symbolScale && this.view.scale >= this.symbolScale || this.oldScale >= this.symbolScale && this.view.scale < this.symbolScale) && this.crossLayer.graphics.forEach((t) => {
+          t.symbol = this.getCrossSymbol(t.attributes);
+        }), this.oldScale = this.view.scale;
+      else {
+        this.locationToScreen();
+        const t = this.doPixelCluster(this.clusterRadius);
+        this.showClusterResult(t);
+      }
     })), this.showStyle === "scatter") {
       const t = e.points.map((i) => {
-        const l = this.getCrossSymbol(i), s = this.getBrandLabel(i.brand), a = this.getOnlineLabel(i.isOnline), r = this.getMalfunctionLabel(
+        const s = this.getCrossSymbol(i), r = this.getBrandLabel(i.brand), o = this.getOnlineLabel(i.isOnline), n = this.getMalfunctionLabel(
           i.isMalfunction
         );
-        return new o({
+        return new y({
           geometry: {
             type: "point",
             longitude: i.x,
             latitude: i.y
           },
-          symbol: l,
+          symbol: s,
           attributes: {
             type: "signal-cross",
             id: i.crossId,
-            brandLabel: s,
-            isOnlineLabel: a,
-            isMalfunctionLabel: r,
+            brandLabel: r,
+            isOnlineLabel: o,
+            isMalfunctionLabel: n,
             ...i
-          },
-          popupTemplate: {
-            title: "{name}信号机",
-            content: [
-              {
-                type: "fields",
-                fieldInfos: [
-                  {
-                    fieldName: "signalId",
-                    label: "信号机编号"
-                  },
-                  {
-                    fieldName: "crossId",
-                    label: "路口编号"
-                  },
-                  {
-                    fieldName: "brandLabel",
-                    label: "品牌"
-                  },
-                  {
-                    fieldName: "isOnlineLabel",
-                    label: "是否在线"
-                  },
-                  {
-                    fieldName: "isMalfunctionLabel",
-                    label: "是否故障"
-                  }
-                ]
-              }
-            ]
           }
         });
       });
       this.crossLayer.addMany(t);
+    } else {
+      this.locations = e.points.map((i) => ({
+        id: i.crossId,
+        x: i.x,
+        y: i.y,
+        visited: !1,
+        clusterId: void 0,
+        properties: i
+      })), this.locationToScreen();
+      const t = this.doPixelCluster(this.clusterRadius);
+      this.showClusterResult(t);
     }
     return { status: 0, message: "ok" };
   }
@@ -78,6 +73,215 @@ class b {
     var e;
     this.crossLayer.removeAll(), (e = this.scaleWatchHandle) == null || e.remove(), this.scaleWatchHandle = null;
   }
+  /**
+   * 按照像素距离聚类
+   * @param locations
+   * @param eps
+   * @param minPoints
+   * @returns
+   */
+  doPixelCluster(e) {
+    let t = 0;
+    for (let i = 0; i < this.clusteredLocations.length; i++) {
+      const s = this.clusteredLocations[i];
+      if (s.visited)
+        continue;
+      s.visited = !0;
+      const r = this.getNeighbors(s, e);
+      r.length < this.minClusterPoints ? s.clusterId = -1 : (r.forEach((o) => {
+        o.visited = !0, o.clusterId = t;
+      }), s.clusterId = t, t++);
+    }
+    return this.createClusters();
+  }
+  /**
+   * 获取邻居点
+   * @param locations
+   * @param index
+   * @param eps
+   * @returns
+   */
+  getNeighbors(e, t) {
+    return this.clusteredLocations.filter((i) => i.id === e.id || i.visited ? !1 : this.getDistance(e, i) <= t);
+  }
+  /**
+   * 两点间的像素距离
+   * @param point1
+   * @param point2
+   * @returns
+   */
+  getDistance(e, t) {
+    return Math.sqrt(
+      Math.pow(e.properties.screenX - t.properties.screenX, 2) + Math.pow(e.properties.screenY - t.properties.screenY, 2)
+    );
+  }
+  /**
+   * 从聚类结果中创建聚类对象
+   * @param locations
+   * @returns
+   */
+  createClusters() {
+    const e = {}, t = [];
+    for (const s of this.clusteredLocations)
+      s.clusterId === void 0 || s.clusterId === -1 ? t.push(s) : (e[s.clusterId] || (e[s.clusterId] = []), e[s.clusterId].push(s));
+    const i = Object.keys(e).map((s, r) => {
+      const o = e[Number(s)], n = o.length, l = o.reduce((c, h) => c + h.x, 0), a = o.reduce((c, h) => c + h.y, 0), m = l / n, p = a / n;
+      return {
+        id: Number(s),
+        items: o,
+        count: n,
+        center: {
+          x: m,
+          y: p
+        }
+      };
+    });
+    return t.length > 0 && i.push({
+      id: -1,
+      items: t,
+      count: t.length,
+      center: null
+    }), i;
+  }
+  showClusterResult(e) {
+    this.crossLayer.removeAll();
+    let t = Number.MIN_VALUE, i = Number.MAX_VALUE;
+    e.forEach((s) => {
+      s.count > 1 && (i = Math.min(i, s.count), t = Math.max(t, s.count));
+    }), e.forEach((s) => {
+      if (s.id !== -1) {
+        let r = i === t ? (this.maxClusterSymbolSize + this.minClusterSymbolSize) / 2 : this.minClusterSymbolSize + (s.count - i) / (t - i) * (this.maxClusterSymbolSize - this.minClusterSymbolSize);
+        r *= 0.75;
+        const l = (s.count.toString().length * 8 + 6) / 2, a = new y({
+          geometry: new u({ x: s.center.x, y: s.center.y }),
+          attributes: {
+            count: s.count
+          },
+          symbol: {
+            type: "cim",
+            data: {
+              type: "CIMSymbolReference",
+              primitiveOverrides: [
+                {
+                  // 将textGraphic的TextString替换为graphic.attributes.name
+                  type: "CIMPrimitiveOverride",
+                  primitiveName: "textGraphic",
+                  propertyName: "TextString",
+                  valueExpressionInfo: {
+                    type: "CIMExpressionInfo",
+                    title: "Custom",
+                    expression: "$feature.count",
+                    returnType: "Default"
+                  }
+                }
+              ],
+              symbol: {
+                type: "CIMPointSymbol",
+                symbolLayers: [
+                  // 聚合数量
+                  {
+                    type: "CIMVectorMarker",
+                    size: r,
+                    colorLocked: !0,
+                    anchorPointUnits: "Relative",
+                    frame: { xmin: -16, ymin: -16, xmax: 16, ymax: 16 },
+                    markerGraphics: [
+                      // 数量文本框
+                      {
+                        type: "CIMMarkerGraphic",
+                        geometry: {
+                          rings: [
+                            [
+                              [-l, 40],
+                              [l, 40],
+                              [l, 20],
+                              [-l, 20],
+                              [-l, 40]
+                            ]
+                          ]
+                        },
+                        symbol: {
+                          type: "CIMPolygonSymbol",
+                          symbolLayers: [
+                            {
+                              type: "CIMSolidFill",
+                              enable: !0,
+                              color: [2, 72, 200, 255]
+                            },
+                            {
+                              type: "CIMSolidStroke",
+                              enable: !0,
+                              width: 5,
+                              color: [2, 72, 200, 128]
+                            }
+                          ]
+                        }
+                      },
+                      // 数量文字
+                      {
+                        type: "CIMMarkerGraphic",
+                        primitiveName: "textGraphic",
+                        geometry: { x: 0, y: 0 },
+                        symbol: {
+                          type: "CIMTextSymbol",
+                          height: 16,
+                          horizontalAlignment: "Center",
+                          offsetX: 0,
+                          offsetY: 30,
+                          symbol: {
+                            type: "CIMPolygonSymbol",
+                            symbolLayers: [
+                              {
+                                type: "CIMSolidFill",
+                                enable: !0,
+                                color: [255, 255, 255, 255]
+                              }
+                            ]
+                          },
+                          verticalAlignment: "Center"
+                        },
+                        textString: ""
+                      }
+                    ],
+                    scaleSymbolsProportionally: !0,
+                    respectFrame: !0
+                  },
+                  // 聚合图标
+                  {
+                    type: "CIMPictureMarker",
+                    enable: !0,
+                    anchorPoint: {
+                      x: 0,
+                      y: 0
+                    },
+                    anchorPointUnits: "Relative",
+                    size: r,
+                    rotateClockwise: !0,
+                    textureFilter: "Picture",
+                    url: "/GisViewerAssets/Images/cross/gis_xhj_blue.png"
+                  }
+                ]
+              }
+            }
+          }
+        });
+        this.crossLayer.add(a);
+      } else
+        s.items.forEach((r) => {
+          const o = new y({
+            geometry: new u({ x: r.x, y: r.y }),
+            attributes: {
+              ...r,
+              ...r.properties,
+              type: "signal-cross",
+              id: r.id
+            },
+            symbol: this.getCrossSymbol(r.properties)
+          });
+          this.crossLayer.add(o);
+        });
+    });
+  }
   getBrandLabel(e) {
     const t = (e ?? "").toLowerCase();
     return t === "scats" ? "SCATS" : t === "gc" ? "国产" : e ?? "";
@@ -189,5 +393,5 @@ class b {
   }
 }
 export {
-  b as default
+  C as default
 };

package/es/src/types/index.d.ts

@@ -368,7 +368,7 @@ export interface IRoadLine {
 }
 export interface IShowJurisdictionParams {
     type: string;
-    ids: string[];
+    id: string;
 }
 export interface IShowEdpassDeviceParams {
     deviceType: string;

package/lib/src/gis-map/utils/police-jurisdiction.d.ts

@@ -5,5 +5,11 @@ export default class PoliceJurisdiction {
     private maskLayer;
     constructor(view: __esri.MapView | __esri.SceneView);
     showJurisdiction(params: IShowJurisdictionParams): Promise<IResult>;
+    /**
+     * 显示支队辖区
+     * @param zdCode
+     */
+    private showZD;
+    private showDD;
     clearJurisdiction(): void;
 }

package/lib/src/gis-map/utils/police-jurisdiction.js

@@ -1 +1 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const S=require("@arcgis/core/geometry"),G=require("@arcgis/core/geometry/geometryEngine"),c=require("@arcgis/core/Graphic"),k=require("@arcgis/core/layers/GraphicsLayer"),L=require("axios"),C=require("vue"),E=require("../stores/index.js");function O(s){const e=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(s){for(const t in s)if(t!=="default"){const o=Object.getOwnPropertyDescriptor(s,t);Object.defineProperty(e,t,o.get?o:{enumerable:!0,get:()=>s[t]})}}return e.default=s,Object.freeze(e)}const d=O(G);class j{constructor(e){this.view=e,this.maskLayer=new k({id:"police-jurisdiction"}),this.view.map.add(this.maskLayer);const t=E.default.useAppDataStore,o=C.toRaw(t.mapConfig);this.geoServer=o.geoServer}async showJurisdiction(e){if(!this.geoServer)return{status:-1,message:"未配置GeoServer"};const t=e.type.toLowerCase()==="zd"?"VIEW_SH_ZD":"VW_DWD_GEO_SH_DD",o=e.type.toLowerCase()==="zd"?"ZD_CODE":"DD_CODE",y=e.type.toLowerCase()==="zd"?"ZD_NAME":"DD_NAME",h=e.ids.join(","),a=await L.get(`${this.geoServer}/zd_edpass/wms`,{params:{service:"WFS",version:"1.1.0",request:"GetFeature",typename:`zd_edpass:${t}`,outputFormat:"application/json",CQL_FILTER:`${o} IN (${h})`}});if(a.status!==200)return{status:-1,message:a.status+" "+a.statusText};const{features:l}=a.data;if(!l||l.length===0)return{status:-1,message:"未查询到数据"};this.maskLayer.removeAll();const r=[],m=[],p=[];l.forEach(i=>{const b=i.geometry.coordinates,n=new S.Polygon({rings:b[0]});r.push(n);const v=new c({geometry:n,symbol:{type:"simple-line",style:"dash",color:[111,100,255],width:4}}),D=new c({geometry:n,symbol:{type:"simple-line",style:"solid",color:[111,100,255,.6],width:4}});m.push(v,D);const _=new c({geometry:n.centroid,symbol:{type:"text",color:[0,0,0],haloColor:[255,255,255],haloSize:"1px",text:i.properties[y],font:{size:"14px",weight:"bold",family:"msyh"}}});p.push(_)});const g=r[0].centroid,f=d.geodesicBuffer(g,100,"kilometers");let u=d.difference(f,r[0]);for(let i=1;i<r.length;i++)u=d.difference(u,r[i]);const w=new c({geometry:u,symbol:{type:"simple-fill",color:[100,100,100,.8],outline:{width:0}},attributes:{type:"mask"}});return this.maskLayer.add(w),this.maskLayer.addMany(m),this.maskLayer.addMany(p),await this.view.goTo(r),{status:0,message:"ok"}}clearJurisdiction(){this.maskLayer.removeAll()}}exports.default=j;
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const h=require("@arcgis/core/geometry"),E=require("@arcgis/core/geometry/geometryEngine.js"),c=require("@arcgis/core/Graphic"),L=require("@arcgis/core/layers/GraphicsLayer"),f=require("axios"),S=require("vue"),b=require("../stores/index.js"),w=require("./common-utils.js");function F(n){const s=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(n){for(const e in n)if(e!=="default"){const r=Object.getOwnPropertyDescriptor(n,e);Object.defineProperty(s,e,r.get?r:{enumerable:!0,get:()=>n[e]})}}return s.default=n,Object.freeze(s)}const d=F(E);class C{constructor(s){this.view=s,this.maskLayer=new L({id:"police-jurisdiction"}),this.view.map.add(this.maskLayer);const e=b.default.useAppDataStore,r=S.toRaw(e.mapConfig);this.geoServer=r.geoServer}async showJurisdiction(s){return this.geoServer?s.type.toLowerCase()==="zd"?await this.showZD(s.id):s.type.toLowerCase()==="dd"?await this.showDD(s.id):{status:0,message:"ok"}:{status:-1,message:"未配置GeoServer"}}async showZD(s){let e=await f.get(`${this.geoServer}/zd_edpass/wms`,{params:{service:"WFS",version:"1.1.0",request:"GetFeature",typename:"zd_edpass:VIEW_SH_ZD",outputFormat:"application/json",CQL_FILTER:`ZD_CODE = ${s}`}});if(e.status!==200)return{status:-1,message:e.status+" "+e.statusText};const{features:r}=e.data;if(!r||r.length===0)return{status:-1,message:"未查询到数据"};this.maskLayer.removeAll();const m=r[0].geometry.coordinates,o=[];m.forEach(t=>{const i=new h.Polygon({rings:t});o.push(i)});const p=o[0].centroid,y=d.geodesicBuffer(p,100,"kilometers");let a=d.difference(y,o[0]);for(let t=1;t<o.length;t++)a=d.difference(a,o[t]);const g=new c({geometry:a,symbol:{type:"simple-fill",color:[100,100,100,.8],outline:{width:0}},attributes:{type:"mask"}});this.maskLayer.add(g);const l=o.map(t=>new c({geometry:t,symbol:{type:"simple-line",style:"solid",color:[240,156,69],width:2}}));if(this.maskLayer.addMany(l),await w.default.viewGoto(this.view,l),e=await f.get(`${this.geoServer}/zd_edpass/wms`,{params:{service:"WFS",version:"1.1.0",request:"GetFeature",typename:"zd_edpass:VW_DWD_GEO_SH_DD",outputFormat:"application/json",CQL_FILTER:`ZD_CODE = ${s}`}}),e.status===200){const{features:t}=e.data;if(t&&t.length>0){const i=[];t.forEach(u=>{u.geometry.coordinates.forEach(D=>{const k=new h.Polygon({rings:D}),G=new c({geometry:k,symbol:{type:"simple-line",style:"dash",color:[240,156,69],width:1}});i.push(G)});const _=u.properties.DD_NAME,v=new c({geometry:{type:"point",longitude:u.properties.CENTER_X,latitude:u.properties.CENTER_Y},symbol:{type:"text",color:[240,156,69],haloColor:[255,255,255],haloSize:"2px",text:_,font:{size:"14px",weight:"bold",family:"msyh"}}});i.push(v)}),this.maskLayer.addMany(i)}}return{status:0,message:"ok"}}async showDD(s){this.maskLayer.removeAll();const e=await f.get(`${this.geoServer}/zd_edpass/wms`,{params:{service:"WFS",version:"1.1.0",request:"GetFeature",typename:"zd_edpass:VW_DWD_GEO_SH_DD",outputFormat:"application/json",CQL_FILTER:`DD_CODE = ${s}`}});if(console.log(e),e.status!==200)return{status:-1,message:e.status+" "+e.statusText};const{features:r}=e.data;if(!r||r.length===0)return{status:-1,message:"未查询到数据"};const m=r[0].geometry.coordinates,o=[];m.forEach(t=>{const i=new h.Polygon({rings:t});o.push(i)});const p=o[0].centroid,y=d.geodesicBuffer(p,100,"kilometers");let a=d.difference(y,o[0]);for(let t=1;t<o.length;t++)a=d.difference(a,o[t]);const g=new c({geometry:a,symbol:{type:"simple-fill",color:[100,100,100,.8],outline:{width:0}}});this.maskLayer.add(g);const l=o.map(t=>new c({geometry:t,symbol:{type:"simple-line",style:"dash",color:[240,156,69],width:1}}));return this.maskLayer.addMany(l),await w.default.viewGoto(this.view,l),{status:0,message:"ok"}}clearJurisdiction(){this.maskLayer.removeAll()}}exports.default=C;

package/lib/src/gis-map/utils/signal-control-area/signal-cross-controller.d.ts

@@ -6,10 +6,20 @@ export default class SignalCrossController {
     private view;
     private crossLayer;
     private readonly symbolScale;
+    private oldScale;
     private scaleWatchHandle;
     private showName;
     private showStyle;
+    private readonly clusterRadius;
+    private readonly minClusterPoints;
+    private readonly maxClusterSymbolSize;
+    private readonly minClusterSymbolSize;
+    /** 需要进行聚合的点位，一般为当前屏幕范围内的点位 */
+    private clusteredLocations;
+    /** 所有路口点位 */
+    private locations;
     constructor(view: __esri.MapView | __esri.SceneView);
+    private locationToScreen;
     /**
      * 显示信控路口
      * @param params
@@ -17,6 +27,36 @@ export default class SignalCrossController {
      */
     showSignalCross(params: IShowSignalCrossParams): IResult;
     clearSignalCross(): void;
+    /**
+     * 按照像素距离聚类
+     * @param locations
+     * @param eps
+     * @param minPoints
+     * @returns
+     */
+    private doPixelCluster;
+    /**
+     * 获取邻居点
+     * @param locations
+     * @param index
+     * @param eps
+     * @returns
+     */
+    private getNeighbors;
+    /**
+     * 两点间的像素距离
+     * @param point1
+     * @param point2
+     * @returns
+     */
+    private getDistance;
+    /**
+     * 从聚类结果中创建聚类对象
+     * @param locations
+     * @returns
+     */
+    private createClusters;
+    private showClusterResult;
     private getBrandLabel;
     private getOnlineLabel;
     private getMalfunctionLabel;

package/lib/src/gis-map/utils/signal-control-area/signal-cross-controller.js

@@ -1 +1 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const o=require("@arcgis/core/Graphic"),n=require("@arcgis/core/layers/GraphicsLayer");class c{constructor(e){this.symbolScale=6e3,this.showName="signalId",this.showStyle="scatter",this.view=e,this.crossLayer=new n({id:"signal-control-cross-layer",title:"信控路口图层"}),this.view.map.add(this.crossLayer)}showSignalCross(e){if(this.crossLayer.removeAll(),this.showName=e.showName||"signalId",this.showStyle=e.style||"scatter",this.scaleWatchHandle||(this.scaleWatchHandle=this.view.watch("scale",(t,i)=>{(t<=this.symbolScale&&i>this.symbolScale||t>this.symbolScale&&i<=this.symbolScale)&&this.crossLayer.graphics.forEach(l=>{const s=l.attributes;l.symbol=this.getCrossSymbol(s)})})),this.showStyle==="scatter"){const t=e.points.map(i=>{const l=this.getCrossSymbol(i),s=this.getBrandLabel(i.brand),a=this.getOnlineLabel(i.isOnline),r=this.getMalfunctionLabel(i.isMalfunction);return new o({geometry:{type:"point",longitude:i.x,latitude:i.y},symbol:l,attributes:{type:"signal-cross",id:i.crossId,brandLabel:s,isOnlineLabel:a,isMalfunctionLabel:r,...i},popupTemplate:{title:"{name}信号机",content:[{type:"fields",fieldInfos:[{fieldName:"signalId",label:"信号机编号"},{fieldName:"crossId",label:"路口编号"},{fieldName:"brandLabel",label:"品牌"},{fieldName:"isOnlineLabel",label:"是否在线"},{fieldName:"isMalfunctionLabel",label:"是否故障"}]}]}})});this.crossLayer.addMany(t)}return{status:0,message:"ok"}}clearSignalCross(){var e;this.crossLayer.removeAll(),(e=this.scaleWatchHandle)==null||e.remove(),this.scaleWatchHandle=null}getBrandLabel(e){const t=(e??"").toLowerCase();return t==="scats"?"SCATS":t==="gc"?"国产":e??""}getOnlineLabel(e){return e?"在线":"离线"}getMalfunctionLabel(e){return e?"故障":"正常"}getCrossSymbol(e){if(this.view.scale<=this.symbolScale){let t="/GisViewerAssets/Images/cross/ic_";return t+=e.brand==="scats"?"scats_":"gc_",t+=e.isOnline?"online_":"offline_",t+=e.isMalfunction?"malfunction.png":"normal.png",{type:"cim",data:{type:"CIMSymbolReference",primitiveOverrides:[{type:"CIMPrimitiveOverride",primitiveName:"textGraphic",propertyName:"TextString",valueExpressionInfo:{type:"CIMExpressionInfo",title:"Custom",expression:this.showName==="signalId"?'Replace($feature.name, "与", "/") + "  " + $feature.signalId':'Replace($feature.name, "与", "/") + "  " + $feature.crossId',returnType:"Default"}}],symbol:{type:"CIMPointSymbol",symbolLayers:[{type:"CIMVectorMarker",size:25,colorLocked:!0,anchorPointUnits:"Relative",frame:{xmin:-16,ymin:-16,xmax:16,ymax:16},markerGraphics:[{type:"CIMMarkerGraphic",primitiveName:"textGraphic",geometry:{x:0,y:0},symbol:{type:"CIMTextSymbol",height:12,horizontalAlignment:"Center",offsetX:0,offsetY:20,haloSize:1,haloSymbol:{type:"CIMPolygonSymbol",symbolLayers:[{type:"CIMSolidFill",enable:!0,color:[255,255,255,255]}]},symbol:{type:"CIMPolygonSymbol",symbolLayers:[{type:"CIMSolidFill",enable:!0,color:[0,0,0,255]}]},verticalAlignment:"Center"},textString:""}],scaleSymbolsProportionally:!0,respectFrame:!0},{type:"CIMPictureMarker",enable:!0,anchorPoint:{x:0,y:0},anchorPointUnits:"Relative",size:20,rotateClockwise:!0,textureFilter:"Picture",url:t}]}}}}else{const t={type:"simple-marker",style:"circle",size:6,outline:{width:0}};return e.brand.toLowerCase()==="scats"?(e.isOnline?t.color=[23,169,100]:t.color=[202,202,202],t.outline.color=[23,169,100]):e.isOnline?t.color=[33,240,142]:t.color=[202,202,202],t}}}exports.default=c;
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const h=require("@arcgis/core/geometry"),y=require("@arcgis/core/Graphic"),d=require("@arcgis/core/layers/GraphicsLayer");class b{constructor(e){this.symbolScale=6e3,this.oldScale=0,this.showName="signalId",this.showStyle="scatter",this.clusterRadius=120,this.minClusterPoints=2,this.maxClusterSymbolSize=50,this.minClusterSymbolSize=25,this.clusteredLocations=[],this.locations=[],this.view=e,this.crossLayer=new d({id:"signal-control-cross-layer",title:"信控路口图层"}),this.view.map.add(this.crossLayer)}locationToScreen(){this.clusteredLocations=[],this.locations.forEach(e=>{const t=this.view.toScreen(new h.Point({x:e.x,y:e.y}));t.x>0&&t.y>0&&(e.properties.screenX=t.x,e.properties.screenY=t.y,e.visited=!1,e.clusterId=void 0,this.clusteredLocations.push(e))})}showSignalCross(e){if(this.crossLayer.removeAll(),this.showName=e.showName||"signalId",this.showStyle=e.style||"scatter",this.scaleWatchHandle||(this.scaleWatchHandle=this.view.watch("stationary",()=>{if(this.showStyle==="scatter")(this.oldScale<this.symbolScale&&this.view.scale>=this.symbolScale||this.oldScale>=this.symbolScale&&this.view.scale<this.symbolScale)&&this.crossLayer.graphics.forEach(t=>{t.symbol=this.getCrossSymbol(t.attributes)}),this.oldScale=this.view.scale;else{this.locationToScreen();const t=this.doPixelCluster(this.clusterRadius);this.showClusterResult(t)}})),this.showStyle==="scatter"){const t=e.points.map(i=>{const s=this.getCrossSymbol(i),r=this.getBrandLabel(i.brand),o=this.getOnlineLabel(i.isOnline),n=this.getMalfunctionLabel(i.isMalfunction);return new y({geometry:{type:"point",longitude:i.x,latitude:i.y},symbol:s,attributes:{type:"signal-cross",id:i.crossId,brandLabel:r,isOnlineLabel:o,isMalfunctionLabel:n,...i}})});this.crossLayer.addMany(t)}else{this.locations=e.points.map(i=>({id:i.crossId,x:i.x,y:i.y,visited:!1,clusterId:void 0,properties:i})),this.locationToScreen();const t=this.doPixelCluster(this.clusterRadius);this.showClusterResult(t)}return{status:0,message:"ok"}}clearSignalCross(){var e;this.crossLayer.removeAll(),(e=this.scaleWatchHandle)==null||e.remove(),this.scaleWatchHandle=null}doPixelCluster(e){let t=0;for(let i=0;i<this.clusteredLocations.length;i++){const s=this.clusteredLocations[i];if(s.visited)continue;s.visited=!0;const r=this.getNeighbors(s,e);r.length<this.minClusterPoints?s.clusterId=-1:(r.forEach(o=>{o.visited=!0,o.clusterId=t}),s.clusterId=t,t++)}return this.createClusters()}getNeighbors(e,t){return this.clusteredLocations.filter(i=>i.id===e.id||i.visited?!1:this.getDistance(e,i)<=t)}getDistance(e,t){return Math.sqrt(Math.pow(e.properties.screenX-t.properties.screenX,2)+Math.pow(e.properties.screenY-t.properties.screenY,2))}createClusters(){const e={},t=[];for(const s of this.clusteredLocations)s.clusterId===void 0||s.clusterId===-1?t.push(s):(e[s.clusterId]||(e[s.clusterId]=[]),e[s.clusterId].push(s));const i=Object.keys(e).map((s,r)=>{const o=e[Number(s)],n=o.length,l=o.reduce((c,u)=>c+u.x,0),a=o.reduce((c,u)=>c+u.y,0),m=l/n,p=a/n;return{id:Number(s),items:o,count:n,center:{x:m,y:p}}});return t.length>0&&i.push({id:-1,items:t,count:t.length,center:null}),i}showClusterResult(e){this.crossLayer.removeAll();let t=Number.MIN_VALUE,i=Number.MAX_VALUE;e.forEach(s=>{s.count>1&&(i=Math.min(i,s.count),t=Math.max(t,s.count))}),e.forEach(s=>{if(s.id!==-1){let r=i===t?(this.maxClusterSymbolSize+this.minClusterSymbolSize)/2:this.minClusterSymbolSize+(s.count-i)/(t-i)*(this.maxClusterSymbolSize-this.minClusterSymbolSize);r*=.75;const l=(s.count.toString().length*8+6)/2,a=new y({geometry:new h.Point({x:s.center.x,y:s.center.y}),attributes:{count:s.count},symbol:{type:"cim",data:{type:"CIMSymbolReference",primitiveOverrides:[{type:"CIMPrimitiveOverride",primitiveName:"textGraphic",propertyName:"TextString",valueExpressionInfo:{type:"CIMExpressionInfo",title:"Custom",expression:"$feature.count",returnType:"Default"}}],symbol:{type:"CIMPointSymbol",symbolLayers:[{type:"CIMVectorMarker",size:r,colorLocked:!0,anchorPointUnits:"Relative",frame:{xmin:-16,ymin:-16,xmax:16,ymax:16},markerGraphics:[{type:"CIMMarkerGraphic",geometry:{rings:[[[-l,40],[l,40],[l,20],[-l,20],[-l,40]]]},symbol:{type:"CIMPolygonSymbol",symbolLayers:[{type:"CIMSolidFill",enable:!0,color:[2,72,200,255]},{type:"CIMSolidStroke",enable:!0,width:5,color:[2,72,200,128]}]}},{type:"CIMMarkerGraphic",primitiveName:"textGraphic",geometry:{x:0,y:0},symbol:{type:"CIMTextSymbol",height:16,horizontalAlignment:"Center",offsetX:0,offsetY:30,symbol:{type:"CIMPolygonSymbol",symbolLayers:[{type:"CIMSolidFill",enable:!0,color:[255,255,255,255]}]},verticalAlignment:"Center"},textString:""}],scaleSymbolsProportionally:!0,respectFrame:!0},{type:"CIMPictureMarker",enable:!0,anchorPoint:{x:0,y:0},anchorPointUnits:"Relative",size:r,rotateClockwise:!0,textureFilter:"Picture",url:"/GisViewerAssets/Images/cross/gis_xhj_blue.png"}]}}}});this.crossLayer.add(a)}else s.items.forEach(r=>{const o=new y({geometry:new h.Point({x:r.x,y:r.y}),attributes:{...r,...r.properties,type:"signal-cross",id:r.id},symbol:this.getCrossSymbol(r.properties)});this.crossLayer.add(o)})})}getBrandLabel(e){const t=(e??"").toLowerCase();return t==="scats"?"SCATS":t==="gc"?"国产":e??""}getOnlineLabel(e){return e?"在线":"离线"}getMalfunctionLabel(e){return e?"故障":"正常"}getCrossSymbol(e){if(this.view.scale<=this.symbolScale){let t="/GisViewerAssets/Images/cross/ic_";return t+=e.brand==="scats"?"scats_":"gc_",t+=e.isOnline?"online_":"offline_",t+=e.isMalfunction?"malfunction.png":"normal.png",{type:"cim",data:{type:"CIMSymbolReference",primitiveOverrides:[{type:"CIMPrimitiveOverride",primitiveName:"textGraphic",propertyName:"TextString",valueExpressionInfo:{type:"CIMExpressionInfo",title:"Custom",expression:this.showName==="signalId"?'Replace($feature.name, "与", "/") + "  " + $feature.signalId':'Replace($feature.name, "与", "/") + "  " + $feature.crossId',returnType:"Default"}}],symbol:{type:"CIMPointSymbol",symbolLayers:[{type:"CIMVectorMarker",size:25,colorLocked:!0,anchorPointUnits:"Relative",frame:{xmin:-16,ymin:-16,xmax:16,ymax:16},markerGraphics:[{type:"CIMMarkerGraphic",primitiveName:"textGraphic",geometry:{x:0,y:0},symbol:{type:"CIMTextSymbol",height:12,horizontalAlignment:"Center",offsetX:0,offsetY:20,haloSize:1,haloSymbol:{type:"CIMPolygonSymbol",symbolLayers:[{type:"CIMSolidFill",enable:!0,color:[255,255,255,255]}]},symbol:{type:"CIMPolygonSymbol",symbolLayers:[{type:"CIMSolidFill",enable:!0,color:[0,0,0,255]}]},verticalAlignment:"Center"},textString:""}],scaleSymbolsProportionally:!0,respectFrame:!0},{type:"CIMPictureMarker",enable:!0,anchorPoint:{x:0,y:0},anchorPointUnits:"Relative",size:20,rotateClockwise:!0,textureFilter:"Picture",url:t}]}}}}else{const t={type:"simple-marker",style:"circle",size:6,outline:{width:0}};return e.brand.toLowerCase()==="scats"?(e.isOnline?t.color=[23,169,100]:t.color=[202,202,202],t.outline.color=[23,169,100]):e.isOnline?t.color=[33,240,142]:t.color=[202,202,202],t}}}exports.default=b;

package/lib/src/types/index.d.ts

@@ -368,7 +368,7 @@ export interface IRoadLine {
 }
 export interface IShowJurisdictionParams {
     type: string;
-    ids: string[];
+    id: string;
 }
 export interface IShowEdpassDeviceParams {
     deviceType: string;

package/package.json

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