gisviewer-vue3-arcgis 1.0.284 → 1.0.285

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

@@ -0,0 +1,593 @@
+import { Point as h } from "@arcgis/core/geometry";
+import u from "@arcgis/core/Graphic";
+import p from "@arcgis/core/layers/GraphicsLayer";
+class x {
+  constructor(e) {
+    this.crossGraphicSymbol = {
+      type: "cim",
+      data: {
+        type: "CIMSymbolReference",
+        primitiveOverrides: [
+          {
+            type: "CIMPrimitiveOverride",
+            primitiveName: "textGraphic",
+            propertyName: "TextString",
+            valueExpressionInfo: {
+              type: "CIMExpressionInfo",
+              title: "Custom",
+              expression: 'Replace($feature.name, "与", "/") + "  " + $feature.signalId',
+              returnType: "Default"
+            }
+          }
+        ],
+        symbol: {
+          type: "CIMPointSymbol",
+          symbolLayers: [
+            {
+              type: "CIMVectorMarker",
+              size: 32,
+              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: 18,
+                    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: "/GisViewerAssets/Images/cross/gis_xhj_blue.png"
+            }
+          ]
+        }
+      }
+    }, this.locations = [], this.clusteredLocations = [], this.filteredLocations = [], this.currentShowMode = "scatter", this.symbolScale = 5e3, this.oldScale = 0, this.clusterRadius = 120, this.minClusterPoints = 2, this.maxClusterSymbolSize = 50, this.minClusterSymbolSize = 25, this.view = e, this.crossLayer = new p(), this.view.map.add(this.crossLayer), this.oldScale = e.scale;
+  }
+  async addCrosses(e) {
+    e.forEach((t) => {
+      t.signals.forEach((i) => {
+        i.longitude && i.latitude && !isNaN(i.longitude) && !isNaN(i.latitude) && this.locations.push({
+          id: i.id,
+          x: i.longitude,
+          y: i.latitude,
+          visited: !1,
+          filtered: !1,
+          clusterId: void 0,
+          properties: {
+            ...i,
+            districtId: t.id,
+            districtName: t.name,
+            subDistrictId: "",
+            subDistrictName: ""
+          }
+        });
+      }), t.subDistricts.forEach((i) => {
+        i.signals.forEach((s) => {
+          s.longitude && s.latitude && !isNaN(s.longitude) && !isNaN(s.latitude) && this.locations.push({
+            id: s.id,
+            x: s.longitude,
+            y: s.latitude,
+            visited: !1,
+            filtered: !1,
+            clusterId: void 0,
+            properties: {
+              ...s,
+              districtId: t.id,
+              districtName: t.name,
+              subDistrictId: i.id,
+              subDistrictName: i.name
+            }
+          });
+        });
+      });
+    }), this.zoomWatchHandle = this.view.watch("stationary", () => {
+      if (this.view.stationary !== !1) {
+        if (this.currentShowMode === "scatter")
+          (this.oldScale < this.symbolScale && this.view.scale >= this.symbolScale || this.oldScale >= this.symbolScale && this.view.scale < this.symbolScale) && this.updateScatterSymbol(), this.oldScale = this.view.scale;
+        else if (this.currentShowMode === "cluster") {
+          this.locationToScreen(), console.time("cluster");
+          const t = this.doPixelCluster(this.clusterRadius);
+          console.timeEnd("cluster"), this.showClusterResult(t);
+        }
+      }
+    });
+  }
+  /**
+   * 清除所有路口
+   */
+  clearCrosses() {
+    var e;
+    this.crossLayer.removeAll(), this.locations = [], this.clusteredLocations = [], (e = this.zoomWatchHandle) == null || e.remove();
+  }
+  /**
+   * 更新散点符号
+   */
+  updateScatterSymbol() {
+    this.crossLayer.graphics.forEach((e) => {
+      e.symbol = this.getCrossSymbol(e.attributes);
+    });
+  }
+  /**
+   * 将地理位置转换为屏幕坐标
+   */
+  locationToScreen() {
+    this.clusteredLocations = [], this.locations.forEach((e) => {
+      const t = this.view.toScreen(
+        new h({ x: e.x, y: e.y })
+      );
+      e.filtered === !1 && 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));
+    });
+  }
+  /**
+   * 显示聚合点
+   */
+  showCluster() {
+    this.crossLayer.removeAll(), this.currentShowMode = "cluster", this.locationToScreen();
+    const e = this.doPixelCluster(this.clusterRadius);
+    this.showClusterResult(e);
+  }
+  /**
+   * 显示散点
+   */
+  showScatter() {
+    this.crossLayer.removeAll(), this.currentShowMode = "scatter";
+    const e = [];
+    this.locations.forEach((t) => {
+      if (!t.filtered) {
+        const i = new u({
+          geometry: {
+            type: "point",
+            longitude: t.x,
+            latitude: t.y
+          },
+          symbol: this.getCrossSymbol(t.properties),
+          attributes: t.properties,
+          popupTemplate: {
+            title: "{name}信号机",
+            content: [
+              {
+                type: "fields",
+                fieldInfos: [
+                  {
+                    fieldName: "signalId",
+                    label: "信号机编号"
+                  },
+                  {
+                    fieldName: "nodeId",
+                    label: "路口编号"
+                  },
+                  {
+                    fieldName: "districtName",
+                    label: "区控名称"
+                  },
+                  {
+                    fieldName: "subDistrictName",
+                    label: "子区名称"
+                  }
+                ]
+              }
+            ]
+          }
+        });
+        e.push(i);
+      }
+    }), this.crossLayer.addMany(e);
+  }
+  /**
+   * 隐藏路口
+   */
+  hideCrosses() {
+    this.crossLayer.removeAll();
+  }
+  filter(e) {
+    this.locations.forEach((t) => {
+      if (e.type === "district")
+        t.filtered = t.properties.districtId !== e.id;
+      else if (e.type === "subDistrict")
+        t.filtered = t.properties.subDistrictId !== e.id;
+      else if (e.type === "signal" && (t.filtered = t.id !== e.id, t.filtered))
+        return t.properties;
+    });
+  }
+  resetFilter() {
+    this.locations.forEach((e) => {
+      e.filtered = !1;
+    }), this.currentShowMode === "scatter" ? this.showScatter() : this.currentShowMode === "cluster" && this.showCluster();
+  }
+  /**
+   * 根据当前比例尺更新路口符号
+   * @param attributes
+   * @returns
+   */
+  getCrossSymbol(e) {
+    if (this.view.scale > this.symbolScale)
+      return e.isKey ? {
+        // 关键路口用星号图标
+        type: "picture-marker",
+        url: "/GisViewerAssets/Images/icon_star.png",
+        width: "20px",
+        height: "20px"
+      } : {
+        // 普通路口用圆点
+        type: "simple-marker",
+        style: "circle",
+        color: [5, 116, 255, 0.8],
+        size: 8,
+        outline: {
+          color: "white",
+          width: 0
+        }
+      };
+    {
+      const t = e.isKey ? "/GisViewerAssets/Images/cross/gis_gjxklk_orange.png" : "/GisViewerAssets/Images/cross/gis_xhj_blue.png";
+      return {
+        type: "cim",
+        data: {
+          type: "CIMSymbolReference",
+          primitiveOverrides: [
+            {
+              // 将textGraphic的TextString替换为graphic.attributes.name
+              type: "CIMPrimitiveOverride",
+              primitiveName: "textGraphic",
+              propertyName: "TextString",
+              valueExpressionInfo: {
+                type: "CIMExpressionInfo",
+                title: "Custom",
+                expression: 'Replace($feature.name, "与", "/") + "  " + $feature.signalId',
+                returnType: "Default"
+              }
+            }
+          ],
+          symbol: {
+            type: "CIMPointSymbol",
+            symbolLayers: [
+              // 路口名称
+              {
+                type: "CIMVectorMarker",
+                size: 32,
+                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
+              }
+            ]
+          }
+        }
+      };
+    }
+  }
+  /**
+   * 获取邻居点
+   * @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)], a = o.length, l = o.reduce((n, m) => n + m.x, 0), c = o.reduce((n, m) => n + m.y, 0), y = l / a, d = c / a;
+      return {
+        id: Number(s),
+        items: o,
+        count: a,
+        center: {
+          x: y,
+          y: d
+        }
+      };
+    });
+    return t.length > 0 && i.push({
+      id: -1,
+      items: t,
+      count: t.length,
+      center: null
+    }), i;
+  }
+  /**
+   * 按照像素距离聚类
+   * @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();
+  }
+  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, c = new u({
+          geometry: new h({ 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(c);
+      } else
+        s.items.forEach((r) => {
+          const o = new u({
+            geometry: new h({ x: r.x, y: r.y }),
+            attributes: {
+              ...r,
+              ...r.properties,
+              type: "clusterPoint",
+              id: r.id
+            },
+            symbol: this.crossGraphicSymbol,
+            popupTemplate: {
+              title: "{name}信号机",
+              content: [
+                {
+                  type: "fields",
+                  fieldInfos: [
+                    {
+                      fieldName: "signalId",
+                      label: "信号机编号"
+                    },
+                    {
+                      fieldName: "nodeId",
+                      label: "路口编号"
+                    },
+                    {
+                      fieldName: "districtName",
+                      label: "区控名称"
+                    },
+                    {
+                      fieldName: "subDistrictName",
+                      label: "子区名称"
+                    }
+                  ]
+                }
+              ]
+            }
+          });
+          this.crossLayer.add(o);
+        });
+    });
+  }
+}
+export {
+  x as default
+};

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

@@ -0,0 +1,84 @@
+import d from "pako";
+import l from "../common-utils.mjs";
+class c {
+  constructor(o, s) {
+    if (this.parentName = "", this.signals = [], this.subDistricts = [], this.areaColor = this.getDarkNonGrayColor(), this.signalCount = 0, this.subDistrictCount = 0, this.roadConnections = [], this.id = o.name, this.name = o.areaDesc, this.parentId = o.parentId, s === "alarm" && (this.areaColor = [255, 0, 0]), o.mapConnectList)
+      try {
+        const t = o.mapConnectList, i = new Uint8Array(
+          window.atob(t).split("").map((r) => r.charCodeAt(0))
+        ), a = d.inflate(i, { to: "string" }), n = JSON.parse(a);
+        this.roadConnections.push(
+          ...n.map((r) => ({
+            id: r.roadsectId,
+            coordinates: JSON.parse(r.geomData).coordinates,
+            districtId: this.parentId,
+            subDistrictId: this.id
+          }))
+        );
+      } catch (t) {
+        console.error("解压子区路段连接信息失败:", t);
+      }
+    for (const t of o.children)
+      if (t.children) {
+        const i = new c(t, s);
+        if (i.id = t.id, i.name = `SS ${t.name}`, i.parentId = this.id, i.parentName = this.name, i.areaColor = this.getDarkNonGrayColor(t.id), this.subDistricts.push(i), this.subDistrictCount++, this.signalCount += i.signalCount, t.mapConnectList)
+          try {
+            const a = t.mapConnectList, n = new Uint8Array(
+              window.atob(a).split("").map((e) => e.charCodeAt(0))
+            ), r = d.inflate(n, { to: "string" }), h = JSON.parse(r);
+            i.roadConnections.push(
+              ...h.map((e) => ({
+                id: e.roadsectId,
+                coordinates: JSON.parse(e.geomData).coordinates,
+                districtId: i.parentId,
+                subDistrictId: i.id
+              }))
+            );
+          } catch (a) {
+            console.error("解压子区路段连接信息失败:", a);
+          }
+      } else if (l.isCoordinateValid(t)) {
+        const i = {
+          id: t.id,
+          name: t.name,
+          parentId: t.parentId,
+          latitude: Number(t.latitude),
+          longitude: Number(t.longitude),
+          signalId: t.signalId,
+          nodeId: t.nodeId,
+          isKey: t.isKey === 1
+        };
+        this.signals.push(i), this.signalCount++;
+      }
+  }
+  /**
+   * 获取区控/子区下的所有信号机
+   * @returns
+   */
+  getAllSignalCoordinates() {
+    const o = [];
+    for (const s of this.signals)
+      o.push([s.longitude, s.latitude]);
+    for (const s of this.subDistricts)
+      o.push(...s.getAllSignalCoordinates());
+    return o;
+  }
+  getDarkNonGrayColor(o) {
+    let s, t, i;
+    if (o) {
+      const a = this.cyrb53(o);
+      s = ((a & 16711680) >> 16) % 200, t = ((a & 65280) >> 8) % 200, i = (a & 255) % 200;
+    } else
+      s = Math.floor(Math.random() * 256), t = Math.floor(Math.random() * 256), i = Math.floor(Math.random() * 256);
+    return [s, t, i];
+  }
+  cyrb53(o, s = 0) {
+    let t = 3735928559 ^ s, i = 1103547991 ^ s;
+    for (let a = 0, n; a < o.length; a++)
+      n = o.charCodeAt(a), t = Math.imul(t ^ n, 2654435761), i = Math.imul(i ^ n, 1597334677);
+    return t = Math.imul(t ^ t >>> 16, 2246822507), t ^= Math.imul(i ^ i >>> 13, 3266489909), i = Math.imul(i ^ i >>> 16, 2246822507), i ^= Math.imul(t ^ t >>> 13, 3266489909), 4294967296 * (2097151 & i) + (t >>> 0);
+  }
+}
+export {
+  c as default
+};