gisviewer-vue3-arcgis 1.0.251 → 1.0.252

package/es/src/gis-map/utils/dbscan-cluster/index.mjs

@@ -0,0 +1,256 @@
+import * as f from "@arcgis/core/core/reactiveUtils";
+import { Point as a } from "@arcgis/core/geometry";
+import m from "@arcgis/core/Graphic";
+import b from "@arcgis/core/layers/GraphicsLayer";
+class M {
+  constructor(e) {
+    this.maxClusterSymbolSize = 50, this.minClusterSymbolSize = 25, this.zoomWatchHandle = null, this.locations = [], this.clusterMarkUrl = "", this.currentZoom = 0, this.view = e, this.currentZoom = e.zoom, this.clusterLayer = new b(), this.view.map.add(this.clusterLayer);
+  }
+  /**
+   * 将地理位置转换为屏幕坐标
+   */
+  locationToScreen() {
+    this.locations.forEach((e) => {
+      const s = this.view.toScreen(
+        new a({ x: e.x, y: e.y })
+      );
+      e.properties.screenX = s.x, e.properties.screenY = s.y;
+    });
+  }
+  /**
+   * 添加聚类点到视图
+   * @param params
+   */
+  addClusterPoints(e) {
+    var o;
+    this.locations = e.points, this.clusterMarkUrl = ((o = e.clusterSymbol) == null ? void 0 : o.url) || "/GisViewerAssets/Images/cross/gis_xhj_blue.png", e.points.forEach((r) => {
+      r.symbol || (r.symbol = e.pointSymbol || {
+        type: "simple-marker",
+        style: "circle",
+        color: "#3388ff",
+        size: 8,
+        outline: {
+          color: "#ffffff",
+          width: 1
+        }
+      });
+    }), this.zoomWatchHandle || (this.zoomWatchHandle = f.watch(
+      () => this.view.zoom,
+      () => {
+        Math.abs(this.currentZoom - this.view.zoom) >= 1 && (this.currentZoom = this.view.zoom, this.locationToScreen(), this.clusterLayer.removeAll(), this.addClusterPoints(e));
+      }
+    )), this.locationToScreen(), console.time("cluster");
+    const s = this.doPixelCluster(e.points, 120, 3);
+    console.timeEnd("cluster"), this.showClusters(s);
+  }
+  showClusters(e) {
+    let s = Number.MIN_VALUE, o = Number.MAX_VALUE;
+    e.forEach((r) => {
+      r.count > 1 && (o = Math.min(o, r.count), s = Math.max(s, r.count));
+    }), e.forEach((r) => {
+      if (r.id !== -1) {
+        let t = o === s ? (this.maxClusterSymbolSize + this.minClusterSymbolSize) / 2 : this.minClusterSymbolSize + (r.count - o) / (s - o) * (this.maxClusterSymbolSize - this.minClusterSymbolSize);
+        t *= 0.75;
+        const i = new m({
+          geometry: new a({ x: r.center.x, y: r.center.y }),
+          attributes: {
+            count: r.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: t,
+                    colorLocked: !0,
+                    anchorPointUnits: "Relative",
+                    frame: { xmin: -16, ymin: -16, xmax: 16, ymax: 16 },
+                    markerGraphics: [
+                      // 数量文本框
+                      {
+                        type: "CIMMarkerGraphic",
+                        geometry: {
+                          rings: [
+                            [
+                              [-15, 40],
+                              [15, 40],
+                              [15, 20],
+                              [-15, 20],
+                              [-15, 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: t,
+                    rotateClockwise: !0,
+                    textureFilter: "Picture",
+                    url: this.clusterMarkUrl
+                  }
+                ]
+              }
+            }
+          }
+        });
+        this.clusterLayer.add(i);
+      } else
+        r.items.forEach((t) => {
+          const i = new m({
+            geometry: new a({ x: t.x, y: t.y }),
+            attributes: t.properties,
+            symbol: t.symbol
+          });
+          this.clusterLayer.add(i);
+        });
+    });
+  }
+  /**
+   * 获取邻居点
+   * @param locations
+   * @param index
+   * @param eps
+   * @returns
+   */
+  getNeighbors(e, s, o) {
+    const r = e[s];
+    return e.filter((t) => t.id === r.id || t.visited ? !1 : this.getDistance(r, t) <= o);
+  }
+  /**
+   * 两点间的像素距离
+   * @param point1
+   * @param point2
+   * @returns
+   */
+  getDistance(e, s) {
+    return Math.sqrt(
+      Math.pow(e.properties.screenX - s.properties.screenX, 2) + Math.pow(e.properties.screenY - s.properties.screenY, 2)
+    );
+  }
+  /**
+   * 从聚类结果中创建聚类对象
+   * @param locations
+   * @returns
+   */
+  createClusters(e) {
+    const s = {}, o = [];
+    for (let t = 0; t < e.length; t++) {
+      const i = e[t];
+      i.clusterId === void 0 || i.clusterId === -1 ? o.push(i) : (s[i.clusterId] || (s[i.clusterId] = []), s[i.clusterId].push(i));
+    }
+    const r = Object.keys(s).map((t, i) => {
+      const l = s[Number(t)], n = l.length, h = l.reduce((c, u) => c + u.x, 0), y = l.reduce((c, u) => c + u.y, 0), p = h / n, d = y / n;
+      return {
+        id: Number(t),
+        items: l,
+        count: n,
+        center: {
+          x: p,
+          y: d
+        }
+      };
+    });
+    return o.length > 0 && r.push({
+      id: -1,
+      items: o,
+      count: o.length,
+      center: null
+    }), r;
+  }
+  /**
+   * 按照像素距离聚类
+   * @param locations
+   * @param eps
+   * @param minPoints
+   * @returns
+   */
+  doPixelCluster(e, s, o) {
+    let r = 0;
+    e.forEach((t) => t.visited = !1);
+    for (let t = 0; t < e.length; t++) {
+      const i = e[t];
+      if (i.visited)
+        continue;
+      i.visited = !0;
+      const l = this.getNeighbors(e, t, s);
+      l.length < o ? i.clusterId = -1 : (l.forEach((n) => {
+        n.visited = !0, n.clusterId = r;
+      }), i.clusterId = r, r++);
+    }
+    return this.createClusters(e);
+  }
+}
+export {
+  M as default
+};

package/es/src/gis-map/utils/green-wave-band-controller/index.d.ts

@@ -24,6 +24,7 @@ export default class GreenWaveBandController {
     addGreenWaveBand(params: IEditSignalControlAreaParams): void;
     stopAddGreenWaveBand(): void;
     showGreenWaveBand(params: IShowGreenWaveBandParams): Promise<void>;
+    removeGreenWaveBand(bandId: string): void;
     /**
      * 显示所有路口，进入待选状态
      * @param nodeAttributes

package/es/src/gis-map/utils/green-wave-band-controller/index.mjs

@@ -1,15 +1,15 @@
 import * as y from "@arcgis/core/core/reactiveUtils.js";
-import { Polyline as b } from "@arcgis/core/geometry";
+import { Polyline as m } from "@arcgis/core/geometry";
 import n from "@arcgis/core/Graphic";
-import h from "@arcgis/core/layers/GraphicsLayer";
-import m from "axios";
+import c from "@arcgis/core/layers/GraphicsLayer";
+import b from "axios";
 class w {
   constructor(e) {
-    this.selectedNodeIds = [], this.nodeScale = 5e3, this.hasGpu = !1, this.hasGpu = localStorage.getItem("gpu") !== "Unknown", this.view = e, this.roadsectLayer = new h({
+    this.selectedNodeIds = [], this.nodeScale = 5e3, this.hasGpu = !1, this.hasGpu = localStorage.getItem("gpu") !== "Unknown", this.view = e, this.roadsectLayer = new c({
       id: "roadsectLayer"
-    }), this.view.map.add(this.roadsectLayer), this.allNodesLayer = new h({
+    }), this.view.map.add(this.roadsectLayer), this.allNodesLayer = new c({
       id: "allNodesLayer"
-    }), this.view.map.add(this.allNodesLayer), this.bandLayer = new h({
+    }), this.view.map.add(this.allNodesLayer), this.bandLayer = new c({
       id: "bandLayer"
     }), this.view.map.add(this.bandLayer);
   }
@@ -27,23 +27,19 @@ class w {
     (e = this.viewClickWatcher) == null || e.remove(), this.viewClickWatcher = void 0, this.allNodesLayer.removeAll(), this.selectedNodeIds = [], this.roadsectLayer.removeAll(), this.bandLayer.removeAll();
   }
   async showGreenWaveBand(e) {
-    this.bandLayer.graphics.forEach((t) => {
-      t.getAttribute("bandId") === e.bandId && this.bandLayer.remove(t);
-    }), this.roadsectLayer.graphics.forEach((t) => {
-      t.getAttribute("bandId") === e.bandId && this.roadsectLayer.remove(t);
-    }), this.scaleWatcher || (this.scaleWatcher = y.watch(
+    this.removeGreenWaveBand(e.bandId), this.scaleWatcher || (this.scaleWatcher = y.watch(
       () => this.view.scale,
-      (t, r) => {
-        t > this.nodeScale && r <= this.nodeScale ? this.bandLayer.graphics.forEach((a) => {
+      (s, o) => {
+        s > this.nodeScale && o <= this.nodeScale ? this.bandLayer.graphics.forEach((a) => {
           a.geometry.type === "point" && (a.symbol = this.getShowNodeSymbol("marker"));
-        }) : t <= this.nodeScale && r > this.nodeScale && this.bandLayer.graphics.forEach((a) => {
+        }) : s <= this.nodeScale && o > this.nodeScale && this.bandLayer.graphics.forEach((a) => {
           a.geometry.type === "point" && (a.symbol = this.getShowNodeSymbol("picture"));
         });
       }
     ));
-    const i = new b({
+    const i = new m({
       paths: [e.coordinates]
-    }), s = new n({
+    }), t = new n({
       geometry: i,
       symbol: this.getLineSymbol(!0, e),
       attributes: {
@@ -52,39 +48,47 @@ class w {
         id: e.bandId
       }
     });
-    this.roadsectLayer.add(s), await this.view.goTo(s), e.nodeList && e.nodeList.forEach((t) => {
-      const r = new n({
+    this.roadsectLayer.add(t), await this.view.goTo(t), e.nodeList && e.nodeList.forEach((s) => {
+      const o = new n({
         geometry: {
           type: "point",
-          x: t.longitude,
-          y: t.latitude
+          x: s.longitude,
+          y: s.latitude
         },
         symbol: this.getShowNodeSymbol("picture"),
         attributes: {
-          ...t,
+          ...s,
           bandId: e.bandId,
           type: "greenWaveBandNode"
         }
       });
-      this.bandLayer.add(r);
+      this.bandLayer.add(o);
     });
   }
+  removeGreenWaveBand(e) {
+    let i = this.bandLayer.graphics.filter(
+      (t) => t.getAttribute("bandId") === e
+    );
+    this.bandLayer.removeMany(i.toArray()), i = this.roadsectLayer.graphics.filter(
+      (t) => t.getAttribute("bandId") === e
+    ), this.roadsectLayer.removeMany(i.toArray());
+  }
   /**
    * 显示所有路口，进入待选状态
    * @param nodeAttributes
    */
   showAllNodes(e) {
     const i = [];
-    e.forEach((s) => {
+    e.forEach((t) => {
       i.push(
         new n({
           geometry: {
             type: "point",
-            x: s.longitude,
-            y: s.latitude
+            x: t.longitude,
+            y: t.latitude
           },
           symbol: this.getEditableNodeSymbol(!1),
-          attributes: { ...s, selected: !1 }
+          attributes: { ...t, selected: !1 }
         })
       );
     }), this.allNodesLayer.addMany(i);
@@ -96,50 +100,50 @@ class w {
    */
   async handleViewClick(e) {
     var a;
-    const s = (a = (await this.view.hitTest(e, {
+    const t = (a = (await this.view.hitTest(e, {
       include: [this.allNodesLayer]
     })).results) == null ? void 0 : a.filter(
       (d) => d.type === "graphic"
     );
-    if (s.length === 0)
+    if (t.length === 0)
       return;
-    const t = s[0].graphic, r = t.getAttribute("id");
-    if (this.selectedNodeIds.includes(r)) {
-      const d = this.selectedNodeIds.indexOf(r) + 1;
+    const s = t[0].graphic, o = s.getAttribute("id");
+    if (this.selectedNodeIds.includes(o)) {
+      const d = this.selectedNodeIds.indexOf(o) + 1;
       if (d === 1)
-        this.removeAllNodeCallback && this.removeAllNodeCallback(), this.selectedNodeIds = [], this.allNodesLayer.graphics.forEach((o) => {
-          o.setAttribute("selected", !1), o.symbol = this.getEditableNodeSymbol(!1), o.visible = !0;
+        this.removeAllNodeCallback && this.removeAllNodeCallback(), this.selectedNodeIds = [], this.allNodesLayer.graphics.forEach((r) => {
+          r.setAttribute("selected", !1), r.symbol = this.getEditableNodeSymbol(!1), r.visible = !0;
         }), this.roadsectLayer.removeAll();
       else {
-        for (let o = d; o < this.selectedNodeIds.length; o++) {
+        for (let r = d; r < this.selectedNodeIds.length; r++) {
           this.removeNodeCallback && this.removeNodeCallback({
-            id: this.selectedNodeIds[o]
+            id: this.selectedNodeIds[r]
           });
           for (let l = 0; l < this.roadsectLayer.graphics.length; l++) {
-            const c = this.roadsectLayer.graphics.getItemAt(l);
-            (c.getAttribute("id") === this.selectedNodeIds[o] || !c.getAttribute("selected")) && (this.roadsectLayer.remove(c), l--);
+            const h = this.roadsectLayer.graphics.getItemAt(l);
+            (h.getAttribute("id") === this.selectedNodeIds[r] || !h.getAttribute("selected")) && (this.roadsectLayer.remove(h), l--);
           }
         }
-        this.selectedNodeIds = this.selectedNodeIds.slice(0, d), this.allNodesLayer.graphics.forEach((o) => {
+        this.selectedNodeIds = this.selectedNodeIds.slice(0, d), this.allNodesLayer.graphics.forEach((r) => {
           const l = this.selectedNodeIds.includes(
-            o.getAttribute("id")
+            r.getAttribute("id")
           );
-          o.setAttribute("selected", l), o.symbol = this.getEditableNodeSymbol(l), o.visible = l;
-        }), await this.showDownstreamNodes(r);
+          r.setAttribute("selected", l), r.symbol = this.getEditableNodeSymbol(l), r.visible = l;
+        }), await this.showDownstreamNodes(o);
       }
     } else {
-      t.setAttribute("selected", !0), t.symbol = this.getEditableNodeSymbol(!0), this.selectedNodeIds.push(r), this.allNodesLayer.graphics.forEach((o) => {
-        o.visible = o.getAttribute("selected");
+      s.setAttribute("selected", !0), s.symbol = this.getEditableNodeSymbol(!0), this.selectedNodeIds.push(o), this.allNodesLayer.graphics.forEach((r) => {
+        r.visible = r.getAttribute("selected");
       });
       let d = [];
-      for (let o = 0; o < this.roadsectLayer.graphics.length; o++) {
-        const l = this.roadsectLayer.graphics.getItemAt(o);
-        l.getAttribute("id") === r ? (l.symbol = this.getLineSymbol(!0), l.setAttribute("selected", !0), d = l.geometry.paths[0]) : l.getAttribute("selected") || (this.roadsectLayer.remove(l), o--);
+      for (let r = 0; r < this.roadsectLayer.graphics.length; r++) {
+        const l = this.roadsectLayer.graphics.getItemAt(r);
+        l.getAttribute("id") === o ? (l.symbol = this.getLineSymbol(!0), l.setAttribute("selected", !0), d = l.geometry.paths[0]) : l.getAttribute("selected") || (this.roadsectLayer.remove(l), r--);
       }
       this.addNodeCallback && this.addNodeCallback({
-        ...t.attributes,
+        ...s.attributes,
         roadsect: d
-      }), await this.showDownstreamNodes(r);
+      }), await this.showDownstreamNodes(o);
     }
   }
   /**
@@ -148,7 +152,7 @@ class w {
    */
   async showDownstreamNodes(e) {
     this.view.container.style.cursor = "progress";
-    const i = await m.get(
+    const i = await b.get(
       `http://${this.openDriveServer}/api/computable/getDownstreamNodes`,
       { params: { nodeId: e } }
     );
@@ -156,16 +160,16 @@ class w {
       this.view.container.style.cursor = "default";
       return;
     }
-    i.data.result.forEach((t) => {
-      this.allNodesLayer.graphics.forEach((r) => {
-        if (r.getAttribute("nodeId") === t.id && r.getAttribute("selected") === !1 && (r.visible = !0, t.coordinates)) {
+    i.data.result.forEach((s) => {
+      this.allNodesLayer.graphics.forEach((o) => {
+        if (o.getAttribute("nodeId") === s.id && o.getAttribute("selected") === !1 && (o.visible = !0, s.coordinates)) {
           const a = new n({
             geometry: {
               type: "polyline",
-              paths: [t.coordinates]
+              paths: [s.coordinates]
             },
             symbol: this.getLineSymbol(!1),
-            attributes: { ...t, selected: !1 }
+            attributes: { ...s, selected: !1 }
           });
           this.roadsectLayer.add(a);
         }
@@ -174,8 +178,8 @@ class w {
   }
   getLineSymbol(e, i) {
     if (e) {
-      const s = (i == null ? void 0 : i.lineWidth) || 4, t = (i == null ? void 0 : i.lineColor) || [55, 125, 34, 255], r = (i == null ? void 0 : i.arrowColor) || [255, 255, 255, 255];
-      return Array.isArray(t) && t.length === 3 && t.push(255), Array.isArray(r) && r.length === 3 && r.push(255), {
+      const t = (i == null ? void 0 : i.lineWidth) || 4, s = (i == null ? void 0 : i.lineColor) || [55, 125, 34, 255], o = (i == null ? void 0 : i.arrowColor) || [255, 255, 255, 255];
+      return Array.isArray(s) && s.length === 3 && s.push(255), Array.isArray(o) && o.length === 3 && o.push(255), {
         type: "cim",
         data: {
           type: "CIMSymbolReference",
@@ -204,14 +208,14 @@ class w {
                     geometry: {
                       paths: [
                         [
-                          [s, -s],
-                          [3 * s, 0],
-                          [s, s]
+                          [t, -t],
+                          [3 * t, 0],
+                          [t, t]
                         ],
                         [
-                          [-s, s],
-                          [-3 * s, 0],
-                          [-s, -s]
+                          [-t, t],
+                          [-3 * t, 0],
+                          [-t, -t]
                         ]
                       ]
                     },
@@ -222,7 +226,7 @@ class w {
                           type: "CIMSolidStroke",
                           enable: !0,
                           width: 1.5,
-                          color: r
+                          color: o
                         }
                       ]
                     }
@@ -232,8 +236,8 @@ class w {
               {
                 type: "CIMSolidStroke",
                 enable: !0,
-                width: s,
-                color: t
+                width: t,
+                color: s
               }
             ]
           }

package/es/src/gis-map/utils/overlay.d.ts

@@ -2,7 +2,7 @@ import Graphic from '@arcgis/core/Graphic';
 import GraphicsLayer from '@arcgis/core/layers/GraphicsLayer';
 import MapView from '@arcgis/core/views/MapView';
 import SceneView from '@arcgis/core/views/SceneView';
-import { IMaskParam, IOverlay, IOverlayParam, IPointSymbol, IResult } from '../../types';
+import { IClusterPointParams, IMaskParam, IOverlayParam, IResult } from '../../types';
 interface IOverlayOptions {
     id: string;
 }
@@ -73,13 +73,8 @@ export default class Overlay {
      * @memberof Overlay
      */
     showLayer(): void;
-    /**
-     * 添加点覆盖物
-     * @param overlay
-     * @param symbol
-     * @param properties
-     */
-    addPoint(overlay: IOverlay, symbol: IPointSymbol, properties: any, visible?: boolean): IResult;
     private addOverlay;
+    private clusterLayer;
+    addClusterPoint(params: IClusterPointParams): void;
 }
 export {};