gisviewer-vue3-arcgis 1.0.250 → 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 m } from "@arcgis/core/geometry";
-import c from "@arcgis/core/Graphic";
-import n from "@arcgis/core/layers/GraphicsLayer";
+import n from "@arcgis/core/Graphic";
+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 n({
+    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 n({
+    }), this.view.map.add(this.roadsectLayer), this.allNodesLayer = new c({
       id: "allNodesLayer"
-    }), this.view.map.add(this.allNodesLayer), this.bandLayer = new n({
+    }), this.view.map.add(this.allNodesLayer), this.bandLayer = new c({
       id: "bandLayer"
     }), this.view.map.add(this.bandLayer);
   }
@@ -18,8 +18,8 @@ class w {
    * @param params
    */
   addGreenWaveBand(e) {
-    this.addNodeCallback = e.addCrossCallback, this.removeNodeCallback = e.removeCrossCallback, e.removeAllCrossCallback && (this.removeAllNodeCallback = e.removeAllCrossCallback), this.selectedNodeIds = [], this.openDriveServer = e.odrServer, this.showAllNodes(e.crossesInArea), this.viewClickWatcher || (this.viewClickWatcher = this.view.on("click", (o) => {
-      this.handleViewClick(o);
+    this.addNodeCallback = e.addCrossCallback, this.removeNodeCallback = e.removeCrossCallback, e.removeAllCrossCallback && (this.removeAllNodeCallback = e.removeAllCrossCallback), this.selectedNodeIds = [], this.openDriveServer = e.odrServer, this.showAllNodes(e.crossesInArea), this.viewClickWatcher || (this.viewClickWatcher = this.view.on("click", (i) => {
+      this.handleViewClick(i);
     }));
   }
   stopAddGreenWaveBand() {
@@ -27,59 +27,71 @@ 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.scaleWatcher || (this.scaleWatcher = y.watch(
+    this.removeGreenWaveBand(e.bandId), this.scaleWatcher || (this.scaleWatcher = y.watch(
       () => this.view.scale,
-      (s, i) => {
-        s > this.nodeScale && i <= this.nodeScale ? this.bandLayer.graphics.forEach((l) => {
-          l.geometry.type === "point" && (l.symbol = this.getShowNodeSymbol("marker"));
-        }) : s <= this.nodeScale && i > this.nodeScale && this.bandLayer.graphics.forEach((l) => {
-          l.geometry.type === "point" && (l.symbol = this.getShowNodeSymbol("picture"));
+      (s, o) => {
+        s > this.nodeScale && o <= this.nodeScale ? this.bandLayer.graphics.forEach((a) => {
+          a.geometry.type === "point" && (a.symbol = this.getShowNodeSymbol("marker"));
+        }) : s <= this.nodeScale && o > this.nodeScale && this.bandLayer.graphics.forEach((a) => {
+          a.geometry.type === "point" && (a.symbol = this.getShowNodeSymbol("picture"));
         });
       }
     ));
-    const o = new m({
+    const i = new m({
       paths: [e.coordinates]
-    }), a = new c({
-      geometry: o,
-      symbol: this.getLineSymbol(!0),
+    }), t = new n({
+      geometry: i,
+      symbol: this.getLineSymbol(!0, e),
       attributes: {
         bandId: e.bandId,
         type: "greenWaveBand",
         id: e.bandId
       }
     });
-    this.roadsectLayer.add(a), await this.view.goTo(a), e.nodeList.forEach((s) => {
-      const i = new c({
+    this.roadsectLayer.add(t), await this.view.goTo(t), e.nodeList && e.nodeList.forEach((s) => {
+      const o = new n({
         geometry: {
           type: "point",
           x: s.longitude,
           y: s.latitude
         },
         symbol: this.getShowNodeSymbol("picture"),
-        attributes: s
+        attributes: {
+          ...s,
+          bandId: e.bandId,
+          type: "greenWaveBandNode"
+        }
       });
-      this.bandLayer.add(i);
+      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 o = [];
-    e.forEach((a) => {
-      o.push(
-        new c({
+    const i = [];
+    e.forEach((t) => {
+      i.push(
+        new n({
           geometry: {
             type: "point",
-            x: a.longitude,
-            y: a.latitude
+            x: t.longitude,
+            y: t.latitude
           },
           symbol: this.getEditableNodeSymbol(!1),
-          attributes: { ...a, selected: !1 }
+          attributes: { ...t, selected: !1 }
         })
       );
-    }), this.allNodesLayer.addMany(o);
+    }), this.allNodesLayer.addMany(i);
   }
   /**
    * 点击待选/已选路口
@@ -87,51 +99,51 @@ class w {
    * @returns
    */
   async handleViewClick(e) {
-    var l;
-    const a = (l = (await this.view.hitTest(e, {
+    var a;
+    const t = (a = (await this.view.hitTest(e, {
       include: [this.allNodesLayer]
-    })).results) == null ? void 0 : l.filter(
+    })).results) == null ? void 0 : a.filter(
       (d) => d.type === "graphic"
     );
-    if (a.length === 0)
+    if (t.length === 0)
       return;
-    const s = a[0].graphic, i = s.getAttribute("id");
-    if (this.selectedNodeIds.includes(i)) {
-      const d = this.selectedNodeIds.indexOf(i) + 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((t) => {
-          t.setAttribute("selected", !1), t.symbol = this.getEditableNodeSymbol(!1), t.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 t = d; t < this.selectedNodeIds.length; t++) {
+        for (let r = d; r < this.selectedNodeIds.length; r++) {
           this.removeNodeCallback && this.removeNodeCallback({
-            id: this.selectedNodeIds[t]
+            id: this.selectedNodeIds[r]
           });
-          for (let r = 0; r < this.roadsectLayer.graphics.length; r++) {
-            const h = this.roadsectLayer.graphics.getItemAt(r);
-            (h.getAttribute("id") === this.selectedNodeIds[t] || !h.getAttribute("selected")) && (this.roadsectLayer.remove(h), r--);
+          for (let l = 0; l < this.roadsectLayer.graphics.length; 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((t) => {
-          const r = this.selectedNodeIds.includes(
-            t.getAttribute("id")
+        this.selectedNodeIds = this.selectedNodeIds.slice(0, d), this.allNodesLayer.graphics.forEach((r) => {
+          const l = this.selectedNodeIds.includes(
+            r.getAttribute("id")
           );
-          t.setAttribute("selected", r), t.symbol = this.getEditableNodeSymbol(r), t.visible = r;
-        }), await this.showDownstreamNodes(i);
+          r.setAttribute("selected", l), r.symbol = this.getEditableNodeSymbol(l), r.visible = l;
+        }), await this.showDownstreamNodes(o);
       }
     } else {
-      s.setAttribute("selected", !0), s.symbol = this.getEditableNodeSymbol(!0), this.selectedNodeIds.push(i), this.allNodesLayer.graphics.forEach((t) => {
-        t.visible = t.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 t = 0; t < this.roadsectLayer.graphics.length; t++) {
-        const r = this.roadsectLayer.graphics.getItemAt(t);
-        r.getAttribute("id") === i ? (r.symbol = this.getLineSymbol(!0), r.setAttribute("selected", !0), d = r.geometry.paths[0]) : r.getAttribute("selected") || (this.roadsectLayer.remove(r), t--);
+      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({
         ...s.attributes,
         roadsect: d
-      }), await this.showDownstreamNodes(i);
+      }), await this.showDownstreamNodes(o);
     }
   }
   /**
@@ -140,18 +152,18 @@ class w {
    */
   async showDownstreamNodes(e) {
     this.view.container.style.cursor = "progress";
-    const o = await b.get(
+    const i = await b.get(
       `http://${this.openDriveServer}/api/computable/getDownstreamNodes`,
       { params: { nodeId: e } }
     );
-    if (o.status !== 200 || o.data.status !== 0) {
+    if (i.status !== 200 || i.data.status !== 0) {
       this.view.container.style.cursor = "default";
       return;
     }
-    o.data.result.forEach((s) => {
-      this.allNodesLayer.graphics.forEach((i) => {
-        if (i.getAttribute("nodeId") === s.id && i.getAttribute("selected") === !1 && (i.visible = !0, s.coordinates)) {
-          const l = new c({
+    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: [s.coordinates]
@@ -159,80 +171,84 @@ class w {
             symbol: this.getLineSymbol(!1),
             attributes: { ...s, selected: !1 }
           });
-          this.roadsectLayer.add(l);
+          this.roadsectLayer.add(a);
         }
       });
     }), this.view.container.style.cursor = "default";
   }
-  getLineSymbol(e) {
-    return e ? {
-      type: "cim",
-      data: {
-        type: "CIMSymbolReference",
-        symbol: {
-          type: "CIMLineSymbol",
-          symbolLayers: [
-            {
-              type: "CIMVectorMarker",
-              enable: !0,
-              size: 4,
-              markerPlacement: {
-                type: "CIMMarkerPlacementAlongLineSameSize",
-                endings: "WithMarkers",
-                placementTemplate: [40],
-                angleToLine: !0
-              },
-              frame: {
-                xmin: -5,
-                ymin: -5,
-                xmax: 5,
-                ymax: 5
-              },
-              markerGraphics: [
-                {
-                  type: "CIMMarkerGraphic",
-                  geometry: {
-                    paths: [
-                      [
-                        [4, -4],
-                        [12, 0],
-                        [4, 4]
-                      ],
-                      [
-                        [-4, 4],
-                        [-12, 0],
-                        [-4, -4]
+  getLineSymbol(e, i) {
+    if (e) {
+      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",
+          symbol: {
+            type: "CIMLineSymbol",
+            symbolLayers: [
+              {
+                type: "CIMVectorMarker",
+                enable: !0,
+                size: 4,
+                markerPlacement: {
+                  type: "CIMMarkerPlacementAlongLineSameSize",
+                  endings: "WithMarkers",
+                  placementTemplate: [40],
+                  angleToLine: !0
+                },
+                frame: {
+                  xmin: -5,
+                  ymin: -5,
+                  xmax: 5,
+                  ymax: 5
+                },
+                markerGraphics: [
+                  {
+                    type: "CIMMarkerGraphic",
+                    geometry: {
+                      paths: [
+                        [
+                          [t, -t],
+                          [3 * t, 0],
+                          [t, t]
+                        ],
+                        [
+                          [-t, t],
+                          [-3 * t, 0],
+                          [-t, -t]
+                        ]
                       ]
-                    ]
-                  },
-                  symbol: {
-                    type: "CIMLineSymbol",
-                    symbolLayers: [
-                      {
-                        type: "CIMSolidStroke",
-                        enable: !0,
-                        width: 1.5,
-                        color: [255, 255, 255, 255]
-                      }
-                    ]
+                    },
+                    symbol: {
+                      type: "CIMLineSymbol",
+                      symbolLayers: [
+                        {
+                          type: "CIMSolidStroke",
+                          enable: !0,
+                          width: 1.5,
+                          color: o
+                        }
+                      ]
+                    }
                   }
-                }
-              ]
-            },
-            {
-              type: "CIMSolidStroke",
-              enable: !0,
-              width: 4,
-              color: [55, 125, 34, 255]
-            }
-          ]
+                ]
+              },
+              {
+                type: "CIMSolidStroke",
+                enable: !0,
+                width: t,
+                color: s
+              }
+            ]
+          }
         }
-      }
-    } : {
-      type: "simple-line",
-      color: "gray",
-      width: 2
-    };
+      };
+    } else
+      return {
+        type: "simple-line",
+        color: "gray",
+        width: 2
+      };
   }
   getShowNodeSymbol(e) {
     return e === "marker" ? {